import { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { useAuth } from '@/contexts/AuthContext';
import { User, Settings, LogOut, Code2, Shield, Crown } from 'lucide-react';

export function UserMenu() {
  const { user, logout } = useAuth();
  const navigate = useNavigate();
  const [isOpen, setIsOpen] = useState(false);

  const handleLogout = () => {
    logout();
    navigate('/');
    setIsOpen(false);
  };

  const toggleMenu = () => {
    setIsOpen(!isOpen);
  };

  const closeMenu = () => {
    setIsOpen(false);
  };

  if (!user) return null;

  return (
    <div className="relative">
      <Button
        variant="ghost"
        size="sm"
        onClick={toggleMenu}
        className="flex items-center space-x-2"
      >
        <Avatar className="h-8 w-8">
          <AvatarImage src={user.avatarUrl} alt={user.displayName} />
          <AvatarFallback>
            {user.displayName.charAt(0).toUpperCase()}
          </AvatarFallback>
        </Avatar>
        <span className="hidden md:block">{user.displayName}</span>
      </Button>

      {isOpen && (
        <>
          {/* Backdrop */}
          <div
            className="fixed inset-0 z-40"
            onClick={closeMenu}
          />
          
          {/* Menu */}
          <div className="absolute right-0 top-full mt-2 w-56 rounded-md border bg-background shadow-lg z-50">
            <div className="p-2">
              {/* User Info */}
              <div className="px-3 py-2 border-b">
                <div className="flex items-center gap-2">
                  <span className="text-sm font-medium">{user.displayName}</span>
                  {user.isSuperUser && (
                    <Crown className="h-3 w-3 text-amber-600" />
                  )}
                  {user.isAdmin && !user.isSuperUser && (
                    <Shield className="h-3 w-3 text-blue-600" />
                  )}
                </div>
                <div className="text-xs text-muted-foreground">{user.email}</div>
              </div>

              {/* Menu Items */}
              <div className="py-1">
                <Link
                  to="/dashboard"
                  className="flex items-center px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-sm"
                  onClick={closeMenu}
                >
                  <User className="mr-2 h-4 w-4" />
                  Dashboard
                </Link>
                
                <Link
                  to="/my-scripts"
                  className="flex items-center px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-sm"
                  onClick={closeMenu}
                >
                  <Code2 className="mr-2 h-4 w-4" />
                  My Scripts
                </Link>
                
                <Link
                  to="/profile"
                  className="flex items-center px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-sm"
                  onClick={closeMenu}
                >
                  <Settings className="mr-2 h-4 w-4" />
                  Profile
                </Link>

                {user.isAdmin && (
                  <Link
                    to="/admin"
                    className="flex items-center px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-sm"
                    onClick={closeMenu}
                  >
                    {user.isSuperUser ? (
                      <Crown className="mr-2 h-4 w-4 text-amber-600" />
                    ) : (
                      <Shield className="mr-2 h-4 w-4" />
                    )}
                    {user.isSuperUser ? 'Super Admin' : 'Admin Panel'}
                  </Link>
                )}
              </div>

              {/* Logout */}
              <div className="border-t pt-1">
                <button
                  onClick={handleLogout}
                  className="flex w-full items-center px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-sm"
                >
                  <LogOut className="mr-2 h-4 w-4" />
                  Sign Out
                </button>
              </div>
            </div>
          </div>
        </>
      )}
    </div>
  );
}