"use client";

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { Tabs as TabsPrimitive } from "radix-ui";
import { motion, useReducedMotion } from "framer-motion";
import { cn } from "../lib/utils";

/** Same raised selection and spring as Coline and Upstream navigation. */
export const TABS_LAYOUT_SPRING = { type: "spring" as const, stiffness: 300, damping: 26, mass: 1 };
const TabsContext = React.createContext<{ value: string | undefined; id: string } | null>(null);
const ListVariantContext = React.createContext<"default" | "line">("default");

function Tabs({ className, orientation = "horizontal", value, defaultValue, onValueChange, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
  const [localValue, setLocalValue] = React.useState(defaultValue);
  const id = React.useId();
  const activeValue = value ?? localValue;
  const context = React.useMemo(() => ({ value: activeValue, id }), [activeValue, id]);
  return (
    <TabsContext.Provider value={context}>
      <TabsPrimitive.Root
        {...props}
        {...(activeValue === undefined ? {} : { value: activeValue })}
        orientation={orientation}
        onValueChange={(next) => { if (value === undefined) setLocalValue(next); onValueChange?.(next); }}
        data-slot="tabs"
        className={cn("coline-tabs", className)}
      />
    </TabsContext.Provider>
  );
}

const tabsListVariants = cva("coline-tabs-list", {
  variants: { variant: { default: "coline-tabs-raised", line: "coline-tabs-line" } },
  defaultVariants: { variant: "default" },
});

function TabsList({ className, variant = "default", ...props }: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>) {
  return (
    <ListVariantContext.Provider value={variant ?? "default"}>
      <TabsPrimitive.List {...props} data-slot="tabs-list" data-variant={variant} className={cn(tabsListVariants({ variant }), className)} />
    </ListVariantContext.Provider>
  );
}

// Keep the existing explicit indicator API working without adding a second pill.
function hasIndicator(children: React.ReactNode): boolean {
  return React.Children.toArray(children).some((child) => React.isValidElement<{ children?: React.ReactNode }>(child)
    && (child.type === TabsIndicator || hasIndicator(child.props.children)));
}

function TabsTrigger({ className, children, value, asChild = false, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
  const tabs = React.useContext(TabsContext);
  const variant = React.useContext(ListVariantContext);
  const indicator = tabs?.value === value && variant === "default" && !hasIndicator(children) ? <TabsIndicator /> : null;
  const content = asChild && React.isValidElement<{ children?: React.ReactNode }>(children)
    ? React.cloneElement(children, undefined, indicator, children.props.children)
    : <>{indicator}{children}</>;
  return (
    <TabsPrimitive.Trigger {...props} value={value} asChild={asChild} data-slot="tabs-trigger" className={cn("coline-tabs-trigger", className)}>
      {content}
    </TabsPrimitive.Trigger>
  );
}

/** Optional customization; the raised indicator is included automatically. */
function TabsIndicator({ className, layoutId = "selection" }: { className?: string; layoutId?: string }) {
  const tabs = React.useContext(TabsContext);
  const fallbackId = React.useId();
  const reducedMotion = useReducedMotion();
  return (
    <motion.div
      aria-hidden="true"
      data-slot="tabs-indicator"
      layout
      layoutId={`${tabs?.id ?? fallbackId}-${layoutId}`}
      initial={false}
      className={cn("coline-tabs-indicator", className)}
      transition={reducedMotion ? { duration: 0 } : TABS_LAYOUT_SPRING}
    />
  );
}

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

export { Tabs, TabsList, TabsTrigger, TabsIndicator, TabsContent, tabsListVariants };