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

import { Badge } from './badge';

const meta = {
  title: 'Components/Badge',
  component: Badge,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Compact status or category marker. A badge is not a button — if it needs to be clickable, use `asChild` with an anchor so it is announced and focused as a link.',
      },
    },
  },
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: [
        'solid',
        'subtle',
        'surface',
        'outline',
        'default',
        'secondary',
        'destructive',
        'success',
        'warning',
        'ghost',
      ],
    },
    colorPalette: {
      control: 'select',
      options: ['primary', 'secondary', 'tertiary', 'black', 'red', 'green', 'yellow'],
    },
    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg'] },
  },
  args: { children: 'Badge' },
} satisfies Meta<typeof Badge>;

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

export const Default: Story = {};

export const Variants: Story = {
  render: () => (
    <div className="flex flex-wrap items-center gap-2">
      {(['solid', 'subtle', 'surface', 'outline'] as const).map((variant) => (
        <Badge key={variant} variant={variant}>
          {variant}
        </Badge>
      ))}
    </div>
  ),
};

/** Every treatment renders in any of the seven palettes. */
export const Palettes: Story = {
  render: () => (
    <div className="flex flex-col gap-2">
      {(['solid', 'subtle', 'outline'] as const).map((variant) => (
        <div key={variant} className="flex flex-wrap items-center gap-2">
          {(['primary', 'secondary', 'tertiary', 'black', 'red', 'green', 'yellow'] as const).map(
            (colorPalette) => (
              <Badge key={colorPalette} variant={variant} colorPalette={colorPalette}>
                {colorPalette}
              </Badge>
            )
          )}
        </div>
      ))}
    </div>
  ),
};

/** Status shorthands. Each pins its own colour and ignores `colorPalette`. */
export const Shorthands: Story = {
  render: () => (
    <div className="flex flex-wrap items-center gap-2">
      <Badge variant="default">Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="warning">Warning</Badge>
      <Badge variant="ghost">Ghost</Badge>
    </div>
  ),
};

export const Sizes: Story = {
  render: () => (
    <div className="flex flex-wrap items-center gap-2">
      {(['xs', 'sm', 'md', 'lg'] as const).map((size) => (
        <Badge key={size} size={size}>
          {size}
        </Badge>
      ))}
    </div>
  ),
};

export const WithIcon: Story = {
  render: () => (
    <Badge colorPalette="green">
      <CheckIcon />
      Verified
    </Badge>
  ),
};

export const AsLink: Story = {
  render: () => (
    <Badge asChild variant="outline">
      <a href="#releases">v2.4.0</a>
    </Badge>
  ),
};