'use client';

import React from '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';
import { useI18n } from '../i18n-context';

/**
 * EN: Language configuration
 * VI: Cấu hình ngôn ngữ
 */
const languages = [
    { code: 'en', label: 'English', nativeName: 'English' },
    { code: 'vi', label: 'Tiếng Việt', nativeName: 'Tiếng Việt' },
] as const;

export type LanguageCode = typeof languages[number]['code'];

/**
 * EN: Language Switcher - Multi-language support
 * VI: Bộ chuyển ngôn ngữ - Hỗ trợ đa ngôn ngữ
 * 
 * Features:
 * - Dropdown menu for language selection
 * - Persists locale to localStorage via context
 * - Smooth language switching without page reload
 * 
 * @example
 * ```tsx
 * <LanguageSwitcher />
 * ```
 */
export function LanguageSwitcher() {
    const { locale: currentLocale, setLocale } = useI18n();

    const currentLanguage = languages.find(lang => lang.code === currentLocale) || languages[0];

    /**
     * EN: Handle language change
     * VI: Xử lý thay đổi ngôn ngữ
     */
    const handleLanguageChange = (newLocale: LanguageCode) => {
        setLocale(newLocale as any);
    };

    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <Button
                    variant="ghost"
                    size="sm"
                    className="text-text-primary border border-border-primary hover:bg-bg-secondary transition-all gap-2"
                    aria-label="Change language"
                >
                    <span className="font-medium">{currentLanguage.code.toUpperCase()}</span>
                </Button>
            </DropdownMenuTrigger>

            <DropdownMenuContent
                align="end"
                className="bg-bg-primary border border-border-primary shadow-xl min-w-[150px]"
            >
                {languages.map((language) => {
                    const isActive = currentLocale === language.code;

                    return (
                        <DropdownMenuItem
                            key={language.code}
                            onClick={() => handleLanguageChange(language.code)}
                            className={cn(
                                'flex items-center gap-3 px-3 py-2 cursor-pointer transition-colors',
                                'hover:bg-bg-tertiary focus:bg-bg-tertiary',
                                isActive && 'bg-brand-primary/10 text-brand-primary'
                            )}
                        >
                            <div className="flex flex-col">
                                <span className="font-medium">{language.nativeName}</span>
                                <span className="text-xs text-text-tertiary">{language.label}</span>
                            </div>
                            {isActive && (
                                <span className="ml-auto text-brand-primary">✓</span>
                            )}
                        </DropdownMenuItem>
                    );
                })}
            </DropdownMenuContent>
        </DropdownMenu>
    );
}

/**
 * EN: Compact Language Switcher - Shows only code
 * VI: Language Switcher nhỏ gọn - Chỉ hiển thị mã
 * 
 * @example
 * ```tsx
 * <LanguageSwitcherCompact />
 * ```
 */
export function LanguageSwitcherCompact() {
    const { locale: currentLocale, setLocale } = useI18n();
    const currentLanguage = languages.find(lang => lang.code === currentLocale) || languages[0];

    const toggleLanguage = () => {
        const newLocale = currentLocale === 'en' ? 'vi' : 'en';
        setLocale(newLocale);
    };

    return (
        <Button
            variant="glass"
            size="md"
            className="w-10 h-10 p-0 text-lg"
            onClick={toggleLanguage}
            aria-label={`Switch to ${currentLocale === 'en' ? 'Vietnamese' : 'English'}`}
        >
            <span className="font-medium text-sm">
                {currentLanguage.code.toUpperCase()}
            </span>
        </Button>
    );
}
