"use client";

import { useState } from "react";
import {
  MenuIcon,
  SearchIcon,
  MessageIcon,
  SettingsIcon,
  LogOutIcon,
  ChevronDownIcon,
} from "@/components/Icons";

interface AdminHeaderProps {
  user: {
    fullName: string;
    email: string;
    avatar?: string;
  };
  unreadMessages?: number;
  onToggleSidebar?: () => void;
  onLogout: () => void;
}

export default function AdminHeader({
  user,
  unreadMessages = 0,
  onToggleSidebar,
  onLogout,
}: AdminHeaderProps) {
  const [showUserMenu, setShowUserMenu] = useState(false);
  const [searchQuery, setSearchQuery] = useState("");

  return (
    <header className="h-16 bg-surface-elevated/80 backdrop-blur-xl border-b border-border flex items-center justify-between px-6 sticky top-0 z-30">
      {/* Left side */}
      <div className="flex items-center gap-4">
        <button
          onClick={onToggleSidebar}
          className="p-2 text-text-muted hover:text-text-primary rounded-lg hover:bg-white/5 lg:hidden"
        >
          <MenuIcon size={20} />
        </button>

        {/* Search */}
        <div className="hidden sm:flex items-center gap-2 px-4 py-2 bg-surface rounded-xl border border-border w-64 lg:w-80">
          <SearchIcon size={16} className="text-text-muted" />
          <input
            type="text"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            placeholder="Search..."
            className="bg-transparent border-none outline-none text-sm text-text-primary placeholder:text-text-muted flex-1"
          />
          <kbd className="px-1.5 py-0.5 text-[10px] bg-surface-elevated border border-border rounded text-text-muted">
            ⌘K
          </kbd>
        </div>
      </div>

      {/* Right side */}
      <div className="flex items-center gap-3">
        {/* Messages */}
        <a
          href="/admin/messages"
          className="relative p-2 text-text-muted hover:text-text-primary rounded-xl hover:bg-white/5 transition-colors"
        >
          <MessageIcon size={20} />
          {unreadMessages > 0 && (
            <span className="absolute -top-0.5 -right-0.5 w-4 h-4 flex items-center justify-center text-[10px] font-bold bg-danger text-white rounded-full">
              {unreadMessages > 9 ? "9+" : unreadMessages}
            </span>
          )}
        </a>

        {/* Settings */}
        <a
          href="/admin/settings"
          className="p-2 text-text-muted hover:text-text-primary rounded-xl hover:bg-white/5 transition-colors"
        >
          <SettingsIcon size={20} />
        </a>

        {/* User menu */}
        <div className="relative">
          <button
            onClick={() => setShowUserMenu(!showUserMenu)}
            className="flex items-center gap-3 p-2 rounded-xl hover:bg-white/5 transition-colors"
          >
            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-accent flex items-center justify-center text-white text-sm font-bold">
              {user.fullName.charAt(0)}
            </div>
            <div className="hidden md:block text-left">
              <p className="text-sm font-medium text-text-primary truncate max-w-[120px]">
                {user.fullName}
              </p>
              <p className="text-xs text-text-muted">Admin</p>
            </div>
            <ChevronDownIcon
              size={14}
              className={`text-text-muted transition-transform ${
                showUserMenu ? "rotate-180" : ""
              }`}
            />
          </button>

          {showUserMenu && (
            <>
              <div
                className="fixed inset-0 z-40"
                onClick={() => setShowUserMenu(false)}
              />
              <div className="absolute right-0 mt-2 w-56 bg-surface-card border border-border rounded-xl shadow-xl z-50 overflow-hidden animate-fade-in">
                <div className="p-4 border-b border-border">
                  <p className="font-semibold text-text-primary">{user.fullName}</p>
                  <p className="text-sm text-text-muted truncate">{user.email}</p>
                </div>
                <div className="p-2">
                  <a
                    href="/admin/settings"
                    className="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-text-secondary hover:text-text-primary hover:bg-white/5 transition-colors"
                  >
                    <SettingsIcon size={16} />
                    Settings
                  </a>
                  <button
                    onClick={onLogout}
                    className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-danger hover:bg-danger/10 transition-colors"
                  >
                    <LogOutIcon size={16} />
                    Logout
                  </button>
                </div>
              </div>
            </>
          )}
        </div>
      </div>
    </header>
  );
}