'use client';

import * as React from 'react';
import { cva, type VariantProps } from '@/lib/cva';
import * as TabsPrimitive from 'radix-ui/tabs';

import { cn } from '@/lib/utils';
import { colorPalettes, disabledState, focusRing, iconSizing } from '@/lib/cva-presets';

/*
 * CBAR splits Tabs into two component sets — the strip and the item — and gives
 * each the same `variant` × `size` axes. They are kept in step here through
 * `data-variant` / `data-size` on the list, which the trigger reads with the
 * `group-data-*` selectors below; that way a caller sets the shape once.
 *
 * CBAR's third axis, `state`, is deliberately *not* a prop. Its values are
 * default / hover / active / disabled, which are CSS states — expressing them
 * as variants would let a caller render a tab that looks selected without being
 * selected, and screen readers would disagree with the pixels.
 */
const tabsListVariants = cva(
  cn(
    'group/tabs-list inline-flex w-fit items-center justify-center',
    'group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col'
  ),
  {
    variants: {
      variant: {
        /** Bottom rule across the strip; the selected tab recolours its own segment. */
        line: '',
        /** Selected tab sits on a tinted, rounded fill. */
        subtle: '',
        /** Selected tab reads as a folder tab joined to the panel below it. */
        outline: '',
        /** Nothing but the label — colour alone marks the selection. */
        plain: '',
        /** Segmented control on a filled track. Pre-CBAR; not one of its four. */
        default: 'gap-1 rounded-lg bg-muted p-[3px]',
      },
      colorPalette: colorPalettes,
      size: {
        md: 'group-data-[orientation=horizontal]/tabs:h-9 text-sm',
        lg: 'group-data-[orientation=horizontal]/tabs:h-11 text-base',
      },
    },
    defaultVariants: {
      variant: 'line',
      colorPalette: 'secondary',
      size: 'md',
    },
  }
);

export type TabsProps = React.ComponentProps<typeof TabsPrimitive.Root>;
export interface TabsListProps
  extends React.ComponentProps<typeof TabsPrimitive.List>,
    VariantProps<typeof tabsListVariants> {}

/**
 * Switches between sibling panels without leaving the page.
 *
 * Tabs are for alternate views of the same subject. If the panels are separate
 * destinations, use links and routes so they can be shared and bookmarked.
 */
function Tabs({ className, orientation = 'horizontal', ...props }: TabsProps) {
  return (
    <TabsPrimitive.Root
      data-slot="tabs"
      data-orientation={orientation}
      orientation={orientation}
      className={cn('group/tabs flex gap-2 data-[orientation=horizontal]:flex-col', className)}
      {...props}
    />
  );
}

function TabsList({
  className,
  variant = 'line',
  colorPalette,
  size = 'md',
  ...props
}: TabsListProps) {
  return (
    <TabsPrimitive.List
      data-slot="tabs-list"
      data-variant={variant}
      data-size={size}
      className={cn(tabsListVariants({ variant, colorPalette, size }), className)}
      {...props}
    />
  );
}

function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
  return (
    <TabsPrimitive.Trigger
      data-slot="tabs-trigger"
      className={cn(
        'relative inline-flex h-full flex-1 items-center justify-center gap-2 border-transparent px-3 font-medium whitespace-nowrap',
        /* Listed rather than `all`, and the omissions are the point: the
           `outline` treatment adds a border and a top radius to the selected
           tab, so `all` animated the border *thickness* and the corner —
           geometry visibly settling after the colour had arrived. */
        'text-muted-foreground transition-[color,background-color,border-color,box-shadow,opacity] duration-(--ui-duration-fast) ease-(--ui-ease-standard)',
        'group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start',
        'data-[state=active]:text-(--ctl-fg)',

        /* Hover is one step lighter than the selected fill. CBAR draws the two
           identically, which makes hovering an unselected tab look like a
           selection; `--ctl-soft` is the rung below `--ctl-subtle`. */
        'not-data-[state=active]:hover:bg-(--ctl-soft) not-data-[state=active]:hover:text-(--ctl-fg)',

        /* line — a rule under the whole strip, recoloured under the selection. */
        'group-data-[variant=line]/tabs-list:border-b group-data-[variant=line]/tabs-list:border-b-border',
        'group-data-[variant=line]/tabs-list:data-[state=active]:border-b-(--ctl-border)',

        /* subtle — tinted, rounded fill on the selection only. */
        'group-data-[variant=subtle]/tabs-list:rounded-xs',
        'group-data-[variant=subtle]/tabs-list:data-[state=active]:bg-(--ctl-subtle)',

        /* outline — the selected tab loses its bottom edge and joins the panel. */
        'group-data-[variant=outline]/tabs-list:border-b group-data-[variant=outline]/tabs-list:border-b-border',
        'group-data-[variant=outline]/tabs-list:data-[state=active]:rounded-t-xs group-data-[variant=outline]/tabs-list:data-[state=active]:border group-data-[variant=outline]/tabs-list:data-[state=active]:border-b-transparent',
        'group-data-[variant=outline]/tabs-list:data-[state=active]:border-(--ctl-subtle) group-data-[variant=outline]/tabs-list:data-[state=active]:bg-background',

        /* default — the pre-CBAR segmented control, kept for existing callers. */
        'group-data-[variant=default]/tabs-list:rounded-md group-data-[variant=default]/tabs-list:border',
        'group-data-[variant=default]/tabs-list:data-[state=active]:bg-background group-data-[variant=default]/tabs-list:data-[state=active]:text-foreground group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm',
        'dark:group-data-[variant=default]/tabs-list:data-[state=active]:border-input dark:group-data-[variant=default]/tabs-list:data-[state=active]:bg-input/30',

        focusRing,
        disabledState,
        iconSizing,
        className
      )}
      {...props}
    />
  );
}

/*
 * The panel is a real tab stop, so it gets a real focus ring.
 *
 * Radix renders it with `role="tabpanel"` and `tabIndex: 0`, which means Tab
 * from the strip lands here — this is the one element in the kit that took
 * `outline-none` without putting an indicator back. `focusRing` opens with
 * `outline-none` itself, so nothing about the resting state changes; the ring
 * shows on `:focus-visible` only, never on a click.
 */
function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
  return (
    <TabsPrimitive.Content
      data-slot="tabs-content"
      className={cn('flex-1', focusRing, className)}
      {...props}
    />
  );
}

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