<script lang="ts">
  import { onMount } from 'svelte';
  import { goto } from '$app/navigation';
  import { auth } from '$stores/auth';
  import { LayoutDashboard, Users, FlaskConical, ClipboardList, TestTube, Settings, LogOut } from 'lucide-svelte';

  let user: any = null;
  
  auth.subscribe(state => {
    user = state.user;
  });

  function handleLogout() {
    auth.logout();
    goto('/login');
  }

  const menuItems = [
    { name: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
    { name: 'Patients', href: '/patients', icon: Users },
    { name: 'Orders', href: '/orders', icon: ClipboardList },
    { name: 'Tests', href: '/tests', icon: FlaskConical },
    { name: 'Results', href: '/results', icon: TestTube },
    { name: 'Settings', href: '/settings', icon: Settings },
  ];
</script>

<aside class="fixed left-0 top-0 h-full w-64 bg-base-200 border-r border-base-300 flex flex-col z-50">
  <!-- Logo -->
  <div class="p-6 border-b border-base-300">
    <div class="flex items-center gap-3">
      <div class="w-10 h-10 rounded-xl bg-emerald-100 flex items-center justify-center">
        <svg class="w-6 h-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/>
        </svg>
      </div>
      <div>
        <h1 class="text-xl font-bold text-emerald-600">CLQMS</h1>
        <p class="text-xs text-base-content/60">Laboratory System</p>
      </div>
    </div>
  </div>

  <!-- Navigation -->
  <nav class="flex-1 p-4">
    <ul class="menu menu-vertical gap-2">
      {#each menuItems as item}
        <li>
          <a href={item.href} class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-emerald-50 hover:text-emerald-600 transition-colors">
            <svelte:component this={item.icon} class="w-5 h-5" />
            <span>{item.name}</span>
          </a>
        </li>
      {/each}
    </ul>
  </nav>

  <!-- User Section -->
  <div class="p-4 border-t border-base-300">
    <div class="flex items-center gap-3 p-3 rounded-lg bg-base-100">
      <div class="w-10 h-10 rounded-full bg-emerald-100 flex items-center justify-center">
        <span class="text-emerald-600 font-semibold">
          {user?.username?.charAt(0).toUpperCase() || 'U'}
        </span>
      </div>
      <div class="flex-1 min-w-0">
        <p class="text-sm font-medium truncate">{user?.username || 'User'}</p>
        <p class="text-xs text-base-content/60 capitalize">{user?.role || 'User'}</p>
      </div>
      <button 
        on:click={handleLogout}
        class="btn btn-ghost btn-sm btn-circle"
        title="Logout"
      >
        <LogOut class="w-4 h-4" />
      </button>
    </div>
  </div>
</aside>
