ai-video-admin-frontend/src/components/layout/AppShell.tsx

"use client";

import { useState } from "react";
import { Sidebar } from "./Sidebar";
import { Topbar } from "./Topbar";

import { HomePage } from "@/components/pages/HomePage";
import { AssistantPage } from "@/components/pages/AssistantPage";
import { ComponentsModelsPage } from "@/components/pages/ComponentsModelsPage";
import { ComponentsKnowledgePage } from "@/components/pages/ComponentsKnowledgePage";
import { ComponentsToolsPage } from "@/components/pages/ComponentsToolsPage";
import { HistoryPage } from "@/components/pages/HistoryPage";
import { DashboardPage } from "@/components/pages/DashboardPage";
import { TestPage } from "@/components/pages/TestPage";
import { WorkflowPage } from "@/components/pages/WorkflowPage";
import { ProfilePage } from "@/components/pages/ProfilePage";

export type NavKey =
  | "home"
  | "assistants"
  | "components-models"
  | "components-knowledge"
  | "components-tools"
  | "history"
  | "dashboard"
  | "test"
  | "workflow"
  | "profile";


export function AppShell() {
  const [active, setActive] = useState<NavKey>("home");
  const [collapsed, setCollapsed] = useState(false);

  return (
    <div className="flex h-screen overflow-hidden bg-background text-foreground">
      <Sidebar
        active={active}
        collapsed={collapsed}
        onNavigate={setActive}
        onToggle={() => setCollapsed((v) => !v)}
      />

      <main className="flex min-w-0 flex-1 flex-col overflow-hidden">
        <Topbar />

        <div className="flex-1 overflow-y-auto px-8 py-10">
          {active === "home" && <HomePage onNavigate={setActive} />}
          {active === "assistants" && <AssistantPage />}
          {active === "components-models" && <ComponentsModelsPage />}
          {active === "components-knowledge" && <ComponentsKnowledgePage />}
          {active === "components-tools" && <ComponentsToolsPage />}
          {active === "history" && <HistoryPage />}
          {active === "dashboard" && <DashboardPage />}
          {active === "test" && <TestPage />}
          {active === "workflow" && <WorkflowPage />}
          {active === "profile" && <ProfilePage />}
        </div>
      </main>
    </div>
  );
}