<script lang="ts">
  import type { NavItem, ShellPage } from '../../types';

  const {
    currentPage,
    onnavigate,
    onlogout
  }: {
    currentPage: ShellPage;
    onnavigate: (page: ShellPage) => void;
    onlogout: () => void;
  } = $props();

  const navItems: NavItem[] = [
    { id: 'dashboard', label: 'Dashboard', description: 'System overview and status.' },
    { id: 'projects', label: 'Projects', description: 'Browse and manage projects.' },
    { id: 'thoughts', label: 'Thoughts', description: 'Search and inspect thoughts.' },
    { id: 'learnings', label: 'Learnings', description: 'Curated insights and outcomes.' },
    { id: 'plans', label: 'Plans', description: 'Structured plans and workstreams.' },
    { id: 'skills', label: 'Skills', description: 'Agent skill registry.' },
    { id: 'guardrails', label: 'Guardrails', description: 'Agent guardrail registry.' },
    { id: 'files', label: 'Files', description: 'Stored file inventory.' },
    { id: 'maintenance', label: 'Maintenance', description: 'Task state and upkeep actions.' }
  ];
</script>

<aside class="border-r border-white/10 bg-slate-900/90 p-6">
  <div>
    <p class="text-xs uppercase tracking-[0.3em] text-cyan-300">AMCS</p>
    <h1 class="mt-2 text-2xl font-semibold text-white">Admin</h1>
    <p class="mt-2 text-sm text-slate-400">Memory server control panel.</p>
  </div>

  <nav class="mt-8 space-y-1">
    {#each navItems as item}
      <button
        class={`w-full rounded-2xl border px-4 py-3 text-left transition ${currentPage === item.id ? 'border-cyan-300/30 bg-cyan-400/10 text-cyan-100' : 'border-transparent text-slate-200 hover:border-white/10 hover:bg-white/5'}`}
        onclick={() => onnavigate(item.id as ShellPage)}
      >
        <div class="text-sm font-semibold">{item.label}</div>
        <div class="mt-0.5 text-xs text-slate-500">{item.description}</div>
      </button>
    {/each}
  </nav>

  <button
    class="mt-8 inline-flex w-full items-center justify-center rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm font-medium text-slate-200 transition hover:bg-white/10"
    onclick={onlogout}
  >
    Logout
  </button>
</aside>
