import { Alert, AlertDescription, AlertTitle } from '@/components/alert';
import type { AlertProps } from '@/components/alert';
import { InfoIcon, TriangleAlertIcon } from '@/icons';
import { PALETTES } from './axis-values';
import type { Entry } from './types';

/**
 * Alert's own axes — not shared with any other component (no `ghost`
 * treatment, no `xs`/`xl` rungs), so unlike the Button axes these have no
 * home in `axis-values.ts`. Exported so `pages/alerts.tsx` and
 * `pages/alerts-figma.tsx` read the same list instead of a second hand-copy.
 */
export const ALERT_VARIANTS = ['solid', 'subtle', 'surface', 'outline'] as const;
export const ALERT_SIZES = ['sm', 'md', 'lg'] as const;

export const alert: Entry = {
  slug: 'alert',
  name: 'Alert',
  group: 'Feedback',
  description:
    'A persistent message attached to the page — not a toast. Four composable treatments plus four fixed-colour shorthands for the statuses that recur.',
  imports: { subpath: 'alert', names: ['Alert', 'AlertTitle', 'AlertDescription'] },
  figma: {
    set: 'Alert',
    /* CBAR splits treatment from meaning the same way the kit does — `variant`
       lines up directly, and `status` is what the kit expresses as a palette.
       Its smallest size is called `default`, not `sm`. */
    axisMap: { status: 'colorPalette' },
    valueMap: {
      /* Paired by the fills the set actually paints, not by the status names:
         `info` is CBAR's turquoise (secondary-500 #4BC7B5) and `info-secondary`
         its navy (brand-500 #004976), which is what `alert.tsx`'s doc comment
         says and what the variable table says. `tertiary` is the one kit
         palette with no status here and stays unmapped (kit-only). The band
         table in `pages/alerts-figma.tsx` carries the full hex evidence. */
      status: {
        secondary: 'info',
        yellow: 'warning',
        green: 'success',
        red: 'error',
        primary: 'info-secondary',
        black: 'neutral',
      },
      size: { sm: 'default' },
    },
  },

  axes: {
    variant: ALERT_VARIANTS,
    colorPalette: PALETTES,
    size: ALERT_SIZES,
  },
  defaults: { variant: 'subtle', colorPalette: 'primary', size: 'md' },
  render: (props) => (
    <Alert {...(props as AlertProps)} className="w-56">
      <AlertTitle>Heads up</AlertTitle>
    </Alert>
  ),

  matrices: [
    {
      title: 'Variant × colorPalette',
      description:
        'The warning row is the one place CBAR steps off its own ramp: --ui-color-yellow-surface and -ink are two ambers that are not steps of the Yellow scale.',
      rows: 'variant',
      cols: 'colorPalette',
      pin: { size: 'md' },
    },
    { title: 'Variant × size', rows: 'variant', cols: 'size', pin: { colorPalette: 'primary' } },
  ],

  compositions: [
    {
      name: 'Shorthands',
      render: () => (
        <div className="space-y-3">
          <Alert variant="default">
            <InfoIcon />
            <AlertTitle>Scheduled maintenance</AlertTitle>
            <AlertDescription>The service is read-only until 04:00.</AlertDescription>
          </Alert>
          <Alert variant="destructive">
            <TriangleAlertIcon />
            <AlertTitle>Payment failed</AlertTitle>
            <AlertDescription>Update the card on file and try again.</AlertDescription>
          </Alert>
          <Alert variant="success">
            <AlertTitle>Saved</AlertTitle>
          </Alert>
          <Alert variant="warning">
            <AlertTitle>Your session expires in 2 minutes</AlertTitle>
          </Alert>
        </div>
      ),
    },
    {
      name: 'Title and description',
      description: 'An icon child is placed by the grid, so it never needs positioning classes.',
      render: () => (
        <Alert colorPalette="tertiary" variant="surface">
          <InfoIcon />
          <AlertTitle>Two-factor authentication</AlertTitle>
          <AlertDescription>
            Your account is protected by an authenticator app. Recovery codes were last generated
            in March.
          </AlertDescription>
        </Alert>
      ),
    },
  ],
};