import { Button } from '@/components/button';
import { RefreshIcon } from '@/icons';
import { useMessages } from '~/i18n';
import type { AxisValue, Entry, PropBag } from '~/registry/types';
import { snippetOf } from '../lib/codegen';
import { CopyBlock } from './copy';
import { ErrorBoundary } from './error-boundary';
import { useResetProps } from '../lib/prop-params';
import { SectionHeading } from './section';
import { ShareButton } from './share';

/*
 * THE RULE, for this file and every other:
 *
 *   The site's chrome uses kit components. A playground control never uses the
 *   component it drives.
 *
 * Everything around a preview — the rail, the toolbar, the copy buttons, the
 * props tables, the badges — is the kit, because a doc site that will not eat
 * its own cooking is not evidence of anything. The controls in this file are the
 * exception, and they are native `<select>` / `<input type="checkbox">` on
 * purpose: the playground has to stay usable while you are actively breaking a
 * kit component, and driving `Select` with `Select` means the first bug you
 * introduce hides itself.
 *
 * The other half of the same rule is `chrome/ui/error-boundary.tsx`: every rendered
 * preview is walled off, so a component that throws degrades to a red panel
 * instead of unmounting the page from the root.
 *
 * `showcase/src/pages/tokens.tsx` is the one other file that stays outside the
 * kit — it reads raw `--ui-*` values out of the document and has to show them
 * literally.
 */

function Control({
  name,
  values,
  value,
  onChange,
}: {
  name: string;
  values: readonly AxisValue[];
  value: unknown;
  onChange: (next: AxisValue) => void;
}) {
  const isBoolean = values.every((v) => typeof v === 'boolean');

  if (isBoolean) {
    return (
      <label className="flex items-center gap-2 text-sm">
        <input
          type="checkbox"
          checked={value === true}
          onChange={(e) => onChange(e.target.checked)}
          className="size-4 accent-primary"
        />
        <span className="font-medium">{name}</span>
      </label>
    );
  }

  return (
    <label className="flex flex-col gap-1 text-sm">
      <span className="font-medium">{name}</span>
      <select
        value={String(value ?? '')}
        /* `w-full`, so eight controls of eight different value lengths line up
           as a column instead of stepping in and out down the panel. */
        /* A `<select>` only ever yields a string. Map it back to the axis value
           it came from, or a numeric axis would reach the component — and the
           generated snippet — as `size="3"` rather than `size={3}`. */
        onChange={(e) =>
          onChange(values.find((v) => String(v) === e.target.value) ?? e.target.value)
        }
        className="h-9 w-full rounded-xs border border-input bg-background px-2 text-sm"
      >
        {values.map((v) => (
          <option key={String(v)} value={String(v)}>
            {String(v)}
          </option>
        ))}
      </select>
    </label>
  );
}

/**
 * Live single instance plus one control per axis.
 *
 * The props are owned by the page rather than by this component: the Figma
 * panel further down resolves the same values against CBAR's component set, so
 * both views describe one selection instead of drifting apart.
 */
export function Playground({
  entry,
  props,
  onChange,
}: {
  entry: Entry;
  props: PropBag;
  onChange: (name: string, value: AxisValue) => void;
}) {
  const m = useMessages();
  /* Before the early return — the hook order cannot depend on whether this
     particular entry happens to be drivable. */
  const [dirty, reset] = useResetProps();
  const axes = entry.axes;
  if (!entry.render || !axes) return null;

  /* Rendered once and used twice: the live instance and the snippet are the
     same element, so the code cannot describe something else. */
  const instance = entry.render(props);
  /* The boundary latches on a caught error; this is what un-latches it when the
     controls move off the value that threw. */
  const propsKey = JSON.stringify(props);

  return (
    <section className="space-y-3">
      {/* `h2`, like every other top-level section of a page whose `h1` is the
          component name. These were all `h3` until the axe panel reported the
          `h1 → h3` jump on every component page; the classes carry the size, so
          the level is free to be the correct one. */}
      <SectionHeading
        title={m.playground.title}
        /* Next to the heading rather than beside the snippet: it shares the
           state you just built, which is the preview above it — the snippet
           already has a button of its own for the code. */
        actions={<ShareButton entry={entry} snippet={() => snippetOf(instance)} />}
      />

      <div className="grid gap-0 overflow-hidden rounded-lg border border-border bg-card md:grid-cols-[1fr_16rem]">
        <div className="flex min-h-32 items-center justify-center p-8">
          <ErrorBoundary label={entry.name} resetKey={propsKey}>
            {instance}
          </ErrorBoundary>
        </div>

        {/* Its own panel rather than a bare stack beside the preview: the
            controls are a different kind of thing from the thing they drive, and
            a shared surface with no line between them read as one wide card with
            some selects loose in the right half. */}
        <div className="flex flex-col gap-3 border-t border-border bg-background p-4 md:border-t-0 md:border-l">
          <div className="flex items-center justify-between gap-2">
            <p className="t-overline text-muted-foreground">{m.playground.controls}</p>
            {/* Absent, not disabled, while the playground sits at its defaults:
                there is nothing to undo, and the URL says so — see
                `useResetProps`. */}
            {dirty ? (
              <Button
                variant="ghost"
                colorPalette="black"
                size="xs"
                onClick={reset}
                title={m.playground.resetTitle}
                className="-mr-1 font-normal"
              >
                <RefreshIcon />
                {m.playground.reset}
              </Button>
            ) : null}
          </div>

          {Object.entries(axes).map(([name, values]) => (
            <Control
              key={name}
              name={name}
              values={values}
              value={props[name]}
              onChange={(next) => onChange(name, next)}
            />
          ))}
        </div>
      </div>

      <CopyBlock code={snippetOf(instance)} title={m.playground.snippetTitle} />
    </section>
  );
}