import { Outlet, NavLink, useLocation } from "react-router-dom";
import {
  Activity,
  Github,
  Headphones,
  BarChart3,
  Info,
  Home,
} from "lucide-react";
import { cn } from "@/lib/utils";
import WaveformBackground from "./WaveformBackground";
import ThemeToggle from "./ThemeToggle";

const NAV = [
  { to: "/", label: "Home", icon: Home, end: true },
  { to: "/demo", label: "Demo", icon: Headphones },
  { to: "/benchmarks", label: "Benchmarks", icon: BarChart3 },
  { to: "/about", label: "About", icon: Info },
];

export default function Layout() {
  const location = useLocation();
  // Show a subtle accent bar under the nav indicating which page is active.
  return (
    <div className="relative min-h-full">
      <WaveformBackground />

      <div className="relative z-10 flex min-h-screen flex-col">
        {/* ── Header ──────────────────────────────────────────────── */}
        <header className="sticky top-0 z-30 border-b border-line/80 bg-bg/85 backdrop-blur-md">
          <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-3 sm:px-6">
            {/* Brand */}
            <NavLink
              to="/"
              className="group flex items-center gap-2.5 transition hover:opacity-90"
            >
              <span className="relative flex h-9 w-9 items-center justify-center rounded-md border border-cyber/40 bg-cyber/10 text-cyber shadow-cyber">
                <Activity className="h-4 w-4" />
                <span className="absolute inset-0 animate-pulse rounded-md ring-1 ring-cyber/30" />
              </span>
              <div className="flex flex-col leading-tight">
                <span className="font-display text-base font-bold tracking-tight text-ink">
                  ADFD<span className="text-cyber">.</span>
                </span>
                <span className="font-mono text-[9px] uppercase tracking-[0.18em] text-ink-mute">
                  forensic audio
                </span>
              </div>
            </NavLink>

            {/* Nav */}
            <nav className="flex items-center gap-1">
              {NAV.map(({ to, label, icon: Icon, end }) => (
                <NavLink
                  key={to}
                  to={to}
                  end={end}
                  className={({ isActive }) =>
                    cn(
                      "relative flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition",
                      isActive
                        ? "bg-cyber/10 text-cyber"
                        : "text-ink-dim hover:bg-surface-alt hover:text-ink"
                    )
                  }
                >
                  {({ isActive }) => (
                    <>
                      <Icon className="h-3.5 w-3.5" />
                      <span className="hidden sm:inline">{label}</span>
                      {isActive && (
                        <span className="absolute inset-x-2 -bottom-[7px] h-0.5 bg-cyber" />
                      )}
                    </>
                  )}
                </NavLink>
              ))}
              <a
                href="https://github.com"
                target="_blank"
                rel="noreferrer"
                className="ml-1 hidden items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-ink-dim transition hover:text-ink sm:flex"
                aria-label="Source"
              >
                <Github className="h-3.5 w-3.5" />
              </a>
            </nav>
          </div>
        </header>

        {/* Sub-bar showing current path crumbs (subtle) */}
        <div className="hidden border-b border-line/40 bg-bg/40 lg:block">
          <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-1 sm:px-6">
            <div className="flex items-center gap-1.5 font-mono text-[10px] text-ink-mute">
              <span className="text-ink-dim">workspace</span>
              <span>/</span>
              <span className="text-cyber">{location.pathname === "/" ? "home" : location.pathname.slice(1)}</span>
            </div>
            <div className="flex items-center gap-3 font-mono text-[10px] text-ink-mute">
              <span>
                <span className="mr-1 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-cyber" />
                backend live
              </span>
              <span>·</span>
              <span>8 detectors</span>
              <span>·</span>
              <span>meta-LR ensemble</span>
            </div>
          </div>
        </div>

        {/* ── Main ────────────────────────────────────────────────── */}
        <main className="flex-1">
          <Outlet />
        </main>

        {/* ── Footer ──────────────────────────────────────────────── */}
        <footer className="relative z-10 mt-12 border-t border-line/80 bg-bg/85 py-6 text-xs text-ink-dim backdrop-blur-md">
          <div className="mx-auto flex max-w-7xl flex-col items-start justify-between gap-3 px-4 sm:flex-row sm:items-center sm:px-6">
            <div className="font-mono">
              <span className="text-ink-mute">based on</span>{" "}
              <span className="text-ink">
                The Generalization Gap in Audio Deepfake Detection
              </span>
            </div>
            <div className="flex flex-wrap items-center gap-3 font-mono text-ink-mute">
              <span className="inline-flex items-center gap-1.5">
                <span className="h-1.5 w-1.5 rounded-full bg-cyber" />
                live
              </span>
              <span>·</span>
              <span>CPU + GPU ready</span>
              <span>·</span>
              <span>architecture-honest</span>
              <span className="ml-2">
                <ThemeToggle size="sm" showLabel={false} />
              </span>
            </div>
          </div>
        </footer>
      </div>
    </div>
  );
}