import { Sidebar } from './Sidebar';
import { TopBar } from './TopBar';
import { ToastContainer } from '@/components/common/ToastContainer';
import { useGameStore } from '@/store';
import { DashboardPage } from '@/pages/DashboardPage';
import { InfrastructurePage } from '@/pages/InfrastructurePage';
import { ResearchPage } from '@/pages/ResearchPage';
import { ModelsPage } from '@/pages/ModelsPage';
import { SettingsPage } from '@/pages/SettingsPage';
import { MarketPage } from '@/pages/MarketPage';
import { FinancePage } from '@/pages/FinancePage';
import { TalentPage } from '@/pages/TalentPage';
import { DataPage } from '@/pages/DataPage';
import { CompetitorsPage } from '@/pages/CompetitorsPage';
import { AchievementsPage } from '@/pages/AchievementsPage';
import { LeaderboardPage } from '@/pages/LeaderboardPage';

export function MainLayout() {
  const activePage = useGameStore((s) => s.activePage);

  return (
    <div className="flex h-screen overflow-hidden">
      <Sidebar />
      <div className="flex-1 flex flex-col overflow-hidden">
        <TopBar />
        <main className="flex-1 overflow-y-auto p-6">
          <PageRouter page={activePage} />
        </main>
      </div>
      <ToastContainer />
    </div>
  );
}

function PageRouter({ page }: { page: string }) {
  switch (page) {
    case 'dashboard': return <DashboardPage />;
    case 'infrastructure': return <InfrastructurePage />;
    case 'research': return <ResearchPage />;
    case 'models': return <ModelsPage />;
    case 'market': return <MarketPage />;
    case 'finance': return <FinancePage />;
    case 'talent': return <TalentPage />;
    case 'data': return <DataPage />;
    case 'competitors': return <CompetitorsPage />;
    case 'achievements': return <AchievementsPage />;
    case 'leaderboard': return <LeaderboardPage />;
    case 'settings': return <SettingsPage />;
    default: return <PlaceholderPage name={page} />;
  }
}

function PlaceholderPage({ name }: { name: string }) {
  return (
    <div className="flex items-center justify-center h-full text-surface-500">
      <div className="text-center">
        <h2 className="text-2xl font-bold capitalize mb-2">{name}</h2>
        <p className="text-sm">Coming soon...</p>
      </div>
    </div>
  );
}