import type { Metadata, Viewport } from "next";
import { fontVars } from "yt-dlp-transcript-common/styles/fonts";
import { ThemeScript } from "yt-dlp-transcript-common/components/ThemeScript";
import { ThemeProvider } from "yt-dlp-transcript-common/components/ThemeProvider";
import { HOMEPAGE_DEFAULT_BASE } from "yt-dlp-transcript-common/lib/themeConfig";
import { BASE_GROUNDS, DEFAULT_ACCENT } from "yt-dlp-transcript-common/lib/brand";
import {
  PROJECT_NAME,
  PROJECT_TAGLINE,
  PROJECT_URL,
} from "yt-dlp-transcript-common/lib/project";
import { ICON_METADATA } from "yt-dlp-transcript-common/lib/brandIconFiles";
import Header from "./components/Header";
import Footer from "./components/Footer";
import "./globals.css";

// PRODUCT identity, not the operator's. This used to read `currentHomepage()`,
// the editable config in sites/_homepage/homepage.json — correct when this was
// "our hub", wrong now that it is the software's own site. One visible
// consequence: the meta description no longer inherits the operator's
// corpus-flavoured blurb. The operator's naming still governs /stats/ and the
// footer's social links.
export const metadata: Metadata = {
  metadataBase: new URL(PROJECT_URL),
  title: {
    default: `${PROJECT_NAME} — ${PROJECT_TAGLINE}`,
    template: `%s — ${PROJECT_NAME}`,
  },
  description:
    "Archilyzer downloads a channel's back catalogue, transcribes it on your " +
    "own machine, and builds a static, searchable site you host yourself.",
  // Rendered at build by app/icons/[file]/route.ts — the parent mark.
  icons: ICON_METADATA,
  openGraph: {
    type: "website",
    siteName: PROJECT_NAME,
    title: `${PROJECT_NAME} — ${PROJECT_TAGLINE}`,
    description:
      "Self-hosted video archiving: download a back catalogue, transcribe it " +
      "locally, publish a static site that is searchable to the second.",
    url: PROJECT_URL,
    // No purpose-built OG image yet; the app icon is honest and legible at
    // card size. A real one is a follow-up, not a placeholder to invent.
    images: [{ url: "/icons/icon-512.png", width: 512, height: 512 }],
  },
  twitter: { card: "summary" },
};

// Browser chrome continues the page's ground (the dark base the site opens
// on), not an accent; the pre-paint ThemeScript follows a reader's other base.
export function generateViewport(): Viewport {
  return { themeColor: BASE_GROUNDS.dark };
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    // Dark is rendered on the server too (`.dark` + data-base), so a reader
    // with no JS, or before the pre-paint script, gets this site's own base
    // rather than the light `:root` fallback. ThemeScript then applies a
    // reader's stored base before paint, and ThemeProvider re-asserts it after
    // hydration (which does not patch <html>'s attributes).
    <html
      lang="en"
      suppressHydrationWarning
      className={`${fontVars} h-full antialiased dark`}
      data-base="dark"
      data-accent={DEFAULT_ACCENT}
    >
      <body className="min-h-full flex flex-col bg-[var(--background)] text-[var(--foreground)] font-sans selection:bg-[var(--brand-soft)] selection:text-[var(--foreground)]">
        {/* The project's own site opens on the dark base in Signal, the
            family's accent. A reader cycles the base with the header's toggle;
            the accent is always Signal, whatever this origin's storage holds. */}
        <ThemeScript defaultBase={HOMEPAGE_DEFAULT_BASE} />
        <ThemeProvider defaultBase={HOMEPAGE_DEFAULT_BASE} siteAccent={DEFAULT_ACCENT}>
          <Header />
          <main className="flex-1 w-full">{children}</main>
          <Footer />
        </ThemeProvider>
      </body>
    </html>
  );
}