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

export default function ReclamationForm({ objetId, userPrenom = '', userNom = '', userTelephone = '', userEmail = '', isLoggedIn: initialIsLoggedIn = false, loginUrl = '/login', csrfToken = '' }) {
    const [step, setStep] = useState(1);
    const [isLoggedIn, setIsLoggedIn] = useState(initialIsLoggedIn);
    const [showLoginModal, setShowLoginModal] = useState(false);
    const [formData, setFormData] = useState({
        prenom: userPrenom,
        nom: userNom,
        telephone: userTelephone,
        email: userEmail,
        message: '',
        fichier: null,
        consent: false
    });

    const [loginData, setLoginData] = useState({ email: '', password: '' });
    const [loginError, setLoginError] = useState(null);
    const [isLoggingIn, setIsLoggingIn] = useState(false);

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

    const handleLogin = async (e) => {
        e.preventDefault();
        setIsLoggingIn(true);
        setLoginError(null);

        try {
            const params = new URLSearchParams();
            params.append('email', loginData.email);
            params.append('password', loginData.password);
            params.append('_csrf_token', csrfToken);

            const response = await axios.post('/login', params, {
                headers: { 'Accept': 'application/json', 'Content-Type': 'application/x-www-form-urlencoded' }
            });

            if (response.data.success) {
                const user = response.data.user;
                setFormData(prev => ({
                    ...prev,
                    prenom: user.prenom || '',
                    nom: user.nom || '',
                    telephone: user.telephone || '',
                    email: user.email || ''
                }));
                setIsLoggedIn(true);
                setShowLoginModal(false);
            }
        } catch (error) {
            setLoginError(error.response?.data?.error || 'Identifiants invalides.');
        } finally {
            setIsLoggingIn(false);
        }
    };

    const handleLoginChange = (e) => {
        const { name, value } = e.target;
        setLoginData(prev => ({ ...prev, [name]: value }));
    };

    const validateField = (name, value) => {
        let error = null;
        switch (name) {
            case 'prenom':
                if (!value) error = 'Le prénom est requis';
                break;
            case 'nom':
                if (!value) error = 'Le nom est requis';
                break;
            case 'telephone':
                const safeValue = value || '';
                const phoneDigits = safeValue.replace(/\D/g, '');
                const unmasked = safeValue.replace(/[\s\-_]/g, '');

                if (!safeValue || phoneDigits.length <= 4) {
                    error = 'Le téléphone est requis';
                } else if (phoneDigits.length < 12 || !/^\+221(7[05678]|30|33)\d{7}$/.test(unmasked)) {
                    error = 'Format invalide (ex: +221 77 123 45 67)';
                }
                break;
            case 'email':
                if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
                    error = 'Format email invalide';
                }
                break;
            case 'message':
                if (!value) error = 'Le message est requis';
                else if (value.length < 20) error = 'Veuillez fournir une description plus détaillée (min. 20 caractères)';
                break;
            case 'consent':
                if (!value) error = 'Vous devez certifier l\'exactitude des informations';
                break;
            case 'fichier':
                if (value && value.size > 5 * 1024 * 1024) {
                    error = 'Le fichier ne doit pas dépasser 5 Mo';
                }
                break;
            default:
                break;
        }
        return error;
    };

    const validateStep = (currentStep) => {
        let newErrors = {};
        if (currentStep === 1) {
            newErrors.prenom = validateField('prenom', formData.prenom);
            newErrors.nom = validateField('nom', formData.nom);
            newErrors.telephone = validateField('telephone', formData.telephone);
            newErrors.email = validateField('email', formData.email);
        } else if (currentStep === 2) {
            newErrors.message = validateField('message', formData.message);
        } else if (currentStep === 3) {
            newErrors.consent = validateField('consent', formData.consent);
        }

        // Filter out null errors
        const filteredErrors = Object.fromEntries(Object.entries(newErrors).filter(([_, v]) => v !== null));
        setErrors(filteredErrors);
        return Object.keys(filteredErrors).length === 0;
    };

    const handleChange = (e) => {
        const { name, value, type, checked } = e.target;
        const newValue = type === 'checkbox' ? checked : value;

        setFormData(prev => ({
            ...prev,
            [name]: newValue
        }));

        // Real-time validation
        const error = validateField(name, newValue);
        setErrors(prev => ({
            ...prev,
            [name]: error
        }));
    };

    const handleFileChange = (e) => {
        const file = e.target.files[0];
        if (file) {
            const error = validateField('fichier', file);
            setErrors(prev => ({ ...prev, fichier: error }));
            if (!error) {
                setFormData(prev => ({ ...prev, fichier: file }));
            } else {
                setFormData(prev => ({ ...prev, fichier: null }));
            }
        }
    };

    const nextStep = () => {
        if (validateStep(step)) {
            setStep(prev => prev + 1);
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
    };

    const prevStep = () => {
        setStep(prev => prev - 1);
        window.scrollTo({ top: 0, behavior: 'smooth' });
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        if (!validateStep(3)) return;

        setIsSubmitting(true);
        setServerError(null);

        const data = new FormData();
        data.append('prenom', formData.prenom);
        data.append('nom', formData.nom);
        data.append('telephone', formData.telephone.replace(/[\s]/g, ''));
        if (formData.email) {
            data.append('email', formData.email);
        }
        data.append('message', formData.message);
        if (formData.fichier) {
            data.append('fichier', formData.fichier);
        }

        try {
            const response = await axios.post(`/api-reclamation/${objetId}`, data, {
                headers: { 'Content-Type': 'multipart/form-data' }
            });

            if (response.data.success) {
                setSuccessMessage(response.data.message);
                window.scrollTo({ top: 0, behavior: 'smooth' });
                setTimeout(() => {
                    window.location.href = response.data.redirectUrl;
                }, 3000);
            }
        } catch (error) {
            setServerError(error.response?.data?.error || 'Une erreur est survenue lors de l\'envoi.');
            setIsSubmitting(false);
        }
    };

    if (successMessage) {
        return (
            <div className="alert alert-success p-5 text-center" style={{ borderRadius: '22px', border: 'none', boxShadow: '0 6px 32px rgba(30,155,95,.15)' }}>
                <div className="mb-4" style={{ fontSize: '4rem', color: '#1e9b5f' }}>
                    <i className="fas fa-check-circle"></i>
                </div>
                <h3 className="font-weight-bold mb-3">{successMessage}</h3>
                <p className="text-muted">Redirection en cours vers les détails de l'objet...</p>
                <div className="spinner-border text-success mt-3" role="status">
                    <span className="sr-only">Chargement...</span>
                </div>
            </div>
        );
    }

    return (
        <div className="form-card">
            <div className="steps-bar mb-4">
                <div className={`step ${step >= 1 ? 'done' : ''} ${step === 1 ? 'active' : ''}`}>
                    <span className="step-dot">{step > 1 ? <i className="fas fa-check"></i> : 1}</span>
                    <span className="step-label">Identification</span>
                </div>
                <div className={`step ${step >= 2 ? 'done' : ''} ${step === 2 ? 'active' : ''}`}>
                    <span className="step-dot">{step > 2 ? <i className="fas fa-check"></i> : 2}</span>
                    <span className="step-label">Réclamation</span>
                </div>
                <div className={`step ${step >= 3 ? 'done' : ''} ${step === 3 ? 'active' : ''}`}>
                    <span className="step-dot">3</span>
                    <span className="step-label">Validation</span>
                </div>
            </div>

            {step === 1 && !isLoggedIn && (
                <div className="alert alert-info border-0 mb-4 d-flex align-items-center" style={{ borderRadius: '16px', background: 'rgba(52, 152, 219, 0.08)', color: '#2c3e50' }}>
                    <div className="mr-3" style={{ fontSize: '1.5rem', color: '#3498db' }}>
                        <i className="fas fa-info-circle"></i>
                    </div>
                    <div>
                        <p className="mb-0 font-weight-bold" style={{ fontSize: '.9rem' }}>Vous avez déjà un compte ?</p>
                        <p className="mb-0 small" style={{ color: '#667' }}>
                            <button
                                type="button"
                                onClick={() => setShowLoginModal(true)}
                                className="font-weight-bold p-0 border-0 bg-transparent"
                                style={{ color: '#3498db', textDecoration: 'underline', cursor: 'pointer' }}
                            >
                                Connectez-vous
                            </button> pour pré-remplir vos informations automatiquement.
                        </p>
                    </div>
                </div>
            )}

            <div className="form-header-icon">
                <i className={step === 1 ? "fas fa-user-circle" : step === 2 ? "fas fa-edit" : "fas fa-shield-alt"}></i>
            </div>
            <h2 className="font-weight-bold mb-1" style={{ fontSize: '1.4rem', color: 'var(--gris-fonce)' }}>
                {step === 1 ? 'Vos informations' : step === 2 ? 'Détails de la réclamation' : 'Dernière étape'}
            </h2>
            <p className="text-muted mb-4" style={{ fontSize: '.9rem', lineHeight: '1.65' }}>
                {step === 1 ? 'Commencez par nous dire qui vous êtes.' :
                    step === 2 ? 'Expliquez-nous pourquoi cet objet vous appartient.' :
                        'Vérifiez et confirmez votre demande.'}
            </p>

            {serverError && (
                <div className="alert alert-danger mb-4" style={{ borderRadius: '12px' }}>
                    <i className="fas fa-exclamation-triangle mr-2"></i>{serverError}
                </div>
            )}

            <form onSubmit={handleSubmit}>
                <div className="alert alert-light py-2 px-3 mb-4 d-flex align-items-center" style={{ borderRadius: '12px', 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 marqués d'une astérisque (*) sont obligatoires.</span>
                </div>
                {step === 1 && (
                    <div className="step-content animate__animated animate__fadeIn">
                        <div className="row mb-3">
                            <div className="col-sm-6 mb-3 mb-sm-0">
                                <div className="form-group mb-0">
                                    <label>Prénom <span className="text-danger">*</span></label>
                                    <input
                                        type="text"
                                        name="prenom"
                                        className={`form-control-custom ${errors.prenom ? 'is-invalid border-danger' : ''}`}
                                        placeholder="Votre prénom"
                                        value={formData.prenom}
                                        onChange={handleChange}
                                        maxLength={50}
                                    />
                                    <div className="text-right mt-1">
                                        <small className="text-muted" style={{ fontSize: '0.7rem' }}>{formData.prenom.length}/50</small>
                                    </div>
                                    {errors.prenom && <small className="text-danger">{errors.prenom}</small>}
                                </div>
                            </div>
                            <div className="col-sm-6">
                                <div className="form-group mb-0">
                                    <label>Nom <span className="text-danger">*</span></label>
                                    <input
                                        type="text"
                                        name="nom"
                                        className={`form-control-custom ${errors.nom ? 'is-invalid border-danger' : ''}`}
                                        placeholder="Votre nom"
                                        value={formData.nom}
                                        onChange={handleChange}
                                        maxLength={50}
                                    />
                                    <div className="text-right mt-1">
                                        <small className="text-muted" style={{ fontSize: '0.7rem' }}>{formData.nom.length}/50</small>
                                    </div>
                                    {errors.nom && <small className="text-danger">{errors.nom}</small>}
                                </div>
                            </div>
                        </div>
                        <div className="row mb-4">
                            <div className="col-sm-6 mb-3 mb-sm-0">
                                <div className="form-group mb-0">
                                    <label>Téléphone <span className="text-danger">*</span></label>
                                    <div style={{ position: 'relative' }}>
                                        <span style={{ position: 'absolute', left: '14px', top: '50%', transform: 'translateY(-50%)', color: '#9aa3b0', fontSize: '.9rem' }}>
                                            <i className="fas fa-phone"></i>
                                        </span>
                                        <IMaskInput
                                            mask="+221 #0 000 00 00"
                                            definitions={{ '#': /[7]/ }}
                                            lazy={false}
                                            name="telephone"
                                            value={formData.telephone}
                                            onAccept={(value) => {
                                                setFormData(prev => ({ ...prev, telephone: value }));
                                                const error = validateField('telephone', value);
                                                setErrors(prev => ({ ...prev, telephone: error }));
                                            }}
                                            className={`form-control-custom ${errors.telephone ? 'is-invalid border-danger' : ''}`}
                                            style={{ paddingLeft: '40px' }}
                                        />
                                    </div>
                                    {errors.telephone && <small className="text-danger">{errors.telephone}</small>}
                                </div>
                            </div>
                            <div className="col-sm-6">
                                <div className="form-group mb-0">
                                    <label>Email <span className="text-muted small">(Optionnel)</span></label>
                                    <div style={{ position: 'relative' }}>
                                        <span style={{ position: 'absolute', left: '14px', top: '50%', transform: 'translateY(-50%)', color: '#9aa3b0', fontSize: '.9rem' }}>
                                            <i className="fas fa-envelope"></i>
                                        </span>
                                        <input
                                            type="email"
                                            name="email"
                                            className={`form-control-custom ${errors.email ? 'is-invalid border-danger' : ''}`}
                                            placeholder="votre@email.com"
                                            value={formData.email}
                                            onChange={handleChange}
                                            style={{ paddingLeft: '40px' }}
                                        />
                                    </div>
                                    {errors.email && <small className="text-danger">{errors.email}</small>}
                                </div>
                            </div>
                        </div>
                        <button type="button" className="submit-btn mt-2" onClick={nextStep}>
                            Suivant <i className="fas fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                )}

                {step === 2 && (
                    <div className="step-content animate__animated animate__fadeIn">
                        <div className="form-group mb-4">
                            <label>Pourquoi cet objet est le vôtre ? <span className="text-danger">*</span></label>
                            <textarea
                                name="message"
                                className={`form-control-custom ${errors.message ? 'is-invalid border-danger' : ''}`}
                                placeholder="Décrivez les signes distinctifs, le contenu, la couleur exacte, le lieu de perte..."
                                rows="5"
                                value={formData.message}
                                onChange={handleChange}
                                maxLength={2000}
                            ></textarea>
                            <div className="text-right mt-1">
                                <small className={formData.message.length > 1900 ? "text-warning" : "text-muted"} style={{ fontSize: '0.75rem' }}>
                                    {formData.message.length}/2000
                                </small>
                            </div>
                            {errors.message && <small className="text-danger">{errors.message}</small>}
                            <div className="mt-2">
                                <small className="text-muted">
                                    <i className="fas fa-info-circle mr-1"></i>
                                    Plus votre description est précise, plus vite nous pourrons valider votre demande.
                                </small>
                            </div>
                        </div>

                        <div className="form-group mb-4">
                            <label>Pièce justificative (optionnel)</label>
                            <div
                                className={`upload-zone ${errors.fichier ? 'border-danger' : ''}`}
                                onClick={() => document.getElementById('rec_fichier_react').click()}
                            >
                                <input
                                    type="file"
                                    id="rec_fichier_react"
                                    style={{ display: 'none' }}
                                    onChange={handleFileChange}
                                    accept=".jpg,.jpeg,.png,.pdf,.webp"
                                />
                                <div className="upload-icon">
                                    <i className={formData.fichier ? "fas fa-file-check text-success" : "fas fa-cloud-upload-alt"}></i>
                                </div>
                                <p className="mb-1 font-weight-bold" style={{ fontSize: '.9rem', color: '#667' }}>
                                    {formData.fichier ? formData.fichier.name : 'Glissez un fichier ou cliquez'}
                                </p>
                                <p className="text-muted small mb-0">Carte d'identité, reçu, photo • JPG, PNG, PDF • Max 5 Mo</p>
                            </div>
                            {errors.fichier && <small className="text-danger">{errors.fichier}</small>}
                        </div>

                        <div className="d-flex gap-3">
                            <button type="button" className="btn btn-light py-3 px-4 mr-2" style={{ borderRadius: '14px', fontWeight: '700' }} onClick={prevStep}>
                                Retour
                            </button>
                            <button type="button" className="submit-btn flex-grow-1" onClick={nextStep}>
                                Continuer <i className="fas fa-arrow-right ml-2"></i>
                            </button>
                        </div>
                    </div>
                )}

                {step === 3 && (
                    <div className="step-content animate__animated animate__fadeIn">
                        <div className="recap-card p-3 mb-4" style={{ background: '#f8f9fb', borderRadius: '16px', border: '1px solid #e8eaf0' }}>
                            <h6 className="font-weight-bold mb-3 border-bottom pb-2" style={{ fontSize: '.85rem' }}>Résumé de votre demande</h6>
                            <div className="small mb-2"><strong>Nom :</strong> {formData.prenom} {formData.nom}</div>
                            <div className="small mb-2"><strong>Téléphone :</strong> {formData.telephone}</div>
                            <div className="small mb-3"><strong>Message :</strong> {(formData.message || '').substring(0, 100)}...</div>
                            {formData.fichier && <div className="small"><i className="fas fa-paperclip mr-1"></i> Pièce jointe incluse</div>}
                        </div>

                        <div className="form-group mb-4">
                            <div className="d-flex align-items-start" style={{ gap: '10px' }}>
                                <input
                                    type="checkbox"
                                    name="consent"
                                    id="consent_check"
                                    checked={formData.consent}
                                    onChange={handleChange}
                                    style={{ marginTop: '3px', width: '18px', height: '18px', flexShrink: 0, accentColor: 'var(--primaire)' }}
                                />
                                <label htmlFor="consent_check" style={{ fontSize: '.8rem', color: '#667', lineHeight: '1.6', margin: 0, cursor: 'pointer' }}>
                                    Je certifie que les informations fournies sont exactes et que je suis bien le propriétaire de cet objet. Je comprends que toute fausse déclaration est passible de poursuites.
                                </label>
                            </div>
                            {errors.consent && <small className="text-danger d-block mt-1">{errors.consent}</small>}
                        </div>

                        <div className="d-flex gap-3">
                            <button type="button" className="btn btn-light py-3 px-4 mr-2" style={{ borderRadius: '14px', fontWeight: '700' }} onClick={prevStep} disabled={isSubmitting}>
                                Retour
                            </button>
                            <button type="submit" className="submit-btn flex-grow-1" disabled={isSubmitting}>
                                {isSubmitting ? (
                                    <><span className="spinner-border spinner-border-sm mr-2" role="status"></span> Envoi...</>
                                ) : (
                                    <><i className="fas fa-paper-plane mr-2"></i> Envoyer ma réclamation</>
                                )}
                            </button>
                        </div>
                    </div>
                )}
            </form>

            {showLoginModal && (
                <div className="modal-overlay animate__animated animate__fadeIn" style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.5)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px' }}>
                    <div className="login-modal bg-white p-4 animate__animated animate__zoomIn" style={{ borderRadius: '24px', maxWidth: '400px', width: '100%', boxShadow: '0 10px 40px rgba(0,0,0,0.2)' }}>
                        <div className="d-flex justify-content-between align-items-center mb-4">
                            <h3 className="font-weight-bold mb-0" style={{ fontSize: '1.2rem' }}>Connexion</h3>
                            <button type="button" onClick={() => setShowLoginModal(false)} className="border-0 bg-transparent text-muted" style={{ fontSize: '1.5rem' }}>&times;</button>
                        </div>

                        {loginError && (
                            <div className="alert alert-danger small mb-3" style={{ borderRadius: '10px' }}>
                                <i className="fas fa-exclamation-circle mr-1"></i> {loginError}
                            </div>
                        )}

                        <form onSubmit={handleLogin}>
                            <div className="form-group mb-3">
                                <label className="small font-weight-bold">Email</label>
                                <input
                                    type="email"
                                    name="email"
                                    className="form-control-custom"
                                    placeholder="votre@email.com"
                                    value={loginData.email}
                                    onChange={handleLoginChange}
                                    required
                                />
                            </div>
                            <div className="form-group mb-4">
                                <label className="small font-weight-bold">Mot de passe</label>
                                <input
                                    type="password"
                                    name="password"
                                    className="form-control-custom"
                                    placeholder="••••••••"
                                    value={loginData.password}
                                    onChange={handleLoginChange}
                                    required
                                />
                            </div>
                            <button type="submit" className="submit-btn w-100" disabled={isLoggingIn}>
                                {isLoggingIn ? <><span className="spinner-border spinner-border-sm mr-2"></span> Connexion...</> : 'Se connecter'}
                            </button>
                        </form>
                    </div>
                </div>
            )}
        </div>
    );
}