import * as React from 'react';
import { Alert, AlertDescription, AlertTitle } from '@/components/alert';
import { InfoTriangleIcon } from '@/icons';
import { MatrixGrid } from '~/chrome/ui/matrix';
import { useMessages } from '../i18n';
import { ALERT_SIZES, ALERT_VARIANTS } from '../registry/alert';
import type { Palette } from '../registry/axis-values';
import { useParam } from '../router';

/**
 * The Alert set as CBAR's canvas lays it out.
 *
 * Read off the set's own `absoluteBoundingBox` values (node `2446:316`, 72
 * variants): y is banded by **status**, 468px apart, in this order —
 * `info(427) → warning(895) → success(1363) → error(1831) →
 * info-secondary(2299) → neutral(2767)`. Within a band, y sub-offset is
 * **variant**, 78px apart — `solid(+0) → subtle(+78) → surface(+156) →
 * outline(+234)`, which is already `registry/alert.tsx`'s own order. x is
 * **size** — `default → md → lg`, kit's `sm` renamed.
 *
 * Every variant on the canvas is 421px wide and carries an icon
 * (`Outline/Status/Info-triangle`) above a `text` frame holding `Title` and
 * `Description`. There is no boolean property for either, so the cell below
 * draws all three unconditionally — that is the set, not a demo choice.
 *
 * Unlike Button, Alert has no faked hover/active row: it isn't interactive,
 * so every prop shown here is a real prop and there is nothing for a `code`
 * override to strip.
 */

/**
 * CBAR's band order, paired with the kit palette that paints it.
 *
 * The pairing is read off the fills rather than off the status names, which is
 * what it used to be guessed from. Per band, `solid` / `subtle` / border:
 *
 *   info            #4BC7B5 #CFF3EC #A6E8DA   secondary-500 / -100 / -200
 *   warning         #F3C67F #FEF9C3 #F3C67F   yellow-500 (`--ui-color-yellow-surface`)
 *   success         #22C55E #DCFCE7 #22C55E   green-500 / -100 / -500
 *   error           #EF4444 #FEE2E2 #F00000   red-500 / -100 / (off-ramp)
 *   info-secondary  #004976 #D6EAF4 #7FBBD9   brand-500 / -100 / -300
 *   neutral         #333333 #E5E5E5 #D4D4D4   neutral-700 / -200 / (neutral-300)
 *
 * So CBAR's `info` is the kit's turquoise `secondary` and its `info-secondary`
 * is the navy `primary` — the order `alert.tsx`'s own doc comment already
 * states, and the opposite of what this table said before. The set agrees with
 * the variable table, unlike Button's; finding 7 on `/parity?tab=findings` has
 * the write-up. `tertiary` is now the palette with no band here — it is still
 * on the Gallery tab, which sweeps every kit palette.
 */
const STATUS_BANDS = [
  { status: 'info', palette: 'secondary' },
  { status: 'warning', palette: 'yellow' },
  { status: 'success', palette: 'green' },
  { status: 'error', palette: 'red' },
  { status: 'info-secondary', palette: 'primary' },
  { status: 'neutral', palette: 'black' },
] as const satisfies readonly { status: string; palette: Palette }[];

type Variant = (typeof ALERT_VARIANTS)[number];
type Size = (typeof ALERT_SIZES)[number];

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <label className="flex items-center gap-2 text-xs font-medium text-muted-foreground">
      {label}
      {children}
    </label>
  );
}

export function FigmaLayoutView() {
  const m = useMessages();
  const [status, setStatus] = useParam('status', 'all');

  const bands = React.useMemo(
    () => (status === 'all' ? STATUS_BANDS : STATUS_BANDS.filter((b) => b.status === status)),
    [status]
  );

  /* 421px is the set's own width — every one of the 72 variants is drawn at it,
     so the grid scrolls sideways rather than reflowing. The icon is the same on
     all six bands because the file draws the same one on all six. */
  const cell = (variant: Variant, colorPalette: Palette, size: Size) => (
    <Alert variant={variant} colorPalette={colorPalette} size={size} className="w-[421px]">
      <InfoTriangleIcon />
      <AlertTitle>{m.alerts.cellTitle}</AlertTitle>
      <AlertDescription>{m.alerts.cellDescription}</AlertDescription>
    </Alert>
  );

  return (
    <div className="space-y-8">
      <div className="space-y-3">
        <p className="t-body max-w-prose text-muted-foreground">{m.alerts.figma.lead}</p>
        <p className="t-body max-w-prose text-muted-foreground">{m.alerts.figma.bandNote}</p>
        <p className="t-body max-w-prose text-muted-foreground">{m.alerts.figma.sizeNote}</p>
        <p className="t-body max-w-prose text-muted-foreground">{m.alerts.figma.outlineNote}</p>
      </div>

      <div className="flex flex-wrap items-center gap-4">
        <Field label={m.alerts.figma.status}>
          <select
            value={status}
            onChange={(e) => setStatus(e.target.value)}
            className="h-9 rounded-md border border-input bg-background px-2 text-sm"
          >
            <option value="all">{m.alerts.all}</option>
            {STATUS_BANDS.map((b) => (
              <option key={b.status} value={b.status}>
                {b.status}
              </option>
            ))}
          </select>
        </Field>
      </div>

      {bands.map((band) => (
        <section key={band.status} className="space-y-3">
          <h2 className="t-h4 text-foreground">
            status=&quot;{band.status}&quot; ({band.palette})
          </h2>

          <MatrixGrid
            title={`status="${band.status}"`}
            description={m.alerts.figma.grid(band.status, band.palette)}
            rows={ALERT_VARIANTS}
            cols={ALERT_SIZES}
            cell={(row, col) => cell(row as Variant, band.palette, col as Size)}
            cellTitle={(row, col) =>
              `variant=${String(row)}, size=${String(col)}, status=${band.status} (colorPalette=${band.palette})`
            }
            copyAll={false}
          />
        </section>
      ))}
    </div>
  );
}