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




export default function ObjetTrouveEdit(props) {
    const [formData, setFormData] = useState({
        id: props.initialData?.id || '',
        title: props.initialData?.titre || '',
        category: props.initialData?.categoryId || '',
        location: props.initialData?.lieuTrouve || '',
        dateFound: props.initialData?.trouveAt || '',
        description: props.initialData?.description || '',
        deposeurTelephone: props.initialData?.deposeurTelephone || '',
        deposeurNom: props.initialData?.deposeurNom || '',
        deposeurDescription: props.initialData?.deposeurDescription || '',
        adresse: props.initialData?.adresse || '',
    });

    const maxLengths = {
        title: 100,
        location: 100,
        adresse: 100,
        description: 500,
        deposeurNom: 80,
        deposeurDescription: 500
    };
    const [errors, setErrors] = useState({});
    const [touched, setTouched] = useState({});

    // Each slot can be: { id: 123, raw: 'file.jpg', public: 'file_p.jpg', isMasked: true, isNew: false, rawFile: null, publicFile: null }
    const [slots, setSlots] = useState(() => {
        const initial = (props.initialData?.images || []).map(img => ({
            id: img.id,
            raw: img.raw,
            public: img.public,
            isMasked: img.isMasked,
            isNew: false,
            rawFile: null,
            publicFile: null,
            position: img.position
        }));
        // Sort by position
        return initial.sort((a, b) => a.position - b.position);
    });

    const [mainImageIndex, setMainImageIndex] = useState(() => {
        const main = slots.findIndex(s => s.position === 0);
        return main !== -1 ? main : 0;
    });

    const [dynamicFields, setDynamicFields] = useState(props.initialDynamicFields || {});
    const [activeCrop, setActiveCrop] = useState(null); // { index: 0, type: 'raw' | 'public', src: 'data:...' }
    const cropperRef = useRef(null);
    const [loading, setLoading] = useState(false);
    const [success, setSuccess] = useState(false);
    const [error, setError] = useState(null);

    const validateField = (name, value) => {
        const safeValue = value || '';
        if (['description', 'deposeurDescription', 'title', 'location', 'adresse', 'deposeurNom'].includes(name)) {
            if (safeValue && safeValue.trim().length > maxLengths[name]) {
                return `Ce champ ne doit pas dépasser ${maxLengths[name]} caractères.`;
            }
        }
        if (['title', 'location', 'description', 'deposeurDescription'].includes(name)) {
            if (safeValue && safeValue.trim().length > 0 && safeValue.trim().length < 3) {
                return 'Ce champ doit contenir au moins 3 caractères.';
            }
        }
        if (name === 'deposeurTelephone') {
            const phoneDigits = safeValue.replace(/\D/g, '');
            const unmasked = safeValue.replace(/[\s\-_]/g, '');
            if (safeValue && safeValue.trim().length > 0) {
                if (phoneDigits.length < 12 || !/^\+221(7[05678]|30|33)\d{7}$/.test(unmasked)) {
                    return 'Veuillez saisir le numéro de téléphone complet Sénégalais.';
                }
            }
        }
        if (name === 'deposeurNom') {
            if (safeValue && safeValue.trim().length > 0 && safeValue.trim().length < 2) {
                return 'Le nom doit contenir au moins 2 caractères.';
            }
        }
        return null;
    };

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

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

    const handleDynamicFieldChange = (fieldId, value) => {
        setDynamicFields(prev => ({ ...prev, [fieldId]: value }));
    };

    const selectedCategory = props.categories?.find(c => c.id == formData.category) || null;

    const handleFileSelect = (index, type, e) => {
        if (e.target.files && e.target.files.length > 0) {
            const file = e.target.files[0];
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => {
                setActiveCrop({ index, type, src: reader.result });
            };
        }
    };

    const handleCropExec = async () => {
        if (cropperRef.current && cropperRef.current.cropper) {
            const canvas = cropperRef.current.cropper.getCroppedCanvas({ width: 800, height: 600 });
            if (canvas) {
                const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg', 0.9));
                const dataUrl = canvas.toDataURL('image/jpeg');

                setSlots(prev => {
                    const next = [...prev];
                    const slot = { ...(next[activeCrop.index] || { isNew: true, position: activeCrop.index }) };
                    slot.rawPreview = dataUrl;
                    slot.rawFile = blob;
                    next[activeCrop.index] = slot;
                    return next;
                });
                setActiveCrop(null);
            }
        }
    };

    const removeSlot = (index) => {
        if (slots.length <= 1) {
            setError("Il doit y avoir au moins une image.");
            return;
        }
        setSlots(prev => prev.filter((_, i) => i !== index));
        if (mainImageIndex === index) setMainImageIndex(0);
        else if (mainImageIndex > index) setMainImageIndex(mainImageIndex - 1);
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        if (slots.length === 0) {
            setError("Veuillez ajouter au moins une image.");
            return;
        }
        setLoading(true);
        setError(null);

        const data = new FormData();
        Object.keys(formData).forEach(key => data.append(key, formData[key]));
        data.append('mainImageIndex', mainImageIndex);
        data.append('dynamicFields', JSON.stringify(dynamicFields));

        // Metadata about slots
        const slotsMetadata = slots.map((slot, index) => ({
            id: slot.id || null,
            isNew: !!slot.isNew,
            hasRawFile: !!slot.rawFile,
        }));
        data.append('slotsMetadata', JSON.stringify(slotsMetadata));

        slots.forEach((slot, index) => {
            if (slot.rawFile) data.append(`rawFiles[${index}]`, slot.rawFile, `raw-${index}.jpg`);
        });

        try {
            const response = await axios.post(props.submitUrl, data);
            if (response.data.success) {
                if (e.nativeEvent.submitter?.name === 'saveAndExit') {
                    window.location.href = props.redirectUrl;
                } else {
                    setSuccess(true);
                }
            } else {
                setError(response.data.error || 'Une erreur est survenue');
            }
        } catch (err) {
            setError(err.response?.data?.error || 'Erreur lors de la mise à jour');
        } finally {
            setLoading(false);
        }
    };

    if (success) {
        return (
            <div className="card border-0 shadow-sm text-center p-5" style={{ borderRadius: '20px' }}>
                <div className="card-body py-4 text-center">
                    <div className="rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style={{ width: '80px', height: '80px', backgroundColor: '#e6f4ea', color: '#1e8e3e' }}>
                        <i className="fas fa-check-circle fa-3x"></i>
                    </div>
                    <h3 className="font-weight-bold">Modifications enregistrées !</h3>
                    <p className="text-muted mb-4">Votre signalement a été mis à jour avec succès.</p>
                    <div className="d-flex justify-content-center gap-3">
                        <button onClick={() => setSuccess(false)} className="btn btn-outline-primary m-1 px-4" style={{ borderRadius: '10px' }}>
                            <i className="fas fa-edit mr-2"></i> Continuer à modifier
                        </button>
                        <a href={props.redirectUrl} className="btn btn-primary m-1 px-4 shadow-sm font-weight-bold" style={{ borderRadius: '10px' }}>
                            <i className="fas fa-check mr-2"></i> Terminer
                        </a>
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className="card border-0 shadow-sm" style={{ borderRadius: '20px' }}>
            {activeCrop && (
                <div className="position-fixed w-100 h-100 d-flex align-items-center justify-content-center px-2 px-md-0" style={{ top: 0, left: 0, zIndex: 1050, backgroundColor: 'rgba(0,0,0,0.8)' }}>
                    <div className="bg-white p-3 p-md-4 rounded-lg shadow-lg" style={{ maxWidth: '900px', width: '100%', borderRadius: '20px' }}>
                        <h5 className="font-weight-bold mb-3">Recadrer l'image</h5>
                        <div className="bg-dark rounded overflow-hidden">
                            <Cropper
                                src={activeCrop.src}
                                style={{ height: window.innerWidth < 768 ? 300 : 400, width: '100%' }}
                                aspectRatio={4 / 3}
                                guides={true}
                                ref={cropperRef}
                                viewMode={1}
                            />
                        </div>
                        <div className="d-flex justify-content-end mt-4">
                            <button onClick={() => setActiveCrop(null)} className="btn btn-outline-primary mx-2 px-4" style={{ borderRadius: '10px' }}>Annuler</button>
                            <button onClick={handleCropExec} className="btn btn-primary mx-2 px-4" style={{ borderRadius: '10px' }}>Valider</button>
                        </div>
                    </div>
                </div>
            )}



            <div className="card-header bg-white border-bottom-0 pt-4 px-4 px-md-5">
                <h3 className="font-weight-bold mb-1" style={{ color: 'var(--gris-fonce)' }}>Modifier mon signalement</h3>
                <p className="text-muted small mb-0">Éditez les informations et gérez les visuels publics/privés.</p>
            </div>

            <div className="card-body p-4 p-md-5">
                <form onSubmit={handleSubmit}>
                    <div className="alert alert-light py-2 px-3 mb-4 d-flex align-items-center" style={{ borderRadius: '12px', background: '#f8f9fb', border: '1px solid #e8eaf0' }}>
                        <i className="fas fa-info-circle text-primary mr-2 small"></i>
                        <span className="small font-weight-bold text-muted">Tous les champs sont obligatoires, sauf indication contraire.</span>
                    </div>
                    {error && (
                        <div className="alert alert-danger shadow-sm border-0 mb-4" style={{ borderRadius: '12px' }}>
                            <i className="fas fa-exclamation-circle mr-2"></i> {error}
                        </div>
                    )}

                    <div className="row">
                        <div className="col-lg-8">
                            <div className="form-group mb-4">
                                <label className="font-weight-bold text-muted small text-uppercase">Titre de l'objet</label>
                                <input type="text" name="title" value={formData.title} onChange={handleChange} onBlur={handleBlur} maxLength="100" className={`form-control ${errors.title ? 'is-invalid' : ''}`} required />
                                <div className="d-flex justify-content-between mt-1">
                                    <div>{errors.title && <div className="invalid-feedback d-block font-weight-bold m-0">{errors.title}</div>}</div>
                                    <small className={formData.title.length >= maxLengths.title ? 'text-danger font-weight-bold' : 'text-muted'}>{formData.title.length}/{maxLengths.title}</small>
                                </div>
                            </div>
                            
                            <div className="form-group mb-4">
                                <label className="font-weight-bold text-muted small text-uppercase">Votre Adresse (Profil)</label>
                                <input type="text" name="adresse" value={formData.adresse} onChange={handleChange} onBlur={handleBlur} maxLength={maxLengths.adresse} className={`form-control ${errors.adresse ? 'is-invalid' : ''}`} />
                                <div className="d-flex justify-content-between mt-1">
                                    <div>{errors.adresse && <div className="invalid-feedback d-block font-weight-bold m-0">{errors.adresse}</div>}</div>
                                    <small className={formData.adresse.length >= maxLengths.adresse ? 'text-danger font-weight-bold' : 'text-muted'}>{formData.adresse.length}/{maxLengths.adresse}</small>
                                </div>
                            </div>

                            <div className="row">
                                <div className="col-md-6 mb-4">
                                    <label className="font-weight-bold text-muted small text-uppercase">Catégorie</label>
                                    <select name="category" value={formData.category} onChange={handleChange} className="form-control" required>
                                        <option value="">Sélectionner...</option>
                                        {props.categories?.map(cat => <option key={cat.id} value={cat.id}>{cat.nom}</option>)}
                                    </select>
                                </div>
                                <div className="col-md-6 mb-4">
                                    <label className="font-weight-bold text-muted small text-uppercase">Date de découverte</label>
                                    <input type="datetime-local" name="dateFound" value={formData.dateFound} onChange={handleChange} className="form-control" required />
                                </div>
                            </div>

                            {selectedCategory?.fields?.length > 0 && (
                                <div className="card bg-light border-0 mb-4 fade-in visible shadow-sm" style={{ borderRadius: '12px', transition: 'all 0.4s ease' }}>
                                    <div className="card-body p-3">
                                        <h6 className="font-weight-bold mb-3" style={{ color: 'var(--gris-fonce)' }}>
                                            <i className="fas fa-list-alt mr-2" style={{ color: 'var(--vert-senegal)' }}></i>
                                            Informations spécifiques ({selectedCategory.nom})
                                        </h6>
                                        <div className="row">
                                            {selectedCategory.fields.map(field => (
                                                <div key={field.id} className="col-md-6 mb-3">
                                                    <div className="form-group mb-0">
                                                        <label className="font-weight-bold text-muted small text-uppercase mb-1">
                                                            {field.libelle} {field.estObligatoire && <span className="text-danger">*</span>}
                                                        </label>
                                                        <input
                                                            type={field.type === 'date' ? 'date' : (field.type === 'number' ? 'number' : 'text')}
                                                            value={dynamicFields[field.id] || ''}
                                                            onChange={(e) => handleDynamicFieldChange(field.id, e.target.value)}
                                                            className="form-control" required={field.estObligatoire}
                                                        />
                                                    </div>
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                </div>
                            )}

                            <div className="form-group mb-4">
                                <label className="font-weight-bold text-muted small text-uppercase">Lieu</label>
                                <input type="text" name="location" value={formData.location} onChange={handleChange} onBlur={handleBlur} maxLength="255" className={`form-control ${errors.location ? 'is-invalid' : ''}`} required />
                                <div className="d-flex justify-content-between mt-1">
                                    <div>{errors.location && <div className="invalid-feedback d-block font-weight-bold m-0">{errors.location}</div>}</div>
                                    <small className={formData.location.length >= maxLengths.location ? 'text-danger font-weight-bold' : 'text-muted'}>{formData.location.length}/{maxLengths.location}</small>
                                </div>
                            </div>

                            <div className="form-group mb-4">
                                <label className="font-weight-bold text-muted small text-uppercase">Description</label>
                                <textarea name="description" value={formData.description} onChange={handleChange} onBlur={handleBlur} maxLength="500" rows="4" className={`form-control ${errors.description ? 'is-invalid' : ''}`} style={{ borderRadius: '12px', resize: 'none' }}></textarea>
                                <div className="d-flex justify-content-between mt-1">
                                    <div>{errors.description && <div className="invalid-feedback d-block font-weight-bold m-0">{errors.description}</div>}</div>
                                    <small className={formData.description.length >= maxLengths.description ? 'text-danger font-weight-bold' : 'text-muted'}>{formData.description.length}/{maxLengths.description}</small>
                                </div>
                            </div>

                            {props.isAgent && (
                                <div className="card bg-light border-0 mb-4 fade-in visible" style={{ borderRadius: '12px' }}>
                                    <div className="card-body p-3">
                                        <h6 className="font-weight-bold mb-3" style={{ color: 'var(--gris-fonce)' }}>
                                            <i className="fas fa-user mr-2" style={{ color: 'var(--vert-senegal)' }}></i>
                                            Informations du Déposeur <span className="text-muted font-weight-normal small">(Optionnel)</span>
                                        </h6>
                                        <div className="row">
                                            <div className="col-md-6 mb-3">
                                                <div className="form-group mb-0">
                                                    <label className="font-weight-bold text-muted small text-uppercase mb-2">Téléphone</label>
                                                    <IMaskInput 
                                                        mask="+221 #0 000 00 00"
                                                        definitions={{ '#': /[7]/ }}
                                                        name="deposeurTelephone" 
                                                        value={formData.deposeurTelephone} 
                                                        unmask={false}
                                                        onAccept={(value) => {
                                                            setFormData(prev => ({ ...prev, deposeurTelephone: value }));
                                                            const errorMsg = validateField('deposeurTelephone', value);
                                                            setErrors(prev => ({ ...prev, deposeurTelephone: errorMsg }));
                                                        }}
                                                        onBlur={handleBlur} 
                                                        className={`form-control ${errors.deposeurTelephone ? 'is-invalid' : ''}`} 
                                                        placeholder="+221 7X XXX XX XX" 
                                                    />
                                                    {errors.deposeurTelephone && <div className="invalid-feedback d-block font-weight-bold">{errors.deposeurTelephone}</div>}
                                                </div>
                                            </div>
                                            <div className="col-md-6 mb-3">
                                                <div className="form-group mb-0">
                                                    <label className="font-weight-bold text-muted small text-uppercase mb-2">Nom (s) & Prénom (s)</label>
                                                    <input type="text" name="deposeurNom" value={formData.deposeurNom} onChange={handleChange} onBlur={handleBlur} maxLength="80" className={`form-control ${errors.deposeurNom ? 'is-invalid' : ''}`} style={{ borderRadius: '8px', backgroundColor: 'white', border: '1px solid #ced4da' }} placeholder="Ex: Jean Dupont" />
                                                    <div className="d-flex justify-content-between mt-1">
                                                        <div>{errors.deposeurNom && <div className="invalid-feedback d-block font-weight-bold">{errors.deposeurNom}</div>}</div>
                                                        <small className={formData.deposeurNom.length >= maxLengths.deposeurNom ? 'text-danger font-weight-bold' : 'text-muted'}>{formData.deposeurNom.length}/{maxLengths.deposeurNom}</small>
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="col-md-12 mb-0">
                                                <div className="form-group mb-0">
                                                    <label className="font-weight-bold text-muted small text-uppercase mb-2">Description / Note</label>
                                                    <textarea name="deposeurDescription" value={formData.deposeurDescription} onChange={handleChange} onBlur={handleBlur} maxLength="500" className={`form-control ${errors.deposeurDescription ? 'is-invalid' : ''}`} style={{ borderRadius: '8px', backgroundColor: 'white', border: '1px solid #ced4da', resize: 'none' }} rows="2" placeholder="Ex: A trouvé le sac dans le bus..."></textarea>
                                                    <div className="d-flex justify-content-between mt-1">
                                                        <div>{errors.deposeurDescription && <div className="invalid-feedback d-block font-weight-bold">{errors.deposeurDescription}</div>}</div>
                                                        <small className={formData.deposeurDescription.length >= maxLengths.deposeurDescription ? 'text-danger font-weight-bold' : 'text-muted'}>{formData.deposeurDescription.length}/{maxLengths.deposeurDescription}</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            )}
                        </div>

                        <div className="col-lg-4">
                            <h6 className="font-weight-bold text-muted small text-uppercase mb-3">Gestion des Images (Max 3)</h6>
                            
                            <div className="row mx-n2">
                                {[0, 1, 2].map(idx => {
                                    const slot = slots[idx];
                                    return (
                                        <div key={idx} className="col-6 col-lg-12 px-2 mb-3">
                                            <div className={`card h-100 border-0 shadow-sm ${mainImageIndex === idx ? 'ring-primary' : ''}`} style={{ borderRadius: '15px', overflow: 'hidden', border: mainImageIndex === idx ? '2px solid var(--vert-senegal)' : '1px solid #eee' }}>
                                                {!slot ? (
                                                    <div className="p-3 text-center bg-light d-flex flex-column align-items-center justify-content-center h-100" style={{ cursor: 'pointer', minHeight: '140px' }} onClick={() => document.getElementById(`upload-raw-${idx}`).click()}>
                                                        <i className="fas fa-camera fa-2x text-muted mb-2"></i>
                                                        <div className="small font-weight-bold text-muted">Ajouter</div>
                                                        <input type="file" id={`upload-raw-${idx}`} className="d-none" onChange={(e) => handleFileSelect(idx, 'raw', e)} />
                                                    </div>
                                                ) : (
                                                    <div className="p-2 p-md-3">
                                                        <div className="d-flex justify-content-between align-items-center mb-2">
                                                            <span className={`badge ${mainImageIndex === idx ? 'badge-success' : 'badge-light'}`} style={{ fontSize: '10px' }}>
                                                                {mainImageIndex === idx ? 'Principale' : `Image ${idx + 1}`}
                                                            </span>
                                                            {props.initialData?.statut !== 'en attente de validation' && (
                                                                <button type="button" onClick={() => removeSlot(idx)} className="btn btn-sm text-danger p-0"><i className="fas fa-times-circle"></i></button>
                                                            )}
                                                        </div>
                                                        
                                                        <div className="bg-dark rounded overflow-hidden mb-2" style={{ height: '100px', position: 'relative' }}>
                                                            <img src={slot.rawPreview || slot.raw || ''} className="w-100 h-100" style={{ objectFit: 'cover' }} />
                                                            {props.initialData?.statut !== 'en attente de validation' && (
                                                                <>
                                                                    <button type="button" className="btn btn-sm btn-outline-secondary position-absolute shadow-sm" style={{ bottom: 5, right: 5, fontSize: '10px', opacity: 0.9, borderRadius: '5px' }} onClick={() => document.getElementById(`edit-raw-${idx}`).click()}><i className="fas fa-sync-alt mr-1"></i>Changer</button>
                                                                    <input type="file" id={`edit-raw-${idx}`} className="d-none" onChange={(e) => handleFileSelect(idx, 'raw', e)} />
                                                                </>
                                                            )}
                                                        </div>

                                                        {props.initialData?.statut !== 'en attente de validation' && mainImageIndex !== idx && (
                                                            <button type="button" className="btn btn-sm btn-outline-primary btn-block" style={{ borderRadius: '8px', fontSize: '10px' }} onClick={() => setMainImageIndex(idx)}>
                                                                Utiliser en principal
                                                            </button>
                                                        )}
                                                    </div>
                                                )}
                                            </div>
                                        </div>
                                    );
                                })}
                            </div>
                        </div>
                    </div>

                    <div className="d-flex flex-column-reverse flex-sm-row justify-content-between align-items-center mt-5 pt-4 border-top gap-3">
                        <a href={props.redirectUrl} className="btn btn-outline-secondary m-1 px-4 py-2 w-100 w-sm-auto" style={{ borderRadius: '10px', color: 'var(--gris-fonce)' }}><i className="fas fa-times mr-2"></i> Annuler</a>
                        <div className="d-flex flex-column flex-sm-row align-items-center w-100 w-sm-auto gap-2">
                            {props.initialData?.statut === 'en attente de validation' ? (
                                <div className="alert alert-warning py-2 px-3 small mb-0 w-100" style={{ borderRadius: '10px' }}>
                                    <i className="fas fa-info-circle mr-2"></i>
                                    Objet en attente de validation.
                                </div>
                            ) : (
                                <div className="d-flex flex-column flex-sm-row gap-2 w-100 w-sm-auto">
                                    <button 
                                        name="saveOnly" 
                                        type="submit" 
                                        disabled={loading || !!errors.title || !!errors.location || !!errors.adresse || !!errors.description || !!errors.deposeurTelephone || !!errors.deposeurNom || !!errors.deposeurDescription || (selectedCategory?.fields?.some(f => f.estObligatoire && (!dynamicFields[f.id] || String(dynamicFields[f.id]).trim() === '')))} 
                                        className="btn btn-outline-secondary m-1 px-4 py-2 font-weight-bold w-100 w-sm-auto" 
                                        style={{ borderRadius: '10px' }}
                                    >
                                        {loading ? <span className="spinner-border spinner-border-sm"></span> : <><i className="fas fa-save mr-2"></i> Sauvegarder</>}
                                    </button>
                                    <button 
                                        name="saveAndExit" 
                                        type="submit" 
                                        disabled={loading || !!errors.title || !!errors.location || !!errors.adresse || !!errors.description || !!errors.deposeurTelephone || !!errors.deposeurNom || !!errors.deposeurDescription || (selectedCategory?.fields?.some(f => f.estObligatoire && (!dynamicFields[f.id] || String(dynamicFields[f.id]).trim() === '')))} 
                                        className="btn btn-primary m-1 px-4 py-2 shadow-sm font-weight-bold w-100 w-sm-auto" 
                                        style={{ borderRadius: '10px', backgroundColor: 'var(--vert-senegal)', border: 'none' }}
                                    >
                                        {loading ? <span className="spinner-border spinner-border-sm"></span> : <><i className="fas fa-check-circle mr-2"></i> Terminer</>}
                                    </button>
                                </div>
                            )}
                        </div>
                    </div>
                </form>
            </div>
        </div>
    );
}