import React, { useState } from 'react';
import ImageBlurEditor from '../components/ImageBlurEditor';
import axios from 'axios';

const ModerationImageModule = ({ images, saveUrlTemplate, rawDir, maskedDir }) => {
    const [currentImages, setCurrentImages] = useState(images);
    const [editingImage, setEditingImage] = useState(null);
    const [isSaving, setIsSaving] = useState(false);

    const handleOpenEditor = (image) => {
        setEditingImage(image);
    };

    const handleSaveBlur = async (dataUrl) => {
        setIsSaving(true);
        const url = saveUrlTemplate.replace('__ID__', editingImage.id);
        
        try {
            const response = await axios.post(url, {
                image_data: dataUrl
            }, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });

            if (response.data.success) {
                // Update local state without reload
                setCurrentImages(prev => prev.map(img => 
                    img.id === editingImage.id 
                    ? { ...img, imagePublic: response.data.imagePublic, isMasked: true } 
                    : img
                ));
                setEditingImage(null);
                // Optional: show a small toast or success message if available
            }
        } catch (error) {
            console.error('Erreur lors de la sauvegarde:', error);
            alert('Erreur lors de la sauvegarde.');
        } finally {
            setIsSaving(false);
        }
    };

    if (!currentImages) {
        return <div className="alert alert-warning">Aucune image à afficher.</div>;
    }

    return (
        <div className="moderation-image-module">
            <div className="row mt-4">
                {currentImages.map((image, index) => {
                    if (!image) return null;
                    const isMasked = image.isMasked || !!image.imagePublic;
                    
                    return (
                        <div className="col-12 mb-4" key={image.id || index}>
                            <div className="card h-100 border shadow-none overflow-hidden">
                                <div className="card-header bg-light py-2 d-flex justify-content-between align-items-center">
                                    <h6 className="mb-0 font-weight-bold small">Image {index + 1}</h6>
                                    <div className="d-flex align-items-center">
                                        <span className={`badge ${isMasked ? 'badge-success' : 'badge-warning'} px-2 py-1 mr-3`}>
                                            <i className={`fas ${isMasked ? 'fa-check-circle' : 'fa-exclamation-triangle'} mr-1`}></i>
                                            {isMasked ? 'Sécurisée (Floutée)' : 'Brute (Non sécurisée)'}
                                        </span>
                                        <button 
                                            type="button" 
                                            className="btn btn-primary btn-sm shadow-sm"
                                            onClick={() => handleOpenEditor(image)}
                                        >
                                            <i className="fas fa-magic mr-1"></i> {isMasked ? 'Modifier le floutage' : 'Flouter'}
                                        </button>
                                    </div>
                                </div>
                                <div className="card-body p-0 bg-dark">
                                    <div className="row no-gutters">
                                        {/* Original Image Section */}
                                        <div className={isMasked ? "col-md-6 border-right border-secondary" : "col-12"}>
                                            <div className="p-2 text-center">
                                                <p className="text-white-50 x-small mb-1 text-uppercase font-weight-bold">Version Brute</p>
                                                <div className="d-flex align-items-center justify-content-center" style={{ height: '240px' }}>
                                                    <img 
                                                        src={`${rawDir}${image.imageRaw}`} 
                                                        className="img-fluid" 
                                                        style={{ maxHeight: '100%', maxWidth: '100%', objectFit: 'contain' }}
                                                        alt="Brute" 
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                        
                                        {/* Masked Image Section (Visualized only if exists) */}
                                        {isMasked && (
                                            <div className="col-md-6">
                                                <div className="p-2 text-center">
                                                    <p className="text-info x-small mb-1 text-uppercase font-weight-bold">Version Floutée</p>
                                                    <div className="d-flex align-items-center justify-content-center" style={{ height: '240px' }}>
                                                        <img 
                                                            src={`${maskedDir}${image.imagePublic}`} 
                                                            className="img-fluid" 
                                                            style={{ maxHeight: '100%', maxWidth: '100%', objectFit: 'contain' }}
                                                            alt="Floutée" 
                                                            onError={(e) => { e.target.src = 'https://via.placeholder.com/200?text=Erreur+Génération'; }}
                                                        />
                                                    </div>
                                                </div>
                                            </div>
                                        )}
                                    </div>
                                </div>
                            </div>
                        </div>
                    );
                })}
            </div>
            {/* Modal Overlay for Editor... */}

            {/* Modal Overlay for Editor */}
            {editingImage && (
                <div className="react-modal-overlay" style={{
                    position: 'fixed',
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    backgroundColor: 'rgba(0,0,0,0.85)',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    zIndex: 9999,
                    padding: '20px'
                }}>
                    <div className="modal-content" style={{ maxWidth: '900px', width: '100%', border: 'none', borderRadius: '12px' }}>
                        <div className="modal-header bg-primary text-white">
                            <h5 className="modal-title font-weight-bold">
                                <i className="fas fa-mask mr-2"></i> 
                                Floutage de l'image {currentImages.indexOf(editingImage) + 1}
                            </h5>
                            <button type="button" className="close text-white" onClick={() => setEditingImage(null)}>
                                <span>&times;</span>
                            </button>
                        </div>
                        <div className="modal-body p-0">
                            {isSaving ? (
                                <div className="text-center p-5">
                                    <div className="spinner-border text-primary mb-3"></div>
                                    <p className="font-weight-bold">Sauvegarde de l'image masquée...</p>
                                </div>
                            ) : (
                                <ImageBlurEditor 
                                    imageUrl={`${rawDir}/${editingImage.imageRaw}`}
                                    onSave={handleSaveBlur}
                                    onCancel={() => setEditingImage(null)}
                                />
                            )}
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

export default ModerationImageModule;