import { createContext, useContext, useEffect, useState, type FormEvent } from "react";
import { NavLink, Navigate, Route, Routes, useLocation, useNavigate } from "react-router";
import { api, UNAUTH_EVENT, type Me } from "./api";
import { useTheme } from "./hooks";
import { Loading } from "./components/ui";
import Login from "./pages/Login";
import Overview from "./pages/Overview";
import Apis from "./pages/Apis";
import ApiDetail from "./pages/ApiDetail";
import AkpDetail from "./pages/AkpDetail";
import GraphPage from "./pages/GraphPage";
import Executions from "./pages/Executions";
import ExecutionDetail from "./pages/ExecutionDetail";
import Credentials from "./pages/Credentials";
import Policy from "./pages/Policy";
import Lineage from "./pages/Lineage";
import DatasetDetail from "./pages/DatasetDetail";
import DebtPage from "./pages/Debt";
import Projects from "./pages/Projects";
import ProjectDetail from "./pages/ProjectDetail";
import Settings from "./pages/Settings";
import Operations from "./pages/Operations";
import SearchPage from "./pages/Search";
import VersionDetail from "./pages/VersionDetail";
import EndpointDetail from "./pages/EndpointDetail";

export const MeContext = createContext<{ me: Me | null; refresh: () => void }>({ me: null, refresh: () => {} });
export const useMe = () => useContext(MeContext);

const NAV: { group: string; items: { to: string; label: string }[] }[] = [
  { group: "Knowledge", items: [{ to: "/", label: "Overview" }, { to: "/apis", label: "API Atlas" }, { to: "/graph", label: "Knowledge Graph" }] },
  { group: "Execution", items: [{ to: "/executions", label: "Execution Observatory" }, { to: "/credentials", label: "Credential Vault" }, { to: "/policy", label: "Policy Center" }] },
  { group: "Research", items: [{ to: "/lineage", label: "Research Lineage" }, { to: "/debt", label: "Knowledge Debt" }] },
  { group: "Admin", items: [{ to: "/projects", label: "Agents & Projects" }, { to: "/operations", label: "Operations" }, { to: "/settings", label: "Settings" }] },
];

function Nav({ onNavigate }: { onNavigate?: () => void }) {
  return (
    <div className="nav">
      {NAV.map((g) => (<div key={g.group}><div className="group">{g.group}</div>{g.items.map((it) => <NavLink key={it.to} to={it.to} end={it.to === "/"} onClick={onNavigate}>{it.label}</NavLink>)}</div>))}
    </div>
  );
}

function Shell({ me, refresh, children }: { me: Me; refresh: () => void; children: React.ReactNode }) {
  const [open, setOpen] = useState(false);
  const [q, setQ] = useState("");
  const nav = useNavigate();
  const loc = useLocation();
  const { theme, toggle } = useTheme();
  useEffect(() => { setOpen(false); }, [loc.pathname]);
  const submit = (e: FormEvent) => { e.preventDefault(); if (q.trim()) nav(`/search?q=${encodeURIComponent(q.trim())}`); };
  const logout = async () => { await api("auth/logout", { method: "POST" }).catch(() => {}); refresh(); };
  return (
    <div className="app">
      <header className="topbar">
        <button className="iconbtn hamburger" aria-label="Open navigation" aria-expanded={open} aria-controls="drawer" onClick={() => setOpen(true)}>☰</button>
        <NavLink to="/" className="brand">AKOS</NavLink>
        <form onSubmit={submit} role="search"><label htmlFor="q" className="sr-only">Search knowledge</label><input id="q" placeholder="Search APIs, endpoints, variables…" value={q} onChange={(e) => setQ(e.target.value)} /></form>
        <button className="iconbtn" aria-label="Toggle dark mode" title={`theme: ${theme}`} onClick={toggle}>{theme === "dark" ? "☀" : "☾"}</button>
        <span className="userbox">{me.email} · {me.role}</span>
        <button className="btn sm" onClick={logout}>Logout</button>
      </header>
      <div className="body">
        <aside className="sidebar" aria-label="Main navigation"><Nav /></aside>
        <div id="drawer" className={`drawer ${open ? "open" : ""}`} aria-hidden={!open}>
          <div className="scrim" onClick={() => setOpen(false)} />
          <nav aria-label="Main navigation"><div className="row between" style={{ marginBottom: 8 }}><b>AKOS</b><button className="iconbtn" aria-label="Close navigation" onClick={() => setOpen(false)}>✕</button></div><Nav onNavigate={() => setOpen(false)} /><div className="hint" style={{ marginTop: 12 }}>{me.email}</div></nav>
        </div>
        <main className="main">{children}</main>
      </div>
    </div>
  );
}

export default function App() {
  const [me, setMe] = useState<Me | null | undefined>(undefined);
  const [tick, setTick] = useState(0);
  const refresh = () => setTick((t) => t + 1);
  useEffect(() => { api<Me>("auth/me", { noRedirect: true }).then(setMe).catch(() => setMe(null)); }, [tick]);
  useEffect(() => { const h = () => setMe(null); window.addEventListener(UNAUTH_EVENT, h); return () => window.removeEventListener(UNAUTH_EVENT, h); }, []);
  const loc = useLocation();
  if (me === undefined) return <div className="login"><Loading what="Connecting to AKOS" /></div>;
  if (!me) return <Routes><Route path="/login" element={<Login onLogin={refresh} />} /><Route path="*" element={<Navigate to={`/login?next=${encodeURIComponent(loc.pathname + loc.search)}`} replace />} /></Routes>;
  return (
    <MeContext.Provider value={{ me, refresh }}>
      <Shell me={me} refresh={refresh}>
        <Routes>
          <Route path="/login" element={<Navigate to="/" replace />} />
          <Route path="/" element={<Overview />} />
          <Route path="/apis" element={<Apis />} />
          <Route path="/apis/:id" element={<ApiDetail />} />
          <Route path="/versions/:id" element={<VersionDetail />} />
          <Route path="/endpoints/:id" element={<EndpointDetail />} />
          <Route path="/akps/:id" element={<AkpDetail />} />
          <Route path="/graph" element={<GraphPage />} />
          <Route path="/executions" element={<Executions />} />
          <Route path="/executions/:id" element={<ExecutionDetail />} />
          <Route path="/credentials" element={<Credentials />} />
          <Route path="/policy" element={<Policy />} />
          <Route path="/lineage" element={<Lineage />} />
          <Route path="/datasets/:id" element={<DatasetDetail />} />
          <Route path="/debt" element={<DebtPage />} />
          <Route path="/projects" element={<Projects />} />
          <Route path="/projects/:id" element={<ProjectDetail />} />
          <Route path="/settings" element={<Settings />} />
          <Route path="/operations" element={<Operations />} />
          <Route path="/search" element={<SearchPage />} />
          <Route path="*" element={<div className="empty">Page not found.</div>} />
        </Routes>
      </Shell>
    </MeContext.Provider>
  );
}