import { Button } from '@/components/ui/button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { useAppearance } from '@/hooks/use-appearance';
import { PRIMARY_FOREGROUND_KEY, setCssVar, setSidebarColors, SIDEBAR_COLOR_KEY, SIDEBAR_OVERRIDE_KEY } from '@/lib/theme';
import { Monitor, Moon, Sun } from 'lucide-react';
import { HTMLAttributes, useEffect, useState } from 'react';

export default function AppearanceToggleTab({ className = '', ...props }: HTMLAttributes<HTMLDivElement>) {
    const { appearance, updateAppearance } = useAppearance();

    // include a non-theme option for toggling the left sidebar style
    const tabs: { value: string; label: string }[] = [
        { value: 'light', label: 'Light' },
        { value: 'dark', label: 'Dark' },
        { value: 'dark-sidebar', label: 'Dark Sidebar' },
        { value: 'system', label: 'System' },
    ];

    // Track whether the left sidebar is using the dark variant
    const [isSidebarDark, setIsSidebarDark] = useState<boolean>(() => {
        try {
            if (typeof localStorage === 'undefined') return true;
            return localStorage.getItem(SIDEBAR_COLOR_KEY) === '#12162d';
        } catch (e) {
            return true;
        }
    });

    // Track which tab is selected so only one item is active at a time
    const [selectedTab, setSelectedTab] = useState<string>(() => {
        try {
            if (typeof localStorage === 'undefined') return appearance || 'light';

            const sidebarColor = localStorage.getItem(SIDEBAR_COLOR_KEY);
            const sidebarOverride = localStorage.getItem(SIDEBAR_OVERRIDE_KEY);

            if (sidebarColor === '#12162d' && sidebarOverride === 'explicit') {
                return 'dark-sidebar';
            }

            if (appearance === 'dark') {
                return 'dark';
            }
        } catch (e) {
            // ignore
        }

        return appearance || 'system';
    });

    // Ensure CSS variables are in sync on mount and when value changes
    useEffect(() => {
        try {
            const sidebarColor =
                (typeof localStorage !== 'undefined' && localStorage.getItem(SIDEBAR_COLOR_KEY)) || (isSidebarDark ? '#12162d' : '#ffffff');
            const primary =
                (typeof localStorage !== 'undefined' && localStorage.getItem(PRIMARY_FOREGROUND_KEY)) || (isSidebarDark ? '#FFFFFF' : '#3F3F46');
            const sidebarOverride = typeof localStorage !== 'undefined' ? localStorage.getItem(SIDEBAR_OVERRIDE_KEY) : null;
            const persistedMenuActive = typeof localStorage !== 'undefined' ? localStorage.getItem('menu-active-color') : null;
            const menuActive = persistedMenuActive || (sidebarColor === '#12162d' && sidebarOverride === 'explicit' ? '#020617' : undefined);
            setSidebarColors(sidebarColor, primary, menuActive);
            setIsSidebarDark(sidebarColor === '#12162d');

            if (sidebarColor === '#12162d' && sidebarOverride === 'explicit') {
                setSelectedTab('dark-sidebar');
            } else {
                setSelectedTab(appearance || 'system');
            }
        } catch (e) {
            // ignore
        }

        const onStorage = (ev: StorageEvent) => {
            if (ev.key === SIDEBAR_COLOR_KEY) {
                const isDark = ev.newValue === '#12162d';
                setIsSidebarDark(isDark);
                try {
                    const sidebarOverride = localStorage.getItem(SIDEBAR_OVERRIDE_KEY);
                    if (isDark && sidebarOverride === 'explicit') {
                        setSelectedTab('dark-sidebar');
                    } else if (selectedTab === 'dark-sidebar') {
                        setSelectedTab(appearance || 'system');
                    }
                } catch (e) {
                    // ignore
                }
            }

            if (ev.key === SIDEBAR_OVERRIDE_KEY) {
                if (ev.newValue === 'explicit') {
                    setSelectedTab('dark-sidebar');
                } else {
                    setSelectedTab(appearance || 'system');
                }
            }
        };

        try {
            window.addEventListener('storage', onStorage);
        } catch (e) {
            // ignore
        }

        return () => {
            try {
                window.removeEventListener('storage', onStorage);
            } catch (e) {
                // ignore
            }
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    // Keep selectedTab in sync with external appearance changes (unless user explicitly has dark-sidebar selected)
    useEffect(() => {
        try {
            const sidebarOverride = typeof localStorage !== 'undefined' ? localStorage.getItem(SIDEBAR_OVERRIDE_KEY) : null;
            if (sidebarOverride === 'explicit') return;
        } catch (e) {
            // ignore
        }

        if (selectedTab !== 'dark-sidebar') {
            setSelectedTab(appearance || 'system');
        }
        if (appearance === 'light') {
            setCssVar('--color-text-primary', '#000000');
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [appearance]);

    const getCurrentIcon = () => {
        switch (appearance) {
            case 'dark':
                return <Moon className="h-5 w-5" />;
            case 'light':
                return <Sun className="h-5 w-5" />;
            default:
                return <Monitor className="h-5 w-5" />;
        }
    };

    const handleSelect = (value: string) => {
        setSelectedTab(value);

        if (value === 'light' || value === 'dark' || value === 'system') {
            if (value === 'light') {
                setSidebarColors('#ffffff', '#3F3F46');
                setIsSidebarDark(false);
                setCssVar('--color-text-primary', '#000000');
            } else if (value === 'dark') {
                setSidebarColors('#12162d', '#FFFFFF');
                setIsSidebarDark(true);
            }

            try {
                if (typeof localStorage !== 'undefined') {
                    localStorage.removeItem(SIDEBAR_OVERRIDE_KEY);
                }
            } catch (e) {
                // ignore
            }

            updateAppearance(value as any);
            return;
        }

        if (value === 'dark-sidebar') {
            console.log('🚀 ~ handleSelect ~ value:', value);

            try {
                updateAppearance('light' as any);
            } catch (e) {
                // ignore if updateAppearance isn't available
            }

            setSidebarColors('#12162d', '#FFFFFF', '#020617');
            setIsSidebarDark(true);
            try {
                if (typeof localStorage !== 'undefined') {
                    localStorage.setItem(SIDEBAR_OVERRIDE_KEY, 'explicit');
                }
            } catch (e) {
                // ignore
            }

            return;
        }
    };

    return (
        <div className="">
            <DropdownMenu>
                <DropdownMenuTrigger asChild>
                    <Button variant="ghost" size="icon" className="h-8 w-8 rounded-md border">
                        {getCurrentIcon()}
                        <span className="sr-only">Toggle theme</span>
                    </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="bg-background">
                    {tabs.map(({ value, label }) => (
                        <DropdownMenuItem key={value} onClick={() => handleSelect(value)}>
                            <span className="flex items-center gap-2">
                                {value === 'light' && <Sun className="h-5 w-5" />}
                                {value === 'dark' && <Moon className="h-5 w-5" />}
                                {value === 'system' && <Monitor className="h-5 w-5" />}
                                {value === 'dark-sidebar' && (
                                    <span className="flex h-4 w-4 border">
                                        <span className="w-1/3 bg-gray-900" />
                                        <span className="flex-1 bg-white" />
                                    </span>
                                )}
                                <span>{label}</span>
                            </span>
                        </DropdownMenuItem>
                    ))}
                </DropdownMenuContent>
            </DropdownMenu>
        </div>
    );
}