"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import clsx from "clsx";
import { Activity, Braces, Database, Eye, Layers, Network, PlayCircle, Radar } from "lucide-react";
import { Brand } from "./Brand";
import { useApi, useLive } from "@/lib/api";

const NAV = [
  { href: "/", label: "Observatory", icon: Radar },
  { href: "/sessions", label: "Sessions", icon: Eye },
  { href: "/entities", label: "Entities", icon: Database },
  { href: "/schemas", label: "Runtime APIs", icon: Braces },
  { href: "/platforms", label: "Connectors", icon: Layers },
  { href: "/jobs", label: "Missions", icon: PlayCircle },
];

export function Shell({ children }: { children: React.ReactNode }) {
  const path = usePathname();
  if (path.startsWith("/access")) return <>{children}</>;
  return (
    <div className="flex min-h-screen">
      <aside className="hidden md:flex w-60 shrink-0 flex-col border-r border-line bg-bg-2/60 backdrop-blur sticky top-0 h-screen">
        <div className="px-5 py-5 border-b border-line">
          <Link href="/">
            <Brand />
          </Link>
        </div>
        <nav className="p-3 space-y-1">
          {NAV.map((n) => {
            const active = n.href === "/" ? path === "/" : path.startsWith(n.href);
            return (
              <Link key={n.href} href={n.href} className={clsx("flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition", active ? "bg-cyan/10 text-cyan" : "text-fg-2 hover:bg-white/5 hover:text-fg")}>
                <n.icon className="h-4 w-4" />
                {n.label}
              </Link>
            );
          })}
        </nav>
        <div className="mt-auto p-4 text-[11px] text-dim leading-relaxed border-t border-line">
          <div className="flex items-center gap-2 mb-2">
            <Network className="h-3.5 w-3.5" /> MacLustr · read-only crawler
          </div>
          Observes only what the authenticated account can legitimately see. No likes, follows, comments.
        </div>
      </aside>
      <div className="flex-1 min-w-0 flex flex-col">
        <TopBar />
        <main className="flex-1 p-4 md:p-6 space-y-6">{children}</main>
      </div>
    </div>
  );
}

function TopBar() {
  const { data } = useApi<{ jobs_running: number; ts: string }>("/health", { refreshMs: 10_000 });
  const { connected, rate } = useLive({ max: 1 });
  return (
    <header className="sticky top-0 z-20 flex items-center gap-4 px-4 md:px-6 h-14 border-b border-line bg-bg/70 backdrop-blur">
      <div className="md:hidden">
        <Brand size="sm" />
      </div>
      <div className="ml-auto flex items-center gap-5 text-xs">
        <span className="flex items-center gap-2 text-fg-2">
          <span className={clsx("relative inline-block h-2 w-2 rounded-full", connected ? "bg-green text-green live-dot" : "bg-dim")} />
          {connected ? "live" : "offline"}
          <span className="mono text-dim">{rate}/min</span>
        </span>
        <span className="flex items-center gap-2 text-fg-2">
          <Activity className="h-3.5 w-3.5 text-amber" />
          <span className="mono">{data?.jobs_running ?? 0}</span> running
        </span>
        <span className="mono text-dim hidden sm:inline">{data?.ts ? new Date(data.ts).toLocaleTimeString("en-CA", { hour12: false }) : ""}</span>
      </div>
    </header>
  );
}