import React, { useState } from 'react';
import { IMaskInput } from 'react-imask';
import axios from 'axios';

export default function CompleteProfile({ regions, villes, submitUrl, logoutUrl, user }) {
    const CITY_TO_REGION = {
        'Dakar': 'Dakar', 'Guédiawaye': 'Dakar', 'Pikine': 'Dakar', 'Rufisque': 'Dakar', 'Bargny': 'Dakar', 'Keur Massar': 'Dakar', 'Sébikotane': 'Dakar', 'Diamniadio': 'Dakar',
        'Thiès': 'Thiès', 'Tivaouane': 'Thiès', 'Mbour': 'Thiès', 'Joal-Fadiouth': 'Thiès', 'Ngaparou': 'Thiès', 'Saly': 'Thiès', 'Popenguine': 'Thiès', 'Pout': 'Thiès',
        'Saint-Louis': 'Saint-Louis', 'Richard-Toll': 'Saint-Louis', 'Dagana': 'Saint-Louis', 'Podor': 'Saint-Louis',
        'Louga': 'Louga', 'Kébémer': 'Louga', 'Linguère': 'Louga',
        'Diourbel': 'Diourbel', 'Mbacké': 'Diourbel', 'Bambey': 'Diourbel',
        'Kaolack': 'Kaolack', 'Nioro du Rip': 'Kaolack', 'Guinguinéo': 'Kaolack',
        'Fatick': 'Fatick', 'Foundiougne': 'Fatick', 'Gossas': 'Fatick',
        'Kaffrine': 'Kaffrine', 'Birkilane': 'Kaffrine', 'Koungheul': 'Kaffrine', 'Malem Hodar': 'Kaffrine',
        'Kolda': 'Kolda', 'Velingara': 'Kolda', 'Medina Yoro Foulah': 'Kolda',
        'Sédhiou': 'Sédhiou', 'Bounkiling': 'Sédhiou', 'Goudomp': 'Sédhiou',
        'Ziguinchor': 'Ziguinchor', 'Bignona': 'Ziguinchor', 'Oussouye': 'Ziguinchor',
        'Tambacounda': 'Tambacounda', 'Bakel': 'Tambacounda', 'Goudiry': 'Tambacounda', 'Koumpentoum': 'Tambacounda',
        'Kédougou': 'Kédougou', 'Salémata': 'Saraya', 'Saraya': 'Kédougou',
        'Matam': 'Matam', 'Kanel': 'Matam', 'Ranérou': 'Matam'
    };

    const [formData, setFormData] = useState({
        telephone: user?.telephone || '',
        region: user?.region || '',
        ville: user?.ville || '',
        adresse: user?.adresse || ''
    });

    const [errors, setErrors] = useState({});
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [serverError, setServerError] = useState(null);

    const validateField = (name, value) => {
        let error = '';
        switch (name) {
            case 'telephone':
                const phoneValue = value.replace(/[\s-]/g, '');
                const phoneRegex = /^\+221(7[05678]|30|33)\d{7}$/;
                if (!value || phoneValue === '+2217') {
                    error = 'Le téléphone est requis';
                } else if (!phoneRegex.test(phoneValue)) {
                    error = 'Format invalide (ex: +221 77 123 45 67)';
                }
                break;
            case 'ville':
                if (!value) error = 'La ville est requise';
                break;
            case 'adresse':
                if (!value) error = "L'adresse est requise";
                else if (value.length < 5) error = "L'adresse est trop courte";
                break;
            default:
                break;
        }
        return error;
    };

    const handleChange = (e) => {
        const { name, value } = e.target;
        
        let newFormData = { ...formData, [name]: value };

        // Auto-assign region based on city selection
        if (name === 'ville') {
            const correspondingRegion = CITY_TO_REGION[value] || '';
            newFormData = { ...newFormData, region: correspondingRegion };
        }

        setFormData(newFormData);

        const error = validateField(name, value);
        setErrors(prev => ({ 
            ...prev, 
            [name]: error,
            ...(name === 'ville' ? { region: '' } : {}) 
        }));
    };

    const handleSubmit = async (e) => {
        e.preventDefault();

        const newErrors = {};
        Object.keys(formData).forEach(key => {
            if (key === 'region' && formData.ville) return;
            const error = validateField(key, formData[key]);
            if (error) newErrors[key] = error;
        });

        if (Object.keys(newErrors).length > 0) {
            setErrors(newErrors);
            return;
        }

        setIsSubmitting(true);
        setServerError(null);

        try {
            const params = new FormData();
            params.append('telephone', formData.telephone.replace(/[\s]/g, ''));
            params.append('region', formData.region);
            params.append('ville', formData.ville);
            params.append('adresse', formData.adresse);

            const response = await axios.post(submitUrl, params);

            if (response.data.reponse || response.data.success) {
                window.location.href = '/my-account/'; // Dashboard
            } else {
                setServerError(response.data.message || 'Une erreur est survenue.');
            }
        } catch (error) {
            setServerError(error.response?.data?.message || 'Erreur de connexion au serveur.');
        } finally {
            setIsSubmitting(false);
        }
    };

    return (
        <div className="card shadow-lg border-0" style={{ borderRadius: '24px', overflow: 'hidden' }}>
            <div className="card-body p-4 p-md-5">
                <div className="text-center mb-4">
                    <div className="d-inline-flex align-items-center justify-content-center rounded-circle bg-light mb-3" style={{ width: '80px', height: '80px' }}>
                        <i className="fas fa-user-check fa-2x text-primary"></i>
                    </div>
                    <h2 className="h3 font-weight-bold mb-2">Finalisons votre profil</h2>
                    <p className="text-muted">Ces informations sont essentielles pour faciliter les restitutions d'objets.</p>
                </div>

                {serverError && (
                    <div className="alert alert-danger d-flex align-items-center mb-4" style={{ borderRadius: '12px' }}>
                        <i className="fas fa-exclamation-circle mr-3"></i>
                        <div>{serverError}</div>
                    </div>
                )}

                <form onSubmit={handleSubmit}>
                    <div className="alert alert-light py-2 px-3 mb-4 d-flex align-items-center" style={{ borderRadius: '10px', background: '#f8f9fb', border: '1px solid #e8eaf0' }}>
                        <i className="fas fa-info-circle text-primary mr-2 small"></i>
                        <span className="small font-weight-bold text-muted">Tous les champs sont obligatoires.</span>
                    </div>
                    <div className="form-group mb-4">
                        <label className="font-weight-bold text-muted small text-uppercase mb-2">Numéro de Téléphone</label>
                        <IMaskInput
                            mask="+221 #0 000 00 00"
                            definitions={{ '#': /[7]/ }}
                            lazy={false}
                            name="telephone"
                            value={formData.telephone}
                            unmask={false}
                            onAccept={(value) => handleChange({ target: { name: 'telephone', value } })}
                            placeholder="+221 7X XXX XX XX"
                            className={`form-control form-control-lg ${errors.telephone ? 'is-invalid' : ''}`}
                            style={{ borderRadius: '12px', fontSize: '1rem', border: '2px solid #eee' }}
                        />
                        {errors.telephone && <div className="invalid-feedback d-block font-weight-bold">{errors.telephone}</div>}
                    </div>

                    <div className="row">
                        <div className="col-md-12 mb-4">
                            <label className="font-weight-bold text-muted small text-uppercase mb-2">Ville (Sénégal)</label>
                            <select
                                name="ville"
                                value={formData.ville}
                                onChange={handleChange}
                                className={`form-control form-control-lg ${errors.ville ? 'is-invalid' : ''}`}
                                style={{ borderRadius: '12px', fontSize: '1rem', border: '2px solid #eee' }}
                            >
                                <option value="">Choisir votre ville de résidence</option>
                                {['Dakar', 'Guédiawaye', 'Pikine', 'Rufisque', 'Bargny', 'Keur Massar', 'Sébikotane', 'Diamniadio', 'Thiès', 'Tivaouane', 'Mbour', 'Joal-Fadiouth', 'Ngaparou', 'Saly', 'Popenguine', 'Pout', 'Saint-Louis', 'Richard-Toll', 'Dagana', 'Podor', 'Louga', 'Kébémer', 'Linguère', 'Diourbel', 'Mbacké', 'Bambey', 'Kaolack', 'Nioro du Rip', 'Guinguinéo', 'Fatick', 'Foundiougne', 'Gossas', 'Kaffrine', 'Birkilane', 'Koungheul', 'Malem Hodar', 'Kolda', 'Velingara', 'Medina Yoro Foulah', 'Sédhiou', 'Bounkiling', 'Goudomp', 'Ziguinchor', 'Bignona', 'Oussouye', 'Tambacounda', 'Bakel', 'Goudiry', 'Koumpentoum', 'Kédougou', 'Salémata', 'Saraya', 'Matam', 'Kanel', 'Ranérou'].map(v => <option key={v} value={v}>{v}</option>)}
                            </select>
                            {errors.ville && <div className="invalid-feedback d-block font-weight-bold">{errors.ville}</div>}
                        </div>
                    </div>

                    <div className="form-group mb-4">
                        <label className="font-weight-bold text-muted small text-uppercase mb-2">Adresse détaillée</label>
                        <input
                            type="text"
                            name="adresse"
                            value={formData.adresse}
                            onChange={handleChange}
                            placeholder="Rue, Quartier, etc."
                            className={`form-control form-control-lg ${errors.adresse ? 'is-invalid' : ''}`}
                            style={{ borderRadius: '12px', fontSize: '1rem', border: '2px solid #eee' }}
                        />
                        {errors.adresse && <div className="invalid-feedback d-block font-weight-bold">{errors.adresse}</div>}
                    </div>

                    <button
                        type="submit"
                        disabled={isSubmitting}
                        className="btn btn-primary btn-block btn-lg shadow-sm py-3"
                        style={{ borderRadius: '12px', fontWeight: 'bold', transition: 'all 0.3s' }}
                    >
                        {isSubmitting ? (
                            <><span className="spinner-border spinner-border-sm mr-2"></span> Enregistrement...</>
                        ) : (
                            <>Enregistrer et terminer <i className="fas fa-check-circle ml-2"></i></>
                        )}
                    </button>
                </form>

                <div className="text-center mt-4">
                    <a href={logoutUrl} className="text-muted small text-decoration-none hover-primary">
                        <i className="fas fa-sign-out-alt mr-2"></i> Se déconnecter
                    </a>
                </div>
            </div>
        </div>
    );
}