import type { ReactNode } from 'react';
import { PACKAGE } from '~/chrome/lib/package-name';
import { CopyBlock } from '~/chrome/ui/copy';
import { useMessages } from '../i18n';
import { entries } from '../registry';
import { Link } from '../router';

/**
 * What the kit is, and how to consume it.
 *
 * Ported from `docs/Introduction.mdx`, which was a Storybook docs-only page.
 * Storybook is optional now, so this had to move somewhere that always exists —
 * and moving it made it better than a copy: the install snippet is built from
 * the real package name, and the component count is the registry's rather than
 * a number in prose that goes stale.
 */

function Section({ title, children }: { title: string; children: ReactNode }) {
  return (
    <section className="space-y-3">
      <h2 className="t-h4 text-foreground">{title}</h2>
      {children}
    </section>
  );
}

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

  return (
    <article className="mx-auto max-w-3xl space-y-10 px-8 py-10">
      <header className="space-y-4">
        <p className="t-overline text-muted-foreground">{m.header.foundations}</p>
        <h1 className="t-h2 text-foreground">{m.introduction.title}</h1>
        <p className="t-body max-w-prose text-muted-foreground">{m.introduction.lead}</p>
      </header>

      <Section title={m.introduction.install.title}>
        <p className="max-w-prose text-sm text-muted-foreground">{m.introduction.install.body}</p>
        <CopyBlock
          code={`npm install ${PACKAGE}`}
          title={m.introduction.install.copyInstall}
        />
        {/* The stylesheet import is once, at the app root; the component import
            is per component. Two blocks rather than one, because they belong in
            two different files and pasting them together is the mistake. */}
        <CopyBlock
          code={`// app entry, once\nimport '${PACKAGE}/styles.css';\n\n// anywhere\nimport { Button } from '${PACKAGE}/button';`}
          title={m.introduction.install.copyUsage}
        />
      </Section>

      <Section title={m.introduction.structure.title}>
        <dl className="space-y-4">
          <div>
            <dt className="text-sm font-semibold text-foreground">
              {m.introduction.structure.folders.term}
            </dt>
            <dd className="max-w-prose text-sm text-muted-foreground">
              {m.introduction.structure.folders.def}
            </dd>
          </div>
          <div>
            <dt className="text-sm font-semibold text-foreground">
              {m.introduction.structure.tokens.term}
            </dt>
            <dd className="max-w-prose text-sm text-muted-foreground">
              {m.introduction.structure.tokens.def}
            </dd>
          </div>
          <div>
            <dt className="text-sm font-semibold text-foreground">
              {m.introduction.structure.styles.term}
            </dt>
            <dd className="max-w-prose text-sm text-muted-foreground">
              {m.introduction.structure.styles.def}
            </dd>
          </div>
          <div>
            <dt className="text-sm font-semibold text-foreground">
              {m.introduction.structure.deps.term}
            </dt>
            <dd className="max-w-prose text-sm text-muted-foreground">
              {m.introduction.structure.deps.def}
            </dd>
          </div>
        </dl>
      </Section>

      <Section title={m.introduction.usingSite.title}>
        <ul className="max-w-prose list-disc space-y-2 pl-5 text-sm text-muted-foreground">
          <li>
            <Link to="/" className="font-medium text-foreground hover:underline">
              {m.nav.overview}
            </Link>{' '}
            — {m.introduction.usingSite.overview(entries.length)}
          </li>
          <li>
            <Link to="/tokens" className="font-medium text-foreground hover:underline">
              {m.nav.tokens}
            </Link>{' '}
            — {m.introduction.usingSite.tokens}
          </li>
          <li>
            <Link to="/icons" className="font-medium text-foreground hover:underline">
              {m.nav.icons}
            </Link>{' '}
            — {m.introduction.usingSite.icons}
          </li>
          <li>
            <Link to="/parity" className="font-medium text-foreground hover:underline">
              {m.nav.parity}
            </Link>{' '}
            — {m.introduction.usingSite.parity}
          </li>
          <li>{m.introduction.usingSite.toolbar}</li>
          <li>{m.introduction.usingSite.copy}</li>
        </ul>
      </Section>

      <Section title={m.introduction.adding.title}>
        <p className="max-w-prose text-sm text-muted-foreground">{m.introduction.adding.body}</p>
        <CopyBlock code="/ui-kit-component <name>" title={m.introduction.adding.copySkill} />
        <p className="max-w-prose text-sm text-muted-foreground">{m.introduction.adding.byHand}</p>
      </Section>
    </article>
  );
}