import * as TabsPrimitive from "@radix-ui/react-tabs"
import { forwardRef } from "react"

import { cn } from "@/lib/utils"

type TabsVisualVariant = "default" | "line"

function Tabs({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
  return (
    <TabsPrimitive.Root
      data-slot="tabs"
      className={cn("flex flex-col gap-2", className)}
      {...props}
    />
  )
}

function TabsList({
  variant = "default",
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.List> & {
  variant?: TabsVisualVariant
}) {
  return (
    <TabsPrimitive.List
      data-slot="tabs-list"
      data-variant={variant}
      className={cn(
        "min-h-0",
        variant === "default" &&
          "inline-flex w-full flex-wrap items-stretch justify-start gap-1.5 bg-transparent p-1 text-foreground",
        variant === "line" &&
          "inline-flex h-auto w-full items-center justify-start gap-1 border-b border-border bg-transparent p-0 text-foreground rounded-none",
        className
      )}
      {...props}
    />
  )
}

const TabsTrigger = forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
    variant?: TabsVisualVariant
  }
>(function TabsTrigger({ variant = "default", className, ...props }, ref) {
  return (
    <TabsPrimitive.Trigger
      ref={ref}
      data-slot="tabs-trigger"
      data-variant={variant}
      className={cn(
        "inline-flex items-center justify-center gap-1.5 whitespace-nowrap focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50",
        variant === "default" &&
          "h-auto min-h-0 min-w-0 flex-1 basis-0 items-center justify-start rounded-lg border-0 px-3 py-2.5 text-left text-sm font-medium text-muted-foreground shadow-none transition-[color,box-shadow,background-color] hover:bg-muted/80 hover:text-foreground data-[state=active]:border-transparent data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm sm:w-full sm:flex-none sm:basis-auto",
        variant === "line" &&
          "relative h-10 flex-none rounded-none border-b-2 border-transparent px-3 text-sm font-medium transition-colors duration-200 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-primary data-[state=active]:shadow-none",
        className
      )}
      {...props}
    />
  )
})
TabsTrigger.displayName = "TabsTrigger"

function TabsContent({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
  return (
    <TabsPrimitive.Content
      data-slot="tabs-content"
      className={cn("flex-1 outline-none", className)}
      {...props}
    />
  )
}

export { Tabs, TabsList, TabsTrigger, TabsContent }