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

// ─── Config du cropper par catégorie ─────────────────────────────────────────
// aspectRatio : ratio width/height du cadre de rognage
// outputWidth / outputHeight : dimensions de l'image sauvegardée
// hint : message affiché à l'utilisateur
const CROP_CONFIGS = {
    // Documents d'identité – format carte ID (85.6 x 54 mm)
    'CNI':               { aspectRatio: 85.6 / 54, outputWidth: 856, outputHeight: 540, hint: 'Format carte d\'identité (ratio 85×54)' },
    'Passeport':         { aspectRatio: 3 / 4,     outputWidth: 600, outputHeight: 800, hint: 'Format portrait passeport (3×4)' },
    'Permis de conduire':{ aspectRatio: 85.6 / 54, outputWidth: 856, outputHeight: 540, hint: 'Format carte de permis (ratio 85×54)' },
    'Documents':         { aspectRatio: 3 / 4,     outputWidth: 600, outputHeight: 800, hint: 'Format document portrait (3×4)' },
    // Électronique – carré (pour montrer l\u2019écran / dos)
    'Electronique':      { aspectRatio: 1 / 1,     outputWidth: 700, outputHeight: 700, hint: 'Format carré – idéal pour appareils électroniques' },
    'Téléphone':         { aspectRatio: 9 / 16,    outputWidth: 450, outputHeight: 800, hint: 'Format portrait – idéal pour smartphones' },
    // Valeurs & clés – format paysage
    'Valeurs':           { aspectRatio: 4 / 3,     outputWidth: 800, outputHeight: 600, hint: 'Format paysage – idéal pour portefeuille / contenu' },
    'Clés':              { aspectRatio: 4 / 3,     outputWidth: 800, outputHeight: 600, hint: 'Format paysage – idéal pour trousseau de clés' },
    // Défaut (Autre, non défini)
    default:             { aspectRatio: 16 / 9,    outputWidth: 900, outputHeight: 506, hint: 'Format standard 16×9' },
};

const getCropConfig = (categoryId) =>
    CROP_CONFIGS[categoryId] ?? CROP_CONFIGS['default'];

