{labelAr} {labelEn}

{multiline ?

onChangeAr(e.target.value)}/>
        : <input type="text" value={valueAr||''} onChange={e=>onChangeAr(e.target.value)}/>}
    </div>
    <div className="bi-row en">
      <div className="bi-lang">EN</div>
      {multiline
        ? <textarea rows={rows} value={valueEn||''} onChange={e=>onChangeEn(e.target.value)}/>
        : <input type="text" value={valueEn||''} onChange={e=>onChangeEn(e.target.value)}/>}
    </div>
  </div>
);

// =========================================
// Media upload system (high-quality images + videos)
// =========================================

// Format file size as human-readable
const fmtSize = (b) => {
  if (!b && b !== 0) return '';
  if (b < 1024) return b + ' B';
  if (b < 1024*1024) return (b/1024).toFixed(1) + ' KB';
  if (b < 1024*1024*1024) return (b/1024/1024).toFixed(1) + ' MB';
  return (b/1024/1024/1024).toFixed(2) + ' GB';
};
const fmtDuration = (s) => {
  if (!s && s !== 0) return '';
  const m = Math.floor(s/60), sec = Math.floor(s%60);
  return `${m}:${String(sec).padStart(2,'0')}`;
};
// Resolution quality badge
const qualityBadge = (w, h, isVideo) => {
  const max = Math.max(w||0, h||0);
  if (isVideo) {
    if (max >= 3840) return { label:'4K · UHD', tone:'accent' };
    if (max >= 2560) return { label:'2.5K · QHD', tone:'green' };
    if (max >= 1920) return { label:'Full HD', tone:'green' };
    if (max >= 1280) return { label:'HD', tone:'blue' };
    return { label:'SD', tone:'amber' };
  }
  const mp = (w*h)/1_000_000;
  if (mp >= 30) return { label:'فائق الدقة · ' + Math.round(mp) + 'MP', tone:'accent' };
  if (mp >= 12) return { label:Math.round(mp) + 'MP · عالي', tone:'green' };
  if (mp >= 4)  return { label:Math.round(mp) + 'MP', tone:'blue' };
  return { label:'منخفض · ' + mp.toFixed(1) + 'MP', tone:'amber' };
};

// Probe a File to get dimensions/duration before storing
const probeMedia = (file) => new Promise((resolve) => {
  const isVideo = file.type.startsWith('video/');
  const url = URL.createObjectURL(file);
  if (isVideo) {
    const v = document.createElement('video');
    v.preload = 'metadata';
    v.muted = true;
    v.src = url;
    v.onloadedmetadata = () => {
      resolve({ src:url, name:file.name, size:file.size, type:file.type, width:v.videoWidth, height:v.videoHeight, duration:v.duration, isVideo:true });
    };
    v.onerror = () => resolve({ src:url, name:file.name, size:file.size, type:file.type, isVideo:true });
  } else {
    const img = new Image();
    img.onload = () => {
      resolve({ src:url, name:file.name, size:file.size, type:file.type, width:img.naturalWidth, height:img.naturalHeight, isVideo:false });
    };
    img.onerror = () => resolve({ src:url, name:file.name, size:file.size, type:file.type, isVideo:false });
    img.src = url;
  }
});

