import * as React from 'react';
import * as TabsPrimitive from '@radix-ui/react-tabs';

import { cn } from '@/lib/utils';

const Tabs = TabsPrimitive.Root;

/**
 * Two looks, one primitive (spec §9).
 *
 * `segment` — a bordered surface-2 rail with a surface-3 pill for the active
 * trigger. The default, so every nested caller (Reasoning | Model call) keeps
 * compiling unchanged. 36px triggers at lg, 44px below.
 *
 * `underline` — the site's primary navigation: a transparent full-width rail
 * with a hairline underneath and a 2px `tab-underline` bar on the active
 * trigger, flush with the rule. Triggers are 44px at every width; equal
 * columns below sm so four tabs fit 390px without a scroller, natural width
 * from sm. The two must never look alike — primary and secondary navigation
 * are told apart by shape.
 *
 * The variant reaches the triggers by context, not by prop: Radix gives a
 * trigger no handle on its list, and a `variant` prop on every trigger would
 * be an API change that also lets one trigger disagree with its rail.
 */
type TabsVariant = 'segment' | 'underline';

const TabsVariantContext = React.createContext<TabsVariant>('segment');

const listStyles: Record<TabsVariant, string> = {
  segment:
    'inline-flex items-center justify-start gap-1 rounded-md border border-border bg-surface-2 p-1 text-muted',
  underline: 'flex w-full items-stretch justify-start gap-0 border-b border-border text-muted',
};

const triggerStyles: Record<TabsVariant, string> = {
  segment:
    'min-h-11 rounded-md px-3 py-1.5 lg:min-h-9 hover:text-fg data-[state=active]:bg-surface-3 data-[state=active]:text-fg',
  // `after:-bottom-px` drops the bar onto the rail's 1px rule so the two read
  // as one line; the bar is always present (transparent) so activation only
  // changes colour and never shifts layout.
  underline:
    'relative min-h-11 min-w-0 flex-1 px-2 text-[0.8125rem] sm:flex-none sm:px-3 sm:text-sm hover:text-fg data-[state=active]:text-fg after:pointer-events-none after:absolute after:inset-x-0 after:-bottom-px after:h-0.5 after:bg-transparent after:transition-colors after:duration-2 after:ease-enter after:content-[""] data-[state=active]:after:bg-tab-underline',
};

export interface TabsListProps extends React.ComponentProps<typeof TabsPrimitive.List> {
  variant?: TabsVariant;
}

function TabsList({ className, variant = 'segment', ...props }: TabsListProps) {
  return (
    <TabsVariantContext.Provider value={variant}>
      <TabsPrimitive.List
        data-variant={variant}
        className={cn(listStyles[variant], className)}
        {...props}
      />
    </TabsVariantContext.Provider>
  );
}

function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
  const variant = React.useContext(TabsVariantContext);
  return (
    <TabsPrimitive.Trigger
      className={cn(
        'inline-flex items-center justify-center whitespace-nowrap font-sans text-sm font-medium transition-colors duration-1 ease-enter focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg disabled:pointer-events-none disabled:opacity-50',
        triggerStyles[variant],
        className,
      )}
      {...props}
    />
  );
}

function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
  return (
    <TabsPrimitive.Content
      className={cn(
        'mt-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg',
        className,
      )}
      {...props}
    />
  );
}

export { Tabs, TabsList, TabsTrigger, TabsContent };
