"use client";

import { usePathname } from "next/navigation";
import Link from "next/link";
import {
  IconArrowLeft,
  IconArticle,
  IconBook,
  IconBriefcase,
  IconChevronRight,
  IconTag,
  type TablerIcon,
} from "@tabler/icons-react";

import { Logo } from "@/components/shared/logo";
import { defaultLocale, locales, type Locale } from "@/lib/i18n";

// 404 copy is kept inline (not in the shared dictionaries) so this boundary
// stays self-contained and renders without route params.
const COPY: Record<
  Locale,
  {
    title: string;
    subtitle: string;
    popular: string;
    back: string;
    links: { name: string; description: string }[];
  }
> = {
  en: {
    title: "This page does not exist",
    subtitle: "Sorry, we couldn't find the page you were looking for.",
    popular: "Popular pages",
    back: "Back to home",
    links: [
      {
        name: "Documentation",
        description: "Guides, API reference and quickstarts.",
      },
      {
        name: "Blog",
        description: "Playbooks on technical SEO and AI search.",
      },
      {
        name: "Pricing",
        description: "Simple plans with a 14 day free trial.",
      },
      { name: "Services", description: "Done-for-you SEO and WordPress work." },
    ],
  },
  fr: {
    title: "Cette page n'existe pas",
    subtitle: "Désolé, nous n'avons pas trouvé la page que vous cherchez.",
    popular: "Pages populaires",
    back: "Retour à l'accueil",
    links: [
      {
        name: "Documentation",
        description: "Guides, référence API et démarrage rapide.",
      },
      {
        name: "Blog",
        description: "Tactiques de SEO technique et de recherche IA.",
      },
      {
        name: "Tarifs",
        description: "Des offres simples avec 14 jours d'essai gratuit.",
      },
      { name: "Services", description: "SEO et WordPress réalisés pour vous." },
    ],
  },
};

const LINK_META: { icon: TablerIcon; path: string }[] = [
  { icon: IconBook, path: "/docs" },
  { icon: IconArticle, path: "/blog" },
  { icon: IconTag, path: "/pricing" },
  { icon: IconBriefcase, path: "/services" },
];

function resolveLang(pathname: string): Locale {
  const segment = pathname.split("/")[1] ?? "";
  return (locales as readonly string[]).includes(segment)
    ? (segment as Locale)
    : defaultLocale;
}

export default function NotFound() {
  const pathname = usePathname();
  const lang = resolveLang(pathname ?? "");
  const t = COPY[lang];
  const links = t.links.map((link, i) => ({
    ...link,
    icon: LINK_META[i].icon,
    href: `/${lang}${LINK_META[i].path}`,
  }));

  return (
    <div className="flex min-h-[100svh] flex-col justify-center px-6 py-16">
      <div className="mx-auto w-full max-w-2xl">
        <div className="flex justify-center">
          <Logo lang={lang} />
        </div>

        <div className="mt-16 text-center sm:mt-20">
          <p className="text-brand-orange text-base font-semibold">404</p>
          <h1 className="text-ink-1 mt-4 text-4xl font-bold tracking-tight text-balance sm:text-5xl">
            {t.title}
          </h1>
          <p className="text-ink-3 mt-5 text-lg text-pretty">{t.subtitle}</p>
        </div>

        <div className="mx-auto mt-14 max-w-lg">
          <h2 className="sr-only">{t.popular}</h2>
          <ul
            role="list"
            className="border-hairline divide-hairline -mt-6 divide-y border-b"
          >
            {links.map((link) => (
              <li key={link.href} className="relative flex gap-x-5 py-5">
                <div className="bg-surface-2 ring-hairline flex size-10 flex-none items-center justify-center rounded-lg ring-1">
                  <link.icon aria-hidden className="text-brand-orange size-5" />
                </div>
                <div className="flex-auto">
                  <h3 className="text-ink-1 text-sm font-semibold">
                    <Link href={link.href}>
                      <span aria-hidden className="absolute inset-0" />
                      {link.name}
                    </Link>
                  </h3>
                  <p className="text-ink-4 mt-1 text-sm">{link.description}</p>
                </div>
                <div className="flex-none self-center">
                  <IconChevronRight aria-hidden className="text-ink-4 size-5" />
                </div>
              </li>
            ))}
          </ul>

          <div className="mt-10 flex justify-center">
            <Link
              href={`/${lang}`}
              className="text-brand-orange inline-flex items-center gap-2 text-sm font-semibold hover:underline"
            >
              <IconArrowLeft className="size-4" aria-hidden />
              {t.back}
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}