import { useState } from 'react';
import { Link } from 'react-router-dom';
import { LogOut, ChevronDown, User } from 'lucide-react';
import { useAuth } from '../../context/AuthContext';
import { RoleBadge } from '../ui/RoleBadge';
import { cn } from '../../lib/utils';

/**
 * User menu dropdown for desktop sidebar
 * Command Center style: Premium, clean, high-contrast
 */
export function UserMenu() {
    const { user, logout } = useAuth();
    const [isOpen, setIsOpen] = useState(false);

    return (
        <div className="relative">
            <button
                onClick={() => setIsOpen(!isOpen)}
                className="w-full flex items-center gap-3 p-2 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-900 transition-all duration-200 group"
            >
                {/* Avatar */}
                <div className="relative flex-shrink-0">
                    <div className="w-9 h-9 rounded-lg bg-[var(--color-primary)] flex items-center justify-center text-white font-bold text-sm shadow-lg shadow-emerald-500/20 group-hover:scale-105 transition-transform">
                        {user?.email?.[0]?.toUpperCase() || '?'}
                    </div>
                    <div className="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 bg-[var(--color-primary)] rounded-full border-2 border-white dark:border-[#0B0E14]" />
                </div>

                {/* Info */}
                <div className="flex-1 min-w-0 text-left">
                    <p className="text-[13px] font-bold text-[var(--color-text-primary)] truncate">
                        {user?.name || user?.email?.split('@')[0]}
                    </p>
                    <div className="flex items-center gap-1 mt-0.5">
                        <RoleBadge size="sm" />
                    </div>
                </div>

                {/* Chevron */}
                <ChevronDown
                    size={14}
                    className={cn(
                        "text-[var(--color-text-tertiary)] transition-transform duration-300 flex-shrink-0",
                        isOpen ? 'rotate-180' : ''
                    )}
                />
            </button>

            {/* Dropdown */}
            {isOpen && (
                <>
                    {/* Backdrop */}
                    <div
                        className="fixed inset-0 z-10"
                        onClick={() => setIsOpen(false)}
                    />

                    {/* Menu */}
                    <div className="absolute bottom-full left-0 right-0 mb-2 bg-elevated rounded-md shadow-lg border border-default py-1 z-20 animate-scale-in">
                        <Link
                            to="/settings"
                            onClick={() => setIsOpen(false)}
                            className="flex items-center gap-2 px-3 py-2 text-sm text-secondary hover:text-primary hover:bg-tertiary transition-colors duration-fast"
                        >
                            <User size={14} />
                            Profile & Settings
                        </Link>

                        <div className="border-t border-subtle my-1" />

                        <button
                            onClick={() => {
                                logout();
                                setIsOpen(false);
                            }}
                            className="w-full flex items-center gap-2 px-3 py-2 text-sm text-destructive hover:bg-destructive-muted transition-colors duration-fast"
                        >
                            <LogOut size={14} />
                            Sign Out
                        </button>
                    </div>
                </>
            )}
        </div>
    );
}
