import React, { useState, useRef, useEffect } from 'react';
import { createPortal } from 'react-dom';
import axios from 'axios';
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';
import { IMaskInput } from 'react-imask';

export default function RestitutionModal({
    reclamationId,
    submitUrl,
    rejectUrl,
    objetTitre,
    objetImage,
    objetReference,
    csrfToken,
    showLabel = false,
    label = '',
    customClass = '',
    isDisabled = false,
    mode = 'automatic' // 'automatic' ou 'manual'
}) {
    const [isOpen, setIsOpen] = useState(false);
    const [step, setStep] = useState(1); // 1 = formulaire, 2 = succès
    
    // État du formulaire
    const [formData, setFormData] = useState({
        commentaire: '',
        nomReclamant: '',
        telephoneReclamant: '',
        canalReclamation: 'appel',
        attestationHonneur: false
    });

    // Validation
    const [errors, setErrors] = useState({});
    const [touched, setTouched] = useState({});
    const maxLengths = {
        commentaire: 500,
        nomReclamant: 80,
    };

    // Médias
    const [photoFile, setPhotoFile] = useState(null); // Blob recadré final
    const [photoPreview, setPhotoPreview] = useState(null); // Data URL pour l'aperçu
    const [tempPhotoUrl, setTempPhotoUrl] = useState(null); // Data URL brute pour le Cropper
    const [isCropping, setIsCropping] = useState(false);
    const cropperRef = useRef(null);
    const fileInputRef = useRef(null);

    const [isSubmitting, setIsSubmitting] = useState(false);
    const [apiError, setApiError] = useState(null);

    const toggleModal = () => {
        if (!isOpen && isDisabled) return;
        setIsOpen(!isOpen);
        if (isOpen) {
            resetFormState();
        }
    };

    const resetFormState = () => {
        setStep(1);
        setFormData({ 
            commentaire: '',
            nomReclamant: '',
            telephoneReclamant: '',
            canalReclamation: 'app',
            attestationHonneur: false
        });
        setErrors({});
        setTouched({});
        setPhotoFile(null);
        setPhotoPreview(null);
        setTempPhotoUrl(null);
        setIsCropping(false);
        setApiError(null);
    };

    const validateField = (name, value) => {
        if (mode === 'manual') {
            if (name === 'nomReclamant') {
                if (!value || value.trim().length === 0) return 'Le nom est requis.';
                const words = value.trim().split(/\s+/);
                if (words.length < 2) return 'Veuillez saisir votre nom complet (Prénom et Nom).';
                if (value.trim().length < 2) return 'Le nom doit contenir au moins 2 caractères.';
                if (value.trim().length > maxLengths.nomReclamant) return `Maximum ${maxLengths.nomReclamant} caractères.`;
            }
            if (name === 'telephoneReclamant') {
                if (!value || value.trim().length === 0) return 'Le téléphone est requis.';
                // Regex basique pour +221 7X XXX XX XX (IMask format)
                if (!/^\+221\s7\d\s\d{3}\s\d{2}\s\d{2}$/.test(value)) return 'Veuillez saisir un numéro complet.';
            }
        }
        if (name === 'commentaire') {
            if (value && value.length > maxLengths.commentaire) return `Maximum ${maxLengths.commentaire} caractères.`;
        }
        return null;
    };

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData(prev => ({ ...prev, [name]: value }));
        if (touched[name]) {
            setErrors(prev => ({ ...prev, [name]: validateField(name, value) }));
        }
    };

    const handleBlur = (e) => {
        const { name, value } = e.target;
        setTouched(prev => ({ ...prev, [name]: true }));
        setErrors(prev => ({ ...prev, [name]: validateField(name, value) }));
    };

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

    const handleCrop = async () => {
        if (cropperRef.current && cropperRef.current.cropper) {
            const canvas = cropperRef.current.cropper.getCroppedCanvas({
                width: 1200,
                height: 320
            });
            if (canvas) {
                const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg', 0.9));
                const dataUrl = canvas.toDataURL('image/jpeg');
                
                setPhotoFile(blob);
                setPhotoPreview(dataUrl);
                setIsCropping(false);
                setTempPhotoUrl(null);
            }
        }
    };

    const cancelCrop = () => {
        setIsCropping(false);
        setTempPhotoUrl(null);
        if (fileInputRef.current) fileInputRef.current.value = '';
    };

    const isFormValid = () => {
        const hasPhoto = photoFile !== null;
        if (!hasPhoto && !formData.attestationHonneur) return false;

        const baseErrors = Object.values(errors).some(error => error !== null);
        if (baseErrors) return false;

        if (mode === 'manual') {
            const words = formData.nomReclamant.trim().split(/\s+/);
            return words.length >= 2 && 
                   /^\+221\s7\d\s\d{3}\s\d{2}\s\d{2}$/.test(formData.telephoneReclamant);
        }
        return true;
    };

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

        setIsSubmitting(true);
        setApiError(null);

        const body = new FormData();
        if (photoFile) {
            body.append('photo', photoFile, 'preuve-restitution.jpg');
        }
        body.append('attestationHonneur', formData.attestationHonneur);
        body.append('commentaire', formData.commentaire || '');
        body.append('_token', csrfToken);
        
        if (mode === 'manual' || formData.nomReclamant) {
            body.append('nomReclamant', formData.nomReclamant || '');
            body.append('telephoneReclamant', formData.telephoneReclamant || '');
            body.append('canalReclamation', formData.canalReclamation || 'appel');
        }

        try {
            const response = await axios.post(submitUrl, body, {
                headers: { 'Content-Type': 'multipart/form-data' }
            });

            if (response.data.success) {
                setStep(2);
                setTimeout(() => window.location.reload(), 2500);
            } else {
                setApiError(response.data.message || 'Une erreur est survenue.');
            }
        } catch (err) {
            setApiError(err.response?.data?.message || '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: 1055,
                overflowY: 'auto' 
            }}
            onClick={(e) => { if (e.target === e.currentTarget) toggleModal(); }}
        >
            <div className="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable" role="document">
                <div className="modal-content border-0 shadow-lg" style={{ borderRadius: '24px', overflow: 'hidden' }}>

                    {/* Header */}
                    <div className="modal-header border-0 py-3 px-4" style={{ background: 'linear-gradient(135deg, #28a745, #20c997)' }}>
                        <h5 className="modal-title font-weight-bold d-flex align-items-center text-white">
                            <i className="fas fa-handshake mr-3"></i>
                            {mode === 'manual' ? 'Restitution manuelle (hors plateforme)' : 'Confirmer la restitution'}
                        </h5>
                        <button type="button" className="close text-white" onClick={toggleModal} style={{ outline: 'none', opacity: 1 }}>
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    {/* Body */}
                    <div className="modal-body p-0">
                        {step === 2 ? (
                            /* Succès */
                            <div className="text-center py-5 px-4">
                                <div
                                    className="rounded-circle d-inline-flex align-items-center justify-content-center mb-4 shadow"
                                    style={{ width: '90px', height: '90px', background: 'linear-gradient(135deg, #28a745, #20c997)' }}
                                >
                                    <i className="fas fa-check fa-3x text-white"></i>
                                </div>
                                <h4 className="font-weight-bold text-dark mb-2">Restitution confirmée !</h4>
                                <p className="text-muted mb-4">
                                    La preuve de restitution a été enregistrée.<br />
                                    <strong>{objetTitre}</strong> est maintenant marqué comme restitué.
                                </p>
                                <p className="text-muted small">Redirection en cours…</p>
                                <div className="spinner-border spinner-border-sm text-success" role="status"></div>
                            </div>
                        ) : (
                            <div className="row no-gutters">
                                {/* Sidebar: objet */}
                                <div className="col-md-4 bg-light border-right">
                                    <div className="p-4 h-100">
                                        <label className="text-muted small text-uppercase font-weight-bold mb-2 d-block">Objet concerné</label>
                                        <div className="rounded overflow-hidden shadow-sm border bg-white mb-3" style={{ borderRadius: '14px' }}>
                                            {objetImage ? (
                                                <img src={objetImage} alt={objetTitre} className="w-100" style={{ height: '160px', objectFit: 'cover' }} />
                                            ) : (
                                                <div className="w-100 d-flex align-items-center justify-content-center bg-light text-muted" style={{ height: '160px' }}>
                                                    <i className="fas fa-image fa-3x"></i>
                                                </div>
                                            )}
                                        </div>
                                        <h6 className="font-weight-bold text-dark mb-1">{objetTitre}</h6>
                                        <div className="text-muted small mb-3">REF: <span className="font-weight-bold">{objetReference}</span></div>

                                        <div className="p-3 rounded small" style={{ background: '#e8f5e9', borderLeft: '4px solid #28a745', lineHeight: 1.6 }}>
                                            <h6 className="font-weight-bold mb-1">
                                                <i className="fas fa-info-circle mr-1 text-success"></i> Important
                                            </h6>
                                            En confirmant la restitution, vous certifiez avoir remis l'objet au propriétaire légitime. 
                                            <strong> Cette action est définitive.</strong>
                                        </div>
                                    </div>
                                </div>

                                {/* Formulaire */}
                                <div className="col-md-8">
                                    <form onSubmit={handleSubmit} className="p-4">
                                        {apiError && (
                                            <div className="alert alert-danger d-flex align-items-center mb-4 py-2" style={{ borderRadius: '12px', fontSize: '0.9rem' }}>
                                                <i className="fas fa-exclamation-circle mr-2"></i>
                                                {apiError}
                                            </div>
                                        )}

                                        {mode === 'manual' && (
                                            <div className="bg-light p-3 rounded mb-4 border">
                                                <h6 className="font-weight-bold mb-3"><i className="fas fa-user-tag mr-2 text-primary"></i>Infos du réclamant</h6>
                                                <div className="row">
                                                    <div className="col-md-6 form-group">
                                                        <label className="small font-weight-bold">Nom complet <span className="text-danger">*</span></label>
                                                        <input 
                                                            type="text" 
                                                            name="nomReclamant"
                                                            className={`form-control ${errors.nomReclamant ? 'is-invalid' : ''}`}
                                                            placeholder="Ex: Jean Dupont"
                                                            value={formData.nomReclamant}
                                                            onChange={handleChange}
                                                            onBlur={handleBlur}
                                                        />
                                                        {errors.nomReclamant && <div className="invalid-feedback">{errors.nomReclamant}</div>}
                                                    </div>
                                                    <div className="col-md-6 form-group">
                                                        <label className="small font-weight-bold">Téléphone <span className="text-danger">*</span></label>
                                                        <IMaskInput 
                                                            mask="+221 #0 000 00 00"
                                                            definitions={{ '#': /[7]/ }}
                                                            name="telephoneReclamant" 
                                                            value={formData.telephoneReclamant} 
                                                            unmask={false}
                                                            onAccept={(value) => {
                                                                setFormData(prev => ({ ...prev, telephoneReclamant: value }));
                                                                if (touched.telephoneReclamant) {
                                                                    setErrors(prev => ({ ...prev, telephoneReclamant: validateField('telephoneReclamant', value) }));
                                                                }
                                                            }}
                                                            onBlur={() => handleBlur({ target: { name: 'telephoneReclamant', value: formData.telephoneReclamant } })}
                                                            className={`form-control ${errors.telephoneReclamant ? 'is-invalid' : ''}`} 
                                                            placeholder="+221 7X XXX XX XX" 
                                                        />
                                                        {errors.telephoneReclamant && <div className="invalid-feedback d-block">{errors.telephoneReclamant}</div>}
                                                    </div>
                                                    <div className="col-md-12 form-group mb-0">
                                                        <label className="small font-weight-bold">Canal de contact</label>
                                                        <select 
                                                            name="canalReclamation"
                                                            className="form-control"
                                                            value={formData.canalReclamation}
                                                            onChange={handleChange}
                                                        >
                                                            <option value="whatsapp">WhatsApp</option>
                                                            <option value="appel">Appel téléphonique</option>
                                                            <option value="email">Email</option>
                                                            <option value="physique">Rencontre physique directe</option>
                                                            <option value="autre">Autre</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        )}

                                        {/* Photo de preuve */}
                                        <div className="form-group mb-4">
                                            <label className="font-weight-bold text-dark mb-1">
                                                <i className="fas fa-camera mr-2 text-success"></i>
                                                Photo de preuve {!formData.attestationHonneur && <span className="text-danger">*</span>}
                                            </label>
                                            
                                            {isCropping ? (
                                                <div className="mb-4">
                                                    <div className="bg-dark rounded overflow-hidden shadow-sm mb-3 position-relative" style={{ height: '300px' }}>
                                                        <Cropper
                                                            src={tempPhotoUrl}
                                                            style={{ height: '100%', width: "100%" }}
                                                            aspectRatio={3 / 2}
                                                            guides={true}
                                                            ref={cropperRef}
                                                            viewMode={1}
                                                            dragMode="move"
                                                            background={false}
                                                            responsive={true}
                                                            autoCropArea={1}
                                                            checkOrientation={false}
                                                        />
                                                    </div>
                                                    <div className="d-flex justify-content-center gap-2">
                                                        <button type="button" onClick={cancelCrop} className="btn btn-sm btn-light border mr-2">Annuler</button>
                                                        <button type="button" onClick={handleCrop} className="btn btn-sm btn-success px-3">Valider le recadrage</button>
                                                    </div>
                                                </div>
                                            ) : (
                                                <>
                                                    <p className="text-muted small mb-2">
                                                        {formData.attestationHonneur 
                                                            ? "Même avec l'attestation, une photo est fortement recommandée pour sécuriser la preuve." 
                                                            : "Preuve de remise de l'objet (reçu, photo, etc.). Obligatoire sans attestation."}
                                                    </p>
                                                    <div
                                                        onClick={() => fileInputRef.current.click()}
                                                        style={{
                                                            border: '2px dashed #28a745',
                                                            borderRadius: '14px',
                                                            padding: '16px',
                                                            cursor: 'pointer',
                                                            background: photoPreview ? '#f0fdf4' : '#fafafa',
                                                            transition: 'all 0.2s',
                                                            minHeight: '130px',
                                                            display: 'flex',
                                                            alignItems: 'center',
                                                            justifyContent: 'center',
                                                            flexDirection: 'column',
                                                        }}
                                                    >
                                                        {photoPreview ? (
                                                            <img
                                                                src={photoPreview}
                                                                alt="Prévisualisation"
                                                                style={{ maxHeight: '120px', maxWidth: '100%', borderRadius: '10px', objectFit: 'contain' }}
                                                            />
                                                        ) : (
                                                            <>
                                                                <i className="fas fa-cloud-upload-alt fa-2x text-success mb-2"></i>
                                                                <span className="text-muted small">Cliquez pour choisir une photo</span>
                                                            </>
                                                        )}
                                                    </div>
                                                </>
                                            )}
                                            
                                            <input
                                                type="file"
                                                ref={fileInputRef}
                                                accept="image/*"
                                                onChange={handlePhotoChange}
                                                style={{ display: 'none' }}
                                            />
                                            {photoFile && !isCropping && (
                                                <div className="d-flex align-items-center justify-content-between mt-2 small text-success">
                                                    <span><i className="fas fa-check-circle mr-1"></i>Photo prête</span>
                                                    <button
                                                        type="button"
                                                        className="btn btn-sm text-danger p-0"
                                                        onClick={() => { setPhotoFile(null); setPhotoPreview(null); }}
                                                    >
                                                        <i className="fas fa-times"></i> Supprimer
                                                    </button>
                                                </div>
                                            )}
                                        </div>

                                        {/* Attestation sur l'honneur */}
                                        <div className={`p-3 rounded mb-4 border transition-all ${formData.attestationHonneur ? 'bg-soft-warning border-warning shadow-sm' : 'bg-light'}`} style={{ borderRadius: '16px' }}>
                                            <div className="custom-control custom-checkbox">
                                                <input 
                                                    type="checkbox" 
                                                    className="custom-control-input" 
                                                    id="attestationHonneur"
                                                    checked={formData.attestationHonneur}
                                                    onChange={(e) => setFormData({ ...formData, attestationHonneur: e.target.checked })}
                                                />
                                                <label className="custom-control-label font-weight-bold pt-1 cursor-pointer" htmlFor="attestationHonneur" style={{ fontSize: '0.9rem', lineHeight: '1.4' }}>
                                                    Je certifie sur l'honneur avoir remis cet objet à son propriétaire légitime.
                                                    <span className="d-block text-muted small font-weight-normal mt-1">
                                                        {photoFile 
                                                            ? "En cochant ceci, vous renforcez la validité de votre action." 
                                                            : "Utilisez cette option si vous ne disposez d'aucune photo. Cet engagement a valeur légale."}
                                                    </span>
                                                </label>
                                            </div>
                                        </div>

                                        {/* Commentaire */}
                                        <div className="form-group mb-4">
                                            <label className="font-weight-bold text-dark mb-1">
                                                <i className="fas fa-comment mr-2 text-muted"></i>
                                                Commentaire <span className="text-muted small">(optionnel)</span>
                                            </label>
                                            <textarea
                                                name="commentaire"
                                                className={`form-control border-2 shadow-none ${errors.commentaire ? 'is-invalid' : ''}`}
                                                rows="3"
                                                style={{ borderRadius: '12px', resize: 'none' }}
                                                placeholder="Ex: Remise effectuée le 03/04/2026 à 14h00..."
                                                value={formData.commentaire}
                                                onChange={handleChange}
                                                onBlur={handleBlur}
                                            />
                                            {errors.commentaire ? (
                                                <div className="invalid-feedback">{errors.commentaire}</div>
                                            ) : (
                                                <div className="text-right small text-muted mt-1">{formData.commentaire.length}/{maxLengths.commentaire}</div>
                                            )}
                                        </div>

                                        {/* Actions */}
                                        <div className="d-flex justify-content-end align-items-center gap-3 mt-3">
                                            <button
                                                type="button"
                                                className="btn btn-light rounded-pill px-4 font-weight-bold border shadow-sm"
                                                onClick={toggleModal}
                                                disabled={isSubmitting}
                                            >
                                                Annuler
                                            </button>
                                            <button
                                                type="submit"
                                                className={`btn btn-lg rounded-pill px-4 shadow-sm ml-3 transition-all ${isFormValid() ? 'btn-success' : 'btn-secondary disabled opacity-75'}`}
                                                disabled={isSubmitting || !isFormValid()}
                                                style={{ 
                                                    background: isFormValid() ? 'linear-gradient(135deg, #28a745, #20c997)' : '#adb5bd', 
                                                    border: 'none',
                                                    cursor: isFormValid() ? 'pointer' : 'not-allowed'
                                                }}
                                            >
                                                {isSubmitting ? (
                                                    <span><span className="spinner-border spinner-border-sm mr-2"></span>Envoi en cours...</span>
                                                ) : (
                                                    <><i className="fas fa-handshake mr-2"></i>Confirmer la restitution</>
                                                )}
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );

    return (
        <React.Fragment>
            {showLabel ? (
                <button
                    type="button"
                    className={customClass || `btn btn-success w-100 shadow-sm rounded-3 py-2 ${isDisabled ? 'disabled opacity-50' : ''}`}
                    onClick={toggleModal}
                    disabled={isDisabled}
                    style={isDisabled ? { cursor: 'not-allowed' } : {}}
                >
                    <i className="fas fa-handshake mr-2"></i>
                    {label || 'Valider la restitution'}
                </button>
            ) : (
                <button
                    type="button"
                    className={customClass || `btn btn-sm btn-outline-success rounded-pill ${isDisabled ? 'disabled opacity-50' : ''}`}
                    title={isDisabled ? 'Restitution déjà confirmée' : 'Confirmer la restitution'}
                    onClick={toggleModal}
                    disabled={isDisabled}
                >
                    <i className="fas fa-handshake"></i>
                </button>
            )}
            {isOpen && createPortal(modalContent, document.body)}
        </React.Fragment>
    );
}