import { useEffect, useRef, useState } from 'react';

import { Badge as KitBadge } from '@/components/badge';
import { Button } from '@/components/button';
import { Spinner } from '@/components/spinner';
import { KindBadge, tint, type BadgeKind } from '~/chrome/ui/badges';
import { ErrorBoundary } from '~/chrome/ui/error-boundary';
import { type Messages, useMessages } from '../i18n';
import type { Entry, PropBag } from '../registry/types';
import { useParam } from '../router';
import { selectNode } from './bridge';
import { diffCss, type DiffRow } from './css-diff';
import { compare, findSet, norm, type AxisRow, type FigmaProp } from './spec';
import { resolveVariant } from './variant-name';
import {
  useBridge,
  useBridgeAction,
  useFigmaCss,
  useFigmaSet,
  useFigmaSvg,
  useFigmaTextStyle,
} from './use-figma';

/**
 * What CBAR's Figma file says about this component, on the component's own page.
 *
 * Two halves. The properties table is read from `figma-spec.json` and is always
 * there — the type of every component property, the values it accepts and the
 * one Figma defaults to, lined up against the prop this kit exposes for it.
 *
 * The second half only appears when the bridge is running: it resolves the
 * playground's current selection to an actual variant node, then puts CBAR's
 * own drawing of it beside the kit's render and diffs the two computed styles.
 * That is the comparison the parity page cannot make — parity says an axis
 * exists, this says the button is 2px too short.
 */

/*
 * The tint is shared with the parity page through `chrome/ui/badges.tsx`; only the
 * wording is local, and deliberately so. This panel's `state` row says "drawn in
 * CSS" because what is being reported is how the kit renders it, while parity's
 * says "state axis" because the axis is the subject there.
 */
const LABEL: Record<BadgeKind, keyof Messages['figma']['badge']> = {
  match: 'match',
  diff: 'diff',
  state: 'state',
  'no-prop': 'noProp',
  extra: 'extra',
  slot: 'slot',
};

function Badge({ kind }: { kind: BadgeKind }) {
  const m = useMessages();

  return <KindBadge kind={kind}>{m.figma.badge[LABEL[kind]]}</KindBadge>;
}

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

