import { useState } from "react";
import { PAGES, type PageName } from "./lib/constants";
import Home from "./pages/Home";
import Dashboard from "./pages/Dashboard";
import PatientWorkbench from "./pages/PatientWorkbench";
import EpisodeReplay from "./pages/EpisodeReplay";
import PolicyCompare from "./pages/PolicyCompare";
import PrecisionDosing from "./pages/PrecisionDosing";
import TrainingMonitor from "./pages/TrainingMonitor";
import SafetyInspector from "./pages/SafetyInspector";

const PAGE_MAP: Record<PageName, JSX.Element> = {
  Home: <Home />,
  Dashboard: <Dashboard />,
  PatientWorkbench: <PatientWorkbench />,
  EpisodeReplay: <EpisodeReplay />,
  PolicyCompare: <PolicyCompare />,
  PrecisionDosing: <PrecisionDosing />,
  TrainingMonitor: <TrainingMonitor />,
  SafetyInspector: <SafetyInspector />,
};

export default function App() {
  const [page, setPage] = useState<PageName>("Home");

  return (
    <div className="app-shell">
      <aside className="sidebar">
        <div className="brand">POLYGUARD-OPENENV</div>
        <nav>
          {PAGES.map((item) => (
            <button
              key={item}
              className={item === page ? "active" : ""}
              onClick={() => setPage(item)}
            >
              {item}
            </button>
          ))}
        </nav>
      </aside>
      <main className="workspace">{PAGE_MAP[page]}</main>
    </div>
  );
}