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

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

/**
 * Radix tabs wearing PIG's palette and PIG's touch floor.
 *
 * Two things were wrong with the stock copy, and both were wrong at every call
 * site rather than at any one of them.
 *
 * First the palette: shadcn's `bg-muted` is a surface token. In PIG `muted` is
 * the muted TEXT colour, so an unstyled `TabsList` painted a mid-grey slab
 * with unreadable labels on it. Every call site had independently written the
 * same three overrides — `border border-border bg-surface`,
 * `data-[state=active]:bg-surface-2`, `text-muted` — which is the signal that
 * they belong here.
 *
 * Second the height: a 36px list holding 28px triggers cannot contain a 44px
 * touch target, and the rail's tabs measured 36px on a phone. The floor is now
 * in the primitive, the same way `buttonVariants` carries it.
 */
const Tabs = TabsPrimitive.Root;

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      // 52px, not 44px: the list pads its triggers by 4px on each side, so a
      // 44px list would squeeze a 44px trigger down to 36px.
      'inline-flex min-h-[52px] items-center justify-center rounded-lg border border-border bg-surface p-1 text-muted',
      className,
    )}
    {...props}
  />
));
TabsList.displayName = TabsPrimitive.List.displayName;

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      // `min-w-11` beside `min-h-11`: the floor is a square, and the repair
      // that added the height left the width alone — so the Accounts facet
      // control's "All" tab measured 40x44 at every viewport. A short label is
      // exactly the case a minimum exists for.
      'inline-flex min-h-11 min-w-11 items-center justify-center whitespace-nowrap rounded-md px-3 py-2',
      'text-sm font-medium text-muted transition-colors duration-1 ease-enter',
      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg',
      'disabled:pointer-events-none disabled:opacity-50',
      'data-[state=active]:bg-surface-2 data-[state=active]:text-fg',
      className,
    )}
    {...props}
  />
));
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    className={cn(
      'mt-3 min-w-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg',
      className,
    )}
    {...props}
  />
));
TabsContent.displayName = TabsPrimitive.Content.displayName;

export { Tabs, TabsList, TabsTrigger, TabsContent };