// === MediaSlot: a full upload + preview slot ===
const MediaSlot = ({ value, onChange, kind='photo', aspect, label, hint }) => {
  const fileInputRef = useRef(null);
  const [over, setOver] = useState(false);
  const [busy, setBusy] = useState(false);
  const accept = kind === 'video'
    ? 'video/mp4,video/quicktime,video/webm,video/x-matroska'
    : kind === 'any'
      ? 'image/*,video/*'
      : 'image/jpeg,image/png,image/webp,image/avif';

const handleFiles = async (files) => {
    const file = files && files[0];
    if (!file) return;
    setBusy(true);
    const meta = await probeMedia(file);
    onChange(meta);
    setBusy(false);
  };
  const onDrop = (e) => {
    e.preventDefault(); setOver(false);
    handleFiles(e.dataTransfer.files);
  };
  const onPick = (e) => handleFiles(e.target.files);

const ar = aspect || (kind==='video' ? '16 / 9' : '4 / 3');
  const hasMedia = !!(value && value.src);
  const isVid = hasMedia && value.isVideo;
  const qb = hasMedia && value.width ? qualityBadge(value.width, value.height, isVid) : null;

return (
    <div className="mslot">
      <div
        className={cls('mslot-frame', over && 'over', hasMedia && 'has')}
        style={{ aspectRatio: ar }}
        onDragOver={e=>{e.preventDefault(); setOver(true);}}
        onDragLeave={()=>setOver(false)}
        onDrop={onDrop}
        onClick={()=>!hasMedia && fileInputRef.current?.click()}
      >
        {hasMedia ? (
          isVid ? (
            <video src={value.src} muted loop playsInline autoPlay className="mslot-media"/>
          ) : (
            <img src={value.src} alt="" className="mslot-media"/>
          )
        ) : (
          <div className="mslot-empty">
            <div className="ph-mark">{kind==='video' ? '▷' : '⌘'}</div>
            <div className="mslot-cta">
              <strong>{kind==='video' ? 'اسحب الفيديو هنا' : 'اسحب الصورة هنا'}</strong>
              <span>أو انقر للاختيار من الجهاز</span>
            </div>
            {hint && <div className="mslot-hint">{hint}</div>}
          </div>
        )}
        {busy && <div className="mslot-busy"><div className="spinner"/></div>}
        {hasMedia && (
          <div className="mslot-overlay">
            <button className="ibtn-light" title="استبدال" onClick={e=>{e.stopPropagation(); fileInputRef.current?.click();}}>{I.upload}</button>
            <button className="ibtn-light danger" title="إزالة" onClick={e=>{e.stopPropagation(); onChange(null);}}>{I.trash}</button>
          </div>
        )}
        {qb && <div className={`mslot-quality pill pill-${qb.tone}`}>{qb.label}</div>}
        {hasMedia && isVid && value.duration && <div className="mslot-dur">{fmtDuration(value.duration)}</div>}
      </div>

{hasMedia ? (
        <div className="mslot-meta">
          <div className="mslot-meta-row">
            <span className="mslot-name" title={value.name}>{value.name}</span>
            <span className="mslot-size mono">{fmtSize(value.size)}</span>
          </div>
          <div className="mslot-meta-row">
            {value.width && <span className="mslot-dim mono">{value.width} × {value.height}</span>}
            <span className="mslot-type mono">{(value.type||'').split('/')[1]?.toUpperCase()}</span>
          </div>
        </div>
      ) : (
        <div className="mslot-formats">
          {kind==='video'
            ? 'MP4 · MOV · WebM — حتى 500MB · يدعم 4K'
            : 'JPG · PNG · WebP · AVIF — حتى 20MB · جودة أصلية'}
        </div>
      )}

<input ref={fileInputRef} type="file" accept={accept} onChange={onPick} style={{display:'none'}}/>
    </div>
  );
};

// Backwards-compatible aliases
const ImgPreview = ({ kind='photo', label, value, onChange }) => (
  <MediaSlot kind={kind} value={value} onChange={onChange||(()=>{})} label={label}/>
);
const Dropzone = ({ value, onChange, kind='photo' }) => (
  <MediaSlot kind={kind} value={value} onChange={onChange||(()=>{})} />
);

// === Empty state ===
const EmptyState = ({ icon, title, hint, action }) => (
  <div className="empty">
    <div className="e-icon">{icon}</div>
    <h4>{title}</h4>
    <p>{hint}</p>
    {action}
  </div>
);

Object.assign(window, { cls, I, Pill, Field, Bilingual, MediaSlot, ImgPreview, Dropzone, EmptyState, fmtSize, fmtDuration, probeMedia });