'use client';

import { useRouter } from 'next/navigation';
import { useState } from 'react';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { User, Settings, LogOut } from 'lucide-react';

export default function UserMenu() {
  const router = useRouter();
  const [loading, setLoading] = useState(false);

  const handleLogout = async () => {
    setLoading(true);
    try {
      await fetch('/api/auth/logout', { method: 'POST' });
      router.push('/login');
      router.refresh();
    } catch (error) {
      console.error('Logout error:', error);
      setLoading(false);
    }
  };

  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger asChild>
        <button className="w-10 h-10 rounded-full border-2 border-foreground bg-background-card flex items-center justify-center text-foreground font-semibold text-sm hover:bg-background-elevated transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-background">
          A
        </button>
      </DropdownMenu.Trigger>

      <DropdownMenu.Portal>
        <DropdownMenu.Content
          className="min-w-[200px] bg-background-card border border-border rounded-xl p-1 shadow-elevated animate-fade-in z-50"
          sideOffset={8}
          align="end"
        >
          <DropdownMenu.Item
            disabled
            className="flex items-center gap-3 px-3 py-2 text-sm rounded-lg outline-none opacity-50 cursor-not-allowed"
          >
            <User className="w-4 h-4" />
            <span>Profile</span>
          </DropdownMenu.Item>
          
          <DropdownMenu.Item
            disabled
            className="flex items-center gap-3 px-3 py-2 text-sm rounded-lg outline-none opacity-50 cursor-not-allowed"
          >
            <Settings className="w-4 h-4" />
            <span>Settings</span>
          </DropdownMenu.Item>
          
          <DropdownMenu.Separator className="h-px bg-border my-1" />
          
          <DropdownMenu.Item
            onClick={handleLogout}
            disabled={loading}
            className="flex items-center gap-3 px-3 py-2 text-sm rounded-lg outline-none text-danger hover:bg-danger/10 cursor-pointer transition-colors focus:bg-danger/10 disabled:opacity-50"
          >
            <LogOut className="w-4 h-4" />
            <span>{loading ? 'Logging out...' : 'Logout'}</span>
          </DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
}