import { readFileSync } from "node:fs";
import type { Metadata } from "next";
import { Suspense } from "react";
import Link from "next/link";
import { getRegistry } from "yt-dlp-transcript-common/jobs/registry";
import { getPaths } from "yt-dlp-transcript-common/lib/paths";
import { getSettings } from "yt-dlp-transcript-common/lib/settings";
import { getLatestChangelogDate } from "yt-dlp-transcript-common/lib/changelog";
import { listSites } from "yt-dlp-transcript-common/lib/site";
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 { ThemeToggle } from "yt-dlp-transcript-common/components/ThemeToggle";
import { BrandMark } from "yt-dlp-transcript-common/components/BrandMark";
import { ICON_PALETTES } from "yt-dlp-transcript-common/lib/brand";
import { AppFrame } from "./components/AppFrame";
import { AutoRefresh } from "./components/AutoRefresh";
import { CommandPalette } from "./components/CommandPalette";
import { ChangelogNavLink } from "./components/ChangelogNavLink";
import { SiteScopeSelect } from "./components/SiteScopeSelect";
import { SiteScopeProvider } from "./components/SiteScopeProvider";
import { readActiveSite } from "./lib/activeSiteServer";
import { Toaster } from "yt-dlp-transcript-common/components/ui/sonner";
import { NAV_GROUPS, type NavLink } from "./lib/nav";
import { CleanableBadge } from "./components/CleanableBadge";
import { JobsBadge } from "./components/SidebarBadges";
import "./globals.css";

export async function generateMetadata(): Promise<Metadata> {
  const settings = getSettings();
  return {
    title: {
      default: settings.adminTitle,
      template: `%s — ${settings.adminTitle}`,
    },
    description: "Editor for yt-dlp-transcript-browser",
  };
}

// NAV_GROUPS now lives in ./lib/nav (shared with the command palette).

