import React from 'react';

const API = '';

interface UrlPreviewPopupProps {
    item: { url: string; name: string } | null;
    onClose: () => void;
}

export const UrlPreviewPopup = ({ item, onClose }: UrlPreviewPopupProps) => {
    if (!item) return null;
    const isPDF = /\.pdf$/i.test(item.name);
    const isImage = /\.(jpg|jpeg|png|gif|webp)$/i.test(item.name);

    return (
        <div onClick={onClose} style={{
            position: 'fixed', inset: 0, zIndex: 10000,
            background: 'rgba(0,0,0,0.8)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            backdropFilter: 'blur(6px)',
        }}>
            <div onClick={e => e.stopPropagation()} style={{
                background: '#fff', borderRadius: 16,
                boxShadow: '0 32px 100px rgba(0,0,0,.5)',
                width: isPDF ? 860 : 'auto',
                maxWidth: '94vw', maxHeight: '94vh',
                display: 'flex', flexDirection: 'column', overflow: 'hidden',
            }}>
                {/* Header */}
                <div style={{
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    padding: '14px 20px',
                    background: 'linear-gradient(135deg,#6366f1,#4f46e5)',
                    flexShrink: 0,
                }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
                        <span style={{ fontSize: 20, flexShrink: 0 }}>
                            {isPDF ? '📄' : isImage ? '🖼️' : '📎'}
                        </span>
                        <div style={{
                            color: '#fff', fontWeight: 700, fontSize: 13,
                            overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                        }}>{item.name}</div>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0, marginLeft: 16 }}>
                        <a href={item.url} target="_blank" rel="noreferrer" style={{
                            padding: '6px 14px', background: 'rgba(255,255,255,0.2)',
                            border: '1px solid rgba(255,255,255,0.35)', borderRadius: 8,
                            color: '#fff', fontSize: 12, fontWeight: 600, textDecoration: 'none',
                            whiteSpace: 'nowrap',
                        }}>↗ Ouvrir dans un onglet</a>
                        <button onClick={onClose} style={{
                            background: 'rgba(255,255,255,0.2)', border: 'none',
                            borderRadius: 8, width: 36, height: 36, cursor: 'pointer',
                            color: '#fff', fontSize: 20, display: 'flex',
                            alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                        }}>✕</button>
                    </div>
                </div>
                {/* Body */}
                <div style={{
                    flex: 1, overflow: 'auto',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    padding: isPDF ? 0 : 24, background: '#f1f5f9', minHeight: 300,
                }}>
                    {isPDF && (
                        <iframe
                            src={`${API}/api/proxy-pdf?url=${encodeURIComponent(item.url)}`}
                            style={{ width: '100%', height: '80vh', border: 'none' }}
                            title={item.name} />
                    )}
                    {isImage && (
                        <img src={item.url} alt={item.name} style={{
                            maxWidth: '85vw', maxHeight: '78vh',
                            objectFit: 'contain', borderRadius: 10,
                            boxShadow: '0 8px 32px rgba(0,0,0,0.2)',
                        }} />
                    )}
                    {!isPDF && !isImage && (
                        <div style={{ textAlign: 'center', padding: 48 }}>
                            <div style={{ fontSize: 56, marginBottom: 20 }}>📎</div>
                            <div style={{ fontSize: 14, color: '#64748b', marginBottom: 20, fontWeight: 600 }}>{item.name}</div>
                            <a href={item.url} target="_blank" rel="noreferrer" style={{
                                padding: '12px 24px',
                                background: 'linear-gradient(135deg,#6366f1,#4f46e5)',
                                color: '#fff', borderRadius: 10, textDecoration: 'none',
                                fontWeight: 700, fontSize: 14,
                            }}>Ouvrir le fichier</a>
                        </div>
                    )}
                </div>
                {/* Footer */}
                <div style={{
                    padding: '10px 20px', borderTop: '1px solid #e2e8f0',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                    background: '#fff', flexShrink: 0,
                }}>
                    <span style={{ fontSize: 11, color: '#94a3b8' }}>Cliquez en dehors pour fermer</span>
                    <a href={item.url} download style={{
                        display: 'flex', alignItems: 'center', gap: 6,
                        padding: '6px 14px', background: '#eef2ff',
                        border: '1px solid #c7d2fe', borderRadius: 8,
                        color: '#6366f1', fontSize: 12, fontWeight: 600, textDecoration: 'none',
                    }}>⬇ Télécharger</a>
                </div>
            </div>
        </div>
    );
};
