import { Link, router } from '@inertiajs/react';
import { Check, LogOut, Moon, Palette, Settings, Sun } from 'lucide-react';
import {
    DropdownMenuGroup,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuPortal,
    DropdownMenuSeparator,
    DropdownMenuSub,
    DropdownMenuSubContent,
    DropdownMenuSubTrigger,
} from '@/components/ui/dropdown-menu';
import { UserInfo } from '@/components/user-info';
import { useLanguage } from '@/contexts/language-context';
import { useAppearance } from '@/hooks/use-appearance';
import { useMobileNavigation } from '@/hooks/use-mobile-navigation';
import { cn, toUrl } from '@/lib/utils';
import { logout } from '@/routes';
import { edit } from '@/routes/profile';

const THEME_MODES = [
    { value: 'light', icon: Sun, labelKey: 'themeLight' },
    { value: 'dark', icon: Moon, labelKey: 'themeDark' },
];

export function UserMenuContent({ user }) {
    const { t } = useLanguage();
    const a = t.settings.appearance;
    const { appearance, resolvedAppearance, updateAppearance } = useAppearance();
    const cleanup = useMobileNavigation();

    const handleLogout = () => {
        cleanup();
        router.flushAll();
        router.post(toUrl(logout.url()));
    };

    const selectedTheme =
        appearance === 'system' ? resolvedAppearance : appearance;

    return (
        <>
            <DropdownMenuLabel className="p-0 font-normal">
                <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
                    <UserInfo user={user} showEmail={true} />
                </div>
            </DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
                <DropdownMenuItem asChild>
                    <Link
                        className="flex w-full cursor-pointer items-center gap-2"
                        href={toUrl(edit())}
                        prefetch
                        onClick={cleanup}
                    >
                        <Settings className="size-4 shrink-0" />
                        {t.user.settings}
                    </Link>
                </DropdownMenuItem>
                <DropdownMenuSub>
                    <DropdownMenuSubTrigger className="gap-2">
                        <Palette className="size-4 shrink-0" />
                        <span className="flex-1 text-start">{t.user.theme}</span>
                    </DropdownMenuSubTrigger>
                    <DropdownMenuPortal>
                        <DropdownMenuSubContent sideOffset={4} alignOffset={-4}>
                            {THEME_MODES.map(({ value, icon: Icon, labelKey }) => {
                                const selected = selectedTheme === value;
                                return (
                                    <DropdownMenuItem
                                        key={value}
                                        onClick={() => updateAppearance(value)}
                                        className={cn('gap-2', selected && 'bg-accent')}
                                    >
                                        <Icon className="size-4 shrink-0" />
                                        <span className="flex-1 text-start">{a[labelKey]}</span>
                                        {selected ? (
                                            <Check className="size-4 shrink-0 opacity-100" />
                                        ) : null}
                                    </DropdownMenuItem>
                                );
                            })}
                        </DropdownMenuSubContent>
                    </DropdownMenuPortal>
                </DropdownMenuSub>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuItem
                className="flex cursor-pointer items-center gap-2"
                onClick={handleLogout}
                data-test="logout-button"
            >
                <LogOut className="size-4 shrink-0" />
                {t.user.logOut}
            </DropdownMenuItem>
        </>
    );
}