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

export default function LitigeForm({ objetId, userPrenom = '', userNom = '', userEmail = '', userTelephone = '', isLoggedIn: initialIsLoggedIn = false, csrfToken = '' }) {
    const [step, setStep] = useState(1);
    const [isLoggedIn, setIsLoggedIn] = useState(initialIsLoggedIn);
    const [showLoginModal, setShowLoginModal] = useState(false);
    const [formData, setFormData] = useState({
        prenom: userPrenom,
        nom: userNom,
        email: userEmail,
        telephone: userTelephone,
        motif: '',
        description: '',
        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 motifsChoices = [
        { value: 'objet non conforme', label: 'L\'objet ne correspond pas à la description' },
        { value: 'refus remise', label: 'Refus de me remettre l\'objet' },
        { value: 'comportement suspect', label: 'Comportement suspect du trouvère' },
        { value: 'erreur_restitution', label: 'L\'objet a été remis à une autre personne' },
        { value: 'non presentation', label: 'La personne ne s\'est pas présentée au rendez-vous' },
        { value: 'autre', label: 'Autre raison' }
    ];

    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 || '',
                    email: user.email || '',
                    telephone: user.telephone || ''
                }));
                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 validateStep = (currentStep) => {
        let newErrors = {};
        if (currentStep === 1) {
            if (!formData.prenom) newErrors.prenom = 'Le prénom est requis';
            if (!formData.nom) newErrors.nom = 'Le nom est requis';
            if (!formData.email) newErrors.email = 'L\'email est requis';
            else if (!/\S+@\S+\.\S+/.test(formData.email)) newErrors.email = 'Format d\'email invalide';
            
            const phoneValue = formData.telephone.replace(/[\s-]/g, '');
            const phoneRegex = /^\+221(7[05678]|30|33)\d{7}$/;
            if (!formData.telephone || phoneValue === '+2217') {
                newErrors.telephone = 'Le téléphone est requis';
            } else if (!phoneRegex.test(phoneValue)) {
                newErrors.telephone = 'Format invalide (ex: +221 77 123 45 67)';
            }
        } else if (currentStep === 2) {
            if (!formData.motif) newErrors.motif = 'Veuillez sélectionner un motif de litige';
            if (!formData.description) newErrors.description = 'La description est requise';
            else if (formData.description.length < 20) newErrors.description = 'Veuillez détailler davantage la situation (min. 20 caractères)';
        } else if (currentStep === 3) {
            if (!formData.consent) newErrors.consent = 'Vous devez confirmer l\'exactitude des informations';
        }
        setErrors(newErrors);
        return Object.keys(newErrors).length === 0;
    };

    const handleChange = (e) => {
        const { name, value, type, checked } = e.target;
        setFormData(prev => ({
            ...prev,
            [name]: type === 'checkbox' ? checked : value
        }));
        if (errors[name]) {
            setErrors(prev => ({ ...prev, [name]: 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('email', formData.email);
        data.append('telephone', formData.telephone.replace(/[\s]/g, ''));
        data.append('motif', formData.motif);
        data.append('description', formData.description);

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

            if (response.data.success) {
                setSuccessMessage(response.data.message);
                setTimeout(() => {
                    window.location.href = response.data.redirectUrl;
                }, 3000);
            }
        } catch (error) {
            setServerError(error.response?.data?.error || 'Une erreur est survenue lors de l\'ouverture du dossier.');
            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-gavel"></i>
                </div>
                <h3 className="font-weight-bold mb-3">{successMessage}</h3>
                <p className="text-muted">Votre dossier de litige a été ouvert avec succès. Redirection...</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">Signalement</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 et suivre plus facilement votre dossier.
                        </p>
                    </div>
                </div>
            )}

            <div className="form-header-icon">
                <i className={step === 1 ? "fas fa-user-circle text-danger" : step === 2 ? "fas fa-exclamation-triangle text-warning" : "fas fa-gavel text-primary"}></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 du différend' : 'Confirmer et ouvrir le litige'}
            </h2>
            <p className="text-muted mb-4" style={{ fontSize: '.9rem', lineHeight: '1.65' }}>
                {step === 1 ? 'Identifiez-vous pour que nous puissions traiter votre demande.' :
                    step === 2 ? 'Expliquez quel est le problème avec cet objet.' :
                        'L\'administrateur gèlera temporairement le statut de l\'objet pendant l\'enquête.'}
            </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}>
                {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}
                                    />
                                    {errors.prenom && <small className="text-danger mt-1 d-block">{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}
                                    />
                                    {errors.nom && <small className="text-danger mt-1 d-block">{errors.nom}</small>}
                                </div>
                            </div>
                        </div>

                        <div className="form-group mb-3">
                            <label>Adresse Email <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-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 mt-1 d-block">{errors.email}</small>}
                        </div>

                        <div className="form-group mb-4">
                            <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 }))}
                                    className={`form-control-custom ${errors.telephone ? 'is-invalid border-danger' : ''}`}
                                    style={{ paddingLeft: '40px' }}
                                />
                            </div>
                            {errors.telephone && <small className="text-danger mt-1 d-block">{errors.telephone}</small>}
                        </div>
                        <button type="button" className="submit-btn mt-2 bg-danger" 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-3">
                            <label>Motif de votre signalement <span className="text-danger">*</span></label>
                            <select 
                                name="motif" 
                                className={`form-control-custom ${errors.motif ? 'is-invalid border-danger' : ''}`}
                                value={formData.motif}
                                onChange={handleChange}
                            >
                                <option value="" disabled>Sélectionnez un motif clair</option>
                                {motifsChoices.map(m => (
                                    <option key={m.value} value={m.value}>{m.label}</option>
                                ))}
                            </select>
                            {errors.motif && <small className="text-danger mt-1 d-block">{errors.motif}</small>}
                        </div>

                        <div className="form-group mb-4">
                            <label>Description des faits <span className="text-danger">*</span></label>
                            <textarea
                                name="description"
                                className={`form-control-custom ${errors.description ? 'is-invalid border-danger' : ''}`}
                                placeholder="Expliquez précisemment la nature du litige (échanges, comportements, lieux...)"
                                rows="5"
                                value={formData.description}
                                onChange={handleChange}
                                maxLength={2500}
                            ></textarea>
                            <div className="text-right mt-1">
                                <small className={formData.description.length > 2400 ? "text-warning" : "text-muted"} style={{ fontSize: '0.75rem' }}>
                                    {formData.description.length}/2500
                                </small>
                            </div>
                            {errors.description && <small className="text-danger">{errors.description}</small>}
                            <div className="mt-2 text-danger">
                                <small>
                                    <i className="fas fa-exclamation-triangle mr-1"></i>
                                    Dès l'ouverture de ce dossier, l'objet sera placé "En litige" temporairement.
                                </small>
                            </div>
                        </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 bg-danger 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: '#fff3f3', borderRadius: '16px', border: '1px solid #ffcccc' }}>
                            <h6 className="font-weight-bold mb-3 border-bottom border-danger pb-2 text-danger" style={{ fontSize: '.85rem' }}>Synthèse du Dossier</h6>
                            <div className="small mb-2"><strong>Déclarant :</strong> {formData.prenom} {formData.nom}</div>
                            <div className="small mb-2"><strong>Contact :</strong> {formData.email} • {formData.telephone}</div>
                            <div className="small mb-2"><strong>Motif :</strong> {motifsChoices.find(m => m.value === formData.motif)?.label || formData.motif}</div>
                            <div className="small mb-3"><strong>Faits :</strong> {formData.description.length > 150 ? formData.description.substring(0, 150) + "..." : formData.description}</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: '#dc3545' }}
                                />
                                <label htmlFor="consent_check" style={{ fontSize: '.8rem', color: '#667', lineHeight: '1.6', margin: 0, cursor: 'pointer' }}>
                                    Je comprends qu'en ouvrant un litige, une enquête sera menée par les administrateurs. De fausses accusations peuvent aboutir à mon exclusion de la plateforme.
                                </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 bg-danger flex-grow-1" disabled={isSubmitting}>
                                {isSubmitting ? (
                                    <><span className="spinner-border spinner-border-sm mr-2" role="status"></span> Traitement...</>
                                ) : (
                                    <><i className="fas fa-gavel mr-2"></i> Déclarer le litige</>
                                )}
                            </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>
    );
}