import * as React from 'react';
import { Button } from '@/components/button';
import { Toast, toast } from '@/components/toast/toast';
import type { ToastKind } from '@/components/toast/toast';
import { FilterField, narrow } from '~/chrome/ui/axis-filter';
import { CopyBlock } from '~/chrome/ui/copy';
import { GalleryPage } from '~/chrome/ui/gallery-page';
import { MatrixGrid } from '~/chrome/ui/matrix';
import { PACKAGE } from '~/chrome/lib/package-name';
import { TOAST_POSITIONS, useToastPosition } from '~/chrome/hooks/use-toast-position';
import { useMessages } from '../i18n';
import { TOAST_KINDS } from '../registry/overlays';
import { useParam } from '../router';
import { FigmaLayoutView, toastCall, toastDemo } from './toasts-figma';

/**
 * Every toast the kit can draw, on one page, in two shapes — the same split
 * `/buttons`, `/alerts`, `/avatars` and `/badges` use.
 *
 * Toast is the odd one out among them, and the page is shaped around why: its
 * kind is not a prop. You do not render a toast, you call `toast.success(…)`
 * and a store hands it to the one `<Toaster />` mounted near the app root. So
 * the Gallery comes in two sections that answer two different questions —
 * *what does each kind look like* (a static grid) and *how do you actually use
 * it* (live, imperative, exactly as a consumer would write it).
 *
 * **Figma layout** is CBAR's shape — a single column, one row per state, in
 * canvas order. It lives in `./toasts-figma` and covers all five variants the
 * set declares.
 *
 * The static grids draw the kit's internal `Toast` with `duration={Infinity}`,
 * because nothing in the published surface can put five toasts side by side.
 * That is why both grids pass `snippet` rather than letting the copy button
 * serialise what it sees: the copied text is the call, never `<Toast …>`.
 */

type Kind = (typeof TOAST_KINDS)[number];

const EVERY_TOKEN: readonly string[] = [...TOAST_KINDS];

const TABS = ['gallery', 'figma'] as const;

export function ToastsPage() {
  const m = useMessages();

  return (
    <GalleryPage
      overline={m.header.foundations}
      title={m.toasts.title}
      lead={m.toasts.lead(PACKAGE)}
      tabs={TABS}
      tabsLabel={m.toasts.tabs.label}
      tabLabel={(name) => m.toasts.tabs[name]}
      views={{ gallery: <GalleryView />, figma: <FigmaLayoutView /> }}
    />
  );
}

function GalleryView() {
  const m = useMessages();
  const [query, setQuery] = useParam('q', '');
  const [closeParam, setClose] = useParam('close', '');

  const closeButton = closeParam === '1';
  const needle = query.trim().toLowerCase();
  const nothingMatches = needle.length > 0 && !EVERY_TOKEN.some((token) => token.includes(needle));

  const kinds = React.useMemo(() => narrow(TOAST_KINDS, needle), [needle]);

  /* Same static path as the Figma tab: `Infinity` skips the dismiss timer
     outright, and the `<ol>` gives the `<li>` the list parent axe expects. */
  const cell = (kind: Kind) => (
    <ol className="w-[306px]">
      <Toast
        toast={toastDemo(kind, 'kind')}
        duration={Infinity}
        position="bottom-right"
        closeButton={closeButton}
      />
    </ol>
  );

  return (
    <div className="space-y-8">
      <div className="flex flex-wrap items-center gap-4">
        {/* Native controls on purpose: a page documenting the kit must not
            document it with itself, or a broken component hides its own bug. */}
        <input
          type="search"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder={m.toasts.searchPlaceholder}
          className="h-9 min-w-52 flex-1 rounded-md border border-input bg-background px-2 text-sm"
        />

        <FilterField label={m.toasts.closeButton}>
          <input
            type="checkbox"
            checked={closeButton}
            onChange={(e) => setClose(e.target.checked ? '1' : '')}
            className="size-4 rounded border-input"
          />
        </FilterField>
      </div>

      {nothingMatches ? (
        <p className="text-sm text-muted-foreground">{m.toasts.empty(query)}</p>
      ) : (
        <>
          <section className="space-y-3">
            <h2 className="t-h4 text-foreground">{m.toasts.kindsTitle}</h2>
            <p className="t-body max-w-prose text-muted-foreground">{m.toasts.kindsLead}</p>
          </section>

          <MatrixGrid
            title="kind"
            description={m.toasts.kindsGrid}
            rows={kinds}
            cols={[null]}
            cell={(row) => cell(row as Kind)}
            snippet={(row) => toastCall(row as ToastKind)}
            cellTitle={(row) => `kind=${String(row)}`}
            copyAll={false}
          />

          <section className="space-y-3">
            <h2 className="t-h4 text-foreground">{m.toasts.liveTitle}</h2>
            <p className="t-body max-w-prose text-muted-foreground">{m.toasts.liveLead}</p>
          </section>

          <LiveView />

          <section className="space-y-3">
            <h2 className="t-h4 text-foreground">{m.toasts.position.title}</h2>
            <p className="t-body max-w-prose text-muted-foreground">{m.toasts.position.lead}</p>
          </section>

          <PositionView />
        </>
      )}
    </div>
  );
}

