'use client';

import React, { useState, useEffect } from 'react';
import { useTheme } from '@/features/theme';
import { Sun, Moon, Monitor } from 'lucide-react';
import { Button } from '@/features/shared/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuTrigger,
    DropdownMenuContent,
    DropdownMenuItem
} from '@/features/shared/components/ui/dropdown-menu';
import { cn } from '@/shared/lib/utils';

/**
 * EN: Enhanced Theme Toggle - Professional theme switcher with brand styling
 * VI: Theme Toggle nâng cao - Bộ chuyển theme chuyên nghiệp với brand styling
 * 
 * Features:
 * - Dropdown menu with 3 options: Light, Dark, System
 * - Glassmorphism styling
 * - Icons from lucide-react
 * - Smooth transitions
 * - Keyboard accessible
 * - Prevents hydration mismatch
 * 
 * @example
 * ```tsx
 * <ThemeToggle />
 * ```
 */
export function ThemeToggle() {
    const { theme, setTheme, resolvedTheme } = useTheme();

    // EN: Track mounted state to prevent hydration mismatch
    // VI: Theo dõi trạng thái mounted để tránh hydration mismatch
    const [mounted, setMounted] = useState(false);

    useEffect(() => {
        setMounted(true);
    }, []);

    const themeOptions = [
        { value: 'light' as const, label: 'Light', icon: Sun },
        { value: 'dark' as const, label: 'Dark', icon: Moon },
        { value: 'system' as const, label: 'System', icon: Monitor },
    ];

    // EN: Use Monitor icon during SSR to prevent mismatch
    // VI: Sử dụng icon Monitor trong SSR để tránh mismatch
    const currentIcon = !mounted ? Monitor : (resolvedTheme === 'dark' ? Moon : Sun);
    const CurrentIcon = currentIcon;

    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <Button
                    variant="ghost"
                    size="sm"
                    className="text-text-primary border border-border-primary hover:bg-bg-secondary transition-all"
                    aria-label="Toggle theme"
                >
                    <CurrentIcon className="h-5 w-5" />
                </Button>
            </DropdownMenuTrigger>

            <DropdownMenuContent
                align="end"
                className="bg-bg-primary border border-border-primary shadow-xl min-w-[150px]"
            >
                {themeOptions.map((option) => {
                    const Icon = option.icon;
                    const isActive = theme === option.value;

                    return (
                        <DropdownMenuItem
                            key={option.value}
                            onClick={() => setTheme(option.value)}
                            className={cn(
                                'flex items-center gap-2 px-3 py-2 cursor-pointer transition-colors',
                                'hover:bg-bg-tertiary focus:bg-bg-tertiary',
                                isActive && 'bg-brand-primary/10 text-brand-primary'
                            )}
                        >
                            <Icon className="h-4 w-4" />
                            <span>{option.label}</span>
                            {isActive && (
                                <span className="ml-auto text-brand-primary">✓</span>
                            )}
                        </DropdownMenuItem>
                    );
                })}
            </DropdownMenuContent>
        </DropdownMenu>
    );
}

/**
 * EN: Simple Theme Toggle Button - Toggles between light and dark only
 * VI: Button Toggle Theme đơn giản - Chỉ chuyển đổi giữa light và dark
 * 
 * @example
 * ```tsx
 * <ThemeToggleButton />
 * ```
 */
export function ThemeToggleButton() {
    const { toggleTheme, resolvedTheme } = useTheme();

    // EN: Track mounted state to prevent hydration mismatch
    // VI: Theo dõi trạng thái mounted để tránh hydration mismatch
    const [mounted, setMounted] = useState(false);

    useEffect(() => {
        setMounted(true);
    }, []);

    // EN: Use Monitor icon during SSR to prevent mismatch
    // VI: Sử dụng icon Monitor trong SSR để tránh mismatch
    const Icon = !mounted ? Monitor : (resolvedTheme === 'dark' ? Sun : Moon);

    return (
        <Button
            variant="glass"
            size="md"
            className="w-10 h-10 p-0"
            onClick={toggleTheme}
            aria-label={`Switch to ${resolvedTheme === 'dark' ? 'light' : 'dark'} mode`}
        >
            <Icon className="h-5 w-5 transition-transform duration-normal hover:rotate-12" />
        </Button>
    );
}
