'use client'

import { useAppStore } from '@/store'
import { cn } from '@/lib/utils'
import { showToast } from '@/components/ui/Toast'

const NAV_ITEMS = [
  { id: 'dashboard', icon: '📊', label: 'Dashboard' },
  { id: 'workspace', icon: '🏢', label: 'Workspace' },
  { id: 'projects',  icon: '📁', label: 'Proyek & Tim' },
  { id: 'kanban',    icon: '✅', label: 'Kanban Board' },
  { id: 'calendar',  icon: '📅', label: 'Kalender' },
]

const TEAM_ITEMS = [
  { icon: '🎨', label: 'Dept. Creative',    color: '#E86B5F' },
  { icon: '⚙️', label: 'Dept. Operasional', color: '#22C55E' },
  { icon: '📣', label: 'Div. Marketing',     color: '#6366F1' },
  { icon: '📦', label: 'Div. Produk',        color: '#F97316' },
]

export function Sidebar() {
  const { sidebarOpen, activeTab, setActiveTab } = useAppStore()

  return (
    <nav
      className={cn(
        'sidebar-transition bg-white border-r border-gray-150 flex flex-col flex-shrink-0 overflow-hidden',
        sidebarOpen ? 'w-[248px]' : 'w-0'
      )}
    >
      <div className="p-3 flex-1 overflow-y-auto">
        {/* Main nav */}
        <p className="px-3 py-2 text-[10px] font-semibold uppercase tracking-widest text-gray-400">Menu</p>
        {NAV_ITEMS.map(item => (
          <button
            key={item.id}
            onClick={() => setActiveTab(item.id)}
            className={cn(
              'w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm font-medium transition-all mb-0.5 text-left',
              activeTab === item.id
                ? 'bg-gold-100 text-gray-900'
                : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
            )}
          >
            <span className="text-base w-5 text-center">{item.icon}</span>
            {item.label}
          </button>
        ))}

        {/* Teams */}
        <p className="px-3 py-2 mt-3 text-[10px] font-semibold uppercase tracking-widest text-gray-400">Tim</p>
        {TEAM_ITEMS.map(item => (
          <button
            key={item.label}
            onClick={() => showToast(`Membuka ${item.label}...`)}
            className="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-all mb-0.5 text-left"
          >
            <span
              className="w-5 h-5 rounded text-[10px] flex items-center justify-center flex-shrink-0"
              style={{ background: item.color + '22' }}
            >
              {item.icon}
            </span>
            {item.label}
          </button>
        ))}
      </div>

      {/* Bottom */}
      <div className="border-t border-gray-150 p-3">
        <button
          onClick={() => showToast('📌 Pinned Items coming soon!')}
          className="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-100 transition-all"
        >
          <span className="text-base w-5 text-center">📌</span>
          Pinned Items
        </button>
        <button
          onClick={() => showToast('🗑️ Membuka Trash...')}
          className="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-100 transition-all"
        >
          <span className="text-base w-5 text-center">🗑️</span>
          Trash
        </button>
      </div>
    </nav>
  )
}