Accent tabs

"use client"

import * as React from "react"
import { motion, useReducedMotion } from "motion/react"

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

/* Accent tabs family: 5 tab strips where the only difference is the highlight
   language of the active tab. A thick bar, a glowing halo, a filled background, a
   ring frame and a left-edge strip.
   Each export is a complete tabs component - internal active-tab state,
   role="tablist"/role="tab" and a role="tabpanel" panel. The ids are produced with
   React.useId(), so two examples on the same page do not collide. Color comes ONLY
   from tokens, via alpha color-mix. The indicator slides with a framer-motion
   layoutId; it switches instantly under reduced motion. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

type TabItem = { value: string; label: React.ReactNode; panel: React.ReactNode }

type TabsProps = {
  className?: string
  size?: StyledSize
  tabs?: TabItem[]
  value?: string
  defaultValue?: string
  onValueChange?: (v: string) => void
}

const DEFAULT_TABS: TabItem[] = [
  { value: "overview", label: "Overview", panel: "A summary of the workspace: recent activity, open items and the team." },
  { value: "activity", label: "Activity", panel: "Every event from the last seven days, newest first." },
  { value: "settings", label: "Settings", panel: "Workspace name, members and notification preferences." },
]

const sizeTab: Record<StyledSize, string> = {
  sm: "h-8 px-3 text-xs",
  md: "h-9 px-4 text-sm",
  lg: "h-10 px-5 text-sm",
  xl: "h-11 px-6 text-base",
}

const tabBase =
  "relative z-10 inline-flex select-none items-center justify-center gap-2 whitespace-nowrap font-medium outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&>svg]:shrink-0 [&_i]:text-base [&_i]:leading-none [&>i]:shrink-0"

const panelBase =
  "rounded-lg border border-border bg-card p-4 text-sm text-muted-foreground outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"

function useTabsState(props: TabsProps, fallback: TabItem[]) {
  const { tabs, value, defaultValue, onValueChange } = props
  const list = React.useMemo(() => (tabs && tabs.length ? tabs : fallback), [tabs, fallback])
  const [internal, setInternal] = React.useState<string>(() => defaultValue ?? list[0]?.value ?? "")
  const active = value ?? internal
  const refs = React.useRef<(HTMLButtonElement | null)[]>([])
  const select = React.useCallback(
    (v: string) => {
      if (value === undefined) setInternal(v)
      onValueChange?.(v)
    },
    [value, onValueChange]
  )
  const onKeyDown = (e: React.KeyboardEvent) => {
    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return
    e.preventDefault()
    const idx = list.findIndex((t) => t.value === active)
    const dir = e.key === "ArrowRight" ? 1 : -1
    const ni = (idx + dir + list.length) % list.length
    select(list[ni].value)
    refs.current[ni]?.focus()
  }
  return { list, active, select, refs, onKeyDown }
}

function useSlide() {
  const reduce = useReducedMotion()
  return reduce
    ? { duration: 0 }
    : { type: "spring" as const, stiffness: 420, damping: 34 }
}

type AccentConfig = {
  bar: string
  tab: string
  indicator: string
  active: string
  inactive: string
}

/* Shared shell: bar plus highlight indicator plus panel. */
function AccentTabsShell({ props, config }: { props: TabsProps; config: AccentConfig }) {
  const { className, size = "md" } = props
  const { list, active, select, refs, onKeyDown } = useTabsState(props, DEFAULT_TABS)
  const uid = React.useId()
  const transition = useSlide()
  const current = list.find((t) => t.value === active) ?? list[0]

  return (
    <div data-slot="styled-tabs" className={cn("flex flex-col gap-3", className)}>
      {/* 200% text (WCAG 1.4.4): the strip is `w-fit`, so growing text widened
          the page. Scrolling was moved inside the strip itself; the wrapper is
          REQUIRED because `overflow-x-auto` clips vertically too and the focus
          ring would be cut off. The `-m-1 p-1` pair opens room for the ring and
          preserves the outer measurements. The same fix is documented in detail
          in registry/ai2/ui/tabs.tsx. */}
      <div
        data-slot="styled-tabs-viewport"
        className="-m-1 flex max-w-full overflow-x-auto p-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
      >
        <div
          role="tablist"
          aria-orientation="horizontal"
          onKeyDown={onKeyDown}
          className={cn("inline-flex w-fit items-center gap-1", config.bar)}
        >
          {list.map((tab, i) => {
            const on = tab.value === active
            return (
              <button
                key={tab.value}
                ref={(el) => {
                  refs.current[i] = el
                }}
                type="button"
                role="tab"
                id={`${uid}-tab-${tab.value}`}
                aria-selected={on}
                aria-controls={`${uid}-panel-${tab.value}`}
                tabIndex={on ? 0 : -1}
                onClick={() => select(tab.value)}
                className={cn(tabBase, sizeTab[size], config.tab, on ? config.active : config.inactive)}
              >
                {on ? (
                  <motion.span
                    layoutId={`${uid}-accent-indicator`}
                    transition={transition}
                    className={cn("absolute -z-10", config.indicator)}
                  />
                ) : null}
                {tab.label}
              </button>
            )
          })}
        </div>
      </div>
      {current ? (
        <div
          role="tabpanel"
          id={`${uid}-panel-${current.value}`}
          aria-labelledby={`${uid}-tab-${current.value}`}
          tabIndex={0}
          className={panelBase}
        >
          {current.panel}
        </div>
      ) : null}
    </div>
  )
}

