import * as React from 'react';
import type { ComponentType } from 'react';
import { renderToStaticMarkup } from 'react-dom/server';

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/dialog';
import { Input } from '@/components/input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/select';
import * as kit from '@/icons';
import {
  iconCategories,
  iconManifest,
  SearchIcon,
  type CbarIconProps,
  type IconManifestEntry,
} from '@/icons';

import { CopyButton } from '~/chrome/ui/copy';
import { importLineOf } from '~/chrome/lib/import-line';
import { PACKAGE } from '~/chrome/lib/package-name';
import { Segmented } from '~/chrome/ui/segmented';
import { useMessages } from '../i18n';
import { useParam } from '../router';

/**
 * The whole CBAR icon set on one page: 250 icons in nine categories, each drawn
 * twice by CBAR and selectable with `variant`.
 *
 * Storybook shows one story at a time and the component pages show one
 * component at a time; an icon set is only useful when you can scan all of it,
 * search it, and take one away with you. Hence the four copy formats — the last
 * one is deliberately kit-free, so an icon can be lifted into a project that
 * does not depend on this package.
 *
 * Filters live in the hash (`#/icons?q=cloud&variant=solid`), like every other
 * global toggle in the showcase, so a filtered view is a shareable link.
 */

/* The barrel also carries the manifest and the chassis; everything drawable is
   named `<Something>Icon`. */
const components = kit as unknown as Record<string, ComponentType<CbarIconProps>>;

const SIZES = ['16', '20', '24', '32', '48'] as const;
/** What `Icon` draws without a `size` prop — the one value a snippet can omit. */
const DEFAULT_SIZE = 24;
const VARIANTS = ['outline', 'solid', 'both'] as const;
type VariantFilter = (typeof VARIANTS)[number];

/** JSX spells a few SVG attributes differently; the rest carry over verbatim. */
const JSX_ATTRS: Record<string, string> = {
  'fill-rule': 'fillRule',
  'clip-rule': 'clipRule',
  'stroke-width': 'strokeWidth',
  'stroke-linecap': 'strokeLinecap',
  'stroke-linejoin': 'strokeLinejoin',
};

/** One shape per line, so a pasted icon is readable and diffs cleanly. */
const prettySvg = (markup: string) =>
  markup
    .replace(/><(path|circle|rect|g)\b/g, '>\n  <$1')
    .replace(/><\/svg>/, '>\n</svg>');

/**
 * The markup React would render for this icon, as plain SVG — no kit classes,
 * no `data-slot`. Rendering it rather than storing it keeps the manifest free
 * of geometry: the drawing has exactly one home, the generated module.
 *
 * The size row drives this too: what you copy is what the grid is showing.
 */
function svgOf(name: string, variant: 'outline' | 'solid', size: number) {
  const Icon = components[name];
  const markup = renderToStaticMarkup(<Icon variant={variant} size={size} />);
  return prettySvg(markup.replace(/ data-slot="icon"/, ''));
}

