import { Link, useLocation } from 'react-router-dom';
import { ArrowRight } from 'lucide-react';

import { StatusPill } from '@/components/site/EnvironmentPicker';
import { allDemos, lineup, pad2, REPO_URL, routes } from '@/content/lineup';
import * as s from '@/content/styles';
import { pageTitle, useSeo } from '@/lib/seo';

/**
 * A 404 with somewhere to go.
 *
 * The destinations are read from the registry and the lineup rather than
 * hard-coded, so this page cannot become the one place on the site that still
 * links to a demo we removed.
 */
export default function NotFound() {
  const { pathname } = useLocation();
  // Deliberately no canonical: this component renders at every wrong URL there
  // will ever be, and a canonical pointing at one of them would ask a crawler
  // to index the set. `scripts/prerender.mjs` writes `noindex` into 404.html
  // for the same reason.
  useSeo({
    title: pageTitle('Page not found'),
    description:
      'That page does not exist. Every demo on this site is a directory in the repository, so a missing one is usually a renamed slug.',
  });
  const topVerticals = lineup.slice(0, 4);

  return (
    <main className={`${s.shell} py-16 sm:py-24`}>
      <p className={s.label}>404</p>
      <h1 className={`${s.h1} mt-3`}>That page isn’t here.</h1>
      <p className={`${s.lede} mt-4`}>
        Nothing is served at{' '}
        <code className="break-all font-mono text-mono-data text-fg">{pathname}</code>. Either the
        link is old or we moved something. Here is everything this site has.
      </p>

      <div className="mt-8 flex flex-col gap-3 sm:flex-row">
        <Link className={s.btnPrimary} to={routes.home}>
          Start at the beginning
        </Link>
        <Link className={s.btnSecondary} to={routes.gallery}>
          Every environment
        </Link>
      </div>

      <div className="mt-12 grid gap-8 sm:grid-cols-2">
        <nav aria-labelledby="nf-demos">
          <h2 className={s.label} id="nf-demos">
            Environments · {pad2(allDemos.length)}
          </h2>
          <ul className="mt-3 divide-y divide-border border-y border-border">
            {allDemos.map((demo) => (
              <li key={demo.slug}>
                <Link
                  className="tap flex items-center justify-between gap-3 py-3 text-ui font-medium text-fg transition-colors duration-1 ease-enter hover:text-accent-fg"
                  to={routes.demo(demo.slug)}
                >
                  {demo.title}
                  <StatusPill status={demo.status} />
                </Link>
              </li>
            ))}
            {allDemos.length === 0 ? (
              <li className={`${s.small} py-3`}>No environments are registered yet.</li>
            ) : null}
          </ul>
        </nav>

        <nav aria-labelledby="nf-verticals">
          <h2 className={s.label} id="nf-verticals">
            The lineup · {pad2(lineup.length)}
          </h2>
          <ul className="mt-3 divide-y divide-border border-y border-border">
            {topVerticals.map((v) => (
              <li key={v.slug}>
                <Link
                  className="tap flex items-center gap-3 py-3 text-ui font-medium text-fg transition-colors duration-1 ease-enter hover:text-accent-fg"
                  to={routes.vertical(v.slug)}
                >
                  <span className="font-mono text-label uppercase text-muted">{pad2(v.rank)}</span>
                  {v.title}
                </Link>
              </li>
            ))}
            <li>
              <Link className={`${s.navLink} py-3`} to={routes.home}>
                All {lineup.length}
                <ArrowRight aria-hidden="true" className="size-3.5" />
              </Link>
            </li>
          </ul>
        </nav>
      </div>

      <div className="card mt-12 p-4 sm:p-5">
        <h2 className={s.h3}>Looking for the numbers?</h2>
        <p className={`${s.prose} mt-2`}>
          What is measured, what is cited from elsewhere, and what we have deliberately not measured
          all live on one page.
        </p>
        <div className="mt-4 flex flex-col gap-3 sm:flex-row">
          <Link className={s.btnSecondary} to={routes.honesty}>
            Honesty
          </Link>
          <a className={s.btnSecondary} href={REPO_URL} rel="noreferrer noopener" target="_blank">
            The source
          </a>
        </div>
      </div>
    </main>
  );
}
