import { snippetOf } from '~/chrome/lib/codegen';
import { CopyButton, CopyLine } from '~/chrome/ui/copy';
import { ErrorBoundary } from '~/chrome/ui/error-boundary';
import { importLineOf } from '~/chrome/lib/import-line';
import { Matrix } from '~/chrome/ui/matrix';
import { Playground } from '~/chrome/ui/playground';
import { usePlaygroundProps } from '~/chrome/lib/prop-params';
import { PropTable, SpecTableView } from '~/chrome/ui/tables';
import { FigmaPanel } from '../figma/figma-panel';
import { useGroupLabel, useMessages } from '../i18n';
import { propsFor } from '../registry/props';
import type { Composition as CompositionSpec, Entry } from '../registry/types';

/**
 * A hand-built example and the code for it.
 *
 * The tree is rendered once and used twice — shown, and serialised by the copy
 * button — so the snippet carries whatever the example actually contains: the
 * nested parts, and the icon imports for a `<Button><CheckIcon />…` that the
 * page's own import line says nothing about.
 */
function Composition({ composition }: { composition: CompositionSpec }) {
  const m = useMessages();
  const example = composition.render();

  return (
    <div className="space-y-2">
      <div className="flex flex-wrap items-center justify-between gap-3">
        {/* A heading, not a paragraph: it names the block under it, and with
            "Compositions" now an `h2` this is the level that belongs here — the
            page reads `h1` component → `h2` section → `h3` example. */}
        <h3 className="text-sm font-medium text-foreground">{composition.name}</h3>
        <CopyButton
          /* Verbatim text wins over serialisation when the entry supplied it —
             see the note on `Composition.snippet`. */
          text={() => composition.snippet ?? snippetOf(example)}
          label={m.component.copyCode}
          title={m.component.copyCodeTitle}
          className="h-7 px-2"
        />
      </div>
      {composition.description ? (
        <p className="max-w-prose text-sm text-muted-foreground">{composition.description}</p>
      ) : null}
      <div className="rounded-lg border border-border bg-card p-6">
        <ErrorBoundary label={composition.name}>{example}</ErrorBoundary>
      </div>
    </div>
  );
}

/**
 * One page per component, in the order you actually want to read it: what it
 * is, how to import it, a live instance you can drive, then the Figma grids,
 * then the details.
 *
 * Keyed on the slug so navigating to another component remounts the body and
 * starts from its own defaults — a remount rather than a reset in an effect,
 * which would cascade an extra render on every navigation.
 */
export function ComponentPage({ entry }: { entry: Entry }) {
  return <ComponentBody key={entry.slug} entry={entry} />;
}

function ComponentBody({ entry }: { entry: Entry }) {
  /* Owned here rather than inside the playground: the Figma panel resolves the
     same values against CBAR's component set, so both describe one selection.
     Held in the URL rather than in `useState` — see `chrome/lib/prop-params.ts` —
     which is what makes the share button have something to hand out. */
  const [props, setProp] = usePlaygroundProps(entry);
  const m = useMessages();
  const groupLabel = useGroupLabel();
  const propRows = propsFor(entry);

  return (
    <article className="mx-auto max-w-5xl space-y-10 px-8 py-10">
      <header className="space-y-4">
        <p className="t-overline text-muted-foreground">{groupLabel(entry.group)}</p>
        <div className="flex flex-wrap items-baseline gap-3">
          <h1 className="t-h2 text-foreground">{entry.name}</h1>
          {entry.figma ? (
            <span className="rounded-full border border-border px-2.5 py-0.5 text-xs text-muted-foreground">
              Figma: {entry.figma.set}
              {entry.figma.node ? ` · ${entry.figma.node}` : ''}
            </span>
          ) : null}
        </div>
        <p className="t-body max-w-prose text-muted-foreground">{entry.description}</p>
        <CopyLine text={importLineOf(entry.imports)} />
      </header>

      <Playground entry={entry} props={props} onChange={setProp} />

      {entry.matrices?.map((spec, i) => (
        <Matrix key={spec.title ?? i} entry={entry} spec={spec} />
      ))}

      {entry.compositions?.length ? (
        <section className="space-y-6">
          <h2 className="text-sm font-semibold text-foreground">{m.component.compositions}</h2>
          {entry.compositions.map((c) => (
            <Composition key={c.name} composition={c} />
          ))}
        </section>
      ) : null}

      {/* Generated from the types, with `entry.props` layered on top — see
          `registry/props.ts`. Still conditional: a component whose whole API
          belongs to a Radix primitive produces no rows, and an empty table is
          worse than none. */}
      {propRows.length > 0 ? <PropTable props={propRows} /> : null}
      {entry.spec ? <SpecTableView spec={entry.spec} /> : null}
      <FigmaPanel entry={entry} props={props} />
    </article>
  );
}