import React, { useState } from 'react';
import { initializeAccount } from '../services/auth';
import { User, Language } from '../types';
import { Globe, ArrowRight, Check } from 'lucide-react';
import { t } from '../services/i18n';

interface InitializeAccountProps {
    onInitialized: (user: User) => void;
    language: Language;
    onLanguageChange: (lang: Language) => void;
}

const InitializeAccount: React.FC<InitializeAccountProps> = ({ onInitialized, language, onLanguageChange }) => {
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [error, setError] = useState('');

    const handleInitialize = async () => {
        setIsSubmitting(true);
        setError('');
        const res = await initializeAccount(language);
        if (res.success && res.user) {
            onInitialized(res.user);
        } else {
            setError(res.error || 'Failed to initialize account');
            setIsSubmitting(false);
        }
    };

    const languages: { code: Language; label: string; desc: string }[] = [
        { code: 'en', label: 'English', desc: t('init_lang_en_desc', language) },
        { code: 'ru', label: 'Русский', desc: t('init_lang_ru_desc', language) },
    ];

    return (
        <div className="h-screen bg-surface flex flex-col items-center justify-center p-6 bg-surface">
            <div className="w-full max-w-sm bg-surface-container p-8 rounded-[28px] shadow-elevation-2 flex flex-col items-center">
                <div className="w-16 h-16 bg-primary-container rounded-2xl flex items-center justify-center text-on-primary-container mb-6 shadow-elevation-1">
                    <Globe size={32} />
                </div>

                <h1 className="text-2xl font-normal text-on-surface mb-2 text-center">
                    {t('init_title', language)}
                </h1>
                <p className="text-sm text-on-surface-variant mb-8 text-center balance">
                    {t('init_desc', language)}
                </p>

                {error && (
                    <div className="w-full text-error text-sm text-center bg-error-container/10 p-3 rounded-xl mb-6 border border-error/10">
                        {error}
                    </div>
                )}

                <div className="w-full space-y-3 mb-8">
                    {languages.map((lang) => (
                        <button
                            key={lang.code}
                            onClick={() => onLanguageChange(lang.code)}
                            className={`w-full p-4 rounded-2xl border-2 transition-all flex items-center justify-between group ${language === lang.code
                                ? 'border-primary bg-primary/5'
                                : 'border-outline-variant/30 hover:border-outline-variant hover:bg-surface-container-high'
                                }`}
                        >
                            <div className="text-left">
                                <div className={`font-medium ${language === lang.code ? 'text-primary' : 'text-on-surface'}`}>
                                    {lang.label}
                                </div>
                                <div className="text-xs text-on-surface-variant">
                                    {lang.desc}
                                </div>
                            </div>
                            {language === lang.code && (
                                <div className="w-6 h-6 bg-primary text-on-primary rounded-full flex items-center justify-center">
                                    <Check size={14} strokeWidth={3} />
                                </div>
                            )}
                        </button>
                    ))}
                </div>

                <button
                    onClick={handleInitialize}
                    disabled={isSubmitting}
                    className="w-full py-4 bg-primary text-on-primary rounded-full font-medium text-lg shadow-elevation-1 flex items-center justify-center gap-2 hover:shadow-elevation-2 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
                >
                    {isSubmitting ? (
                        <div className="w-6 h-6 border-2 border-on-primary/30 border-t-on-primary rounded-full animate-spin" />
                    ) : (
                        <>
                            {t('init_start', language)} <ArrowRight size={20} />
                        </>
                    )}
                </button>
            </div>
        </div>
    );
};

export default InitializeAccount;