import { useEffect, useState } from "react";
import { useAuth } from "~/contexts/auth-context";
import { Link } from "react-router";
import { cn } from "~/lib/utils";
import { Button } from "~/components/ui/button";
import {
  Search,
  Bell,
  Settings,
  User,
  Moon,
  Sun,
  Menu,
  ChevronDown,
  Globe,
  HelpCircle,
} from "lucide-react";

interface HeaderProps {
  onToggleSidebar?: () => void;
  className?: string;
  title?: string;
}

export function Header({
  onToggleSidebar,
  className,
  title = "داشبورد",
}: HeaderProps) {
  const { user } = useAuth();
  const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
  const [isNotificationOpen, setIsNotificationOpen] = useState(false);

  return (
    <header
      className={cn(
        "bg-gray-800/95 backdrop-blur-sm border-b border-gray-500/30 h-16 flex items-center justify-between px-4 lg:px-6 shadow-sm relative z-30",
        className,
      )}
    >
      {/* Left Section */}
      <div className="flex items-center gap-4">
        {/* Mobile Menu Toggle */}
        {onToggleSidebar && (
          <Button
            variant="ghost"
            size="sm"
            onClick={onToggleSidebar}
            className="lg:hidden"
          >
            <Menu className="h-5 w-5" />
          </Button>
        )}

        {/* Page Title */}
        <h1 className="text-xl font-bold text-white font-persian">{title}</h1>
      </div>

      {/* Right Section */}
      <div className="flex items-center gap-2">
        {/* User Menu */}
        <div className="relative">
          <Button
            variant="ghost"
            size="sm"
            onClick={() => setIsProfileMenuOpen(!isProfileMenuOpen)}
            className="flex items-center gap-2 text-gray-300"
          >
            <div className="w-8 h-8 bg-gradient-to-r from-emerald-500/20 to-teal-500/20 text-emerald-400 rounded-full flex items-center justify-center">
              <User className="h-4 w-4" />
            </div>
            <div className="hidden sm:block text-right">
              <div className="text-sm font-medium font-persian">
                {user?.name} {user?.family}
              </div>
              <div className="text-xs text-gray-400 font-persian">
                {user?.username}
              </div>
            </div>
            <ChevronDown className="h-3 w-3" />
          </Button>

          {/* Profile Dropdown */}
          {isProfileMenuOpen && (
            <div className="absolute left-0 top-full mt-2 w-48 bg-gray-800 border border-emerald-500/30 rounded-lg shadow-lg z-50">
              <div className="p-3 border-b border-emerald-500/30">
                <div className="text-sm font-medium text-white font-persian">
                  {user?.name} {user?.family}
                </div>
                <div className="text-xs text-gray-400 font-persian">
                  {user?.email}
                </div>
              </div>
              <div className="py-1">
                <Link
                  to="/dashboard/profile"
                  className="flex items-center gap-2 px-3 py-2 text-sm text-gray-300 hover:bg-gradient-to-r hover:from-emerald-500/10 hover:to-teal-500/10 hover:text-emerald-300 font-persian"
                  onClick={() => setIsProfileMenuOpen(false)}
                >
                  <User className="h-4 w-4" />
                  پروفایل کاربری
                </Link>
                <Link
                  to="/dashboard/settings"
                  className="flex items-center gap-2 px-3 py-2 text-sm text-gray-300 hover:bg-gradient-to-r hover:from-emerald-500/10 hover:to-teal-500/10 hover:text-emerald-300 font-persian"
                  onClick={() => setIsProfileMenuOpen(false)}
                >
                  <Settings className="h-4 w-4" />
                  تنظیمات
                </Link>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Click outside to close dropdowns */}
      {(isProfileMenuOpen || isNotificationOpen) && (
        <div
          className="fixed inset-0 z-40"
          onClick={() => {
            setIsProfileMenuOpen(false);
            setIsNotificationOpen(false);
          }}
        />
      )}
    </header>
  );
}

export default Header;