function ImageUploader({ value, onChange, disabled }) {
  const toast = window.Toast.useToast();
  const [dragOver, setDragOver] = React.useState(false);
  const [loading, setLoading] = React.useState(false);

  async function uploadFile(file) {
    if (!file) return;
    const form = new FormData();
    form.append('file', file);
    setLoading(true);
    try {
      const res = await fetch('/api/uploads', { method: 'POST', body: form, credentials: 'include' });
      const data = await res.json();
      if (!res.ok) throw data;
      onChange && onChange(data.url);
      toast.success('Image uploadée');
    } catch (e) {
      const msg = e?.error?.message || 'Upload échoué';
      toast.error(msg);
    } finally { setLoading(false); }
  }

  function onDrop(e) {
    e.preventDefault(); e.stopPropagation();
    setDragOver(false);
    if (disabled) return;
    const file = e.dataTransfer.files && e.dataTransfer.files[0];
    uploadFile(file);
  }
  function onInputChange(e) {
    const file = e.target.files && e.target.files[0];
    uploadFile(file);
  }

  return (
    <div>
      <div
        onDragOver={(e)=>{e.preventDefault(); if (!disabled) setDragOver(true);}}
        onDragLeave={()=>setDragOver(false)}
        onDrop={onDrop}
        style={{ padding: 12, border: '2px dashed ' + (dragOver ? '#2563eb' : '#ccc'), borderRadius: 8, background: dragOver ? '#eff6ff' : 'transparent' }}
      >
        <p style={{ margin: 0 }}>Glissez-déposez une image ici ou <label style={{ color:'#2563eb', textDecoration:'underline', cursor:'pointer' }}><input type="file" accept="image/*" style={{ display:'none' }} onChange={onInputChange} disabled={disabled || loading} />choisissez un fichier</label></p>
      </div>
      {value && (
        <div style={{ marginTop: 8 }}>
          <img src={value} alt="" style={{ maxWidth: '100%', height: 120, objectFit: 'cover', borderRadius: 6, border: '1px solid #eee' }} onError={(e)=>{ e.currentTarget.src='/images/placeholder.svg'; }} />
        </div>
      )}
      {loading && <p>Upload en cours…</p>}
    </div>
  );
}

window.Components = window.Components || {};
window.Components.ImageUploader = ImageUploader;