"use client";

import { useState, useRef, useEffect } from "react";
import { LogOut, User, ChevronDown } from "lucide-react";
import { signOut } from "next-auth/react";

interface UserProfileProps {
    user?: {
        name?: string | null;
        email?: string | null;
        image?: string | null;
    };
}

export default function UserProfile({ user }: UserProfileProps) {
    const [isOpen, setIsOpen] = useState(false);
    const dropdownRef = useRef<HTMLDivElement>(null);

    // Close dropdown on click outside
    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
                setIsOpen(false);
            }
        };
        document.addEventListener("mousedown", handleClickOutside);
        return () => document.removeEventListener("mousedown", handleClickOutside);
    }, []);

    return (
        <div className="relative pointer-events-auto" ref={dropdownRef}>
            <button
                onClick={() => setIsOpen(!isOpen)}
                className="flex items-center gap-2 sm:gap-3 bg-white/5 px-2 sm:px-4 py-2 rounded-full border border-white/10 backdrop-blur-md hover:bg-white/10 transition-colors group"
            >
                <div className="text-right hidden sm:block">
                    <p className="text-sm font-semibold text-white group-hover:text-blue-200 transition-colors">
                        {user?.name || "User"}
                    </p>
                </div>
                {user?.image ? (
                    <img
                        src={user.image}
                        alt={user.name || "User"}
                        className="w-8 h-8 sm:w-10 sm:h-10 rounded-full border border-blue-500/50 group-hover:border-blue-400 transition-colors"
                    />
                ) : (
                    <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full border border-blue-500/50 bg-gray-700 flex items-center justify-center">
                        <User className="w-5 h-5 text-gray-400" />
                    </div>
                )}
                <ChevronDown className={`w-4 h-4 text-gray-400 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`} />
            </button>

            {isOpen && (
                <div className="absolute right-0 top-full mt-2 w-48 bg-zinc-900 border border-white/10 rounded-xl shadow-xl overflow-hidden z-50 py-1 animate-in fade-in zoom-in-95 duration-100 ease-out">
                    <div className="px-4 py-3 border-b border-white/10 sm:hidden">
                        <p className="text-sm font-semibold text-white truncate">{user?.name || "User"}</p>
                    </div>

                    <button
                        onClick={() => signOut({ callbackUrl: "/" })}
                        className="w-full flex items-center gap-2 px-4 py-2.5 text-sm text-red-400 hover:bg-white/5 hover:text-red-300 transition-colors"
                    >
                        <LogOut className="w-4 h-4" />
                        Log Out
                    </button>
                </div>
            )}
        </div>
    );
}