import React, { useState } from 'react';
import { createPortal } from 'react-dom';

export default function LitigeModal({ 
    reclamationId, 
    submitUrl, 
    objetTitre, 
    objetImage, 
    objetReference, 
    objetDate,
    csrfToken, 
    showLabel = false, 
    label = '', 
    customClass = '',
    isDisabled = false 
}) {
    const [isOpen, setIsOpen] = useState(false);
    const [localIsDisabled, setLocalIsDisabled] = useState(isDisabled);
    const [formData, setFormData] = useState({
        motif: '',
        description: ''
    });
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [error, setError] = useState(null);
    const [success, setSuccess] = useState(false);

    const motifs = [
        { value: 'objet non conforme', label: 'Objet non conforme' },
        { value: 'refus remise', label: 'Refus de remise' },
        { value: 'comportement suspect', label: 'Comportement suspect' },
        { value: 'erreur_restitution', label: 'Erreur dans la restitution' },
        { value: 'non presentation', label: 'Non-présentation au rendez-vous' },
        { value: 'autre', label: 'Autre' }
    ];

    const toggleModal = () => {
        // Ne bloque l'action que si l'on essaie d'OUVRIR la modale alors qu'elle est désactivée.
        // On doit toujours pouvoir la FERMER.
        if (!isOpen && localIsDisabled) return;
        setIsOpen(!isOpen);
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        setIsSubmitting(true);
        setError(null);

        const body = new FormData();
        body.append('client_litige[motif]', formData.motif);
        body.append('client_litige[description]', formData.description);
        body.append('client_litige[_token]', csrfToken);

        try {
            const response = await fetch(submitUrl, {
                method: 'POST',
                body: body,
                headers: {
                    'Accept': 'application/json'
                }
            });

            const data = await response.json();

            if (data.success) {
                setSuccess(true);
                setLocalIsDisabled(true); // Bloquer le bouton immédiatement
            } else {
                setError(data.errors ? data.errors.join(', ') : 'Une erreur est survenue.');
            }
        } catch (err) {
            setError('Erreur de connexion au serveur.');
        } finally {
            setIsSubmitting(false);
        }
    };

    const modalContent = (
        <div className={`modal fade ${isOpen ? 'show d-block' : ''}`} tabIndex="-1" role="dialog" style={{ backgroundColor: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(4px)', zIndex: 1050 }}>
            <div className="modal-dialog modal-lg modal-dialog-centered" role="document">
                <div className="modal-content border-0 shadow-lg" style={{ borderRadius: '24px', overflow: 'hidden' }}>
                    <div className="modal-header bg-danger text-white border-0 py-3 px-4">
                        <h5 className="modal-title font-weight-bold d-flex align-items-center">
                            <i className="fas fa-exclamation-triangle mr-3"></i>
                            Signaler un litige
                        </h5>
                        <button type="button" className="close text-white opacity-10" onClick={toggleModal} style={{ outline: 'none' }}>
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div className="modal-body p-0">
                        {success ? (
                            <div className="text-center py-5 px-4">
                                <div className="rounded-circle bg-success text-white d-inline-flex align-items-center justify-content-center mb-4 shadow-sm" style={{ width: '80px', height: '80px' }}>
                                    <i className="fas fa-check fa-3x"></i>
                                </div>
                                <h4 className="font-weight-bold text-dark mb-2">Signalement envoyé avec succès</h4>
                                <p className="text-muted mb-4">Votre demande de médiation a été transmise aux administrateurs. L'objet est désormais marqué en litige.</p>
                                <button className="btn btn-outline-secondary btn-lg rounded-pill px-5 shadow-sm" onClick={toggleModal}>
                                    Fermer
                                </button>
                            </div>
                        ) : (
                            <div className="row no-gutters">
                                <div className="col-md-5 bg-light border-right">
                                    <div className="p-4 h-100">
                                        <div className="mb-4">
                                            <label className="text-muted small text-uppercase font-weight-bold tracking-wider mb-2 d-block">Objet concerné</label>
                                            <div className="rounded-xl shadow-sm border overflow-hidden bg-white mb-3" style={{ borderRadius: '16px' }}>
                                                {objetImage ? (
                                                    <img src={objetImage} alt={objetTitre} className="w-100" style={{ height: '200px', objectFit: 'cover' }} />
                                                ) : (
                                                    <div className="w-100 d-flex align-items-center justify-content-center bg-light text-muted" style={{ height: '200px' }}>
                                                        <i className="fas fa-image fa-3x"></i>
                                                    </div>
                                                )}
                                            </div>
                                            <h5 className="font-weight-bold text-dark mb-1">{objetTitre}</h5>
                                            <div className="text-muted small mb-3">REF: <span className="font-weight-bold">{objetReference}</span></div>
                                            <div className="badge badge-light p-2 mb-3">
                                                <i className="far fa-calendar-alt mr-2 text-primary"></i>
                                                Trouvé le {objetDate}
                                            </div>
                                        </div>
                                        
                                        <div className="callout callout-warning bg-light border-left-warning small mb-0 p-3" style={{ borderLeft: '5px solid #ffc107', borderRadius: '8px', lineHeight: '1.6' }}>
                                            <h6 className="font-weight-bold mb-1"><i className="fas fa-info-circle mr-2"></i> Information</h6>
                                            En signalant un litige, vous demandez une médiation administrative. <strong>L'objet</strong> sera gelé jusqu'à résolution du litige par un administrateur.
                                        </div>
                                    </div>
                                </div>
                                <div className="col-md-7">
                                    <form onSubmit={handleSubmit} className="p-4">
                                        {error && (
                                            <div className="callout callout-danger bg-soft-danger small mb-4 p-2" style={{ borderLeft: '4px solid #dc3545' }}>
                                                {error}
                                            </div>
                                        )}

                                        <div className="form-group mb-4">
                                            <label className="font-weight-bold text-dark mb-2">Quel est le motif du litige ?</label>
                                            <select
                                                className="form-control form-select-lg border-2 shadow-none"
                                                required
                                                style={{ borderRadius: '12px', height: '50px' }}
                                                value={formData.motif}
                                                onChange={(e) => setFormData({ ...formData, motif: e.target.value })}
                                            >
                                                <option value="">Sélectionnez un motif...</option>
                                                {motifs.map(m => <option key={m.value} value={m.value}>{m.label}</option>)}
                                            </select>
                                        </div>

                                        <div className="form-group mb-4">
                                            <label className="font-weight-bold text-dark mb-2">Description détaillée</label>
                                            <textarea
                                                className="form-control border-2 shadow-none"
                                                rows="6"
                                                required
                                                style={{ borderRadius: '12px' }}
                                                placeholder="Expliquez précisément ce qui s'est passé (ex: l'objet reçu ne correspond pas à la photo, le trouveur refuse la remise...)"
                                                value={formData.description}
                                                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                                            ></textarea>
                                        </div>

                                        <div className="d-flex justify-content-end gap-3 mt-4">
                                            <button type="button" className="btn btn-light rounded-pill px-4 font-weight-bold text-muted border shadow-sm" style={{ backgroundColor: '#f8f9fa' }} onClick={toggleModal} disabled={isSubmitting}>
                                                Annuler
                                            </button>
                                            <button type="submit" className="btn btn-danger btn-lg rounded-pill px-4 shadow-sm ml-3" disabled={isSubmitting}>
                                                {isSubmitting ? (
                                                    <span><span className="spinner-border spinner-border-sm mr-2"></span>Envoi...</span>
                                                ) : (
                                                    'Envoyer le signalement'
                                                )}
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );

    return (
        <React.Fragment>
            {showLabel ? (
                <button
                    type="button"
                    className={customClass || `btn btn-outline-danger btn-sm w-100 shadow-sm mt-1 ${localIsDisabled ? 'disabled opacity-50' : ''}`}
                    onClick={toggleModal}
                    disabled={localIsDisabled}
                    style={localIsDisabled ? { cursor: 'not-allowed', filter: 'grayscale(1)' } : {}}
                >
                    <i className="fas fa-exclamation-triangle mr-2"></i>
                    {label || 'Signaler un litige'}
                </button>
            ) : (
                <button
                    type="button"
                    className={customClass || `btn btn-sm btn-outline-danger rounded-circle shadow-sm ${localIsDisabled ? 'disabled opacity-50' : ''}`}
                    title={localIsDisabled ? "Un litige est déjà en cours" : "Signaler un litige"}
                    style={{ 
                        width: '32px', 
                        height: '32px', 
                        padding: 0, 
                        display: 'flex', 
                        alignItems: 'center', 
                        justifyContent: 'center',
                        cursor: localIsDisabled ? 'not-allowed' : 'pointer',
                        filter: localIsDisabled ? 'grayscale(1)' : 'none'
                    }}
                    onClick={toggleModal}
                    disabled={localIsDisabled}
                >
                    <i className="fas fa-exclamation-triangle" style={{ fontSize: '0.75rem' }}></i>
                </button>
            )}
            {isOpen && createPortal(modalContent, document.body)}
        </React.Fragment>
    );
}