Glass tabs

"use client"

import * as React from "react"
import { Activity, LayoutGrid, Settings } from "lucide-react"
import { motion, useReducedMotion } from "motion/react"

import { cn } from "@/lib/utils"
import { glassDepth } from "@/components/ui/glass"

/* Glass tabs family: 5 frosted-glass tab strips. The difference is only on the
   surface of the tab strip: frost, tint, smoke, crystal and depth. Each export is a
   complete tabs component - internal active-tab state, role="tablist"/role="tab"
   and a panel with role="tabpanel". The ids are produced with React.useId(), so
   several 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.

   The glass surface derives from the glassDepth scale in @ai2/glass (AGENTS.md 4.5)
   - the blur is never hand-written here. The step says how much it hides, and the
   variant itself gives the character (tint, edge). Note: glassDepth carries a
   [box-shadow], which is why a variant never adds shadow-lg/shadow-inner -
   tailwind-merge keeps the last of the same group and the signature would silently
   drop; extra depth is given with a ring. */

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 ICON_TABS: TabItem[] = [
  { value: "overview", label: <><LayoutGrid /> Overview</>, panel: "A summary of the workspace: recent activity, open items and the team." },
  { value: "activity", label: <><Activity /> Activity</>, panel: "Every event from the last seven days, newest first." },
  { value: "settings", label: <><Settings /> 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 }
}

/* Sliding indicator transition: instant under reduced motion. */
function useSlide() {
  const reduce = useReducedMotion()
  return reduce
    ? { duration: 0 }
    : { type: "spring" as const, stiffness: 420, damping: 34 }
}

type GlassConfig = {
  fallback: TabItem[]
  bar: string
  indicator: string
  active: string
  inactive: string
}

/* Shared shell: a glass bar plus a sliding indicator plus panel. */
function GlassTabsShell({ props, config }: { props: TabsProps; config: GlassConfig }) {
  const { className, size = "md" } = props
  const { list, active, select, refs, onKeyDown } = useTabsState(props, config.fallback)
  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], "rounded-full", on ? config.active : config.inactive)}
              >
                {on ? (
                  <motion.span
                    layoutId={`${uid}-glass-indicator`}
                    transition={transition}
                    className={cn("absolute inset-0 -z-10 rounded-full", 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>
  )
}

/* Frost: a neutral frosted bar where the active tab carries an opaque card surface. Depth md (8px): the family default, the same step as glass.overlay. The neutral ground comes from the library (exactly the same as the old hand-written background/60); the character is the plain border alone. */
export function FrostTabs(props: TabsProps) {
  return (
    <GlassTabsShell
      props={props}
      config={{
        fallback: DEFAULT_TABS,
        bar: cn(glassDepth.md, "rounded-full border border-border p-1"),
        indicator: "border border-border bg-card shadow-sm",
        active: "text-foreground",
        inactive: "text-muted-foreground hover:text-foreground",
      }}
    />
  )
}

/* Tint: an info-toned glass bar, with an info tint on the active tab.
   Depth md (8px): the same step as Frost - deliberately. Tint is Frost in color;
   the only difference should be the hue. An info film takes over the background,
   which is why the supports- variant is overridden too (otherwise the library's
   bg-background/60 would hide the tint inside @supports). */
export function TintTabs(props: TabsProps) {
  return (
    <GlassTabsShell
      props={props}
      config={{
        fallback: DEFAULT_TABS,
        bar: cn(
          glassDepth.md,
          "rounded-full border border-[color-mix(in_oklab,var(--color-info)_22%,transparent)] p-1",
          "bg-[color-mix(in_oklab,var(--color-info)_10%,transparent)] supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-info)_10%,transparent)]"
        ),
        indicator: "border border-[color-mix(in_oklab,var(--color-info)_28%,transparent)] bg-[color-mix(in_oklab,var(--color-info)_18%,transparent)]",
        active: "text-primary",
        inactive: "text-muted-foreground hover:text-foreground",
      }}
    />
  )
}

/* Smoke: dark smoky glass where what is behind turns into texture. Depth lg (16px): the scale step closest to the old 24px's intent of "make what is behind unreadable". The character is foreground smoke. */
export function SmokeTabs(props: TabsProps) {
  return (
    <GlassTabsShell
      props={props}
      config={{
        fallback: DEFAULT_TABS,
        bar: cn(
          glassDepth.lg,
          "rounded-full border border-[color-mix(in_oklab,var(--color-foreground)_14%,transparent)] p-1",
          "bg-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)] supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)]"
        ),
        indicator: "bg-[color-mix(in_oklab,var(--color-foreground)_16%,transparent)]",
        active: "text-foreground",
        inactive: "text-muted-foreground hover:text-foreground",
      }}
    />
  )
}

/* Crystal: a very transparent bar with a bright line along the top edge.
   Depth sm (4px): crystal glass does NOT diffuse, it is clear - its character is
   transparency and a bright edge, not blur. The lowest step, deliberately. Because a
   gradient is a background-IMAGE it covers the library's background-COLOR; separate
   merge groups, so both survive. */
export function CrystalTabs(props: TabsProps) {
  return (
    <GlassTabsShell
      props={props}
      config={{
        fallback: ICON_TABS,
        bar: cn(
          glassDepth.sm,
          "rounded-full border border-[color-mix(in_oklab,var(--color-foreground)_8%,transparent)] p-1",
          "bg-gradient-to-b from-[color-mix(in_oklab,var(--color-background)_70%,transparent)] to-[color-mix(in_oklab,var(--color-background)_35%,transparent)]"
        ),
        indicator: "border border-[color-mix(in_oklab,var(--color-background)_80%,transparent)] bg-[color-mix(in_oklab,var(--color-background)_75%,transparent)] shadow-sm",
        active: "text-foreground",
        inactive: "text-muted-foreground hover:text-foreground",
      }}
    />
  )
}

/* Depth: layered glass, with the active tab standing out on a raised shadow.
   Depth xl (24px): the deepest in the family - the bar should recede and the active
   tab should rise in front of it. The old shadow-inner was REMOVED: it is in the
   same tailwind-merge group as glassDepth's [box-shadow] signature, and adding it
   would silently drop the signature. ring-* is NO CURE either: in Tailwind v4 a ring
   compiles into box-shadow and an arbitrary [box-shadow] overrides it entirely
   (measured: --tw-ring-shadow is computed but box-shadow never looks at it). The
   sense of recession is carried by the muted background + the xl blur; the active
   tab's opaque raised indicator already provides the contrast. */
export function DepthTabs(props: TabsProps) {
  return (
    <GlassTabsShell
      props={props}
      config={{
        fallback: DEFAULT_TABS,
        bar: cn(
          glassDepth.xl,
          "rounded-full border border-border p-1",
          "bg-[color-mix(in_oklab,var(--color-muted)_70%,transparent)] supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-muted)_70%,transparent)]"
        ),
        indicator: "border border-border bg-popover shadow-lg",
        active: "text-foreground",
        inactive: "text-muted-foreground hover:text-foreground",
      }}
    />
  )
}