import { useState } from 'react'
import { Link } from 'react-router-dom'
import { useAuthStore } from '../stores/auth'
import {
  UserCircleIcon,
  ArrowRightOnRectangleIcon,
  Cog6ToothIcon,
} from '@heroicons/react/24/outline'

export default function Header() {
  const { user, logout } = useAuthStore()
  const [showDropdown, setShowDropdown] = useState(false)

  const handleLogout = () => {
    logout()
    localStorage.removeItem('access_token')
    window.location.href = '/login'
  }

  return (
    <header className="h-16 border-b border-border bg-surface flex items-center justify-between px-6">
      <div className="flex items-center">
        <span className="text-lg font-semibold">Headquarter</span>
      </div>

      <div className="relative">
        <button
          onClick={() => setShowDropdown(!showDropdown)}
          className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-surface transition-colors"
        >
          <UserCircleIcon className="w-6 h-6" />
          <span className="text-sm">{user?.display_name || user?.email || 'User'}</span>
        </button>

        {showDropdown && (
          <div className="absolute right-0 mt-2 w-48 rounded-lg border border-border bg-surface shadow-lg z-50">
            <div className="p-2">
              <Link
                to="/settings"
                className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-surface text-sm"
                onClick={() => setShowDropdown(false)}
              >
                <Cog6ToothIcon className="w-4 h-4" />
                Settings
              </Link>
              <button
                onClick={handleLogout}
                className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-surface text-sm w-full text-left text-red-400"
              >
                <ArrowRightOnRectangleIcon className="w-4 h-4" />
                Logout
              </button>
            </div>
          </div>
        )}
      </div>
    </header>
  )
}