mega-plant/app/layout.tsx

import "./globals.css";
import type { Metadata } from "next";
import Link from "next/link";
import {
  LayoutDashboard,
  TrendingUp,
  Wrench,
  Wallet,
  LineChart as LineChartIcon,
  Receipt,
  MapPin,
  Boxes,
} from "lucide-react";
import { Sidebar, MobileNav, type NavItem } from "@/components/Sidebar";
import { ThemeProvider } from "@/components/ThemeProvider";
import { ThemeToggle } from "@/components/ThemeToggle";
import { GlobalSearch } from "@/components/GlobalSearch";
import { getAssets } from "@/lib/data";

// The layout itself reads PocketBase (GlobalSearch needs the asset list), so it
// must be dynamic too — otherwise Next prerenders the built-in /_not-found page,
// which inherits this layout, and the build fails without a reachable database.
export const dynamic = "force-dynamic";

export const metadata: Metadata = {
  title: "Mega Plant Dashboard",
  description: "Mega Plant cost & P&L dashboard",
  manifest: "/manifest.json",
  themeColor: "#30638E",
  appleWebApp: {
    title: "Mega Plant",
    capable: true,
    statusBarStyle: "default",
  },
  icons: {
    icon: [
      { url: "/icons/favicon-32.png", sizes: "32x32" },
      { url: "/icons/icon-192.png", sizes: "192x192" },
      { url: "/icons/icon-512.png", sizes: "512x512" },
    ],
    apple: [
      { url: "/icons/icon-192.png", sizes: "192x192" },
      { url: "/icons/icon-512.png", sizes: "512x512" },
    ],
  },
};

const navItems: NavItem[] = [
  {
    kind: "group",
    label: "Dashboard",
    icon: <LayoutDashboard className="w-4 h-4" />,
    children: [
      { href: "/", label: "Overview" },
      { href: "/sites", label: "Sites" },
    ],
  },
  {
    kind: "group",
    label: "Plant Register",
    icon: <Boxes className="w-4 h-4" />,
    children: [
      { href: "/plant", label: "Register" },
      { href: "/plant/map", label: "Plant Map" },
    ],
  },
  {
    kind: "group",
    label: "Income",
    icon: <TrendingUp className="w-4 h-4" />,
    children: [
      { href: "/income", label: "Overview" },
      { href: "/income/invoices", label: "Invoices" },
    ],
  },
  { kind: "link", href: "/running", label: "Running Costs", icon: <Wrench className="w-4 h-4" /> },
  {
    kind: "group",
    label: "Expenses",
    icon: <Wallet className="w-4 h-4" />,
    children: [
      { href: "/expenses", label: "Overview" },
      { href: "/expenses/vehicles", label: "Vehicle Costs" },
      { href: "/expenses/finance", label: "Finance (Bastion)" },
      { href: "/expenses/personnel", label: "Personnel" },
      { href: "/expenses/subscriptions", label: "Subscriptions" },
      { href: "/expenses/rent", label: "Rent & Utilities" },
      { href: "/expenses/petty-cash", label: "Cash Floats" },
    ],
  },
  { kind: "link", href: "/overheads", label: "Overheads Roll-up", icon: <Receipt className="w-4 h-4" /> },
  { kind: "link", href: "/charts", label: "Machine Charts", icon: <LineChartIcon className="w-4 h-4" /> },
];

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const assets = await getAssets();
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        {/* Part 4: Next 16 emits apple-mobile-web-app-status-bar-style but NOT apple-mobile-web-app-capable.
            Without this tag, iOS Add-to-Home-Screen opens in Safari instead of standalone. */}
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-title" content="Mega Plant" />
        <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32.png" />
        <link rel="icon" type="image/png" sizes="64x64" href="/icons/favicon.png" />
        <link rel="apple-touch-icon" href="/icons/icon-192.png" />
        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

        {/* Umami analytics — website id 86d0bd41-e705-4677-af2d-a4228e7c4b95 */}
        <script
          defer
          src="https://umami-vmyngbmelll45wokwr270wbx.169.239.180.130.sslip.io/script.js"
          data-website-id="86d0bd41-e705-4677-af2d-a4228e7c4b95"
        />
      </head>
      <body className="min-h-screen">
        <ThemeProvider>
        {/* z-[1100], not z-30: Leaflet's control panes are z-index 1000 and
            live in the root stacking context, so the old z-30 header lost and
            the Plant Map scrolled straight over it. Must stay above 1000, and
            below the mobile nav drawer (z-[1200]) in Sidebar.tsx. */}
          <header className="sticky top-0 z-[1100] h-16 bg-white/80 dark:bg-bg/80 backdrop-blur border-b border-gray-200 dark:border-border">
            {/* gap-2, not gap-3: the 44px trigger eats ~32px of the header row
                after its -ml-3, and the search field is the only thing that
                yields. Recovering 4px per gap keeps it usable at 375px. */}
            <div className="flex items-center gap-2 sm:gap-6 px-4 sm:px-6 h-full">
              {/* The hamburger must live HERE, in the full-bleed header — not in
                  the content flex row below, where it indented every page on
                  mobile. See MobileNav for the portal detail. */}
              <MobileNav items={navItems} />

              <Link href="/" className="flex items-center gap-2 shrink-0">
                <img
                  src="/brand/logo.png"
                  alt="Mega Plant"
                  className="w-9 h-9 rounded-xl object-contain bg-white dark:bg-bg shadow-sm"
                />
                <div className="leading-tight hidden sm:block">
                  <div className="text-sm font-semibold text-[#003D5B] dark:text-white">Mega Plant</div>
                  <div className="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider">Overheads 2026</div>
                </div>
              </Link>

              <GlobalSearch assets={assets.map((a) => ({
                id: a.id, code: a.code, name: a.name, category: a.category, supplier: a.supplier,
              }))} />

              <div className="flex items-center gap-3 shrink-0">
                <div className="hidden md:flex items-center gap-2 px-3 py-1.5 rounded-xl bg-gradient-to-br from-[#30638E] to-[#003D5B] text-white shadow-lg shadow-blue-900/20">
                  <span className="text-xs uppercase tracking-wider text-white/70">FY</span>
                  <span className="text-sm font-semibold">2026</span>
                </div>
                <ThemeToggle />
              </div>
            </div>
          </header>

          <div className="flex">
            <Sidebar items={navItems} />
            <main className="flex-1 min-w-0">{children}</main>
          </div>
        </ThemeProvider>
      </body>
    </html>
  );
}