import React, { useState } from 'react';
import { initializeAccount } from '../services/auth';
import { User, Language } from '../types';
import { Globe, ArrowRight, Check, Calendar } from 'lucide-react';
import { DatePicker } from './ui/DatePicker';
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 [birthDate, setBirthDate] = useState('');
    const [height, setHeight] = useState('');
    const [weight, setWeight] = useState('');
    const [gender, setGender] = useState<'MALE' | 'FEMALE' | 'OTHER'>('MALE');

    const handleInitialize = async () => {
        setIsSubmitting(true);
        setError('');

        const profileData: any = {};
        if (birthDate) profileData.birthDate = birthDate;
        if (height) profileData.height = parseFloat(height);
        if (weight) profileData.weight = parseFloat(weight);
        if (gender) profileData.gender = gender;

        const res = await initializeAccount(language, profileData);
        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="min-h-screen bg-surface flex flex-col items-center justify-center p-6 sm:p-8">
            <div className="w-full max-w-sm bg-surface-container p-8 rounded-[28px] shadow-elevation-2 flex flex-col items-center max-h-[90vh] overflow-y-auto custom-scrollbar">
                <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>

                <div className="w-full mb-8">
                    <div className="space-y-4 animate-in fade-in slide-in-from-top-2 duration-300">
                        <DatePicker
                            label={t('birth_date', language)}
                            value={birthDate}
                            onChange={(val) => setBirthDate(val)}
                            maxDate={new Date()}
                            testId="init-birth-date"
                        />
                        <div className="grid grid-cols-2 gap-4">
                            <div>
                                <label htmlFor="height" className="block text-xs text-on-surface-variant mb-1 ml-1">{t('height', language)}</label>
                                <input
                                    id="height"
                                    type="number"
                                    placeholder="cm"
                                    value={height}
                                    onChange={(e) => setHeight(e.target.value)}
                                    className="w-full p-4 rounded-2xl bg-surface-container-high border border-outline-variant/30 text-on-surface focus:border-primary focus:outline-none transition-all"
                                />
                            </div>
                            <div>
                                <label htmlFor="weight" className="block text-xs text-on-surface-variant mb-1 ml-1">{t('bodyweight', language).split('(')[0].trim()}</label>
                                <input
                                    id="weight"
                                    type="number"
                                    placeholder="kg"
                                    value={weight}
                                    onChange={(e) => setWeight(e.target.value)}
                                    className="w-full p-4 rounded-2xl bg-surface-container-high border border-outline-variant/30 text-on-surface focus:border-primary focus:outline-none transition-all"
                                />
                            </div>
                        </div>
                        <div>
                            <label htmlFor="gender" className="block text-xs text-on-surface-variant mb-1 ml-1">{t('gender', language)}</label>
                            <select
                                id="gender"
                                value={gender}
                                onChange={(e) => setGender(e.target.value as any)}
                                className="w-full p-4 rounded-2xl bg-surface-container-high border border-outline-variant/30 text-on-surface focus:border-primary focus:outline-none transition-all appearance-none"
                            >
                                <option value="MALE">{t('male', language)}</option>
                                <option value="FEMALE">{t('female', language)}</option>
                                <option value="OTHER">{t('other', language)}</option>
                            </select>
                        </div>
                    </div>
                </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;
