import { Badge } from '@/components/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/tabs';
import { KindBadge } from '~/chrome/ui/badges';
import {
  compare,
  norm,
  slotProps,
  SETS,
  type AxisRow,
  type FigmaSet,
  type RowKind,
} from '../figma/spec';
import { type Messages, useMessages } from '../i18n';
import { entries } from '../registry';
import type { Entry } from '../registry/types';
import { Link, useParam } from '../router';
import { ParityFindings } from './parity-findings';

/**
 * Figma parity — what CBAR's file draws against what the kit implements.
 *
 * `figma-spec.json` is a capture of every component set on the canvas, taken
 * with the local bridge plugin (`figma_sets --page "*"`) and reduced by
 * `scripts/gen-figma-spec.mjs`. It is data, not a schema: re-run the generator
 * after the design file moves and this page re-reads it.
 *
 * The point is that a divergence stops being something you notice by eye on a
 * particular component and becomes a row in a table. Everything here is
 * document-wide; a single component's own properties, and a live comparison
 * against the variant on the canvas, are on its page (`figma/figma-panel.tsx`).
 */

interface SetReport {
  figma: FigmaSet;
  entry?: Entry;
  rows: AxisRow[];
}

/*
 * The tint lives in `chrome/ui/badges.tsx`, shared with the per-component Figma
 * panel; only the wording is local. That split is deliberate: this page's
 * `state` row says "state axis" because the axis is what is being reported,
 * while the panel's says "drawn in CSS" because the rendering is. Same colour,
 * different sentence.
 */
const LABEL: Record<RowKind, keyof Messages['parity']['badge']> = {
  match: 'match',
  diff: 'diff',
  state: 'state',
  'no-prop': 'noProp',
  extra: 'extra',
};

function Values({ label, values }: { label: string; values: string[] }) {
  if (!values.length) return null;
  return (
    <div className="flex flex-wrap items-baseline gap-1 text-xs">
      <span className="text-muted-foreground">{label}</span>
      {values.map((v) => (
        <code key={v} className="rounded bg-muted px-1 py-0.5">
          {v}
        </code>
      ))}
    </div>
  );
}

/**
 * Two views of the same subject, so they share a page rather than a rail entry.
 *
 * The tab lives in the hash like every other toggle here, which is what makes
 * `#/parity?tab=findings` a link somebody can be sent — and the findings text
 * exists to be linked to.
 */
/**
 * Two views of one subject, so they share a page rather than a rail entry: the
 * generated diff, and the write-up of what has actually been resolved.
 *
 * The tab lives in the hash like every other toggle here, which is what makes
 * `#/parity?tab=findings` a link somebody can be sent — and the findings text
 * exists to be linked to.
 */
export function ParityPage() {
  const [tab, setTab] = useParam('tab', 'report');
  const m = useMessages();

  const TABS = [
    ['report', m.parity.tabs.report],
    ['findings', m.parity.tabs.findings],
  ] as const;

  return (
    <div className="mx-auto max-w-5xl space-y-8 px-8 py-10">
      <header className="space-y-3">
        <p className="t-overline text-muted-foreground">{m.header.foundations}</p>
        <h1 className="t-h2 text-foreground">{m.parity.title}</h1>
      </header>

      <Tabs value={tab === 'findings' ? 'findings' : 'report'} onValueChange={setTab}>
        <TabsList aria-label={m.parity.title}>
          {TABS.map(([value, label]) => (
            <TabsTrigger key={value} value={value}>
              {label}
            </TabsTrigger>
          ))}
        </TabsList>

        <TabsContent value="report" className="pt-8">
          <ParityReport />
        </TabsContent>
        <TabsContent value="findings" className="pt-8">
          <ParityFindings />
        </TabsContent>
      </Tabs>
    </div>
  );
}