function readChangelogLatestDate(): string | null {
  try {
    const source = readFileSync(getPaths().editorChangelogFile, "utf8");
    return getLatestChangelogDate(source);
  } catch {
    return null;
  }
}

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const settings = getSettings();
  const headerLabel = settings.adminTitle;
  const allJobs = getRegistry().list();
  const activeJobs = allJobs.filter(
    (j) => j.status === "running" || j.status === "queued",
  ).length;
  const latestChangelogDate = readChangelogLatestDate();
  const sites = listSites().map((s) => ({
    siteId: s.siteId,
    siteTitle: s.siteTitle,
  }));
  const siteIds = sites.map((s) => s.siteId);
  // THE SITE SCOPE, read once per request from its cookie and supplied to the
  // picker (and anything else that asks) by SiteScopeProvider. A layout has no
  // searchParams, so a `?site=` link is applied by the picker from the URL and
  // by the scoped pages from their own searchParams. See app/lib/activeSite.ts.
  const scope = await readActiveSite(null, siteIds);
  const navItemClass =
    "px-2.5 py-1.5 rounded-md text-foreground/80 hover:text-foreground hover:bg-muted whitespace-nowrap flex items-center gap-2 transition-colors";
  const renderLink = (link: NavLink) => {
    const Icon = link.icon;
    if (link.badgeKey === "changelog") {
      return (
        <ChangelogNavLink
          key={link.href}
          href={link.href}
          label={link.label}
          latestDate={latestChangelogDate}
          className={navItemClass}
          icon={
            <Icon
              className="size-4 shrink-0 text-muted-foreground"
              aria-hidden="true"
            />
          }
        />
      );
    }
    if (link.badgeKey === "cleanable") {
      return (
        <Link key={link.href} href={link.href} className={navItemClass}>
          <Icon className="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
          <span>{link.label}</span>
          {/* Streamed so the nav paints before the number is known, then kept
              live by the shared /api/pulse poller rather than by re-rendering
              this whole layout. See CleanableBadge for why the Suspense
              boundary matters on document loads and does nothing for sibling
              navigation. */}
          <Suspense fallback={null}>
            <CleanableBadge />
          </Suspense>
        </Link>
      );
    }
    // Job pills update client-side from the same poller. Seeded from this
    // render so the first paint is correct; after that they move on their own,
    // which is what makes it safe to skip the tree refresh on routes that
    // don't need one.
    if (link.badgeKey === "jobs") {
      return (
        <Link key={link.href} href={link.href} className={navItemClass}>
          <Icon className="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
          <span>{link.label}</span>
          <JobsBadge seed={activeJobs} />
        </Link>
      );
    }
    return (
      <Link key={link.href} href={link.href} className={navItemClass}>
        <Icon className="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
        <span>{link.label}</span>
      </Link>
    );
  };
  return (
    <html
      lang="en"
      suppressHydrationWarning
      className={`${fontVars} h-full antialiased`}
    >
      <body className="min-h-full flex flex-col md:flex-row bg-background text-foreground">
        <ThemeScript />
        <ThemeProvider>
        <SiteScopeProvider
          activeSite={scope.value}
          fromCookie={scope.stored !== null}
          siteIds={siteIds}
        >
        <AppFrame
          sidebar={
            <aside className="md:w-56 md:shrink-0 md:sticky md:top-0 md:self-start md:h-screen md:overflow-y-auto border-b md:border-b-0 md:border-r border-border bg-card flex flex-col">
              <div className="px-3 py-2.5 md:py-3 md:border-b md:border-border flex items-start justify-between gap-2">
                <div className="min-w-0 flex items-center gap-2.5">
                  {/* The parent mark, beside the operator's title — which is
                      NOT split: adminTitle is free text, not a wordmark. */}
                  <BrandMark
                    palette={ICON_PALETTES.archilyzer}
                    className="size-8 shrink-0"
                  />
                  <div className="min-w-0">
                    <Link
                      href="/"
                      className="font-display text-base font-semibold tracking-tight block leading-tight"
                    >
                      {headerLabel}
                    </Link>
                    <div className="font-mono text-[10px] uppercase tracking-[0.18em] text-muted-foreground mt-0.5">
                      editor
                    </div>
                  </div>
                </div>
                <div className="flex items-center gap-1.5 shrink-0">
                  <ThemeToggle />
                </div>
              </div>
              {/* The picker reads useSearchParams() (a `?site=` link). This
                  layout reads a cookie, so every page renders per request and
                  the hook does not suspend on the server: the fallback is never
                  what the first paint shows. The boundary stays for the
                  production build's missing-Suspense check. */}
              <Suspense fallback={null}>
                <SiteScopeSelect sites={sites} />
              </Suspense>
              <nav className="flex flex-row md:flex-col p-2 gap-1 text-sm overflow-x-auto md:overflow-visible">
                {NAV_GROUPS.map((group) => (
                  <div
                    key={group.label}
                    className="flex flex-row md:flex-col gap-1 md:gap-0.5 items-center md:items-stretch"
                  >
                    <div className="px-2.5 py-1 font-mono text-[10px] uppercase tracking-[0.16em] text-muted-foreground/70 whitespace-nowrap">
                      {group.label}
                    </div>
                    {group.links.map(renderLink)}
                  </div>
                ))}
              </nav>
            </aside>
          }
          extras={
            <>
              <Suspense fallback={null}>
                <CommandPalette />
              </Suspense>
              <Toaster position="bottom-right" />
              {/* Suspense is REQUIRED, not stylistic: AutoRefresh calls
                  useSearchParams() (to avoid starting a refresh on top of an
                  in-flight navigation), and an unwrapped useSearchParams()
                  fails the production build on any statically prerendered
                  route — "/widget/builder" is the one that has no
                  force-dynamic. Same treatment SiteScopeSelect and
                  CommandPalette above already get, and for the same reason. */}
              <Suspense fallback={null}>
                <AutoRefresh
                  intervalMs={settings.autoRefreshIntervalSeconds * 1000}
                />
              </Suspense>
            </>
          }
        >
          {children}
        </AppFrame>
        </SiteScopeProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}