export default function ObjetTrouveNew(props) {
    const [step, setStep] = useState(1);
    const [formData, setFormData] = useState({
        title: '',
        category: '',
        location: '',
        adresse: props.userAdresse || '',
        latitude: '',
        longitude: '',
        dateFound: new Date().toISOString().slice(0, 16),
        description: '',
        documentType: '',
        deposeurTelephone: '',
        deposeurNom: '',
        deposeurDescription: '',
    });
    
    const maxLengths = {
        title: 100,
        location: 100,
        adresse: 100,
        description: 500,
        deposeurNom: 80,
        deposeurDescription: 500
    };
    const [errors, setErrors] = useState({});
    const [touched, setTouched] = useState({});
    const [imageFiles, setImageFiles] = useState([]); // Original files (mostly for names)
    const [dynamicFields, setDynamicFields] = useState({});
    const [originalUrls, setOriginalUrls] = useState([]); // Original data URLs for re-cropping
    const [croppedBlobs, setCroppedBlobs] = useState([]); // Resulting blobs
    const [previewUrls, setPreviewUrls] = useState([]); // Cropped previews
    const [mainImageIndex, setMainImageIndex] = useState(0);
    const [activeCropIndex, setActiveCropIndex] = useState(null);
    const [tempPreviewUrl, setTempPreviewUrl] = useState(null); // For the image being cropped
    const cropperRef = useRef(null);
    const [loading, setLoading] = useState(false);
    const [success, setSuccess] = useState(false);
    const [error, setError] = useState(null);

    const [categories, setCategories] = useState([]);
    useEffect(() => {
        axios.get('/api-categories')
            .then(response => setCategories(response.data))
            .catch(error => console.error("Error fetching categories", error));
    }, []);
    /*const categories = [
        { id: 'Valeurs', label: 'Portefeuille', icon: 'wallet', desc: 'Cartes, espèces' },
        { id: 'Clés', label: 'Clés', icon: 'key', desc: 'Maison, voiture' },
        { id: 'Electronique', label: 'Électronique', icon: 'smartphone', desc: 'Téléphone, PC' },
        { id: 'Documents', label: 'Documents', icon: 'description', desc: ', Passeport' },
        { id: 'CNI', label: 'CNI', icon: 'badge', desc: 'Carte nationale d\'identité' },
        { id: 'Passeport', label: 'Passeport', icon: 'book', desc: 'Document de voyage' },
        { id: 'Permis de conduire', label: 'Permis', icon: 'drive_eta', desc: 'Permis de conduire' },
        { id: 'Autre', label: 'Autre', icon: 'category', desc: 'Objet divers' },
    ];*/


    const validateField = (name, value) => {
        if (['title', 'location', 'description', 'deposeurDescription'].includes(name)) {
            if (value && value.trim().length > 0 && value.trim().length < 3) {
                return 'Ce champ doit contenir au moins 3 caractères.';
            }
        }
        if (['description', 'deposeurDescription', 'title', 'location', 'adresse', 'deposeurNom'].includes(name)) {
            if (value && value.trim().length > maxLengths[name]) {
                return `Ce champ ne doit pas dépasser ${maxLengths[name]} caractères.`;
            }
        }
        if (name === 'deposeurTelephone') {
            if (value && value.trim().length > 0 && !/^\+221\s7\d\s\d{3}\s\d{2}\s\d{2}$/.test(value)) {
                return 'Veuillez saisir le numéro de téléphone complet.';
            }
        }
        if (name === 'deposeurNom') {
            if (value && value.trim().length > 0 && value.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 }));

        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 handleCategorySelect = (categoryId) => {
        setFormData(prev => ({ ...prev, category: categoryId }));
    };

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

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


    const handleImageChange = (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 = () => {
                setTempPreviewUrl(reader.result);
                setActiveCropIndex(imageFiles.length); // Next available index
            };
        }
    };

    const handleCrop = async () => {
        if (cropperRef.current && cropperRef.current.cropper) {
            const cropConfig = getCropConfig(formData.category);
            const canvas = cropperRef.current.cropper.getCroppedCanvas({
                width: cropConfig.outputWidth,
                height: cropConfig.outputHeight
            });
            if (canvas) {
                const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg', 0.9));
                const dataUrl = canvas.toDataURL('image/jpeg');
                
                if (activeCropIndex < imageFiles.length) {
                    // Updating an existing image
                    setCroppedBlobs(prev => {
                        const next = [...prev];
                        next[activeCropIndex] = blob;
                        return next;
                    });
                    setPreviewUrls(prev => {
                        const next = [...prev];
                        next[activeCropIndex] = dataUrl;
                        return next;
                    });
                } else {
                    // Adding a new image
                    setCroppedBlobs(prev => [...prev, blob]);
                    setPreviewUrls(prev => [...prev, dataUrl]);
                    setOriginalUrls(prev => [...prev, tempPreviewUrl]);
                    setImageFiles(prev => [...prev, { name: `image-${Date.now()}.jpg` }]);
                }
                
                setActiveCropIndex(null);
                setTempPreviewUrl(null);
            }
        }
    };

    const cancelCrop = () => {
        setActiveCropIndex(null);
        setTempPreviewUrl(null);
    };

    const removeImage = (index) => {
        setImageFiles(prev => prev.filter((_, i) => i !== index));
        setOriginalUrls(prev => prev.filter((_, i) => i !== index));
        setCroppedBlobs(prev => prev.filter((_, i) => i !== index));
        setPreviewUrls(prev => prev.filter((_, i) => i !== index));
        if (mainImageIndex === index) setMainImageIndex(0);
        else if (mainImageIndex > index) setMainImageIndex(mainImageIndex - 1);
    };

    const editImage = (index) => {
        setTempPreviewUrl(originalUrls[index]);
        setActiveCropIndex(index);
    };

    const resetForm = () => {
        setFormData({
            title: '',
            category: '',
            location: '',
            adresse: props.userAdresse || '',
            latitude: '',
            longitude: '',
            dateFound: new Date().toISOString().slice(0, 16),
            description: '',
            documentType: '',
            deposeurTelephone: '',
            deposeurNom: '',
            deposeurDescription: '',
        });
        setStep(1);
        setDynamicFields({});
        setImageFiles([]);
        setOriginalUrls([]);
        setCroppedBlobs([]);
        setPreviewUrls([]);
        setSuccess(false);
        setError(null);
        setMainImageIndex(0);
        setActiveCropIndex(null);
        setTempPreviewUrl(null);
        setTimeout(scrollToForm, 100);
    };

    const scrollToForm = () => {
        const formElement = document.getElementById('report-found-object-form');
        if (formElement) {
            const y = formElement.getBoundingClientRect().top + window.scrollY - 100;
            window.scrollTo({ top: y, behavior: 'smooth' });
        } else {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
    };

    const handleNext = () => {
        setStep(prev => Math.min(prev + 1, 3));
        setTimeout(scrollToForm, 100);
    };

    const handlePrev = () => {
        setStep(prev => Math.max(prev - 1, 1));
        setTimeout(scrollToForm, 100);
    };

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

        const data = new FormData();
        const requestData = { ...formData };

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

        for (let i = 0; i < croppedBlobs.length; i++) {
            data.append('imageFiles[]', croppedBlobs[i], `image-${i}.jpg`);
        }

        try {
            const response = await axios.post(props.submitUrl, data);

            const result = response.data;
            if (result.success) {
                setSuccess(true);
            } else {
                setError(result.error || 'Une erreur est survenue');
            }
        } catch (err) {
            setError('Erreur de connexion au serveur');
        } finally {
            setLoading(false);
        }
    };

    if (success) {
        return (
            <div className="card border-0 shadow-lg text-center p-5 mx-auto" style={{borderRadius: '20px' }}>
                <div className="card-body py-5">
                    <div className="d-flex align-items-center justify-content-center mx-auto mb-4 bg-light rounded-circle" style={{ width: '80px', height: '80px', color: 'var(--vert-senegal)' }}>
                        <i className="fas fa-check-circle" style={{ fontSize: '3rem' }}></i>
                    </div>
                    <h2 className="font-weight-bold mb-3" style={{ color: 'var(--gris-fonce)' }}>Signalement Publié !</h2>
                    <p className="text-muted lead mb-4">Merci de votre aide. Votre signalement est maintenant visible par la communauté.</p>
                    
                    <div className="d-flex flex-column flex-md-row justify-content-center" style={{ gap: '15px' }}>
                        <a href={props.redirectUrl} className="btn btn-lg px-4 py-3 font-weight-bold shadow-sm" style={{ borderRadius: '12px', backgroundColor: '#f8f9fa', color: 'var(--gris-fonce)', border: '1px solid #dee2e6', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                            <i className="fas fa-list mr-2"></i> Voir mes objets
                        </a>
                        <button onClick={resetForm} className="btn btn-lg px-4 py-3 font-weight-bold text-white shadow-sm" style={{ borderRadius: '12px', backgroundColor: 'var(--vert-senegal)', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                            <i className="fas fa-plus mr-2"></i> Signaler un autre
                        </button>
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className="container-fluid py-2">
            <div className="row justify-content-center">
                <div className="col-lg-12">
                    <div id="report-found-object-form" className="card border-0 shadow-sm fade-in visible" style={{ borderRadius: '20px', overflow: 'hidden' }}>
                        <div className="card-header bg-white border-bottom-0 pt-4 pb-3 px-4 px-md-5">
                            <div className="d-flex justify-content-between align-items-center mb-2">
                                <h6 className="font-weight-bold mb-0 text-muted text-uppercase" style={{ letterSpacing: '1px' }}>Progression</h6>
                                <span className="font-weight-bold" style={{ color: 'var(--vert-senegal)' }}>Étape {step} sur 3</span>
                            </div>
                            <div className="progress" style={{ height: '8px', borderRadius: '10px' }}>
                                <div className="progress-bar" role="progressbar" style={{ width: `${(step / 3) * 100}%`, backgroundColor: 'var(--vert-senegal)' }} aria-valuenow={(step / 3) * 100} aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>

                        {error && (
                            <div className="alert alert-danger mx-4 mx-md-5 mt-3 d-flex align-items-center" role="alert" style={{ borderRadius: '10px' }}>
                                <i className="fas fa-exclamation-circle mr-2"></i> {error}
                            </div>
                        )}

                        <div className="card-body p-4 p-md-5">
                            {/* Step 1 */}
                            {step === 1 && (
                                <div className="step-content">
                                    <div className="mb-4">
                                        <h3 className="font-weight-bold h4 mb-2" style={{ color: 'var(--gris-fonce)' }}>Étape 1: Que contient l'objet ? <span className="text-danger">*</span></h3>
                                        <p className="text-muted small">Sélectionnez la catégorie qui correspond le mieux.</p>
                                    </div>

                                    <div className="row mb-4">
                                        {props.categories.map(cat => (
                                            <div key={cat.id} className="col-6 col-sm-4 col-md-3 mb-3 px-2">
                                                <div
                                                    onClick={() => handleCategorySelect(cat.id)}
                                                    className={`card h-100 text-center cursor-pointer transition-all ${formData.category === cat.id ? 'border-primary' : 'border-light'}`}
                                                    style={{
                                                        borderRadius: '15px',
                                                        border: `2px solid ${formData.category === cat.id ? 'var(--vert-senegal)' : '#f8f9fa'}`,
                                                        backgroundColor: formData.category === cat.id ? 'rgba(13, 127, 242, 0.05)' : 'white',
                                                        cursor: 'pointer',
                                                        padding: '10px'
                                                    }}
                                                >
                                                    <div className="card-body p-2 p-md-3">
                                                        <span className="material-symbols-outlined mb-2" style={{ fontSize: '1.8rem', color: formData.category === cat.id ? 'var(--vert-senegal)' : '#adb5bd' }}>{cat.icon}</span>
                                                        <h6 className="font-weight-bold mb-1" style={{ fontSize: '0.85rem' }}>{cat.nom}</h6>
                                                        <p className="text-muted small mb-0 d-none d-sm-block" style={{ fontSize: '0.65rem' }}>{cat.description}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        ))}
                                    </div>

                                    {formData.category === 'Autre' && (
                                        <div className="alert alert-info border-0 mb-4" style={{ borderRadius: '10px', backgroundColor: 'rgba(13, 127, 242, 0.1)', color: 'var(--vert-senegal)' }}>
                                            <i className="fas fa-info-circle mr-2"></i> <strong>Astuce :</strong> Indiquez le type d'objet directement dans le titre ci-dessous.
                                        </div>
                                    )}


                                    <div className="form-group mb-5">
                                        <label className="font-weight-bold">Titre ou Nom de l'objet <span className="text-danger">*</span></label>
                                        <input
                                            type="text"
                                            name="title"
                                            value={formData.title}
                                            onChange={handleChange}
                                            onBlur={handleBlur}
                                            placeholder="Ex: iPhone 13 Pro noir..."
                                            maxLength="100"
                                            className={`form-control ${errors.title ? 'is-invalid' : ''}`}
                                        />
                                        <div className="d-flex justify-content-between mt-2">
                                            <div>
                                                {errors.title ? (
                                                    <div className="invalid-feedback d-block font-weight-bold m-0">{errors.title}</div>
                                                ) : (
                                                    <small className="form-text text-muted m-0"><i className="fas fa-info-circle mr-1"></i>Soyez précis pour faciliter la recherche (ex: marque, modèle).</small>
                                                )}
                                            </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-5">
                                        <label className="font-weight-bold">Votre Adresse (Pré-remplie) <span className="text-danger">*</span></label>
                                        <input
                                            type="text"
                                            name="adresse"
                                            value={formData.adresse}
                                            onChange={handleChange}
                                            onBlur={handleBlur}
                                            placeholder="Votre adresse actuelle"
                                            maxLength={maxLengths.adresse}
                                            className={`form-control ${errors.adresse ? 'is-invalid' : ''}`}
                                        />
                                        <div className="d-flex justify-content-between mt-2">
                                            <div>
                                                {errors.adresse ? (
                                                    <div className="invalid-feedback d-block font-weight-bold m-0">{errors.adresse}</div>
                                                ) : (
                                                    <small className="form-text text-muted m-0"><i className="fas fa-info-circle mr-1"></i>Cette adresse pourra être associée à votre profil.</small>
                                                )}
                                            </div>
                                            <small className={formData.adresse.length >= maxLengths.adresse ? 'text-danger font-weight-bold' : 'text-muted'}>
                                                {formData.adresse.length}/{maxLengths.adresse}
                                            </small>
                                        </div>
                                    </div>

                                    {selectedCategory?.fields?.length > 0 && (
                                        <div className="card bg-light border-0 mb-5 fade-in visible shadow-sm" style={{ borderRadius: '15px', transition: 'all 0.4s ease' }}>
                                            <div className="card-body p-4">
                                                <h5 className="font-weight-bold mb-4" style={{ color: 'var(--gris-fonce)' }}>
                                                    <i className="fas fa-list-alt mr-2" style={{ color: 'var(--vert-senegal)' }}></i>
                                                    Informations spécifiques ({selectedCategory.nom})
                                                </h5>
                                                <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-2">
                                                                    {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>
                                    )}

                                    {props.isAgent && (
                                        <div className="card bg-light border-0 mb-5 fade-in visible" style={{ borderRadius: '15px' }}>
                                            <div className="card-body p-4">
                                                <h5 className="font-weight-bold mb-4" 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>
                                                </h5>
                                                <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 }));
                                                                }}
                                                                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' : ''}`} 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' : ''}`} 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 className="d-flex flex-column flex-sm-row justify-content-end pt-3 border-top" style={{ gap: '10px' }}>
                                        <button
                                            type="button"
                                            onClick={handleNext}
                                            disabled={
                                                !formData.category || 
                                                !formData.title || 
                                                !formData.adresse ||
                                                formData.title.trim().length < 3 || 
                                                !!errors.title ||
                                                !!errors.adresse ||
                                                !!errors.deposeurTelephone ||
                                                !!errors.deposeurNom ||
                                                !!errors.deposeurDescription ||
                                                (selectedCategory?.fields?.some(f => f.estObligatoire && (!dynamicFields[f.id] || String(dynamicFields[f.id]).trim() === '')))
                                            }
                                            className="btn px-4 px-md-5 py-3 font-weight-bold text-white transition-all w-100 w-sm-auto"
                                            style={{ borderRadius: '10px', background: 'var(--vert-senegal)' }}
                                        >
                                            Continuer <i className="fas fa-arrow-right ml-2"></i>
                                        </button>
                                    </div>
                                </div>
                            )}

                            {/* Step 2 */}
                            {step === 2 && (
                                <div className="step-content">
                                    <div className="mb-4">
                                        <h3 className="font-weight-bold h4 mb-2" style={{ color: 'var(--gris-fonce)' }}>Étape 2: Où et quand l'avez-vous trouvé ?</h3>
                                        <p className="text-muted small">Précisez le lieu exact pour faciliter l'identification par le propriétaire.</p>
                                    </div>

                                    <div className="row mb-3">
                                        
                                        <div className="col-md-6 mb-4">
                                            <div className="form-group">
                                                <label className="font-weight-bold">Localisation (Ou l'objet a été trouvé) <span className="text-danger">*</span></label>
                                                <input
                                                    type="text"
                                                    name="location"
                                                    value={formData.location}
                                                    onChange={handleChange}
                                                    onBlur={handleBlur}
                                                    placeholder="Ex: Plateau, Dakar"
                                                    maxLength="255"
                                                    className={`form-control form-control-lg ${errors.location ? 'is-invalid' : ''}`}
                                                    style={{ borderRadius: '10px', padding: '15px 20px', fontSize: '1rem', backgroundColor: '#f8f9fa', border: 'none' }}
                                                />
                                                <div className="d-flex justify-content-between mt-2">
                                                    <div>
                                                        {errors.location ? (
                                                            <div className="invalid-feedback d-block font-weight-bold m-0">{errors.location}</div>
                                                        ) : (
                                                            <small className="form-text text-muted m-0">Nom du quartier, rue ou point de repère.</small>
                                                        )}
                                                    </div>
                                                    <small className={formData.location.length >= maxLengths.location ? 'text-danger font-weight-bold' : 'text-muted'}>
                                                        {formData.location.length}/{maxLengths.location}
                                                    </small>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="col-md-6 mb-4">
                                            <div className="form-group">
                                                <label className="font-weight-bold">Date et Heure <span className="text-danger">*</span></label>
                                                <input
                                                    type="datetime-local"
                                                    name="dateFound"
                                                    value={formData.dateFound}
                                                    onChange={handleChange}
                                                    className="form-control form-control-lg"
                                                    style={{ borderRadius: '10px', padding: '15px 20px', fontSize: '1rem', backgroundColor: '#f8f9fa', border: 'none' }}
                                                />
                                            </div>
                                        </div>
                                    </div>

                                    <div className="row mb-5">
                                        <div className="col-md-6 mb-3">
                                            <div className="form-group">
                                                <label className="font-weight-bold">Latitude <span className="text-muted font-weight-normal small">(Optionnel)</span></label>
                                                <input
                                                    type="number"
                                                    step="any"
                                                    name="latitude"
                                                    value={formData.latitude}
                                                    onChange={handleChange}
                                                    placeholder="Ex: 14.6928"
                                                    className="form-control form-control-lg text-monospace"
                                                    style={{ borderRadius: '10px', padding: '15px 20px', fontSize: '1rem', backgroundColor: '#f8f9fa', border: 'none' }}
                                                />
                                            </div>
                                        </div>
                                        <div className="col-md-6 mb-3">
                                            <div className="form-group">
                                                <label className="font-weight-bold">Longitude <span className="text-muted font-weight-normal small">(Optionnel)</span></label>
                                                <input
                                                    type="number"
                                                    step="any"
                                                    name="longitude"
                                                    value={formData.longitude}
                                                    onChange={handleChange}
                                                    placeholder="Ex: -17.4467"
                                                    className="form-control form-control-lg text-monospace"
                                                    style={{ borderRadius: '10px', padding: '15px 20px', fontSize: '1rem', backgroundColor: '#f8f9fa', border: 'none' }}
                                                />
                                            </div>
                                        </div>
                                    </div>

                                    <div className="d-flex flex-column-reverse flex-sm-row justify-content-between pt-3 border-top" style={{ gap: '10px' }}>
                                        <button type="button" onClick={handlePrev} className="btn btn-outline-secondary px-4 py-3 font-weight-bold w-100 w-sm-auto" style={{ borderRadius: '10px' }}>
                                            <i className="fas fa-arrow-left mr-2"></i> Retour
                                        </button>
                                        <button
                                            type="button"
                                            onClick={handleNext}
                                            disabled={!formData.location || formData.location.trim().length < 3 || !!errors.location || !formData.dateFound}
                                            className="btn px-4 px-md-5 py-3 font-weight-bold text-white transition-all w-100 w-sm-auto"
                                            style={{ borderRadius: '10px', background: 'var(--vert-senegal)' }}
                                        >
                                            Continuer <i className="fas fa-arrow-right ml-2"></i>
                                        </button>
                                    </div>
                                </div>
                            )}

                            {/* Step 3 */}
                            {step === 3 && (
                                <div className="step-content">
                                    <div className="mb-4">
                                        <h3 className="font-weight-bold h4 mb-2" style={{ color: 'var(--gris-fonce)' }}>Étape 3: Description & Photo</h3>
                                        <p className="text-muted small">Ajoutez une photo claire pour certifier l'objet trouvé.</p>
                                    </div>

                                    <div className="form-group mb-4">
                                        <label className="font-weight-bold">Description <span className="text-muted font-weight-normal small">(Optionnel)</span></label>
                                        <textarea
                                            name="description"
                                            value={formData.description}
                                            onChange={handleChange}
                                            onBlur={handleBlur}
                                            rows="4"
                                            maxLength="500"
                                            className={`form-control form-control-lg ${errors.description ? 'is-invalid' : ''}`}
                                            placeholder="Détails supplémentaires..."
                                            style={{ borderRadius: '10px', padding: '15px 20px', fontSize: '1rem', backgroundColor: '#f8f9fa', border: 'none', resize: 'none' }}
                                        ></textarea>
                                        <div className="d-flex justify-content-between mt-2">
                                            <div>
                                                {errors.description ? (
                                                    <div className="invalid-feedback d-block font-weight-bold m-0">{errors.description}</div>
                                                ) : (
                                                    <small className="form-text text-muted m-0">Ajoutez tout détail utile (couleur, signes particuliers) sans trop en dire.</small>
                                                )}
                                            </div>
                                            <small className={formData.description.length >= maxLengths.description ? 'text-danger font-weight-bold' : 'text-muted'}>
                                                {formData.description.length}/{maxLengths.description}
                                            </small>
                                        </div>
                                                      <div className="form-group mb-5">
                                        <div className="d-flex justify-content-between align-items-center mb-3">
                                            <label className="font-weight-bold mb-0">Photos <span className="text-danger">*</span> <span className="text-muted font-weight-normal small">(Max 3)</span></label>
                                        </div>

                                        {activeCropIndex !== null ? (
                                            <div className="mb-4">
                                                {/* Hint catégorie */}
                                                {(() => {
                                                    const cfg = getCropConfig(formData.category);
                                                    return (
                                                        <div className="d-flex align-items-center mb-2 px-1" style={{ gap: 8 }}>
                                                            <span className="badge badge-pill" style={{ background: 'var(--vert-senegal)', color: '#fff', fontSize: '0.75rem', padding: '5px 12px' }}>
                                                                <i className="fas fa-crop-alt mr-1"></i>
                                                                {cfg.hint}
                                                            </span>
                                                            <small className="text-muted">
                                                                Sortie : {cfg.outputWidth} × {cfg.outputHeight} px
                                                            </small>
                                                        </div>
                                                    );
                                                })()}
                                                <div className="bg-dark rounded overflow-hidden shadow-sm mb-3">
                                                    <Cropper
                                                        src={tempPreviewUrl}
                                                        style={{ height: 350, width: "100%" }}
                                                        aspectRatio={getCropConfig(formData.category).aspectRatio}
                                                        guides={true}
                                                        ref={cropperRef}
                                                        viewMode={1}
                                                        dragMode="move"
                                                        minCropBoxHeight={100}
                                                        minCropBoxWidth={100}
                                                        background={false}
                                                        responsive={true}
                                                        autoCropArea={0.8}
                                                        checkOrientation={false}
                                                    />
                                                </div>
                                                <div className="d-flex justify-content-center">
                                                    <button type="button" onClick={cancelCrop} className="btn btn-outline-secondary mr-2">Annuler</button>
                                                    <button type="button" onClick={handleCrop} className="btn btn-primary">Recadrer et Valider</button>
                                                </div>
                                            </div>
                                        ) : (
                                            <div className="row mx-n2">
                                                {previewUrls.map((url, index) => (
                                                    <div key={index} className="col-6 col-md-4 mb-3 px-2">
                                                        <div className="position-relative rounded overflow-hidden shadow-sm" style={{ height: '140px', border: mainImageIndex === index ? '3px solid var(--vert-senegal)' : '1px solid #dee2e6' }}>
                                                            <img src={url} alt={`Preview ${index}`} className="w-100 h-100" style={{ objectFit: 'cover' }} />
                                                            <div className="position-absolute d-flex flex-column" style={{ top: '5px', right: '5px', zIndex: 10 }}>
                                                                <button onClick={() => removeImage(index)} title="Supprimer" type="button" className="btn btn-sm btn-danger rounded-circle p-1 mb-1" style={{ width: '28px', height: '28px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                                                    <i className="fas fa-times" style={{ fontSize: '14px' }}></i>
                                                                </button>
                                                                <button onClick={() => editImage(index)} title="Recadrer" type="button" className="btn btn-sm rounded-circle p-1" style={{ width: '28px', height: '28px', backgroundColor: 'var(--vert-senegal)', color: 'white', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                                                    <i className="fas fa-crop-alt" style={{ fontSize: '14px' }}></i>
                                                                </button>
                                                            </div>
                                                            {mainImageIndex === index ? (
                                                                <div className="position-absolute bg-success text-white px-2 py-1" style={{ bottom: 0, left: 0, right: 0, fontSize: '9px', textAlign: 'center', backgroundColor: 'var(--vert-senegal)', fontWeight: 'bold' }}>
                                                                    PRINCIPALE
                                                                </div>
                                                            ) : (
                                                                <button 
                                                                    onClick={() => setMainImageIndex(index)} 
                                                                    type="button" 
                                                                    className="position-absolute btn btn-sm btn-dark w-100" 
                                                                    style={{ bottom: 0, left: 0, right: 0, fontSize: '9px', opacity: 0.8, borderRadius: 0, padding: '4px 0' }}
                                                                >
                                                                    PRINCIPALE ?
                                                                </button>
                                                            )}
                                                        </div>
                                                    </div>
                                                ))}

                                                {imageFiles.length < 3 && (
                                                    <div className="col-6 col-md-4 mb-3 px-2">
                                                        <div className="position-relative d-flex flex-column align-items-center justify-content-center bg-light rounded" style={{ height: '140px', border: '2px dashed #ced4da', cursor: 'pointer' }}>
                                                            <input
                                                                type="file"
                                                                accept="image/*"
                                                                onChange={handleImageChange}
                                                                className="position-absolute w-100 h-100"
                                                                style={{ opacity: 0, cursor: 'pointer', zIndex: 15 }}
                                                            />
                                                            <i className="fas fa-camera text-muted mb-2" style={{ fontSize: '1.5rem' }}></i>
                                                            <p className="small font-weight-bold text-muted mb-0 text-center px-1" style={{ fontSize: '0.75rem' }}>Ajouter</p>
                                                        </div>
                                                    </div>
                                                )}
                                            </div>
                                        )}
                                        
                                        <small className="form-text text-muted text-center mt-3">
                                            <i className="fas fa-info-circle mr-1"></i> 
                                            Sélectionnez jusqu'à 3 photos. Chaque photo doit être recadrée avant validation.
                                        </small>
                                    </div>
                           </div>

                                    <div className="d-flex flex-column-reverse flex-sm-row justify-content-between align-items-center pt-3 border-top" style={{ gap: '10px' }}>
                                        <button type="button" onClick={handlePrev} className="btn btn-outline-secondary px-4 py-3 font-weight-bold w-100 w-sm-auto" style={{ borderRadius: '10px' }}>
                                            <i className="fas fa-arrow-left mr-2"></i> Retour
                                        </button>
                                        <button
                                            type="button"
                                            onClick={handleSubmit}
                                            disabled={
                                                loading ||
                                                imageFiles.length === 0 ||
                                                !!errors.description ||
                                                (formData.description && formData.description.trim().length < 3)
                                            }
                                            className="btn px-4 px-md-5 py-3 font-weight-bold text-white shadow-sm d-flex align-items-center justify-content-center w-100 w-sm-auto"
                                            style={{ borderRadius: '10px', background: 'var(--vert-senegal)' }}
                                        >
                                            {loading ? (
                                                <span className="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>
                                            ) : (
                                                <i className={`fas ${props.initialData ? 'fa-save' : 'fa-paper-plane'} mr-2`}></i>
                                            )}
                                            {props.initialData ? 'Enregistrer' : 'Publier'}
                                        </button>
                                    </div>
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}