import "./globals.css";

import type { Metadata } from "next";

import Link from "next/link";

import OmniSearch from "@/components/OmniSearch";

export const metadata: Metadata = {

  title: "SIGHTLINE - Geospatial Intelligence",

  description: "Real public camera & sensor aggregation platform",

};

const NAV: { group: string; items: [string, string, string][] }[] = [

  { group: "Operations", items: [

    ["/", "Command", "◳"],

    ["/wall", "Live Wall", "▣"],

    ["/map", "Live Map", "◉"],

    ["/cameras", "Camera Grid", "▦"],

    ["/satellites", "Satellite Cameras", "✦"],

    ["/recognize", "ALPR Recognition", "◎"],

  ]},

  { group: "Intelligence", items: [

    ["/states", "Nationwide", "⬡"],

    ["/search", "Search", "⌕"],

    ["/profiles", "Profile Engine", "◐"],

    ["/investigations", "Investigations", "❒"],

    ["/watchlists", "Watchlists", "◈"],

    ["/alerts", "Alerts", "▲"],

  ]},

  { group: "System", items: [

    ["/import", "Ingest", "↥"],

    ["/audit", "Audit Log", "≣"],

    ["/admin", "Admin", "⚙"],

  ]},

];

export default function RootLayout({ children }: { children: React.ReactNode }) {

  return (

    <html lang="en">

      <body>

        <div className="shell">

          <aside className="sidebar">

            <div className="brand">

              <div className="logo"><span className="dot" /> SIGHT<b>LINE</b></div>

              <small>Geospatial Intelligence</small>

            </div>

            <nav className="nav">

              {NAV.map((g) => (

                <div key={g.group}>

                  <div className="group">{g.group}</div>

                  {g.items.map(([href, label, ico]) => (

                    <Link key={href} href={href}><span className="ico">{ico}</span>{label}</Link>

                  ))}

                </div>

              ))}

            </nav>

          </aside>

          <div className="main">

            <div className="topbar">

              <OmniSearch />

              <div style={{ flex: 1 }} />

              <span className="badge ok"><span className="live-dot" /> LIVE</span>

            </div>

            <div className="content">{children}</div>

          </div>

        </div>

      </body>

    </html>

  );

}