import * as React from "react";
import * as TabsPrimitive from "@radix-ui/react-tabs";
import { cn } from "@/lib/utils";

/**
 * Tabs primitive — SP21 Universal Drill-Down (Task 3.1).
 *
 * Thin wrapper over `@radix-ui/react-tabs`. Mirrors the same re-export
 * pattern used by `dialog.tsx`: the individual primitives are forwardRef'd
 * styled components, and the `Tabs` namespace object lets callers use
 * the spec's `<Tabs.Root>`, `<Tabs.List>`, `<Tabs.Trigger>`,
 * `<Tabs.Content>` dot-notation directly:
 *
 *   import { Tabs } from "@/components/ui/tabs";
 *   <Tabs.Root defaultValue="overview">
 *     <Tabs.List>
 *       <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
 *       ...
 *     </Tabs.List>
 *     <Tabs.Content value="overview">...</Tabs.Content>
 *   </Tabs.Root>
 */

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      "flex gap-2 border-b border-border/30 mb-4",
      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(
      "px-3 py-2 text-[12.5px] text-muted-foreground",
      "data-[state=active]:text-foreground",
      "data-[state=active]:border-b-2 data-[state=active]:border-accent",
      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      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(
      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      className
    )}
    {...props}
  />
));
TabsContent.displayName = TabsPrimitive.Content.displayName;

/**
 * Namespace export matching the spec's `import * as Tabs from ...`
 * dot-notation. `Root` is the unstyled Radix primitive; the rest are the
 * styled wrappers above.
 */
export const Tabs = {
  Root: TabsPrimitive.Root,
  List: TabsList,
  Trigger: TabsTrigger,
  Content: TabsContent,
};

export { TabsList, TabsTrigger, TabsContent };