import type { Meta, StoryObj } from '@storybook/react-vite';
import { CircleCheckIcon, InfoIcon, OctagonXIcon, TriangleAlertIcon } from 'lucide-react';

import { Alert, AlertDescription, AlertTitle } from './alert';

const meta = {
  title: 'Components/Alert',
  component: Alert,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Inline message about the state of the page. It carries `role="alert"`, so screen readers announce it the moment it appears — do not use it for static explanatory copy.\n\nStatus comes from `colorPalette`, not a separate `status` prop: `red` for errors, `green` for success, `yellow` for warnings, `secondary` for information, and `primary` for the emphasised informational treatment CBAR calls `info-secondary`.',
      },
    },
  },
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: [
        'solid',
        'subtle',
        'surface',
        'outline',
        'default',
        'destructive',
        'success',
        'warning',
      ],
    },
    colorPalette: {
      control: 'select',
      options: ['primary', 'secondary', 'tertiary', 'black', 'red', 'green', 'yellow'],
    },
    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
  },
  decorators: [
    (Story) => (
      <div className="w-96">
        <Story />
      </div>
    ),
  ],
} satisfies Meta<typeof Alert>;

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

export const Default: Story = {
  render: () => (
    <Alert>
      <InfoIcon />
      <AlertTitle>Scheduled maintenance</AlertTitle>
      <AlertDescription>The API will be read-only on Sunday from 02:00 UTC.</AlertDescription>
    </Alert>
  ),
};

/** The four fill treatments, held on one palette so only the treatment moves. */
export const Variants: Story = {
  render: () => (
    <div className="grid gap-3">
      {(['solid', 'subtle', 'surface', 'outline'] as const).map((variant) => (
        <Alert key={variant} variant={variant} colorPalette="secondary">
          <InfoIcon />
          <AlertTitle className="capitalize">{variant}</AlertTitle>
          <AlertDescription>You can revert this change for 30 days.</AlertDescription>
        </Alert>
      ))}
    </div>
  ),
};

/** How the palettes read as statuses — the axis that replaces a `status` prop. */
export const Statuses: Story = {
  render: () => (
    <div className="grid gap-3">
      <Alert variant="subtle" colorPalette="red">
        <OctagonXIcon />
        <AlertTitle>Payment failed</AlertTitle>
        <AlertDescription>Update your card to avoid losing access.</AlertDescription>
      </Alert>
      <Alert variant="subtle" colorPalette="green">
        <CircleCheckIcon />
        <AlertTitle>Deployment finished</AlertTitle>
        <AlertDescription>Version 2.4.0 is live in production.</AlertDescription>
      </Alert>
      <Alert variant="subtle" colorPalette="yellow">
        <TriangleAlertIcon />
        <AlertTitle>Approaching your quota</AlertTitle>
        <AlertDescription>You have used 92% of this month&apos;s credits.</AlertDescription>
      </Alert>
      <Alert variant="subtle" colorPalette="secondary">
        <InfoIcon />
        <AlertTitle>Heads up</AlertTitle>
        <AlertDescription>Maintenance is scheduled for Sunday.</AlertDescription>
      </Alert>
      <Alert variant="subtle" colorPalette="primary">
        <InfoIcon />
        <AlertTitle>Policy update</AlertTitle>
        <AlertDescription>The revised terms take effect next month.</AlertDescription>
      </Alert>
    </div>
  ),
};

/** Padding, text size and icon move together. */
export const Sizes: Story = {
  render: () => (
    <div className="grid gap-3">
      {(['sm', 'md', 'lg'] as const).map((size) => (
        <Alert key={size} size={size} variant="surface" colorPalette="tertiary">
          <InfoIcon />
          <AlertTitle>Size {size}</AlertTitle>
          <AlertDescription>The API will be read-only on Sunday.</AlertDescription>
        </Alert>
      ))}
    </div>
  ),
};

/** The pre-CBAR shorthands still work, and pin their own colour. */
export const Shorthands: Story = {
  render: () => (
    <div className="grid gap-3">
      <Alert variant="default">
        <InfoIcon />
        <AlertTitle>Heads up</AlertTitle>
        <AlertDescription>You can revert this change for 30 days.</AlertDescription>
      </Alert>
      <Alert variant="success">
        <CircleCheckIcon />
        <AlertTitle>Deployment finished</AlertTitle>
        <AlertDescription>Version 2.4.0 is live in production.</AlertDescription>
      </Alert>
      <Alert variant="warning">
        <TriangleAlertIcon />
        <AlertTitle>Approaching your quota</AlertTitle>
        <AlertDescription>You have used 92% of this month&apos;s credits.</AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <OctagonXIcon />
        <AlertTitle>Payment failed</AlertTitle>
        <AlertDescription>Update your card to avoid losing access.</AlertDescription>
      </Alert>
    </div>
  ),
};

export const TitleOnly: Story = {
  render: () => (
    <Alert variant="subtle" colorPalette="green">
      <CircleCheckIcon />
      <AlertTitle>Your changes have been saved.</AlertTitle>
    </Alert>
  ),
};