import type { Meta, StoryObj } from "@storybook/react"
import { Tabs } from "./Tabs"

/**
 * Displays a set of tabs for organizing content into multiple views.
 *
 * ## Props
 * - `Root`: Container for the tabs component
 * - `List`: Container for tab triggers
 * - `Trigger`: Individual tab trigger button
 * - `Content`: Content panel for each tab
 *
 * ### List Props
 * - `size`: "1" | "2" (default: "2")
 * - `color`: "gray" | "gold" | "bronze" | "brown" | "yellow" | "amber" | "orange" | "tomato" | "red" | "ruby" | "crimson" | "pink" | "plum" | "purple" | "violet" | "iris" | "indigo" | "blue" | "cyan" | "teal" | "jade" | "green" | "grass" | "lime" | "mint" | "sky"
 * - `highContrast`: boolean
 * - `wrap`: "nowrap" | "wrap" | "wrap-reverse"
 * - `justify`: "start" | "center" | "end"
 */
const meta = {
  title: "base/action/Tabs",
  component: Tabs.Root,
  tags: ["autodocs"],
  argTypes: {
    defaultValue: {
      control: "text",
      description: "The default selected tab value",
    },
    value: {
      control: "text",
      description: "The controlled selected tab value",
    },
    onValueChange: {
      action: "valueChanged",
      description: "Called when the selected tab changes",
    },
  },
  parameters: {
    layout: "centered",
  },
} satisfies Meta<typeof Tabs.Root>

export default meta

type Story = StoryObj<typeof meta>

/**
 * Basic tabs with default styling.
 */
export const Default: Story = {
  render: () => (
    <Tabs.Root defaultValue="account">
      <Tabs.List>
        <Tabs.Trigger value="account">Account</Tabs.Trigger>
        <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
        <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="account">
        <div className="p-4">
          <h3 className="text-lg font-semibold mb-2">Account</h3>
          <p>Manage your account settings and preferences.</p>
        </div>
      </Tabs.Content>
      <Tabs.Content value="documents">
        <div className="p-4">
          <h3 className="text-lg font-semibold mb-2">Documents</h3>
          <p>Access and manage your documents.</p>
        </div>
      </Tabs.Content>
      <Tabs.Content value="settings">
        <div className="p-4">
          <h3 className="text-lg font-semibold mb-2">Settings</h3>
          <p>Configure your application settings.</p>
        </div>
      </Tabs.Content>
    </Tabs.Root>
  ),
}

/**
 * Tabs with different colors.
 */
export const Colors: Story = {
  render: () => (
    <div className="space-y-6">
      <div>
        <h4 className="text-sm font-medium mb-2">Blue</h4>
        <Tabs.Root defaultValue="account">
          <Tabs.List color="blue">
            <Tabs.Trigger value="account">Account</Tabs.Trigger>
            <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
            <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
          </Tabs.List>
          <Tabs.Content value="account">
            <div className="p-4">Account content</div>
          </Tabs.Content>
          <Tabs.Content value="documents">
            <div className="p-4">Documents content</div>
          </Tabs.Content>
          <Tabs.Content value="settings">
            <div className="p-4">Settings content</div>
          </Tabs.Content>
        </Tabs.Root>
      </div>

      <div>
        <h4 className="text-sm font-medium mb-2">Green</h4>
        <Tabs.Root defaultValue="account">
          <Tabs.List color="green">
            <Tabs.Trigger value="account">Account</Tabs.Trigger>
            <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
            <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
          </Tabs.List>
          <Tabs.Content value="account">
            <div className="p-4">Account content</div>
          </Tabs.Content>
          <Tabs.Content value="documents">
            <div className="p-4">Documents content</div>
          </Tabs.Content>
          <Tabs.Content value="settings">
            <div className="p-4">Settings content</div>
          </Tabs.Content>
        </Tabs.Root>
      </div>

      <div>
        <h4 className="text-sm font-medium mb-2">Purple</h4>
        <Tabs.Root defaultValue="account">
          <Tabs.List color="purple">
            <Tabs.Trigger value="account">Account</Tabs.Trigger>
            <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
            <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
          </Tabs.List>
          <Tabs.Content value="account">
            <div className="p-4">Account content</div>
          </Tabs.Content>
          <Tabs.Content value="documents">
            <div className="p-4">Documents content</div>
          </Tabs.Content>
          <Tabs.Content value="settings">
            <div className="p-4">Settings content</div>
          </Tabs.Content>
        </Tabs.Root>
      </div>
    </div>
  ),
}

/**
 * Tabs with different sizes.
 */
