<script>
  let { currentView = 'dashboard', onNavigate = () => {}, isOpen = false, onToggle = null } = $props();
  let collapsed = $state(false);

  // Auto-collapse on desktop if screen is small but not mobile
  $effect(() => {
    if (typeof window !== 'undefined' && window.innerWidth <= 1024 && window.innerWidth > 768) {
      collapsed = true;
    }
  });

  const navItems = [
    { id: 'dashboard', label: 'Dashboard', icon: '🏠' },
    { id: 'devices', label: 'Devices', icon: '📺' },
    { id: 'tasks', label: 'Tasks', icon: '📋' },
    { id: 'users', label: 'Users', icon: '👥' },
  ];
</script>

<aside class="
  flex flex-col bg-bg-card border-r border-border h-screen flex-shrink-0 sticky top-0
  transition-all duration-300
  {collapsed ? 'w-16' : 'w-[200px]'}
  max-md:fixed max-md:left-0 max-md:top-0 max-md:z-[1000] max-md:!w-[280px]
  max-md:shadow-[20px_0_50px_rgba(0,0,0,0.3)]
  {isOpen ? 'max-md:flex' : 'max-md:hidden'}
">
  <div class="flex items-center border-b border-border min-h-14 px-3 py-4
    {collapsed ? 'justify-center' : 'justify-between'}
    max-md:px-4 max-md:py-5">
    {#if !collapsed}
      <span class="text-xs font-bold uppercase tracking-[0.05em] text-text-secondary whitespace-nowrap overflow-hidden">
        Menu
      </span>
    {/if}
    <button
      class="bg-transparent border-none text-text-secondary cursor-pointer p-1.5 flex items-center justify-center rounded-md transition-all flex-shrink-0 hover:text-text-primary hover:bg-bg-card-hover
        {onToggle ? 'max-md:flex' : ''}"
      onclick={() => onToggle ? onToggle() : (collapsed = !collapsed)}
      title={collapsed ? 'Expand' : 'Collapse'}
    >
      <svg class="w-[18px] h-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
        <line x1="3" y1="6" x2="21" y2="6"></line>
        <line x1="3" y1="12" x2="21" y2="12"></line>
        <line x1="3" y1="18" x2="21" y2="18"></line>
      </svg>
    </button>
  </div>

  <nav class="flex flex-col gap-1 p-2">
    {#each navItems as item}
      <button
        class="flex items-center gap-2.5 px-3 py-2.5 border-none rounded-lg cursor-pointer text-[13px] font-medium transition-all whitespace-nowrap text-left
          max-md:px-4 max-md:py-3.5 max-md:text-[15px]
          {currentView === item.id
            ? 'bg-accent/15 text-accent'
            : 'bg-transparent text-text-secondary hover:bg-bg-card-hover hover:text-text-primary'}"
        onclick={() => onNavigate(item.id)}
        title={item.label}
      >
        <span class="text-base flex-shrink-0">{item.icon}</span>
        {#if !collapsed}
          <span class="overflow-hidden">{item.label}</span>
        {/if}
      </button>
    {/each}
  </nav>
</aside>