function componentSourceOf(name: string, variant: 'outline' | 'solid', size: number) {
  const svg = svgOf(name, variant, size)
    .replace(/\s([a-z-]+)="/g, (match, attr: string) => (JSX_ATTRS[attr] ? ` ${JSX_ATTRS[attr]}="` : match))
    /* Spread last, so a caller can override the size, the paint or the
       aria-hidden the kit's chassis chose. */
    .replace(/^(<svg [^>]*)>/, '$1 {...props}>')
    .split('\n')
    .join('\n  ');

  return [
    "import type { SVGProps } from 'react';",
    '',
    `export const ${name} = (props: SVGProps<SVGSVGElement>) => (`,
    `  ${svg}`,
    ');',
    '',
  ].join('\n');
}

/**
 * The JSX carries only what you actually chose: `variant` when it is the solid
 * family and the icon has one, `size` when it is not the chassis default. A
 * snippet full of props that change nothing is noise to delete by hand.
 */
function usageOf(entry: IconManifestEntry, variant: 'outline' | 'solid', size: number) {
  const props = [
    variant === 'solid' && !entry.shared ? ' variant="solid"' : '',
    size === DEFAULT_SIZE ? '' : ` size={${size}}`,
  ].join('');

  /* The same renderer the 40 component pages use, so the icon barrel's import
     line is spelled exactly like every other one on the site. */
  const line = importLineOf({ subpath: 'icons', names: [entry.name] });
  return `${line}\n\n<${entry.name}${props} />`;
}

/**
 * A labelled segmented filter.
 *
 * These drive the *gallery*, not an icon — no component on this page is being
 * documented by itself — so the rule in `chrome/ui/playground.tsx` puts them on the
 * kit side, and `chrome/ui/segmented.tsx` is where that now lives. They were the
 * kit's `Tabs` until the axe panel pointed out that a tab controlling no panel
 * is a broken `aria-controls`; the note in that file has the whole story.
 */
function LabelledSegmented({
  values,
  value,
  onChange,
  label,
}: {
  values: readonly string[];
  value: string;
  onChange: (next: string) => void;
  label: string;
}) {
  return (
    <div className="flex items-center gap-2">
      <span className="text-xs text-muted-foreground">{label}</span>
      <Segmented
        label={label}
        values={values}
        value={value}
        onChange={onChange}
        className="capitalize"
      />
    </div>
  );
}

function IconCell({
  entry,
  variant,
  size,
  selected,
  onSelect,
}: {
  entry: IconManifestEntry;
  variant: VariantFilter;
  size: number;
  selected: boolean;
  onSelect: () => void;
}) {
  const Icon = components[entry.name];
  const families: ('outline' | 'solid')[] = variant === 'both' ? ['outline', 'solid'] : [variant];

  return (
    <button
      type="button"
      onClick={onSelect}
      title={entry.name}
      /* 500 SVGs in `both` mode is more than a browser wants to lay out at
         once; skipping the off-screen ones costs one line and no dependency. */
      style={{ contentVisibility: 'auto', containIntrinsicSize: '96px' }}
      className={[
        'flex flex-col items-center gap-2 rounded-lg border p-3 text-center',
        selected ? 'border-primary bg-accent' : 'border-border hover:border-input hover:bg-accent/50',
      ].join(' ')}
    >
      <span className="flex h-12 items-center justify-center gap-3 text-foreground">
        {families.map((family) => (
          <Icon key={family} variant={family} size={size} />
        ))}
      </span>
      <span className="w-full truncate font-mono text-[10px] text-muted-foreground">
        {entry.name.replace(/Icon$/, '')}
      </span>
    </button>
  );
}

/**
 * One icon, up close, in the kit's `Dialog`.
 *
 * It used to be a panel that pushed itself in above the grid, which meant
 * picking an icon two thirds of the way down the page moved everything you were
 * looking at. A modal keeps the grid where it is, and brings the focus trap and
 * the Escape key with it.
 */
function Detail({
  entry,
  size,
  onClose,
}: {
  entry: IconManifestEntry;
  size: number;
  onClose: () => void;
}) {
  const [variant, setVariant] = React.useState<'outline' | 'solid'>('outline');
  const m = useMessages();
  const Icon = components[entry.name];

  /* All three strings are derived from a render, so they cost nothing until
     this panel is open — and they always agree with what the grid is showing,
     including the size row. */
  const svg = React.useMemo(() => svgOf(entry.name, variant, size), [entry.name, variant, size]);
  const source = React.useMemo(
    () => componentSourceOf(entry.name, variant, size),
    [entry.name, variant, size]
  );
  const usage = React.useMemo(() => usageOf(entry, variant, size), [entry, variant, size]);

  return (
    <Dialog open onOpenChange={(next) => (next ? undefined : onClose())}>
      <DialogContent className="sm:max-w-2xl">
        <DialogHeader>
          <div className="flex items-center gap-4">
            <span className="flex size-16 shrink-0 items-center justify-center rounded-md border border-border text-foreground">
              <Icon variant={variant} size={size} />
            </span>
            <div className="space-y-1 text-left">
              <DialogTitle className="font-mono text-sm">{entry.name}</DialogTitle>
              <DialogDescription className="text-xs">
                {m.icons.detailMeta(entry.category, entry.shared === true, size)}
              </DialogDescription>
            </div>
          </div>
        </DialogHeader>

        <LabelledSegmented
          label={m.icons.variant}
          values={['outline', 'solid']}
          value={variant}
          onChange={(next) => setVariant(next as 'outline' | 'solid')}
        />

        {entry.shared ? (
          <p className="text-xs text-muted-foreground">{m.icons.sharedNote}</p>
        ) : null}

        <pre className="overflow-x-auto rounded-md border border-border bg-muted p-3 text-xs">
          {usage}
        </pre>

        <div className="flex flex-wrap gap-2">
          <CopyButton text={usage} label={m.icons.copyUsage} />
          <CopyButton text={svg} label={m.icons.copySvg} title={m.icons.copySvgTitle} />
          <CopyButton text={entry.name} label={m.icons.copyName} />
          <CopyButton
            text={source}
            label={m.icons.copyComponent}
            title={m.icons.copyComponentTitle}
          />
        </div>
      </DialogContent>
    </Dialog>
  );
}

export function IconsPage() {
  const m = useMessages();
  const [query, setQuery] = useParam('q', '');
  const [category, setCategory] = useParam('cat', 'all');
  const [variant, setVariant] = useParam('variant', 'outline');
  const [size, setSize] = useParam('size', '24');
  const [selected, setSelected] = useParam('icon', '');

  const needle = query.trim().toLowerCase();
  const matches = React.useMemo(
    () =>
      iconManifest.filter(
        (entry) =>
          (category === 'all' || entry.category === category) &&
          (!needle ||
            entry.name.toLowerCase().includes(needle) ||
            entry.category.toLowerCase().includes(needle))
      ),
    [category, needle]
  );

  const groups = React.useMemo(
    () =>
      iconCategories
        .map((name) => [name, matches.filter((entry) => entry.category === name)] as const)
        .filter(([, items]) => items.length > 0),
    [matches]
  );

  const active = matches.find((entry) => entry.name === selected);

  return (
    <div className="mx-auto max-w-5xl space-y-8 px-8 py-10">
      <header className="space-y-3">
        <p className="t-overline text-muted-foreground">{m.header.foundations}</p>
        <h1 className="t-h2 text-foreground">{m.icons.title}</h1>
        <p className="t-body max-w-prose text-muted-foreground">
          {m.icons.lead(iconManifest.length, iconCategories.length, PACKAGE)}
        </p>
      </header>

      {/* Kit controls throughout: these filter the gallery, they do not drive a
          component that is being documented, so the playground's native-control
          exception does not apply here. */}
      <div className="flex flex-wrap items-center gap-4">
        <Input
          type="search"
          size="sm"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder={m.icons.searchPlaceholder}
          aria-label={m.icons.searchPlaceholder}
          startElement={<SearchIcon />}
          className="min-w-52 flex-1"
        />

        <Select value={category} onValueChange={setCategory}>
          <SelectTrigger size="sm" className="w-44" aria-label={m.icons.allCategories}>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">{m.icons.allCategories}</SelectItem>
            {iconCategories.map((name) => (
              <SelectItem key={name} value={name}>
                {name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

        <LabelledSegmented label={m.icons.family} values={VARIANTS} value={variant} onChange={setVariant} />
        <LabelledSegmented label={m.icons.size} values={SIZES} value={size} onChange={setSize} />
      </div>

      {active ? (
        <Detail key={active.name} entry={active} size={Number(size)} onClose={() => setSelected('')} />
      ) : null}

      {groups.map(([name, items]) => (
        <section key={name} className="space-y-4">
          <h2 className="flex items-baseline gap-2 text-sm font-semibold text-foreground">
            {name}
            <span className="text-xs font-normal text-muted-foreground">{items.length}</span>
          </h2>

          <div className="grid grid-cols-[repeat(auto-fill,minmax(7rem,1fr))] gap-3">
            {items.map((entry) => (
              <IconCell
                key={entry.name}
                entry={entry}
                variant={variant as VariantFilter}
                size={Number(size)}
                selected={entry.name === selected}
                onSelect={() => setSelected(entry.name === selected ? '' : entry.name)}
              />
            ))}
          </div>
        </section>
      ))}

      {groups.length === 0 ? (
        <p className="text-sm text-muted-foreground">
          {m.icons.empty(query, category === 'all' ? null : category)}
        </p>
      ) : null}
    </div>
  );
}