import { Link } from 'react-router';
import * as Dropdown from '@/components/ui/dropdown-menu';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { User, LogOut, Settings, Puzzle, Sun, Moon, Bot, UserCog, Palette } from 'lucide-react';
import { useAuth } from 'hooks/useAuth';
import { useTranslation } from '@/lib/i18n';
import { useColorMode, useTheme } 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 { themeId, setTheme, themes } = useTheme();
  const { settings, saveSettings } = useSettings();
  if (isLoading) return null;

  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">
        {/*
          Every theme this build ships, listed. Deliberately the crudest possible control: the point tonight
          is proving the app can wear a different skin at all, not designing a picker. A real one belongs in
          an appearance settings screen, which does not exist yet.
        */}
        {themes.map((theme) => (
          <DropdownMenuItem key={theme.id} onClick={() => setTheme(theme.id)} className="cursor-pointer">
            <Palette className={`mr-2 h-4 w-4 ${theme.id === themeId ? 'opacity-100' : 'opacity-30'}`} />
            {theme.name}
          </DropdownMenuItem>
        ))}
        <DropdownMenuSeparator />
        <DropdownMenuItem asChild className="cursor-pointer">
          <Link to="/settings/profile">
            <User className="mr-2 h-4 w-4" />
            {t('header.userMenu.profile')}
          </Link>
        </DropdownMenuItem>
        <DropdownMenuItem asChild className="cursor-pointer">
          <Link to="/settings/system">
            <Settings className="mr-2 h-4 w-4" />
            {t('header.userMenu.systemSettings')}
          </Link>
        </DropdownMenuItem>
        {/* No Resources entry. `/settings/resources` has never been a route, so this item sent you to
            the catch-all and out to `/` — a menu entry that looks like navigation and is a bounce.
            (navigation-audit M8.) */}
        <DropdownMenuItem asChild className="cursor-pointer">
          <Link to="/settings/ai">
            <Bot className="mr-2 h-4 w-4" />
            AI
          </Link>
        </DropdownMenuItem>
        <DropdownMenuItem asChild className="cursor-pointer">
          <Link to="/settings/integrations">
            <Puzzle className="mr-2 h-4 w-4" />
            Integrations
          </Link>
        </DropdownMenuItem>
        {/* Owner only. This is tidiness, not access control — the route stays reachable and its
            endpoints are gated server-side by ownerGate, because a hidden menu item is not a permission
            and anything relying on it being hidden is already wrong. */}
        {user?.role === 'Super Admin' && (
          <DropdownMenuItem asChild className="cursor-pointer">
            <Link to="/settings/user-management">
              <UserCog className="mr-2 h-4 w-4" />
              User Management
            </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>
  );
}