import React from 'react';

interface JustificatifPopupProps {
    file: File | null;
    onClose: () => void;
}

export const JustificatifPopup = ({ file, onClose }: JustificatifPopupProps) => {
    if (!file) return null;
    const url = URL.createObjectURL(file);
    const isPDF = file.type === 'application/pdf';
    const isImage = file.type.startsWith('image/');

    return (
        <div onClick={onClose} style={{
            position: 'fixed', inset: 0, zIndex: 9999,
            background: 'rgba(0,0,0,0.75)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            backdropFilter: 'blur(4px)',
        }}>
            <div onClick={e => e.stopPropagation()} style={{
                background: '#fff', borderRadius: 16,
                boxShadow: '0 24px 80px rgba(0,0,0,.4)',
                maxWidth: '90vw', maxHeight: '90vh',
                width: isPDF ? 800 : 'auto',
                display: 'flex', flexDirection: 'column', overflow: 'hidden',
            }}>
                {/* Header */}
                <div style={{
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    padding: '14px 20px', borderBottom: '1px solid #e2e8f0',
                    background: 'linear-gradient(135deg,#6366f1,#4f46e5)',
                }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                        <span style={{ fontSize: 18 }}>{isPDF ? '📄' : '🖼️'}</span>
                        <div>
                            <div style={{ color: '#fff', fontWeight: 700, fontSize: 14 }}>{file.name}</div>
                            <div style={{ color: 'rgba(255,255,255,0.7)', fontSize: 11 }}>
                                {file.type} — {file.size < 1048576
                                    ? `${(file.size / 1024).toFixed(1)} Ko`
                                    : `${(file.size / 1048576).toFixed(1)} Mo`}
                            </div>
                        </div>
                    </div>
                    <button onClick={onClose} style={{
                        background: 'rgba(255,255,255,0.2)', border: 'none',
                        borderRadius: 8, width: 34, height: 34, cursor: 'pointer',
                        color: '#fff', fontSize: 18, display: 'flex',
                        alignItems: 'center', justifyContent: 'center',
                    }}>✕</button>
                </div>
                {/* Body */}
                <div style={{
                    flex: 1, overflow: 'auto', display: 'flex',
                    alignItems: 'center', justifyContent: 'center',
                    padding: 16, background: '#f8fafc',
                }}>
                    {isPDF && (
                        <iframe src={url}
                            style={{ width: '100%', height: '75vh', border: 'none', borderRadius: 8 }}
                            title={file.name} />
                    )}
                    {isImage && (
                        <img src={url} alt={file.name} style={{
                            maxWidth: '80vw', maxHeight: '75vh',
                            objectFit: 'contain', borderRadius: 8,
                            boxShadow: '0 4px 24px rgba(0,0,0,0.15)',
                        }} />
                    )}
                </div>
                {/* Footer */}
                <div style={{
                    padding: '12px 20px', borderTop: '1px solid #e2e8f0',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                    background: '#fff',
                }}>
                    <span style={{ fontSize: 12, color: '#64748b' }}>Cliquez en dehors pour fermer</span>
                    <a href={url} download={file.name} style={{
                        display: 'flex', alignItems: 'center', gap: 6,
                        padding: '7px 14px', background: '#eef2ff',
                        border: '1px solid #c7d2fe', borderRadius: 8,
                        color: '#6366f1', fontSize: 12, fontWeight: 600, textDecoration: 'none',
                    }}>⬇ Télécharger</a>
                </div>
            </div>
        </div>
    );
};