function ParityReport() {
  const m = useMessages();
  const byFigmaSet = new Map<string, Entry>();
  for (const entry of entries) {
    if (entry.figma) byFigmaSet.set(norm(entry.figma.set), entry);
  }

  const reports: SetReport[] = SETS.map((figma) => ({
    figma,
    entry: byFigmaSet.get(norm(figma.set)),
    rows: compare(figma, byFigmaSet.get(norm(figma.set))),
  }));

  const linked = reports.filter((r) => r.entry);
  const unlinked = reports.filter((r) => !r.entry);
  const kitOnly = entries.filter((e) => !e.figma);
  const differing = linked.filter((r) => r.rows.some((x) => x.kind === 'diff' || x.kind === 'no-prop'));

  return (
    <div className="space-y-10">
      <header className="space-y-3">
        <p className="t-body max-w-prose text-muted-foreground">{m.parity.lead}</p>
        <p className="max-w-prose text-sm text-muted-foreground">{m.parity.stateNote}</p>
        <p className="max-w-prose text-sm text-muted-foreground">{m.parity.slotsNote}</p>

        <dl className="grid grid-cols-2 gap-3 pt-2 sm:grid-cols-4">
          {[
            [m.parity.stats.sets, SETS.length],
            [m.parity.stats.linked, linked.length],
            [m.parity.stats.gaps, differing.length],
            [m.parity.stats.kitOnly, kitOnly.length],
          ].map(([label, value]) => (
            <div key={String(label)} className="rounded-lg border border-border bg-card px-4 py-3">
              <dt className="text-xs text-muted-foreground">{label}</dt>
              <dd className="text-xl font-semibold text-foreground">{value}</dd>
            </div>
          ))}
        </dl>
      </header>

      <section className="space-y-4">
        <h2 className="text-sm font-semibold text-foreground">{m.parity.linkedSets}</h2>
        <div className="space-y-4">
          {linked.map(({ figma, entry, rows }, i) => (
            /* CBAR draws two separate RadioMark sets on the same page, so name + page is
               not unique. */
            <article key={`${figma.set}-${figma.page}-${i}`} className="rounded-lg border border-border">
              <header className="flex flex-wrap items-baseline justify-between gap-2 border-b border-border px-4 py-3">
                <div className="flex flex-wrap items-baseline gap-2">
                  <code className="text-sm font-semibold text-foreground">{figma.set}</code>
                  <span className="text-xs text-muted-foreground">
                    {m.parity.pageMeta(figma.page, figma.variants)}
                  </span>
                </div>
                {entry ? (
                  <Link
                    to={`/${entry.slug}`}
                    className="text-sm font-medium text-foreground hover:underline"
                  >
                    {entry.name} →
                  </Link>
                ) : null}
              </header>

              <ul className="divide-y divide-border">
                {rows.map((row, i) => (
                  <li key={i} className="flex flex-col gap-2 px-4 py-3 sm:flex-row sm:items-start">
                    <div className="flex w-56 shrink-0 items-center gap-2">
                      <KindBadge kind={row.kind}>{m.parity.badge[LABEL[row.kind]]}</KindBadge>
                      <code className="text-xs">
                        {row.figmaAxis ?? row.kitAxis}
                        {row.kitAxis && row.figmaAxis && norm(row.kitAxis) !== norm(row.figmaAxis)
                          ? ` → ${row.kitAxis}`
                          : ''}
                      </code>
                    </div>

                    <div className="min-w-0 flex-1 space-y-1">
                      {row.kind === 'match' ? (
                        <Values label={m.parity.values.both} values={row.kitValues} />
                      ) : null}
                      {row.kind === 'state' ? (
                        <Values label={m.parity.values.drawnInCss} values={row.figmaValues} />
                      ) : null}
                      <Values label={m.parity.values.onlyFigma} values={row.onlyFigma} />
                      <Values label={m.parity.values.onlyKit} values={row.onlyKit} />
                    </div>
                  </li>
                ))}
              </ul>

              {slotProps(figma).length ? (
                <footer className="flex flex-col gap-2 border-t border-border px-4 py-3 sm:flex-row sm:items-start">
                  <div className="flex w-56 shrink-0 items-center gap-2">
                    <KindBadge kind="slot">{m.parity.slots}</KindBadge>
                  </div>
                  <div className="flex min-w-0 flex-1 flex-wrap items-baseline gap-1 text-xs">
                    <span className="text-muted-foreground">{m.parity.values.takenAsChildren}</span>
                    {slotProps(figma).map((slot) => (
                      <code key={slot.key} className="rounded bg-muted px-1 py-0.5" title={slot.type}>
                        {slot.name}
                        {slot.type === 'BOOLEAN'
                          ? slot.default === true
                            ? ' ✓'
                            : ' ✗'
                          : slot.type === 'TEXT'
                            ? ' ✎'
                            : ' ⇄'}
                      </code>
                    ))}
                  </div>
                </footer>
              ) : null}
            </article>
          ))}
        </div>
      </section>

      <section className="space-y-3">
        <h2 className="text-sm font-semibold text-foreground">
          {m.parity.unlinkedTitle(unlinked.length)}
        </h2>
        <p className="max-w-prose text-sm text-muted-foreground">{m.parity.unlinkedNote}</p>
        <ul className="grid gap-2 sm:grid-cols-2">
          {unlinked.map(({ figma }, i) => (
            <li
              key={`${figma.set}-${figma.page}-${i}`}
              className="rounded-lg border border-border px-3 py-2 text-sm"
            >
              <code className="font-medium">{figma.set}</code>
              <span className="text-muted-foreground">
                {' '}
                · {m.parity.setMeta(figma.page, figma.variants)}
              </span>
            </li>
          ))}
        </ul>
      </section>

      <section className="space-y-3">
        <h2 className="text-sm font-semibold text-foreground">
          {m.parity.kitOnlyTitle(kitOnly.length)}
        </h2>
        <p className="max-w-prose text-sm text-muted-foreground">{m.parity.kitOnlyNote}</p>
        {/* `asChild` on the kit's Badge: its `outline` treatment already lights
            up on hover when the rendered element is an anchor, which is exactly
            what a pill that navigates should do. */}
        <ul className="flex flex-wrap gap-2">
          {kitOnly.map((entry) => (
            <li key={entry.slug}>
              <Badge asChild variant="outline" colorPalette="black" size="lg" className="rounded-full px-3">
                <Link to={`/${entry.slug}`}>{entry.name}</Link>
              </Badge>
            </li>
          ))}
        </ul>
      </section>
    </div>
  );
}