"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { useAuth } from "./AuthProvider";
import { LogOut, User, ChevronDown } from "lucide-react";

export function UserMenu() {
  const { user, profile, team, signOut } = useAuth();
  const [isOpen, setIsOpen] = useState(false);
  const router = useRouter();

  if (!user) return null;

  const handleSignOut = async () => {
    await signOut();
    router.push("/login");
    router.refresh();
  };

  const displayName = profile?.display_name || user.email?.split("@")[0] || "Utilisateur";
  const teamName = team?.name || "Équipe";

  return (
    <div className="relative">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center gap-2 px-3 py-2 text-sm text-[#4a5565] hover:text-[#0a0a0a] hover:bg-gray-100 rounded-lg transition-colors"
      >
        <div className="w-8 h-8 bg-black text-white rounded-full flex items-center justify-center text-sm font-medium">
          {displayName.charAt(0).toUpperCase()}
        </div>
        <div className="text-left hidden sm:block">
          <div className="font-medium text-[#0a0a0a]">{displayName}</div>
          <div className="text-xs text-[#6a7282]">{teamName}</div>
        </div>
        <ChevronDown className="w-4 h-4" />
      </button>

      {isOpen && (
        <>
          {/* Backdrop */}
          <div 
            className="fixed inset-0 z-10" 
            onClick={() => setIsOpen(false)}
          />
          
          {/* Dropdown */}
          <div className="absolute right-0 mt-2 w-56 bg-white border border-gray-200 rounded-lg shadow-lg z-20">
            <div className="px-4 py-3 border-b border-gray-100">
              <p className="text-sm font-medium text-[#0a0a0a]">{displayName}</p>
              <p className="text-xs text-[#6a7282]">{user.email}</p>
              <p className="text-xs text-[#6a7282] mt-1">
                Équipe: <span className="font-medium">{teamName}</span>
              </p>
            </div>
            
            <div className="py-1">
              <button
                onClick={handleSignOut}
                className="w-full flex items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors"
              >
                <LogOut className="w-4 h-4" />
                Se déconnecter
              </button>
            </div>
          </div>
        </>
      )}
    </div>
  );
}