/**
 * The imperative half — the API a consumer actually writes.
 *
 * Nothing here pins a toast (`duration: Infinity`) and nothing fires on mount.
 * The store is a module singleton, so a pinned toast would follow the visitor
 * onto every other page in the showcase; letting them expire on their own is
 * both the honest demo and the safe one. No `<Toaster />` either — `main.tsx`
 * mounts the only one the showcase needs.
 */
function LiveView() {
  const m = useMessages();

  return (
    <div className="space-y-4 rounded-lg border border-border bg-card p-4">
      <div className="flex flex-wrap gap-2">
        <Button variant="outline" onClick={() => toast('Draft saved')}>
          toast
        </Button>
        <Button
          variant="outline"
          colorPalette="green"
          onClick={() => toast.success('Deployment finished', { description: 'Live in 3 regions.' })}
        >
          toast.success
        </Button>
        <Button
          variant="outline"
          colorPalette="secondary"
          onClick={() => toast.info('New version available')}
        >
          toast.info
        </Button>
        <Button
          variant="outline"
          colorPalette="yellow"
          onClick={() => toast.warning('Your session expires in 2 minutes')}
        >
          toast.warning
        </Button>
        <Button
          variant="outline"
          colorPalette="red"
          onClick={() => toast.error('Could not reach the registry')}
        >
          toast.error
        </Button>
      </div>

      <div className="flex flex-wrap gap-2">
        <Button
          variant="outline"
          onClick={() =>
            toast('File moved to trash', {
              action: { label: 'Undo', onClick: () => toast.success('Restored') },
              cancel: { label: 'Dismiss', onClick: () => undefined },
            })
          }
        >
          action + cancel
        </Button>
        <Button
          variant="outline"
          onClick={() =>
            toast.promise(new Promise((resolve) => setTimeout(resolve, 1800)), {
              loading: 'Publishing…',
              success: 'Published',
              error: 'Publish failed',
            })
          }
        >
          toast.promise
        </Button>
        <Button variant="ghost" onClick={() => toast.dismiss()}>
          {m.toasts.dismissAll}
        </Button>
      </div>
    </div>
  );
}

/** Where the bar sits inside its cell — a miniature of the corner it stands for. */
const CELL_ALIGN: Record<(typeof TOAST_POSITIONS)[number], string> = {
  'top-left': 'items-start justify-start',
  'top-center': 'items-start justify-center',
  'top-right': 'items-start justify-end',
  'bottom-left': 'items-end justify-start',
  'bottom-center': 'items-end justify-center',
  'bottom-right': 'items-end justify-end',
};

/**
 * The corner, which is the one part of a toast that is not chosen at the call
 * site.
 *
 * `position` belongs to the `Toaster`, so this section writes it into the hash
 * and the showcase's own mounted `Toaster` follows — see `chrome/ui/toaster.tsx`
 * for why a second one on this page would have duplicated every toast instead
 * of moving it. Picking a corner therefore *is* the demo: the button below
 * raises a real toast, and it appears where the diagram says it will.
 *
 * The picker is a native radio group inside a fieldset. Each cell's accessible
 * name is the prop value itself (`top-left`), untranslated like every other
 * axis value in the showcase, because it is the string a consumer types.
 */
function PositionView() {
  const m = useMessages();
  const [position, setPosition] = useToastPosition();

  const snippet = [
    `import { Toaster } from '${PACKAGE}/toast';`,
    '',
    '/* One per app, mounted near the root. Every toast() renders into it. */',
    `<Toaster position="${position}" />`,
  ].join('\n');

  return (
    <div className="flex flex-wrap items-start gap-6">
      <fieldset className="shrink-0">
        <legend className="sr-only">{m.toasts.position.legend}</legend>
        {/* A stand-in for the viewport: two rows of three, so each cell is the
            corner it selects and the bar inside it lands where the toast will. */}
        <div className="grid h-40 w-72 grid-cols-3 grid-rows-2 gap-1 rounded-lg border border-border bg-muted/40 p-1.5">
          {TOAST_POSITIONS.map((value) => {
            const active = value === position;
            return (
              <label
                key={value}
                className={`flex cursor-pointer rounded-sm p-1.5 transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring ${CELL_ALIGN[value]} ${
                  active ? 'bg-accent' : 'hover:bg-accent/50'
                }`}
              >
                <input
                  type="radio"
                  name="toast-position"
                  value={value}
                  checked={active}
                  onChange={() => setPosition(value)}
                  className="sr-only"
                />
                <span className="sr-only">{value}</span>
                <span
                  aria-hidden
                  className={`h-2.5 w-12 rounded-full transition-colors ${
                    active ? 'bg-primary' : 'bg-muted-foreground/30'
                  }`}
                />
              </label>
            );
          })}
        </div>
      </fieldset>

      <div className="min-w-72 flex-1 space-y-3">
        <Button
          variant="outline"
          onClick={() => toast.info(`position="${position}"`, { description: m.toasts.position.demoBody })}
        >
          {m.toasts.position.demo}
        </Button>
        <CopyBlock code={snippet} />
        <p className="t-body text-muted-foreground">{m.toasts.position.note}</p>
      </div>
    </div>
  );
}