'use client'

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

export function Header() {
  const { sidebarOpen, setSidebarOpen, searchQuery, setSearchQuery, setModalType } = useAppStore()

  return (
    <header className="h-[60px] bg-white border-b border-gray-150 flex items-center px-4 gap-3 z-40 shadow-sm flex-shrink-0">
      {/* Sidebar toggle */}
      <button
        onClick={() => setSidebarOpen(!sidebarOpen)}
        className="w-9 h-9 rounded-lg hover:bg-gray-100 flex items-center justify-center text-gray-500 hover:text-gray-900 transition-all text-lg"
        title="Toggle sidebar"
      >
        ☰
      </button>

      {/* Logo */}
      <div className="flex items-center gap-2 font-bold text-base text-gray-900 whitespace-nowrap">
        <div className="w-8 h-8 bg-gray-900 rounded-lg flex items-center justify-center text-sm select-none">
          🏢
        </div>
        <span className="hidden sm:block">WorkSpace Pro</span>
      </div>

      {/* Search */}
      <div className="flex-1 max-w-md relative mx-3">
        <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm">🔍</span>
        <input
          type="text"
          placeholder="Cari workspace, tim, proyek..."
          value={searchQuery}
          onChange={e => setSearchQuery(e.target.value)}
          className="w-full pl-9 pr-3 py-1.5 bg-gray-100 border border-gray-200 rounded-lg text-sm font-sans text-gray-800 outline-none transition-all"
        />
      </div>

      {/* Actions */}
      <div className="flex items-center gap-1 ml-auto">
        <button
          onClick={() => showToast('🔔 3 notifikasi baru')}
          className="relative w-9 h-9 rounded-lg hover:bg-gray-100 flex items-center justify-center text-gray-500 hover:text-gray-900 transition-all"
          title="Notifikasi"
        >
          🔔
          <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full border-2 border-white" />
        </button>
        <button
          onClick={() => showToast('📁 Membuka arsip...')}
          className="w-9 h-9 rounded-lg hover:bg-gray-100 flex items-center justify-center text-gray-500 hover:text-gray-900 transition-all"
          title="Arsip"
        >
          📁
        </button>
        <button
          onClick={() => setModalType('settings')}
          className="w-9 h-9 rounded-lg hover:bg-gray-100 flex items-center justify-center text-gray-500 hover:text-gray-900 transition-all"
          title="Pengaturan"
        >
          ⚙️
        </button>
        <div className="w-px h-6 bg-gray-200 mx-1" />
        <button
          onClick={() => showToast('👋 Halo, Admin!')}
          className="w-9 h-9 rounded-full bg-gold-500 hover:bg-gold-600 flex items-center justify-center text-sm font-bold text-gray-900 transition-all hover:scale-105"
          style={{ background: '#F5C542' }}
          title="Profil"
        >
          AD
        </button>
      </div>
    </header>
  )
}