Tabs

"use client"

import * as React from "react"
import { Tabs as TabsPrimitive } from "@/components/ui/primitives"
import { cva, type VariantProps } from "class-variance-authority"

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

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

const tabsListVariants = cva("inline-flex w-fit items-center text-muted-foreground", {
  variants: {
    variant: {
      solid: "justify-center gap-1 rounded-lg bg-surface-3 p-1",
      line: "gap-4 border-b border-border",
      pill: "justify-center gap-1",
    },
    size: {
      sm: "h-8",
      md: "h-9",
    },
  },
  defaultVariants: { variant: "solid", size: "md" },
})

type TabsSize = "sm" | "md"
type TabsVariant = "solid" | "line" | "pill"

const TabsContext = React.createContext<{ variant: TabsVariant; size: TabsSize }>({
  variant: "solid",
  size: "md",
})

interface TabsListProps
  extends React.ComponentProps<typeof TabsPrimitive.List>,
    VariantProps<typeof tabsListVariants> {}

/* WCAG 1.4.4 (200% text): the tab strip is `w-fit`, so as text grew it widened
   the PAGE - at 375px the body went to 429px and the whole page scrolled
   horizontally. The fix is to move scrolling INSIDE the strip itself.

   Why a wrapper div: putting `overflow-x-auto` on the list itself is not
   enough. Per CSS, once one axis is `auto` the other cannot stay `visible`
   and also becomes `auto`; the VERTICAL axis would be clipped too, and in the
   `line` variant the trigger and the list share the same height (h-9), so the
   focus ring (3px) would be cut off. The `-m-1 p-1` pair on the wrapper opens
   4px on all four sides (the smallest step on the scale, enough for a 3px
   ring) and leaves the outer measurements THE SAME - the negative margin
   cancels the padding.

   The scrollbar is hidden: if `overflow-x-auto` painted a visible bar the
   strip height would change and the fixed h-8/h-9 layout would break. Keyboard
   access is unaffected - Radix moves with arrow keys and scrolls the focused
   tab into view; mouse and trackpad scrolling still work. */
function TabsList({ className, variant, size, ...props }: TabsListProps) {
  const v = variant ?? "solid"
  const s = size ?? "md"
  return (
    <TabsContext.Provider value={{ variant: v, size: s }}>
      <div
        data-slot="tabs-list-viewport"
        className="-m-1 max-w-full overflow-x-auto p-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
      >
        <TabsPrimitive.List
          data-slot="tabs-list"
          data-variant={v}
          data-size={s}
          className={cn(tabsListVariants({ variant, size, className }))}
          {...props}
        />
      </div>
    </TabsContext.Provider>
  )
}

const tabsTriggerVariants = cva(
  "inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-medium outline-none transition-colors duration-(--motion-fast) focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:shrink-0 [&_i]:text-base [&_i]:leading-none",
  {
    variants: {
      variant: {
        solid:
          "rounded-md px-3 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
        line: "-mb-px border-b-2 border-transparent px-1 data-[state=active]:border-brand data-[state=active]:text-foreground",
        pill: "rounded-full px-3.5 data-[state=active]:bg-brand data-[state=active]:text-brand-foreground",
      },
      size: {
        sm: "text-xs",
        md: "text-sm",
      },
    },
    compoundVariants: [
      { variant: "solid", size: "sm", class: "h-6" },
      { variant: "solid", size: "md", class: "h-7" },
      { variant: "line", size: "sm", class: "h-8" },
      { variant: "line", size: "md", class: "h-9" },
      { variant: "pill", size: "sm", class: "h-6" },
      { variant: "pill", size: "md", class: "h-7" },
    ],
    defaultVariants: { variant: "solid", size: "md" },
  }
)

function TabsTrigger({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
  const { variant, size } = React.useContext(TabsContext)
  return (
    <TabsPrimitive.Trigger
      data-slot="tabs-trigger"
      className={cn(tabsTriggerVariants({ variant, size, className }))}
      {...props}
    />
  )
}

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, type TabsListProps }