import { Link } from 'react-router';
import * as Dropdown from '@/components/ui/dropdown-menu';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { User, Users, LogOut, Settings, Package, Puzzle, Sun, Moon } from 'lucide-react';
import { useAuth } from 'hooks/useAuth';
import { useTranslation } from '@/lib/i18n';
import { useColorMode } from '@/components/ui/ThemeProvider';
import { useSettings } from 'state/useSettings';

const { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } = Dropdown;

export function UserMenu() {
  const { user, isLoading } = useAuth();
  const { t } = useTranslation();
  const { colorMode, setColorMode } = useColorMode();
  const { settings, saveSettings } = useSettings();
  if (isLoading) return null;

  const isAdmin = user?.role !== 'Member';

  const toggleColorMode = () => {
    const next = colorMode === 'dark' ? 'light' : 'dark';
    setColorMode(next);
    saveSettings({ ...settings, appearance: { ...settings.appearance, colorMode: next } });
  };

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <button className="rounded-full outline-none focus-visible:ring-2 focus-visible:ring-duck-yellow cursor-pointer">
          <Avatar className="h-9 w-9 rounded-full">
            <AvatarImage src={user?.avatar ?? undefined} />
            <AvatarFallback className="bg-duck-teal text-duck-yellow text-sm font-bold rounded-full">
              {user?.name?.charAt(0).toUpperCase() ?? '?'}
            </AvatarFallback>
          </Avatar>
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="z-10 w-48">
        <DropdownMenuItem asChild className="cursor-pointer">
          <Link to="/settings/profile">
            <User className="mr-2 h-4 w-4" />
            {t('header.userMenu.profile')}
          </Link>
        </DropdownMenuItem>
        {isAdmin && (
          <>
            <DropdownMenuItem asChild className="cursor-pointer">
              <Link to="/settings/system">
                <Settings className="mr-2 h-4 w-4" />
                {t('header.userMenu.systemSettings')}
              </Link>
            </DropdownMenuItem>
            <DropdownMenuItem asChild className="cursor-pointer">
              <Link to="/settings/resources">
                <Package className="mr-2 h-4 w-4" />
                {t('header.userMenu.resources')}
              </Link>
            </DropdownMenuItem>
          </>
        )}
        <DropdownMenuItem asChild className="cursor-pointer">
          <Link to="/settings/integrations">
            <Puzzle className="mr-2 h-4 w-4" />
            Integrations
          </Link>
        </DropdownMenuItem>
        {user?.role === 'Super Admin' && (
          <DropdownMenuItem asChild className="cursor-pointer">
            <Link to="/settings/users">
              <Users className="mr-2 h-4 w-4" />
              Users
            </Link>
          </DropdownMenuItem>
        )}
        <DropdownMenuSeparator />
        <DropdownMenuItem onClick={toggleColorMode} className="cursor-pointer">
          {colorMode === 'dark' ? (
            <Sun className="mr-2 h-4 w-4" />
          ) : (
            <Moon className="mr-2 h-4 w-4" />
          )}
          {colorMode === 'dark' ? 'Light Mode' : 'Dark Mode'}
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem asChild className="cursor-pointer">
          <Link to="/auth/signout">
            <LogOut className="mr-2 h-4 w-4" />
            {t('header.userMenu.signOut')}
          </Link>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}