/** One table row per Figma property, then the props the kit adds on top. */
function PropertyTable({
  props: figmaProps,
  rows,
}: {
  props: readonly FigmaProp[];
  rows: readonly AxisRow[];
}) {
  const m = useMessages();
  const byAxis = new Map(rows.filter((r) => r.figmaAxis).map((r) => [norm(r.figmaAxis!), r]));
  const kitOnly = rows.filter((r) => r.kind === 'extra');

  return (
    /* `tabIndex` and a name are what make a horizontally scrolling box reachable
       without a mouse � axe `scrollable-region-focusable`, reported by the
       `?a11y=on` panel. A `<table>` is not focusable itself, so the scroll
       container has to be. */
    <div
      tabIndex={0}
      role="region"
      aria-label={m.figma.title}
      className="overflow-x-auto rounded-lg border border-border"
    >
      <table className="w-full min-w-max text-left text-sm">
        <thead className="bg-muted text-xs text-muted-foreground uppercase">
          <tr>
            <th className="px-4 py-2 font-medium">{m.figma.columns.figmaProperty}</th>
            <th className="px-4 py-2 font-medium">{m.figma.columns.type}</th>
            <th className="px-4 py-2 font-medium">{m.figma.columns.values}</th>
            <th className="px-4 py-2 font-medium">{m.figma.columns.figmaDefault}</th>
            <th className="px-4 py-2 font-medium">{m.figma.columns.kitProp}</th>
            <th className="px-4 py-2 font-medium">{m.figma.columns.status}</th>
          </tr>
        </thead>
        <tbody>
          {figmaProps.map((p) => {
            const row = byAxis.get(norm(p.name));
            const kind: BadgeKind = p.type === 'VARIANT' ? (row?.kind ?? 'no-prop') : 'slot';
            return (
              <tr key={p.key} className="border-t border-border align-top">
                <td className="px-4 py-2 font-mono text-xs whitespace-nowrap">{p.name}</td>
                <td className="px-4 py-2 font-mono text-xs text-muted-foreground">{p.type}</td>
                <td className="max-w-md px-4 py-2">
                  {p.type === 'VARIANT' ? (
                    <Chips values={p.values ?? []} />
                  ) : (
                    <span className="text-xs text-muted-foreground">
                      {p.type === 'BOOLEAN'
                        ? m.figma.valueKinds.boolean
                        : p.type === 'TEXT'
                          ? m.figma.valueKinds.text
                          : m.figma.valueKinds.instance}
                    </span>
                  )}
                </td>
                <td className="px-4 py-2 font-mono text-xs text-muted-foreground">
                  {p.default === undefined ? '—' : String(p.default)}
                </td>
                <td className="px-4 py-2 font-mono text-xs">
                  {p.type === 'VARIANT' ? (
                    (row?.kitAxis ?? <span className="text-muted-foreground">—</span>)
                  ) : (
                    /* The kit takes icons and copy as children, so a slot has
                       no prop to line up with — position is child order. */
                    <span className="text-muted-foreground">{m.figma.children}</span>
                  )}
                </td>
                <td className="px-4 py-2">
                  <div className="flex flex-col items-start gap-1">
                    <Badge kind={kind} />
                    {row?.onlyFigma.length ? (
                      <span className="text-[10px] text-muted-foreground">
                        {m.figma.missingHere(row.onlyFigma.join(', '))}
                      </span>
                    ) : null}
                    {row?.onlyKit.length ? (
                      <span className="text-[10px] text-muted-foreground">
                        {m.figma.kitAdds(row.onlyKit.join(', '))}
                      </span>
                    ) : null}
                  </div>
                </td>
              </tr>
            );
          })}

          {kitOnly.map((row) => (
            <tr key={`kit-${row.kitAxis}`} className="border-t border-border align-top">
              <td className="px-4 py-2 text-xs text-muted-foreground">—</td>
              <td className="px-4 py-2 text-xs text-muted-foreground">—</td>
              <td className="max-w-md px-4 py-2">
                <Chips values={row.kitValues} />
              </td>
              <td className="px-4 py-2 text-xs text-muted-foreground">—</td>
              <td className="px-4 py-2 font-mono text-xs">{row.kitAxis}</td>
              <td className="px-4 py-2">
                <Badge kind="extra" />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function CssDiffTable({ rows }: { rows: readonly DiffRow[] }) {
  const m = useMessages();

  return (
    /* `tabIndex` and a name are what make a horizontally scrolling box reachable
       without a mouse � axe `scrollable-region-focusable`, reported by the
       `?a11y=on` panel. A `<table>` is not focusable itself, so the scroll
       container has to be. */
    <div
      tabIndex={0}
      role="region"
      aria-label={m.figma.title}
      className="overflow-x-auto rounded-lg border border-border"
    >
      <table className="w-full min-w-max text-left text-sm">
        <thead className="bg-muted text-xs text-muted-foreground uppercase">
          <tr>
            <th className="px-4 py-2 font-medium">{m.figma.columns.property}</th>
            <th className="px-4 py-2 font-medium">{m.figma.columns.figma}</th>
            <th className="px-4 py-2 font-medium">{m.figma.columns.kit}</th>
            <th className="px-4 py-2 font-medium" />
          </tr>
        </thead>
        <tbody>
          {rows.map((row) => (
            <tr
              key={row.property}
              className={`border-t border-border ${row.same === false ? tint('red') : ''}`}
            >
              <td className="px-4 py-2 font-mono text-xs">{row.property}</td>
              <td className="px-4 py-2 font-mono text-xs">{row.figma ?? '—'}</td>
              <td className="px-4 py-2 font-mono text-xs">{row.kit ?? '—'}</td>
              <td className="px-4 py-2 text-xs">
                {row.same === null ? '' : row.same ? '✓' : '✗'}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

/* Above this the markup is bigger than the page, and inlining it stops being a
   convenience — the copy buttons and the CSS diff both want a small tree. */
const SVG_LIMIT = 400_000;

export function FigmaPanel({ entry, props }: { entry: Entry; props: PropBag }) {
  const link = entry.figma;
  const set = findSet(link?.set);
  const m = useMessages();
  const bridge = useBridge();
  const [theme] = useParam('theme', 'light');

  const live = bridge.status === 'live';
  const setId = set?.id ?? null;
  const index = useFigmaSet(live ? setId : null, live);

  const resolution = set ? resolveVariant(entry, set, props) : undefined;
  const variant =
    resolution && !resolution.unmatched.length ? index.data?.byKey.get(resolution.key) : undefined;
  const variantId = variant?.id ?? null;

  const css = useFigmaCss(variantId, live);
  const svg = useFigmaSvg(variantId, live);
  const text = useFigmaTextStyle(variantId, live);

  const [openState, openInFigma] = useBridgeAction(selectNode);

  const kitRef = useRef<HTMLDivElement>(null);
  const [diff, setDiff] = useState<DiffRow[]>([]);
  /* The props object is new on every keystroke in the playground; its contents
     are what decides whether the rendered box moved. */
  const propsKey = JSON.stringify(props);

  useEffect(() => {
    const figmaCss = css.data;
    if (css.status !== 'ready' || !figmaCss) return;
    /* Measured a frame after the commit, not inside it: the element has to be
       laid out, and on a cold load DM Sans may still be arriving — a font swap
       moves every height in the table. */
    const frame = requestAnimationFrame(() => {
      const el = kitRef.current?.firstElementChild ?? null;
      setDiff(diffCss(figmaCss, el, variant, text.data));
    });
    return () => cancelAnimationFrame(frame);
  }, [css.status, css.data, variant, text.data, propsKey, theme]);

  /* Derived rather than cleared: a stale table must not survive the switch to
     another variant while its CSS is still in flight. */
  const diffRows = css.status === 'ready' ? diff : [];

  if (!link) return null;

  const statusLabel =
    bridge.status === 'live'
      ? m.figma.status.live(bridge.file ?? 'Figma')
      : bridge.status === 'no-plugin'
        ? m.figma.status.noPlugin
        : bridge.enabled
          ? m.figma.status.notRunning
          : m.figma.status.snapshot;

  return (
    <section className="space-y-4">
      <div className="flex flex-wrap items-baseline justify-between gap-3">
        {/* `h2` — see the note in `chrome/ui/playground.tsx`. */}
        <h2 className="text-sm font-semibold text-foreground">{m.figma.title}</h2>
        {/* Green only when the bridge is actually answering; the other three
            states are reports, not successes. */}
        <KitBadge
          variant="outline"
          colorPalette={live ? 'green' : 'black'}
          size="sm"
          className="rounded-full px-2.5 font-normal"
          title={bridge.page ? m.figma.onPage(bridge.page) : undefined}
        >
          {/* Switched on but not yet probed is the only pending state — every
              other one is settled and gets no spinner. */}
          {bridge.enabled && bridge.status === 'idle' ? (
            <Spinner className="size-3" label={statusLabel} />
          ) : null}
          {statusLabel}
        </KitBadge>
      </div>

      {!set ? (
        <p className="max-w-prose text-sm text-muted-foreground">
          {m.figma.setMissing(link.set)}
        </p>
      ) : (
        <>
          <p className="max-w-prose text-sm text-muted-foreground">
            {m.figma.setSummary(set.set, set.page, set.variants, set.props.length)}
          </p>

          <PropertyTable props={set.props} rows={compare(set, entry)} />

          {live && resolution && entry.render ? (
            <div className="space-y-3">
              <div className="flex flex-wrap items-baseline justify-between gap-2">
                <p className="text-sm font-medium text-foreground">
                  {m.figma.matchingVariant(resolution.label)}
                </p>
                <Button
                  variant="outline"
                  colorPalette="black"
                  size="xs"
                  disabled={!variantId || openState.status === 'loading'}
                  onClick={() => variantId && openInFigma(variantId)}
                >
                  {openState.status === 'loading' ? (
                    <>
                      <Spinner className="size-3.5" label={m.figma.opening} />
                      {m.figma.opening}
                    </>
                  ) : (
                    m.figma.openInFigma
                  )}
                </Button>
              </div>

              {resolution.unmatched.length ? (
                <p className="text-xs text-muted-foreground">
                  {m.figma.unmatched(
                    resolution.unmatched.map((u) => `${u.axis}=${u.value}`).join(', ')
                  )}
                </p>
              ) : null}

              {resolution.guessed.length ? (
                <p className="text-xs text-muted-foreground">
                  {m.figma.guessed(resolution.guessed.join(', '))}
                </p>
              ) : null}

              {index.status === 'error' ? (
                <p className="text-xs text-muted-foreground">{index.error}</p>
              ) : null}
              {openState.status === 'error' ? (
                <p className="text-xs text-muted-foreground">{openState.error}</p>
              ) : null}

              {index.status === 'ready' && !variant ? (
                <p className="text-xs text-muted-foreground">{m.figma.noVariant}</p>
              ) : null}

              <div className="grid gap-4 md:grid-cols-2">
                <figure className="space-y-2">
                  <figcaption className="text-xs text-muted-foreground">
                    {m.figma.columns.kit}
                  </figcaption>
                  <div
                    ref={kitRef}
                    className="flex min-h-28 items-center justify-center rounded-lg border border-border bg-card p-6"
                  >
                    {/* Walled like every other rendered preview. Note the CSS
                        diff reads `kitRef.current.firstElementChild`, so a
                        caught error simply gives it the fallback's box to
                        measure — a table of mismatches, not a blank page. */}
                    <ErrorBoundary label={entry.name} resetKey={propsKey}>
                      {entry.render(props)}
                    </ErrorBoundary>
                  </div>
                </figure>

                <figure className="space-y-2">
                  <figcaption className="text-xs text-muted-foreground">
                    {m.figma.columns.figma}
                    {variant ? ` · ${variant.id}` : ''}
                  </figcaption>
                  <div className="flex min-h-28 items-center justify-center rounded-lg border border-border bg-card p-6 [&>svg]:h-auto [&>svg]:max-w-full">
                    {svg.status === 'ready' && svg.data ? (
                      svg.data.length > SVG_LIMIT ? (
                        <p className="text-xs text-muted-foreground">
                          {m.figma.svgTooBig(Math.round(svg.data.length / 1024))}
                        </p>
                      ) : (
                        /* Loopback-local markup, produced by Figma's own
                           exporter for a node this page asked for by id — and
                           reachable in development only: `useBridge` gates
                           every request on `import.meta.env.DEV`, so a hosted
                           build cannot be talked into this path by a hash
                           parameter. */
                        <div dangerouslySetInnerHTML={{ __html: svg.data }} />
                      )
                    ) : svg.status === 'error' ? (
                      <p className="text-xs text-muted-foreground">{svg.error}</p>
                    ) : (
                      <Spinner label={m.figma.loading} />
                    )}
                  </div>
                </figure>
              </div>

              {diffRows.length ? (
                <div className="space-y-2">
                  <p className="text-sm font-medium text-foreground">{m.figma.computedStyle}</p>
                  <p className="max-w-prose text-xs text-muted-foreground">
                    {m.figma.computedStyleNote}
                  </p>
                  <CssDiffTable rows={diffRows} />
                </div>
              ) : null}
            </div>
          ) : null}
        </>
      )}
    </section>
  );
}