'use client'

import { useState, useEffect } from 'react'
import { useRouter } from 'next/navigation'
import Image from 'next/image'
import { Bell, LogOut, User, ChevronDown } from 'lucide-react'
import { getAdminUser, clearAdminAuth, getRoleDisplayName, type AdminUser } from '@/lib/auth'

export default function AdminHeader() {
  const router = useRouter()
  const [user, setUser] = useState<AdminUser | null>(null)
  const [showDropdown, setShowDropdown] = useState(false)
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
    const userData = getAdminUser()
    setUser(userData)
  }, [])

  const handleLogout = () => {
    clearAdminAuth()
    router.push('/admin')
  }

  return (
    <header className="fixed top-0 left-0 right-0 h-16 bg-gray-900/95 backdrop-blur-xl border-b border-white/10 z-50">
      <div className="h-full px-6 flex items-center justify-between">
        {/* Logo and Title */}
        <div className="flex items-center gap-4">
          <Image
            src="/logo.png"
            alt="Madibeng Municipality"
            width={40}
            height={40}
            className="object-contain"
          />
          <div>
            <h1 className="text-white font-bold text-lg">Madibeng Admin</h1>
            <p className="text-white/50 text-xs">Communications Portal</p>
          </div>
        </div>

        {/* Right Section */}
        <div className="flex items-center gap-4">
          {/* Notifications */}
          <button className="relative p-2 text-white/70 hover:text-white hover:bg-white/10 rounded-lg transition-all">
            <Bell className="w-5 h-5" />
            <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
          </button>

          {/* User Menu */}
          <div className="relative">
            <button
              onClick={() => setShowDropdown(!showDropdown)}
              className="flex items-center gap-3 px-3 py-2 text-white/90 hover:bg-white/10 rounded-lg transition-all"
            >
              <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center">
                <User className="w-4 h-4 text-white" />
              </div>
              <div className="text-left hidden md:block min-w-[120px]">
                {mounted && user ? (
                  <>
                <p className="text-sm font-medium text-white">
                      {user.firstName} {user.lastName}
                </p>
                <p className="text-xs text-white/50">
                      {getRoleDisplayName(user.role)}
                </p>
                  </>
                ) : (
                  <div className="h-[36px]"></div>
                )}
              </div>
              <ChevronDown className="w-4 h-4 text-white/50" />
            </button>

            {/* Dropdown Menu */}
            {showDropdown && (
              <div className="absolute right-0 mt-2 w-64 bg-gray-800 border border-white/10 rounded-lg shadow-xl overflow-hidden">
                {mounted && user && (
                <div className="p-4 border-b border-white/10">
                  <p className="text-white font-medium">
                      {user.firstName} {user.lastName}
                  </p>
                    <p className="text-white/50 text-sm">{user.email}</p>
                  <p className="text-primary text-xs mt-1">
                      {getRoleDisplayName(user.role)}
                  </p>
                </div>
                )}
                <div className="p-2">
                  <button
                    onClick={() => router.push('/admin/profile')}
                    className="w-full flex items-center gap-3 px-3 py-2 text-white/70 hover:bg-white/10 hover:text-white rounded transition-all text-left"
                  >
                    <User className="w-4 h-4" />
                    My Profile
                  </button>
                  <button
                    onClick={handleLogout}
                    className="w-full flex items-center gap-3 px-3 py-2 text-red-400 hover:bg-red-500/10 rounded transition-all text-left"
                  >
                    <LogOut className="w-4 h-4" />
                    Logout
                  </button>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </header>
  )
}