import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Icon } from '@/components/ui/icon';
import type { Appearance } from '@/hooks/use-appearance';
import { useAppearance } from '@/hooks/use-appearance';
import { useI18n } from '@/hooks/use-i18n';
import { cn } from '@/lib/utils';

const APPEARANCE_OPTIONS: {
    value: Appearance;
    icon: string;
    labelKey: string;
}[] = [
    { value: 'light', icon: 'solar:sun-bold-duotone', labelKey: 'sidebar.appearance.theme.light' },
    { value: 'dark', icon: 'solar:moon-bold-duotone', labelKey: 'sidebar.appearance.theme.dark' },
    {
        value: 'system',
        icon: 'solar:monitor-smartphone-bold-duotone',
        labelKey: 'sidebar.appearance.theme.system',
    },
];

function appearanceIcon(value: Appearance): string {
    return APPEARANCE_OPTIONS.find((option) => option.value === value)?.icon ?? 'solar:monitor-smartphone-bold-duotone';
}

type AppearanceThemeMenuProps = {
    className?: string;
};

export function AppearanceThemeMenu({ className }: AppearanceThemeMenuProps) {
    const { t } = useI18n();
    const { appearance, updateAppearance } = useAppearance();

    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <Button
                    variant="outline"
                    size="sm"
                    className={cn('h-8 gap-2 text-muted-foreground', className)}
                    aria-label={t('sidebar.appearance.title')}
                >
                    <Icon icon={appearanceIcon(appearance)} className="size-4 shrink-0" />
                    <span className="hidden sm:inline">{t('sidebar.appearance.menu')}</span>
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent
                align="end"
                className="min-w-44"
                onCloseAutoFocus={(event) => event.preventDefault()}
            >
                <DropdownMenuLabel className="text-left">
                    {t('sidebar.appearance.title')}
                </DropdownMenuLabel>
                <DropdownMenuSeparator />
                {APPEARANCE_OPTIONS.map(({ value, icon, labelKey }) => (
                    <DropdownMenuItem
                        key={value}
                        className="cursor-pointer justify-start gap-2 pl-2"
                        onSelect={() => updateAppearance(value)}
                    >
                        <Icon icon={icon} className="size-4 shrink-0" />
                        <span className="flex-1 text-left">{t(labelKey)}</span>
                        {appearance === value ? (
                            <Icon
                                icon="solar:check-circle-bold-duotone"
                                className="size-4 shrink-0 text-primary"
                            />
                        ) : (
                            <span className="size-4 shrink-0" aria-hidden />
                        )}
                    </DropdownMenuItem>
                ))}
            </DropdownMenuContent>
        </DropdownMenu>
    );
}