import type { Meta, StoryObj } from '@storybook/react-vite';

import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs';

const meta = {
  title: 'Components/Tabs',
  component: Tabs,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          '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.\n\nThe shape is set once on `TabsList` (`variant`, `size`, `colorPalette`) and the triggers read it back, so nothing has to be repeated per tab. CBAR also draws a `state` axis — hover, active, disabled — which is *not* a prop here: those are CSS states, and making them props would let a tab look selected without being selected.',
      },
    },
  },
  tags: ['autodocs'],
} satisfies Meta<typeof Tabs>;

export default meta;
type Story = StoryObj<typeof meta>;

const panels = {
  overview: 'Traffic, conversion and revenue for the last 30 days.',
  activity: 'Everything that happened in this project recently.',
  settings: 'Project name, visibility and danger zone.',
};

export const Default: Story = {
  render: () => (
    <Tabs defaultValue="overview" className="w-96">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      {Object.entries(panels).map(([value, text]) => (
        <TabsContent key={value} value={value} className="pt-3 text-sm text-muted-foreground">
          {text}
        </TabsContent>
      ))}
    </Tabs>
  ),
};

/** CBAR's four strips. `default` is the kit's older segmented control. */
export const Variants: Story = {
  render: () => (
    <div className="grid gap-8">
      {(['line', 'subtle', 'outline', 'plain', 'default'] as const).map((variant) => (
        <Tabs key={variant} defaultValue="overview" className="w-96">
          <TabsList variant={variant}>
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="activity">Activity</TabsTrigger>
            <TabsTrigger value="settings">Settings</TabsTrigger>
          </TabsList>
          <TabsContent value="overview" className="pt-3 text-sm text-muted-foreground">
            {variant}
          </TabsContent>
        </Tabs>
      ))}
    </div>
  ),
};

/** `md` is 36px tall, `lg` 44px — CBAR's two rungs. */
export const Sizes: Story = {
  render: () => (
    <div className="grid gap-8">
      {(['md', 'lg'] as const).map((size) => (
        <Tabs key={size} defaultValue="overview" className="w-96">
          <TabsList variant="subtle" size={size}>
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="activity">Activity</TabsTrigger>
          </TabsList>
          <TabsContent value="overview" className="pt-3 text-sm text-muted-foreground">
            size {size}
          </TabsContent>
        </Tabs>
      ))}
    </div>
  ),
};

/** The strip takes any palette; hover sits one step below the selected fill. */
export const Palettes: Story = {
  render: () => (
    <div className="grid gap-8">
      {(['secondary', 'primary', 'green', 'red'] as const).map((palette) => (
        <Tabs key={palette} defaultValue="overview" className="w-96">
          <TabsList variant="subtle" colorPalette={palette}>
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="activity">Activity</TabsTrigger>
            <TabsTrigger value="settings">Settings</TabsTrigger>
          </TabsList>
          <TabsContent value="overview" className="pt-3 text-sm text-muted-foreground">
            {palette}
          </TabsContent>
        </Tabs>
      ))}
    </div>
  ),
};

export const Vertical: Story = {
  render: () => (
    <Tabs defaultValue="overview" orientation="vertical" className="w-96">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      {Object.entries(panels).map(([value, text]) => (
        <TabsContent key={value} value={value} className="pl-4 text-sm text-muted-foreground">
          {text}
        </TabsContent>
      ))}
    </Tabs>
  ),
};

export const WithDisabledTab: Story = {
  render: () => (
    <Tabs defaultValue="overview" className="w-96">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="billing" disabled>
          Billing
        </TabsTrigger>
      </TabsList>
      <TabsContent value="overview" className="pt-3 text-sm text-muted-foreground">
        Billing is only available on paid plans.
      </TabsContent>
    </Tabs>
  ),
};