<script lang="ts">
  import type { ShellPage, StatusResponse } from '../../types';
  import FilesPage from '../files/FilesPage.svelte';
  import GuardrailsPage from '../guardrails/GuardrailsPage.svelte';
  import LearningsPage from '../learnings/LearningsPage.svelte';
  import PlansPage from '../plans/PlansPage.svelte';
  import MaintenancePage from '../maintenance/MaintenancePage.svelte';
  import DashboardPage from '../dashboard/DashboardPage.svelte';
  import ProjectsPage from '../projects/ProjectsPage.svelte';
  import SkillsPage from '../skills/SkillsPage.svelte';
  import ThoughtsPage from '../thoughts/ThoughtsPage.svelte';
  import AppSidebar from './AppSidebar.svelte';

  const {
    currentPage,
    data,
    loading,
    error,
    onlogout,
    onnavigate,
    onrefresh
  }: {
    currentPage: ShellPage;
    data: StatusResponse | null;
    loading: boolean;
    error: string;
    onlogout: () => void;
    onnavigate: (page: ShellPage) => void;
    onrefresh: () => void;
  } = $props();
</script>

<div class="grid min-h-screen lg:grid-cols-[17rem_1fr]">
  <AppSidebar {currentPage} {onnavigate} {onlogout} />

  <main class="px-4 py-6 sm:px-6 lg:px-8">
    {#if currentPage === 'dashboard'}
      <DashboardPage {data} {loading} {error} {onrefresh} />
    {:else if currentPage === 'projects'}
      <ProjectsPage />
    {:else if currentPage === 'thoughts'}
      <ThoughtsPage />
    {:else if currentPage === 'learnings'}
      <LearningsPage />
    {:else if currentPage === 'plans'}
      <PlansPage />
    {:else if currentPage === 'skills'}
      <SkillsPage />
    {:else if currentPage === 'guardrails'}
      <GuardrailsPage />
    {:else if currentPage === 'files'}
      <FilesPage />
    {:else if currentPage === 'maintenance'}
      <MaintenancePage />
    {/if}
  </main>
</div>
