import { useState, useEffect } from "react";
import { Routes, Route } from "react-router-dom";
import { Sidebar, Topbar, CommandPalette, SplashScreen } from "./components/index.js";
import { AuthGate } from "./components/AuthGate.js";
import { ExportDialog } from "./features/export/ExportDialog.js";
import { AISidebar } from "./features/ai/AISidebar.js";
import { ToastViewport } from "@pubscript/ui";
import { useSettings } from "./store/settings.js";
import Write from "./routes/Write.js";
import { Characters } from "./routes/Characters.js";
import { Plot } from "./routes/Plot.js";
import { Timeline } from "./routes/Timeline.js";
import { Whiteboard } from "./routes/Whiteboard.js";
import { AI } from "./routes/AI.js";
import { Projects } from "./routes/Projects.js";
import { Settings } from "./routes/Settings.js";
import { Admin } from "./routes/Admin.js";

const NAV = [
  { to: "/", label: "Write", icon: "✎", end: true },
  { to: "/characters", label: "Entities", icon: "👥", end: false },
  { to: "/plot", label: "Plot", icon: "🗺", end: false },
  { to: "/timeline", label: "Timeline", icon: "📅", end: false },
  { to: "/whiteboard", label: "Whiteboard", icon: "🧩", end: false },
  { to: "/projects", label: "Projects", icon: "📁", end: false },
  { to: "/settings", label: "Settings", icon: "⚙", end: false },
  { to: "/admin", label: "Admin", icon: "🛠", end: false },
];

export default function App() {
  const [paletteOpen, setPaletteOpen] = useState(false);
  const [exportOpen, setExportOpen] = useState(false);
  const navCollapsed = useSettings((s) => s.navCollapsed);
  const aiSidebarOpen = useSettings((s) => s.aiSidebarOpen);
  const focusMode = useSettings((s) => s.focusMode);

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        setPaletteOpen((o) => !o);
      }
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, []);

  return (
    <AuthGate>
      <div className={`ps-app${navCollapsed ? " is-nav-collapsed" : ""}${aiSidebarOpen ? " is-ai-open" : ""}${focusMode ? " is-focus-mode" : ""}`}>
        <SplashScreen />
        <Sidebar nav={NAV} />
        <Topbar onOpenPalette={() => setPaletteOpen(true)} onOpenExport={() => setExportOpen(true)} />
        <div className="ps-workspace-row">
          <main className="ps-main">
            <Routes>
              <Route path="/" element={<Write />} />
              <Route path="/characters" element={<Characters />} />
              <Route path="/plot" element={<Plot />} />
              <Route path="/timeline" element={<Timeline />} />
              <Route path="/whiteboard" element={<Whiteboard />} />
              <Route path="/ai" element={<AI />} />
              <Route path="/projects" element={<Projects />} />
              <Route path="/settings" element={<Settings />} />
              <Route path="/admin" element={<Admin />} />
              <Route path="*" element={<Write />} />
            </Routes>
          </main>
          {aiSidebarOpen && <AISidebar />}
        </div>

        <CommandPalette open={paletteOpen} onClose={() => setPaletteOpen(false)} nav={NAV} />
        <ExportDialog open={exportOpen} onClose={() => setExportOpen(false)} />
        <ToastViewport />
      </div>
    </AuthGate>
  );
}