Motion tabs

"use client"

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

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

/* Motion tabs family: 5 tab strips differing ONLY in how the active indicator moves
   between tabs. The indicator is carried with a framer-motion layoutId; because the
   layoutId derives from React.useId() there is no teleporting between two examples
   on the same page. Under reduced motion the indicator switches instantly and the
   transform and scale animations do not run. Each export is a complete tabs
   component - internal active-tab state, role="tablist"/role="tab" and a
   role="tabpanel" panel. Color comes ONLY from tokens, via alpha color-mix. */

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 }
}

type MotionConfig = {
  bar: string
  tab: string
  indicator: string
  active: string
  inactive: string
  /** Gostergenin sekmeler arasinda tasinma gecisi. */
  transition: Transition
  /** Reduced motion kapali iken gostergenin giris animasyonu. */
  enter?: { initial: Record<string, number>; animate: Record<string, number> }
}

/* Shared shell: bar plus a layoutId indicator plus panel. */
function MotionTabsShell({ props, config }: { props: TabsProps; config: MotionConfig }) {
  const { className, size = "md" } = props
  const { list, active, select, refs, onKeyDown } = useTabsState(props, DEFAULT_TABS)
  const uid = React.useId()
  const reduce = useReducedMotion()
  const transition: Transition = reduce ? { duration: 0 } : config.transition
  const enter = reduce ? undefined : config.enter
  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}-motion-indicator`}
                    transition={transition}
                    initial={enter?.initial}
                    animate={enter?.animate}
                    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>
  )
}

/* Slide: the indicator slides sideways with a constant-speed tween. */
export function SlideTabs(props: TabsProps) {
  return (
    <MotionTabsShell
      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",
        transition: { type: "tween" as const, duration: 0.28, ease: "easeInOut" },
      }}
    />
  )
}

/* Fade: gosterge kayarken opaklik uzerinden erir, yumusak gecis. */
export function FadeTabs(props: TabsProps) {
  return (
    <MotionTabsShell
      props={props}
      config={{
        bar: "border-b border-border",
        tab: "-mb-px rounded-t-md",
        indicator: "inset-x-0 -bottom-px h-0.5 rounded-full bg-primary",
        active: "text-foreground",
        inactive: "text-muted-foreground hover:text-foreground",
        transition: { type: "tween" as const, duration: 0.35, ease: "easeOut" },
        enter: { initial: { opacity: 0 }, animate: { opacity: 1 } },
      }}
    />
  )
}

/* Pop: the indicator opens with a scale on the new tab, fast and crisp. */
export function PopTabs(props: TabsProps) {
  return (
    <MotionTabsShell
      props={props}
      config={{
        bar: "rounded-full bg-muted p-1",
        tab: "rounded-full",
        indicator: "inset-0 rounded-full bg-primary",
        active: "text-primary-foreground",
        inactive: "text-muted-foreground hover:text-foreground",
        transition: { type: "spring" as const, stiffness: 700, damping: 32 },
        enter: { initial: { scale: 0.7, opacity: 0 }, animate: { scale: 1, opacity: 1 } },
      }}
    />
  )
}

/* Morph: the indicator morphs to the tab along with its width and corner radius. */
export function MorphTabs(props: TabsProps) {
  return (
    <MotionTabsShell
      props={props}
      config={{
        bar: "rounded-xl border border-border bg-card p-1",
        tab: "rounded-lg",
        indicator: "inset-0 rounded-lg border border-[color-mix(in_oklab,var(--color-primary)_30%,transparent)] bg-[color-mix(in_oklab,var(--color-primary)_14%,transparent)]",
        active: "text-primary",
        inactive: "text-muted-foreground hover:text-foreground",
        transition: { type: "spring" as const, stiffness: 260, damping: 26 },
      }}
    />
  )
}

/* Spring: dusuk sonumlu yay, gosterge hedefte hafifce salinir. */
export function SpringTabs(props: TabsProps) {
  return (
    <MotionTabsShell
      props={props}
      config={{
        bar: "rounded-lg border border-border bg-muted p-1",
        tab: "rounded-md",
        indicator: "inset-0 rounded-md border border-border bg-background shadow-sm",
        active: "text-foreground",
        inactive: "text-muted-foreground hover:text-foreground",
        transition: { type: "spring" as const, stiffness: 520, damping: 18, mass: 0.9 },
      }}
    />
  )
}