/* Bar: aktif sekmenin altinda kalin primary cubuk kayar. */
export function BarTabs(props: TabsProps) {
  return (
    <AccentTabsShell
      props={props}
      config={{
        bar: "border-b-2 border-border",
        tab: "-mb-0.5 rounded-t-md",
        indicator: "inset-x-1 -bottom-0.5 h-0.5 rounded-full bg-primary",
        active: "text-primary",
        inactive: "text-muted-foreground hover:text-foreground",
      }}
    />
  )
}

/* Glow: aktif sekme primary hale ve tintli zeminle isilar. */
export function GlowTabs(props: TabsProps) {
  return (
    <AccentTabsShell
      props={props}
      config={{
        bar: "rounded-lg border border-border bg-card p-1",
        tab: "rounded-md",
        indicator:
          "inset-0 rounded-md bg-[color-mix(in_oklab,var(--color-primary)_14%,transparent)] shadow-[0_0_0_1px_color-mix(in_oklab,var(--color-primary)_35%,transparent),0_0_16px_-2px_color-mix(in_oklab,var(--color-primary)_45%,transparent)]",
        active: "text-primary",
        inactive: "text-muted-foreground hover:text-foreground",
      }}
    />
  )
}

/* Fill: aktif sekme tam primary dolgu alir. */
export function FillTabs(props: TabsProps) {
  return (
    <AccentTabsShell
      props={props}
      config={{
        bar: "rounded-lg bg-muted p-1",
        tab: "rounded-md",
        indicator: "inset-0 rounded-md bg-primary",
        active: "text-primary-foreground",
        inactive: "text-muted-foreground hover:text-foreground",
      }}
    />
  )
}

/* Ring: the active tab is unfilled and carries a primary ring frame. */
export function RingTabs(props: TabsProps) {
  return (
    <AccentTabsShell
      props={props}
      config={{
        bar: "inline-flex items-center gap-1.5",
        tab: "rounded-full",
        indicator:
          "inset-0 rounded-full border border-[color-mix(in_oklab,var(--color-primary)_55%,transparent)] shadow-[0_0_0_3px_color-mix(in_oklab,var(--color-primary)_14%,transparent)]",
        active: "text-primary",
        inactive: "text-muted-foreground hover:text-foreground",
      }}
    />
  )
}

/* Edge: aktif sekmede sol kenarda dikey primary serit. */
export function EdgeTabs(props: TabsProps) {
  return (
    <AccentTabsShell
      props={props}
      config={{
        bar: "rounded-lg bg-muted p-1",
        tab: "rounded-md pl-4",
        indicator: "inset-y-0 left-0 right-0 rounded-md border-l-2 border-primary bg-[color-mix(in_oklab,var(--color-primary)_10%,transparent)]",
        active: "text-foreground",
        inactive: "text-muted-foreground hover:text-foreground",
      }}
    />
  )
}