export const Sizes: Story = {
  render: () => (
    <div className="space-y-6">
      <div>
        <h4 className="text-sm font-medium mb-2">Size 1 (Small)</h4>
        <Tabs.Root defaultValue="account">
          <Tabs.List size="1">
            <Tabs.Trigger value="account">Account</Tabs.Trigger>
            <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
            <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
          </Tabs.List>
          <Tabs.Content value="account">
            <div className="p-4">Account content</div>
          </Tabs.Content>
          <Tabs.Content value="documents">
            <div className="p-4">Documents content</div>
          </Tabs.Content>
          <Tabs.Content value="settings">
            <div className="p-4">Settings content</div>
          </Tabs.Content>
        </Tabs.Root>
      </div>

      <div>
        <h4 className="text-sm font-medium mb-2">Size 2 (Default)</h4>
        <Tabs.Root defaultValue="account">
          <Tabs.List size="2">
            <Tabs.Trigger value="account">Account</Tabs.Trigger>
            <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
            <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
          </Tabs.List>
          <Tabs.Content value="account">
            <div className="p-4">Account content</div>
          </Tabs.Content>
          <Tabs.Content value="documents">
            <div className="p-4">Documents content</div>
          </Tabs.Content>
          <Tabs.Content value="settings">
            <div className="p-4">Settings content</div>
          </Tabs.Content>
        </Tabs.Root>
      </div>
    </div>
  ),
}

/**
 * Tabs with different justification.
 */
export const Justification: Story = {
  render: () => (
    <div className="space-y-6">
      <div>
        <h4 className="text-sm font-medium mb-2">Start (Default)</h4>
        <div className="w-96 border rounded-lg p-4">
          <Tabs.Root defaultValue="account">
            <Tabs.List justify="start">
              <Tabs.Trigger value="account">Account</Tabs.Trigger>
              <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
              <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
            </Tabs.List>
            <Tabs.Content value="account">
              <div className="p-4">Account content</div>
            </Tabs.Content>
            <Tabs.Content value="documents">
              <div className="p-4">Documents content</div>
            </Tabs.Content>
            <Tabs.Content value="settings">
              <div className="p-4">Settings content</div>
            </Tabs.Content>
          </Tabs.Root>
        </div>
      </div>

      <div>
        <h4 className="text-sm font-medium mb-2">Center</h4>
        <div className="w-96 border rounded-lg p-4">
          <Tabs.Root defaultValue="account">
            <Tabs.List justify="center">
              <Tabs.Trigger value="account">Account</Tabs.Trigger>
              <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
              <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
            </Tabs.List>
            <Tabs.Content value="account">
              <div className="p-4">Account content</div>
            </Tabs.Content>
            <Tabs.Content value="documents">
              <div className="p-4">Documents content</div>
            </Tabs.Content>
            <Tabs.Content value="settings">
              <div className="p-4">Settings content</div>
            </Tabs.Content>
          </Tabs.Root>
        </div>
      </div>

      <div>
        <h4 className="text-sm font-medium mb-2">End</h4>
        <div className="w-96 border rounded-lg p-4">
          <Tabs.Root defaultValue="account">
            <Tabs.List justify="end">
              <Tabs.Trigger value="account">Account</Tabs.Trigger>
              <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
              <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
            </Tabs.List>
            <Tabs.Content value="account">
              <div className="p-4">Account content</div>
            </Tabs.Content>
            <Tabs.Content value="documents">
              <div className="p-4">Documents content</div>
            </Tabs.Content>
            <Tabs.Content value="settings">
              <div className="p-4">Settings content</div>
            </Tabs.Content>
          </Tabs.Root>
        </div>
      </div>
    </div>
  ),
}

/**
 * Tabs with wrapping behavior.
 */
