import type { Metadata, Viewport } from "next";
import { notFound } from "next/navigation";
import type { ReactNode } from "react";

import { fontClassNames } from "@/app/fonts";
import { Analytics } from "@/components/Analytics";
import { Footer } from "@/components/Footer";
import { Header } from "@/components/Header";
import { SectionEntrance } from "@/components/SectionEntrance";
import { getT } from "@/lib/content";
import { HTML_LANG, isLocale, LOCALES } from "@/lib/locales";
import { SITE_URL } from "@/lib/site";

import "@/styles/global.css";

/**
 * RRYM / 002 — SULSYS — root layout.
 *
 * The locale segment is the root, so `<html lang>` is always correct for the
 * tree being rendered; `/` is handled by the proxy, which redirects to a
 * locale before any layout runs.
 */

export function generateStaticParams() {
  return LOCALES.map((locale) => ({ locale }));
}

export const dynamicParams = false;

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  themeColor: "#f6f5f1",
  // No dark mode in v1; the footer and the Sulsys band are the dark surfaces.
  colorScheme: "light",
};

export const metadata: Metadata = {
  metadataBase: new URL(SITE_URL),
  // A page title always wins; this is only the fallback shape.
  title: { default: "Nexys System · Sulsys", template: "%s" },
  formatDetection: { telephone: false, address: false, email: false },
};

export default async function LocaleLayout({
  children,
  params,
}: {
  children: ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale: raw } = await params;
  if (!isLocale(raw)) notFound();
  const locale = raw;
  const t = getT(locale);

  return (
    <html lang={HTML_LANG[locale]} className={fontClassNames}>
      <body>
        <a href="#main" className="skip-link">
          {t("nav.skip")}
        </a>
        <Header locale={locale} />
        <main id="main">{children}</main>
        <Footer locale={locale} />
        {/*
          One observer for every band on the page. It renders nothing; it arms
          the entrance on sections that are still below the fold and leaves
          everything else exactly as the server sent it.
        */}
        <SectionEntrance />
        <Analytics />
      </body>
    </html>
  );
}