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

// ─── Confirmation Dialog ──────────────────────────────────────────────────────
function ConfirmDialog({ isOpen, title, message, confirmLabel, confirmColor, onConfirm, onCancel, icon }) {
    if (!isOpen) return null;
    return createPortal(
        <div style={{ position: 'fixed', inset: 0, zIndex: 2000, background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <div style={{ background: '#fff', borderRadius: '20px', padding: '36px 32px', maxWidth: 440, width: '90%', textAlign: 'center', boxShadow: '0 20px 60px rgba(0,0,0,0.2)' }}>
                <div style={{ width: 72, height: 72, borderRadius: '50%', background: `${confirmColor}15`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
                    <i className={`fas ${icon} fa-2x`} style={{ color: confirmColor }}></i>
                </div>
                <h4 style={{ fontWeight: 700, marginBottom: 10, color: '#1a1a2e' }}>{title}</h4>
                <p style={{ color: '#6c757d', fontSize: '0.95rem', marginBottom: 28, lineHeight: 1.6 }}>{message}</p>
                <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
                    <button onClick={onCancel} className="btn btn-light rounded-pill px-4" style={{ fontWeight: 600 }}>Annuler</button>
                    <button onClick={onConfirm} className="btn rounded-pill px-4" style={{ background: confirmColor, color: '#fff', fontWeight: 700, border: 'none' }}>
                        {confirmLabel}
                    </button>
                </div>
            </div>
        </div>,
        document.body
    );
}

// ─── Restitution Modal ────────────────────────────────────────────────────────
function RestitutionModal({ isOpen, onClose, submitUrl, objetTitre, objetImage, objetReference, csrfToken }) {
    const [photoFile, setPhotoFile] = useState(null);
    const [photoPreview, setPhotoPreview] = useState(null);
    const [commentaire, setCommentaire] = useState('');
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [error, setError] = useState(null);
    const [success, setSuccess] = useState(false);
    const fileInputRef = useRef(null);

    const handlePhotoChange = (e) => {
        const file = e.target.files[0];
        if (!file) return;
        setPhotoFile(file);
        const reader = new FileReader();
        reader.onload = (ev) => setPhotoPreview(ev.target.result);
        reader.readAsDataURL(file);
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        if (!photoFile) { setError('Veuillez joindre une photo de preuve.'); return; }
        setIsSubmitting(true); setError(null);
        const body = new FormData();
        body.append('photo', photoFile);
        body.append('commentaire', commentaire);
        body.append('_token', csrfToken);
        try {
            const res = await fetch(submitUrl, { method: 'POST', body, headers: { Accept: 'application/json' } });
            const data = await res.json();
            if (data.success) { setSuccess(true); setTimeout(() => window.location.reload(), 2500); }
            else setError(data.message || 'Une erreur est survenue.');
        } catch { setError('Erreur de connexion.'); }
        finally { setIsSubmitting(false); }
    };

    if (!isOpen) return null;

    return createPortal(
        <div style={{ position: 'fixed', inset: 0, zIndex: 1500, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(5px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
            onClick={(e) => { if (e.target === e.currentTarget && !isSubmitting) onClose(); }}>
            <div style={{ background: '#fff', borderRadius: 24, width: '100%', maxWidth: 680, overflow: 'hidden', boxShadow: '0 25px 80px rgba(0,0,0,0.25)' }}>
                {/* Header */}
                <div style={{ background: 'linear-gradient(135deg, #28a745, #20c997)', padding: '20px 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 12, color: '#fff' }}>
                        <div style={{ width: 40, height: 40, background: 'rgba(255,255,255,0.2)', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                            <i className="fas fa-handshake"></i>
                        </div>
                        <div>
                            <div style={{ fontWeight: 700, fontSize: '1.1rem' }}>Confirmer la restitution</div>
                            <div style={{ fontSize: '0.8rem', opacity: 0.85 }}>Joignez une preuve photographique</div>
                        </div>
                    </div>
                    <button onClick={onClose} style={{ background: 'rgba(255,255,255,0.2)', border: 'none', borderRadius: '50%', width: 36, height: 36, color: '#fff', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <i className="fas fa-times"></i>
                    </button>
                </div>

                {success ? (
                    <div style={{ textAlign: 'center', padding: '48px 32px' }}>
                        <div style={{ width: 80, height: 80, background: 'linear-gradient(135deg,#28a745,#20c997)', borderRadius: '50%', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
                            <i className="fas fa-check fa-2x text-white"></i>
                        </div>
                        <h4 style={{ fontWeight: 700, marginBottom: 8 }}>Restitution confirmée !</h4>
                        <p style={{ color: '#6c757d', marginBottom: 20 }}><strong>{objetTitre}</strong> est maintenant marqué comme restitué.</p>
                        <div className="spinner-border spinner-border-sm text-success"></div>
                        <p style={{ fontSize: '0.8rem', color: '#aaa', marginTop: 8 }}>Redirection en cours…</p>
                    </div>
                ) : (
                    <div style={{ display: 'flex' }}>
                        {/* Sidebar */}
                        <div style={{ width: 220, background: '#f8f9fa', padding: 20, borderRight: '1px solid #e9ecef', flexShrink: 0 }}>
                            <div style={{ fontSize: '0.7rem', textTransform: 'uppercase', fontWeight: 700, color: '#aaa', marginBottom: 10 }}>Objet concerné</div>
                            <div style={{ borderRadius: 12, overflow: 'hidden', marginBottom: 12, height: 130, background: '#e9ecef' }}>
                                {objetImage
                                    ? <img src={objetImage} alt={objetTitre} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                                    : <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#aaa' }}><i className="fas fa-image fa-2x"></i></div>
                                }
                            </div>
                            <div style={{ fontWeight: 700, fontSize: '0.9rem', marginBottom: 4, color: '#1a1a2e' }}>{objetTitre}</div>
                            <div style={{ fontSize: '0.75rem', color: '#aaa' }}>REF: {objetReference}</div>
                            <div style={{ marginTop: 16, padding: '12px 10px', background: '#e8f5e9', borderRadius: 10, borderLeft: '4px solid #28a745', fontSize: '0.78rem', lineHeight: 1.6, color: '#2d6a4f' }}>
                                <strong>Important :</strong> Cette action confirme la remise physique de l'objet. Elle est définitive.
                            </div>
                        </div>

                        {/* Form */}
                        <form onSubmit={handleSubmit} style={{ flex: 1, padding: 24 }}>
                            {error && (
                                <div style={{ background: '#fef2f2', border: '1px solid #fca5a5', borderRadius: 12, padding: '10px 16px', marginBottom: 20, color: '#dc2626', fontSize: '0.88rem', display: 'flex', alignItems: 'center', gap: 8 }}>
                                    <i className="fas fa-exclamation-circle"></i> {error}
                                </div>
                            )}

                            <div style={{ marginBottom: 20 }}>
                                <label style={{ fontWeight: 700, fontSize: '0.9rem', marginBottom: 6, display: 'block', color: '#1a1a2e' }}>
                                    <i className="fas fa-camera mr-2 text-success"></i>Photo de preuve <span style={{ color: '#dc2626' }}>*</span>
                                </label>
                                <p style={{ fontSize: '0.8rem', color: '#6c757d', marginBottom: 10 }}>Photo lors de la remise, reçu signé, etc.</p>
                                <div onClick={() => fileInputRef.current?.click()}
                                    style={{ border: '2px dashed #28a745', borderRadius: 14, padding: 20, cursor: 'pointer', background: photoPreview ? '#f0fdf4' : '#fafafa', minHeight: 120, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', transition: 'all 0.2s' }}>
                                    {photoPreview
                                        ? <img src={photoPreview} alt="preview" style={{ maxHeight: 100, maxWidth: '100%', borderRadius: 8, objectFit: 'contain' }} />
                                        : <>
                                            <i className="fas fa-cloud-upload-alt fa-2x text-success" style={{ marginBottom: 8 }}></i>
                                            <span style={{ color: '#6c757d', fontSize: '0.85rem' }}>Cliquer pour choisir une photo</span>
                                            <span style={{ fontSize: '0.72rem', color: '#aaa' }}>JPG, PNG, WEBP • Max 5 MB</span>
                                        </>
                                    }
                                </div>
                                <input type="file" ref={fileInputRef} accept="image/*" onChange={handlePhotoChange} style={{ display: 'none' }} />
                                {photoFile && (
                                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8, fontSize: '0.83rem', color: '#28a745' }}>
                                        <span><i className="fas fa-check-circle mr-1"></i>{photoFile.name}</span>
                                        <button type="button" onClick={() => { setPhotoFile(null); setPhotoPreview(null); fileInputRef.current.value = ''; }}
                                            style={{ background: 'none', border: 'none', color: '#dc2626', cursor: 'pointer', fontSize: '0.8rem' }}>
                                            <i className="fas fa-times mr-1"></i>Supprimer
                                        </button>
                                    </div>
                                )}
                            </div>

                            <div style={{ marginBottom: 24 }}>
                                <label style={{ fontWeight: 700, fontSize: '0.9rem', marginBottom: 6, display: 'block', color: '#1a1a2e' }}>
                                    <i className="fas fa-comment mr-2 text-muted"></i>Commentaire <span style={{ fontWeight: 400, color: '#aaa', fontSize: '0.8rem' }}>(optionnel)</span>
                                </label>
                                <textarea value={commentaire} onChange={(e) => setCommentaire(e.target.value)} rows={3}
                                    placeholder="Ex: Remise effectuée le 03/04/2026 en présence du propriétaire..."
                                    style={{ width: '100%', borderRadius: 12, border: '1.5px solid #dee2e6', padding: '10px 14px', fontSize: '0.88rem', resize: 'none', outline: 'none', fontFamily: 'inherit' }} />
                            </div>

                            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12 }}>
                                <button type="button" onClick={onClose} disabled={isSubmitting}
                                    style={{ padding: '10px 24px', borderRadius: 50, border: '1.5px solid #dee2e6', background: '#f8f9fa', fontWeight: 600, cursor: 'pointer', color: '#495057' }}>
                                    Annuler
                                </button>
                                <button type="submit" disabled={isSubmitting}
                                    style={{ padding: '10px 24px', borderRadius: 50, border: 'none', background: 'linear-gradient(135deg,#28a745,#20c997)', color: '#fff', fontWeight: 700, cursor: isSubmitting ? 'not-allowed' : 'pointer', display: 'flex', alignItems: 'center', gap: 8 }}>
                                    {isSubmitting
                                        ? <><span className="spinner-border spinner-border-sm"></span>Envoi…</>
                                        : <><i className="fas fa-handshake"></i> Confirmer</>
                                    }
                                </button>
                            </div>
                        </form>
                    </div>
                )}
            </div>
        </div>,
        document.body
    );
}

// ─── État Badge ───────────────────────────────────────────────────────────────
function StatutBadge({ statut }) {
    const map = {
        'en attente': { bg: '#fff7ed', color: '#c2410c', icon: 'fa-clock', label: 'En attente' },
        'soumis':     { bg: '#eff6ff', color: '#1d4ed8', icon: 'fa-paper-plane', label: 'Soumis' },
        'validé':     { bg: '#f0fdf4', color: '#15803d', icon: 'fa-check-circle', label: 'Validé' },
        'rejeté':     { bg: '#fef2f2', color: '#b91c1c', icon: 'fa-times-circle', label: 'Rejeté' },
        'clôturé':    { bg: '#f1f5f9', color: '#475569', icon: 'fa-archive', label: 'Clôturé' },
        'restitué':   { bg: '#ecfdf5', color: '#065f46', icon: 'fa-handshake', label: 'Restitué' },
    };
    const s = map[statut?.toLowerCase()] || { bg: '#f8f9fa', color: '#6c757d', icon: 'fa-circle', label: statut };
    return (
        <span style={{ background: s.bg, color: s.color, padding: '6px 14px', borderRadius: 50, fontWeight: 700, fontSize: '0.8rem', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <i className={`fas ${s.icon}`} style={{ fontSize: '0.75rem' }}></i>
            {s.label}
        </span>
    );
}

// ─── Main Component ───────────────────────────────────────────────────────────
export default function ReclamationActions({
    reclamationId,
    reclamationStatut,
    objetStatut,
    validateUrl,
    rejectUrl,
    restituerUrl,
    litigeUrl,
    objetTitre,
    objetImage,
    objetReference,
    objetDate,
    csrfValide,
    csrfRejet,
    csrfRestituer,
    csrfLitige,
    isLitigeDisabled = false,
}) {
    const [confirm, setConfirm] = useState(null); // { type: 'valider'|'rejeter' }
    const [showRestitution, setShowRestitution] = useState(false);
    const [showLitige, setShowLitige] = useState(false);
    const [litigeSuccess, setLitigeSuccess] = useState(false);
    const [litigeSubmitting, setLitigeSubmitting] = useState(false);
    const [litigeError, setLitigeError] = useState(null);
    const [litigeData, setLitigeData] = useState({ motif: '', description: '' });

    const statut = reclamationStatut?.toLowerCase();
    const objStatut = objetStatut?.toLowerCase();

    const isEnAttente = statut === 'en attente' || statut === 'soumis';
    const isValideEnAttenteRestitution = statut === 'validé' && objStatut === 'en attente de restitution';
    const isClosed = !isEnAttente && !isValideEnAttenteRestitution;

    const submitValidate = () => {
        const form = new FormData();
        form.append('_token', csrfValide);
        fetch(validateUrl, { method: 'POST', body: form }).then(() => window.location.reload());
    };

    const submitReject = () => {
        const form = new FormData();
        form.append('_token', csrfRejet);
        fetch(rejectUrl, { method: 'POST', body: form }).then(() => window.location.reload());
    };

    const submitLitige = async (e) => {
        e.preventDefault();
        setLitigeSubmitting(true); setLitigeError(null);
        const body = new FormData();
        body.append('client_litige[motif]', litigeData.motif);
        body.append('client_litige[description]', litigeData.description);
        body.append('client_litige[_token]', csrfLitige);
        try {
            const res = await fetch(litigeUrl, { method: 'POST', body, headers: { Accept: 'application/json' } });
            const data = await res.json();
            if (data.success) setLitigeSuccess(true);
            else setLitigeError(data.errors?.join(', ') || 'Erreur');
        } catch { setLitigeError('Erreur de connexion.'); }
        finally { setLitigeSubmitting(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 RDV' },
        { value: 'autre', label: 'Autre' },
    ];

    return (
        <div>
            {/* ──── Statut badge ──── */}
            <div style={{ marginBottom: 20 }}>
                <div style={{ fontSize: '0.7rem', textTransform: 'uppercase', fontWeight: 700, color: '#aaa', marginBottom: 8, letterSpacing: 1 }}>Statut de la demande</div>
                <StatutBadge statut={reclamationStatut} />
            </div>

            {/* ──── ÉTAT 1: Actions valider / rejeter ──── */}
            {isEnAttente && (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 20 }}>
                    <button onClick={() => setConfirm({ type: 'valider' })}
                        style={{ padding: '13px 20px', borderRadius: 14, border: 'none', background: 'linear-gradient(135deg,#28a745,#20c997)', color: '#fff', fontWeight: 700, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, fontSize: '0.95rem', boxShadow: '0 4px 15px rgba(40,167,69,0.3)' }}>
                        <i className="fas fa-check-circle"></i> Valider la réclamation
                    </button>
                    <button onClick={() => setConfirm({ type: 'rejeter' })}
                        style={{ padding: '13px 20px', borderRadius: 14, border: '1.5px solid #dc3545', background: '#fff', color: '#dc3545', fontWeight: 700, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, fontSize: '0.95rem' }}>
                        <i className="fas fa-times-circle"></i> Rejeter la demande
                    </button>
                </div>
            )}

            {/* ──── ÉTAT 2: Restitution disponible ──── */}
            {isValideEnAttenteRestitution && (
                <div style={{ marginBottom: 20 }}>
                    <div style={{ background: '#f0fdf4', border: '1px solid #bbf7d0', borderRadius: 12, padding: '12px 16px', marginBottom: 16, display: 'flex', alignItems: 'center', gap: 10, fontSize: '0.88rem', color: '#15803d' }}>
                        <i className="fas fa-check-circle"></i>
                        <span>Réclamation validée — en attente de remise physique.</span>
                    </div>
                    <button onClick={() => setShowRestitution(true)}
                        style={{ width: '100%', padding: '13px 20px', borderRadius: 14, border: 'none', background: 'linear-gradient(135deg,#28a745,#20c997)', color: '#fff', fontWeight: 700, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, fontSize: '0.95rem', boxShadow: '0 4px 15px rgba(40,167,69,0.3)' }}>
                        <i className="fas fa-handshake"></i> Confirmer la restitution
                    </button>
                </div>
            )}

            {/* ──── ÉTAT 3: Clôturé ──── */}
            {isClosed && (() => {
                const isValide   = statut === 'validé';
                const isCloture  = statut === 'clôturé';
                const isRestitue = statut === 'restitué';
                const color  = isValide || isRestitue ? '#15803d' : isCloture ? '#475569' : '#b91c1c';
                const bg     = isValide || isRestitue ? '#f0fdf4' : isCloture ? '#f1f5f9' : '#fef2f2';
                const border = isValide || isRestitue ? '#28a745' : isCloture ? '#94a3b8' : '#dc3545';
                const icon   = isValide ? 'fa-check-circle' : isRestitue ? 'fa-handshake' : isCloture ? 'fa-archive' : 'fa-times-circle';
                const title  = isValide ? 'Réclamation validée' : isRestitue ? 'Restitution effectuée' : isCloture ? 'Demande clôturée automatiquement' : 'Demande refusée';
                const desc   = isCloture
                    ? "L'objet a été attribué à une autre personne. Votre demande a été clôturée automatiquement."
                    : `Cette demande a été marquée comme ${reclamationStatut?.toUpperCase()}.`;

                return (
                    <div style={{ borderRadius: 14, padding: '18px 20px', marginBottom: 20, background: bg, borderLeft: `5px solid ${border}` }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontWeight: 700, color, marginBottom: 6 }}>
                            <i className={`fas ${icon}`}></i> {title}
                        </div>
                        <p style={{ color: '#6c757d', fontSize: '0.85rem', margin: 0 }}>{desc}</p>
                    </div>
                );
            })()}

            {/* ──── Séparateur ──── */}
            <div style={{ borderTop: '1px solid #e9ecef', paddingTop: 16, marginTop: 4 }}>
                <div style={{ fontSize: '0.7rem', textTransform: 'uppercase', fontWeight: 700, color: '#aaa', marginBottom: 10, letterSpacing: 1 }}>Signaler un problème</div>
                <button onClick={() => { if (!isLitigeDisabled) setShowLitige(true); }}
                    disabled={isLitigeDisabled}
                    style={{ width: '100%', padding: '11px 20px', borderRadius: 14, border: '1.5px solid #dc3545', background: '#fff', color: isLitigeDisabled ? '#aaa' : '#dc3545', fontWeight: 600, cursor: isLitigeDisabled ? 'not-allowed' : 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, fontSize: '0.88rem', opacity: isLitigeDisabled ? 0.6 : 1 }}>
                    <i className="fas fa-exclamation-triangle"></i>
                    {isLitigeDisabled ? 'Litige déjà signalé' : 'Signaler un litige'}
                </button>
            </div>

            {/* ──── Confirm Dialogs ──── */}
            <ConfirmDialog
                isOpen={confirm?.type === 'valider'}
                icon="fa-check-circle"
                title="Valider la réclamation ?"
                message="Confirmez-vous que cette personne est le propriétaire légitime ? L'objet sera mis en attente de restitution physique."
                confirmLabel="Oui, valider"
                confirmColor="#28a745"
                onConfirm={() => { setConfirm(null); submitValidate(); }}
                onCancel={() => setConfirm(null)}
            />
            <ConfirmDialog
                isOpen={confirm?.type === 'rejeter'}
                icon="fa-times-circle"
                title="Rejeter la demande ?"
                message="Voulez-vous vraiment rejeter cette réclamation ? Cette action est définitive."
                confirmLabel="Oui, rejeter"
                confirmColor="#dc3545"
                onConfirm={() => { setConfirm(null); submitReject(); }}
                onCancel={() => setConfirm(null)}
            />

            {/* ──── Restitution Modal ──── */}
            <RestitutionModal
                isOpen={showRestitution}
                onClose={() => setShowRestitution(false)}
                submitUrl={restituerUrl}
                objetTitre={objetTitre}
                objetImage={objetImage}
                objetReference={objetReference}
                csrfToken={csrfRestituer}
            />

            {/* ──── Litige Modal ──── */}
            {showLitige && createPortal(
                <div style={{ position: 'fixed', inset: 0, zIndex: 1500, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(5px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
                    onClick={(e) => { if (e.target === e.currentTarget) setShowLitige(false); }}>
                    <div style={{ background: '#fff', borderRadius: 24, width: '100%', maxWidth: 600, overflow: 'hidden', boxShadow: '0 25px 80px rgba(0,0,0,0.25)' }}>
                        <div style={{ background: 'linear-gradient(135deg, #dc3545, #f97316)', padding: '20px 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: '#fff' }}>
                            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                                <i className="fas fa-exclamation-triangle fa-lg"></i>
                                <div><div style={{ fontWeight: 700, fontSize: '1.1rem' }}>Signaler un litige</div><div style={{ fontSize: '0.8rem', opacity: 0.85 }}>Demande de médiation administrative</div></div>
                            </div>
                            <button onClick={() => setShowLitige(false)} style={{ background: 'rgba(255,255,255,0.2)', border: 'none', borderRadius: '50%', width: 34, height: 34, color: '#fff', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                <i className="fas fa-times"></i>
                            </button>
                        </div>
                        {litigeSuccess ? (
                            <div style={{ textAlign: 'center', padding: '48px 32px' }}>
                                <div style={{ width: 72, height: 72, background: '#f0fdf4', borderRadius: '50%', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                                    <i className="fas fa-check fa-2x text-success"></i>
                                </div>
                                <h4 style={{ fontWeight: 700 }}>Signalement envoyé</h4>
                                <p style={{ color: '#6c757d' }}>Votre litige a été transmis aux administrateurs.</p>
                                <button onClick={() => setShowLitige(false)} className="btn btn-light rounded-pill px-4 mt-2">Fermer</button>
                            </div>
                        ) : (
                            <form onSubmit={submitLitige} style={{ padding: 24 }}>
                                {litigeError && <div style={{ background: '#fef2f2', borderRadius: 10, padding: '10px 14px', marginBottom: 16, color: '#dc2626', fontSize: '0.88rem' }}><i className="fas fa-exclamation-circle mr-2"></i>{litigeError}</div>}
                                <div style={{ marginBottom: 18 }}>
                                    <label style={{ fontWeight: 700, fontSize: '0.9rem', marginBottom: 6, display: 'block' }}>Motif du litige</label>
                                    <select required value={litigeData.motif} onChange={(e) => setLitigeData({ ...litigeData, motif: e.target.value })}
                                        style={{ width: '100%', padding: '10px 14px', borderRadius: 12, border: '1.5px solid #dee2e6', fontSize: '0.9rem', outline: 'none' }}>
                                        <option value="">Sélectionnez un motif…</option>
                                        {motifs.map(m => <option key={m.value} value={m.value}>{m.label}</option>)}
                                    </select>
                                </div>
                                <div style={{ marginBottom: 24 }}>
                                    <label style={{ fontWeight: 700, fontSize: '0.9rem', marginBottom: 6, display: 'block' }}>Description détaillée</label>
                                    <textarea required rows={5} value={litigeData.description} onChange={(e) => setLitigeData({ ...litigeData, description: e.target.value })}
                                        style={{ width: '100%', padding: '10px 14px', borderRadius: 12, border: '1.5px solid #dee2e6', resize: 'none', fontSize: '0.88rem', fontFamily: 'inherit', outline: 'none' }}
                                        placeholder="Décrivez précisément le problème rencontré…" />
                                </div>
                                <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10 }}>
                                    <button type="button" onClick={() => setShowLitige(false)} style={{ padding: '10px 22px', borderRadius: 50, border: '1.5px solid #dee2e6', background: '#f8f9fa', cursor: 'pointer', fontWeight: 600 }}>Annuler</button>
                                    <button type="submit" disabled={litigeSubmitting} style={{ padding: '10px 22px', borderRadius: 50, border: 'none', background: 'linear-gradient(135deg,#dc3545,#f97316)', color: '#fff', fontWeight: 700, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8 }}>
                                        {litigeSubmitting ? <><span className="spinner-border spinner-border-sm"></span>Envoi…</> : <><i className="fas fa-paper-plane"></i>Envoyer</>}
                                    </button>
                                </div>
                            </form>
                        )}
                    </div>
                </div>,
                document.body
            )}
        </div>
    );
}