import { Badge } from '@/components/badge';
import { Button } from '@/components/button';
import { Spinner } from '@/components/spinner';
import { CheckIcon, RefreshIcon, XIcon } from '@/icons';
import { useMessages } from '~/i18n';
import { IMPACTS, useA11y, useA11yMode, type Impact } from '../hooks/use-a11y';

/**
 * The interactive half of the accessibility story — see `use-a11y.ts` for why
 * it exists and what it deliberately does not duplicate.
 *
 * It is dev-only and off by default, so it renders nothing until `?a11y=on` is
 * in the hash. The toolbar puts a switch there in development; the parameter
 * itself is what makes an audited page a link.
 */

/* Only the tint is fixed here; the word comes from the catalogue. Minor is
   neutral on purpose — four shades of alarm read as one. */
const TONE: Record<Impact, 'red' | 'yellow' | 'black'> = {
  critical: 'red',
  serious: 'red',
  moderate: 'yellow',
  minor: 'black',
};

/**
 * Ring the offending element and scroll it into view.
 *
 * The outline is applied imperatively rather than through React state because
 * the target is not in this component's tree — it is somewhere inside `<main>`,
 * rendered by a registry entry that knows nothing about the panel. The class
 * itself lives in `showcase.css` beside the rest of the site's own styling.
 */
function highlight(target: string) {
  const node = document.querySelector(target);
  if (!node) return;

  node.scrollIntoView({ block: 'center', behavior: 'smooth' });
  node.classList.add('a11y-target');
  setTimeout(() => node.classList.remove('a11y-target'), 2_000);
}

function Violation({ violation }: { violation: ReturnType<typeof useA11y>['violations'][number] }) {
  const m = useMessages();

  return (
    <li className="border-t border-border py-2 first:border-t-0">
      <div className="flex items-start gap-2">
        <Badge size="xs" variant="subtle" colorPalette={TONE[violation.impact]} className="mt-0.5">
          {m.a11y.impact[violation.impact]}
        </Badge>
        <div className="min-w-0 flex-1">
          <p className="text-sm font-medium">{violation.help}</p>
          <p className="font-mono text-xs text-muted-foreground">{violation.id}</p>
        </div>
      </div>

      {/* The selectors are the actionable part — one button per offending
          element, because a rule failing on six nodes is six separate places to
          look and a count would not tell you where any of them are. */}
      <ul className="mt-1.5 flex flex-wrap gap-1">
        {violation.nodes.map((node) => (
          <li key={node.target} className="min-w-0 max-w-full">
            <Button
              variant="outline"
              colorPalette="black"
              size="xs"
              title={node.summary}
              onClick={() => highlight(node.target)}
              className="max-w-full font-mono font-normal"
            >
              {/* The truncation goes on the span, not on the Button: the Button
                  is an inline-flex box, so its text child needs `min-w-0` of its
                  own or a long selector pushes the whole control past the
                  panel's edge instead of ellipsing. Generated selectors get very
                  long — `table[aria-label="…"] > thead > tr > th:nth-child(1)`
                  — so this is the normal case, not the extreme one. */}
              <span className="min-w-0 truncate">{node.target}</span>
            </Button>
          </li>
        ))}
      </ul>

      <a
        href={violation.helpUrl}
        target="_blank"
        rel="noreferrer"
        className="mt-1 inline-block text-xs text-muted-foreground underline underline-offset-2"
      >
        {m.a11y.reference}
      </a>
    </li>
  );
}

export function A11yPanel() {
  const a11y = useA11y();
  const [, setMode] = useA11yMode();
  const m = useMessages();

  if (!a11y.enabled) return null;

  const total = a11y.violations.reduce((sum, violation) => sum + violation.nodes.length, 0);
  /* Grouped most-severe first rather than left in axe's own order, which is by
     rule id — the first thing to know is whether anything critical failed. */
  const groups = IMPACTS.map(
    (impact) => [impact, a11y.violations.filter((v) => v.impact === impact)] as const
  ).filter(([, list]) => list.length > 0);

  return (
    /* Fixed rather than in the flow: it audits `<main>`, and putting it inside
       the thing it measures would make it part of its own result. */
    <aside
      aria-label={m.a11y.title}
      className="cbar-panel fixed right-4 bottom-4 z-50 flex max-h-[70vh] w-[26rem] max-w-[calc(100vw-2rem)] flex-col rounded-lg border border-border bg-popover text-popover-foreground"
    >
      <header className="flex items-center gap-2 border-b border-border px-3 py-2">
        <h2 className="text-sm font-semibold">{m.a11y.title}</h2>

        {a11y.status === 'running' ? (
          <Spinner className="size-3.5" label={m.a11y.running} />
        ) : total > 0 ? (
          <Badge size="xs" variant="subtle" colorPalette="red">
            {m.a11y.count(total)}
          </Badge>
        ) : a11y.status === 'ready' ? (
          <Badge size="xs" variant="subtle" colorPalette="green">
            <CheckIcon />
            {m.a11y.clean}
          </Badge>
        ) : null}

        <div className="ml-auto flex items-center gap-1">
          <Button
            variant="ghost"
            colorPalette="black"
            size="icon-xs"
            onClick={a11y.rerun}
            aria-label={m.a11y.rerun}
            title={m.a11y.rerun}
          >
            <RefreshIcon />
          </Button>
          <Button
            variant="ghost"
            colorPalette="black"
            size="icon-xs"
            onClick={() => setMode('off')}
            aria-label={m.common.close}
            title={m.common.close}
          >
            <XIcon />
          </Button>
        </div>
      </header>

      <div className="min-h-0 flex-1 overflow-y-auto px-3 py-2">
        {a11y.status === 'error' ? (
          <p className="text-sm text-destructive">{a11y.error}</p>
        ) : groups.length === 0 ? (
          <p className="text-sm text-muted-foreground">
            {a11y.status === 'ready' ? m.a11y.none : m.a11y.running}
          </p>
        ) : (
          groups.map(([impact, list]) => (
            <section key={impact} className="py-1">
              <h3 className="t-overline text-muted-foreground">{m.a11y.impact[impact]}</h3>
              <ul>
                {list.map((violation) => (
                  <Violation key={violation.id} violation={violation} />
                ))}
              </ul>
            </section>
          ))
        )}
      </div>

      <footer className="border-t border-border px-3 py-2 text-xs text-muted-foreground">
        {m.a11y.scope}
      </footer>
    </aside>
  );
}