export const Wrapping: Story = {
  render: () => (
    <div className="space-y-6">
      <div>
        <h4 className="text-sm font-medium mb-2">No Wrap</h4>
        <Tabs.Root defaultValue="account">
          <Tabs.List wrap="nowrap" className="max-w-[300px]">
            <Tabs.Trigger value="account">Account</Tabs.Trigger>
            <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
            <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
            <Tabs.Trigger value="profile">Profile</Tabs.Trigger>
            <Tabs.Trigger value="billing">Billing</Tabs.Trigger>
          </Tabs.List>
          <Tabs.Content value="account">
            <div className="p-4">Account content</div>
          </Tabs.Content>
          <Tabs.Content value="documents">
            <div className="p-4">Documents content</div>
          </Tabs.Content>
          <Tabs.Content value="settings">
            <div className="p-4">Settings content</div>
          </Tabs.Content>
          <Tabs.Content value="profile">
            <div className="p-4">Profile content</div>
          </Tabs.Content>
          <Tabs.Content value="billing">
            <div className="p-4">Billing content</div>
          </Tabs.Content>
        </Tabs.Root>
      </div>

      <div>
        <h4 className="text-sm font-medium mb-2">Wrap</h4>
        <Tabs.Root defaultValue="account">
          <Tabs.List wrap="wrap" className="max-w-[300px]">
            <Tabs.Trigger value="account">Account</Tabs.Trigger>
            <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
            <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
            <Tabs.Trigger value="profile">Profile</Tabs.Trigger>
            <Tabs.Trigger value="billing">Billing</Tabs.Trigger>
          </Tabs.List>
          <Tabs.Content value="account">
            <div className="p-4">Account content</div>
          </Tabs.Content>
          <Tabs.Content value="documents">
            <div className="p-4">Documents content</div>
          </Tabs.Content>
          <Tabs.Content value="settings">
            <div className="p-4">Settings content</div>
          </Tabs.Content>
          <Tabs.Content value="profile">
            <div className="p-4">Profile content</div>
          </Tabs.Content>
          <Tabs.Content value="billing">
            <div className="p-4">Billing content</div>
          </Tabs.Content>
        </Tabs.Root>
      </div>
    </div>
  ),
}

/**
 * Tabs with high contrast mode.
 */
export const HighContrast: Story = {
  render: () => (
    <div className="space-y-6">
      <div>
        <h4 className="text-sm font-medium mb-2">Normal</h4>
        <Tabs.Root defaultValue="account">
          <Tabs.List>
            <Tabs.Trigger value="account">Account</Tabs.Trigger>
            <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
            <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
          </Tabs.List>
          <Tabs.Content value="account">
            <div className="p-4">Account content</div>
          </Tabs.Content>
          <Tabs.Content value="documents">
            <div className="p-4">Documents content</div>
          </Tabs.Content>
          <Tabs.Content value="settings">
            <div className="p-4">Settings content</div>
          </Tabs.Content>
        </Tabs.Root>
      </div>

      <div>
        <h4 className="text-sm font-medium mb-2">High Contrast</h4>
        <Tabs.Root defaultValue="account">
          <Tabs.List highContrast>
            <Tabs.Trigger value="account">Account</Tabs.Trigger>
            <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
            <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
          </Tabs.List>
          <Tabs.Content value="account">
            <div className="p-4">Account content</div>
          </Tabs.Content>
          <Tabs.Content value="documents">
            <div className="p-4">Documents content</div>
          </Tabs.Content>
          <Tabs.Content value="settings">
            <div className="p-4">Settings content</div>
          </Tabs.Content>
        </Tabs.Root>
      </div>
    </div>
  ),
}

/**
 * Tabs with rich content.
 */
export const RichContent: Story = {
  render: () => (
    <Tabs.Root defaultValue="overview">
      <Tabs.List>
        <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
        <Tabs.Trigger value="analytics">Analytics</Tabs.Trigger>
        <Tabs.Trigger value="reports">Reports</Tabs.Trigger>
        <Tabs.Trigger value="notifications">Notifications</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="overview">
        <div className="p-6 space-y-4">
          <h3 className="text-xl font-semibold">Dashboard Overview</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="p-4 bg-gray-50 rounded-lg">
              <h4 className="font-medium">Total Users</h4>
              <p className="text-2xl font-bold text-blue-600">1,234</p>
            </div>
            <div className="p-4 bg-gray-50 rounded-lg">
              <h4 className="font-medium">Active Sessions</h4>
              <p className="text-2xl font-bold text-green-600">567</p>
            </div>
            <div className="p-4 bg-gray-50 rounded-lg">
              <h4 className="font-medium">Revenue</h4>
              <p className="text-2xl font-bold text-purple-600">$12,345</p>
            </div>
          </div>
        </div>
      </Tabs.Content>
      <Tabs.Content value="analytics">
        <div className="p-6">
          <h3 className="text-xl font-semibold mb-4">Analytics</h3>
          <p className="text-gray-600">View detailed analytics and metrics for your application.</p>
        </div>
      </Tabs.Content>
      <Tabs.Content value="reports">
        <div className="p-6">
          <h3 className="text-xl font-semibold mb-4">Reports</h3>
          <p className="text-gray-600">Generate and view various reports and insights.</p>
        </div>
      </Tabs.Content>
      <Tabs.Content value="notifications">
        <div className="p-6">
          <h3 className="text-xl font-semibold mb-4">Notifications</h3>
          <p className="text-gray-600">Manage your notification preferences and settings.</p>
        </div>
      </Tabs.Content>
    </Tabs.Root>
  ),
}