import { useState, lazy, Suspense } from "react";

const VisualizerApp = lazy(() => import("./visualizer/VisualizerApp"));
const ExperimentsApp = lazy(() => import("./experiments/ExperimentsApp"));

type PageId = "experiments" | "visualizer";

const PAGES: { id: PageId; label: string }[] = [
  { id: "experiments", label: "Experiments" },
  { id: "visualizer", label: "Visualizer" },
];

export default function App() {
  const [activePage, setActivePage] = useState<PageId>("experiments");

  return (
    <div className="h-screen flex flex-col bg-gray-950 text-gray-100">
      {/* Top navigation bar */}
      <div className="flex items-center border-b border-gray-700 bg-gray-900 px-4 shrink-0">
        <span className="text-sm font-semibold text-gray-300 mr-6 py-2.5">
          Research Dashboard
        </span>
        {PAGES.map((page) => (
          <button
            key={page.id}
            onClick={() => setActivePage(page.id)}
            className={`px-4 py-2.5 text-sm font-medium border-b-2 transition-colors ${
              activePage === page.id
                ? "border-cyan-500 text-cyan-400"
                : "border-transparent text-gray-500 hover:text-gray-300"
            }`}
          >
            {page.label}
          </button>
        ))}
        <div className="ml-auto text-xs text-gray-600 px-3">
          reasoning-degeneration-dev
        </div>
      </div>

      {/* Active page */}
      <div className="flex-1 overflow-hidden">
        <Suspense
          fallback={
            <div className="flex items-center justify-center h-full text-gray-500">
              Loading...
            </div>
          }
        >
          {activePage === "experiments" && <ExperimentsApp />}
          {activePage === "visualizer" && <VisualizerApp />}
        </Suspense>
      </div>
    </div>
  );
}