import React, { useRef, useState } from 'react';
import { Upload, FileText, Receipt } from 'lucide-react';

interface FileUploadZoneProps {
    files: File[];
    setFiles: (f: File[]) => void;
}

const fileSize = (b: number) =>
    b < 1048576 ? `${(b / 1024).toFixed(1)} Ko` : `${(b / 1048576).toFixed(1)} Mo`;

export const FileUploadZone = ({ files, setFiles }: FileUploadZoneProps) => {
    const inputRef = useRef<HTMLInputElement>(null);
    const cameraRef = useRef<HTMLInputElement>(null);
    const [dragOver, setDragOver] = useState(false);
    const allowed = ['image/jpeg', 'image/jpg', 'image/png', 'application/pdf'];

    const add = (list: FileList | null) => {
        if (!list) return;
        const filtered = Array.from(list).filter(f => allowed.includes(f.type));
        setFiles([...files, ...filtered]);
    };

    return (
        <div>
            <div
                onDragOver={e => { e.preventDefault(); setDragOver(true); }}
                onDragLeave={() => setDragOver(false)}
                onDrop={e => { e.preventDefault(); setDragOver(false); add(e.dataTransfer.files); }}
                onClick={() => inputRef.current?.click()}
                style={{
                    border: `2px dashed ${dragOver ? '#6366f1' : '#cbd5e1'}`,
                    borderRadius: 10, padding: '28px 20px', textAlign: 'center',
                    cursor: 'pointer',
                    background: dragOver ? 'rgba(99,102,241,.05)' : '#f8fafc',
                    transition: 'all 0.2s',
                }}>
                <div style={{ fontSize: 28, marginBottom: 8, display: 'flex', justifyContent: 'center', color: 'var(--text-muted)' }}>
                    <Upload size={32} />
                </div>
                <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 4 }}>
                    Glissez vos fichiers ici
                </div>
                <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>
                    ou <span style={{ color: '#6366f1', fontWeight: 600 }}>cliquez pour parcourir</span>
                </div>
                <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 8 }}>
                    PDF, JPG, PNG — max 10 Mo
                </div>
                <input ref={inputRef} type="file" multiple accept=".pdf,.jpg,.jpeg,.png"
                    onChange={e => add(e.target.files)} style={{ display: 'none' }} />
            </div>

            <button type="button" onClick={() => cameraRef.current?.click()} style={{
                marginTop: 10, width: '100%', display: 'flex', alignItems: 'center',
                justifyContent: 'center', gap: 8, padding: '11px 14px',
                background: '#f1f5f9', border: '1px solid #e2e8f0', borderRadius: 8,
                cursor: 'pointer', fontFamily: '"Inter","Segoe UI",sans-serif',
                fontSize: 13, color: 'var(--text-primary)', fontWeight: 600,
            }}>
                📷 Photo mobile
            </button>
            <input ref={cameraRef} type="file" accept="image/*" capture="environment"
                onChange={e => add(e.target.files)} style={{ display: 'none' }} />

            {files.length > 0 && (
                <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
                    {files.map((f, i) => (
                        <div key={i} style={{
                            display: 'flex', alignItems: 'center', gap: 10,
                            padding: '10px 14px', background: 'var(--bg-input)',
                            border: '1px solid #e2e8f0', borderRadius: 8,
                        }}>
                            <span style={{ fontSize: 16, display: 'flex', alignItems: 'center' }}>
                                {f.type === 'application/pdf'
                                    ? <FileText size={18} color="#6366f1" />
                                    : <Receipt size={18} color="#10b981" />}
                            </span>
                            <div style={{ flex: 1, overflow: 'hidden' }}>
                                <div style={{
                                    fontSize: 13, fontWeight: 600, color: 'var(--text-primary)',
                                    whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                                }}>{f.name}</div>
                                <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{fileSize(f.size)}</div>
                            </div>
                            {f.type.startsWith('image/') && (
                                <img src={URL.createObjectURL(f)} alt={f.name}
                                    style={{ width: 40, height: 40, objectFit: 'cover', borderRadius: 6, border: '1px solid #e2e8f0' }} />
                            )}
                            <button onClick={() => setFiles(files.filter((_, j) => j !== i))}
                                style={{
                                    background: 'none', border: 'none', cursor: 'pointer',
                                    color: '#ef4444', fontSize: 16, padding: '2px 6px',
                                }}>✕</button>
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
};
