/* ===========================================================================
   iRaven App Store Studio — shared UI atoms (used by photo + video editors)
   =========================================================================== */
const { useState, useEffect, useRef, useCallback, forwardRef, useImperativeHandle } = React;

function btnStyle(extra) {
  return Object.assign({ padding: '10px 16px', borderRadius: 11, cursor: 'pointer', fontFamily: BODY,
    fontWeight: 600, fontSize: 13.5, border: '1px solid rgba(255,255,255,0.12)', color: '#fff',
    background: 'rgba(255,255,255,0.05)', transition: 'all .15s' }, extra);
}

function Section({ title, children, hint }) {
  return (
    <div style={{ marginBottom: 22 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
        <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.14em',
          textTransform: 'uppercase', color: 'rgba(255,255,255,0.45)' }}>{title}</span>
        {hint ? <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.3)' }}>{hint}</span> : null}
      </div>
      {children}
    </div>
  );
}

function Seg({ options, value, onChange, cols }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols || options.length},1fr)`, gap: 6 }}>
      {options.map(o => {
        const active = o.id === value;
        return (
          <button key={String(o.id)} onClick={() => onChange(o.id)} style={{
            padding: '9px 6px', borderRadius: 10, cursor: 'pointer', fontFamily: BODY, fontSize: 12.5, fontWeight: 600,
            border: active ? '1px solid #2f6df6' : '1px solid rgba(255,255,255,0.10)',
            background: active ? 'rgba(47,109,246,0.18)' : 'rgba(255,255,255,0.03)',
            color: active ? '#9dbcff' : 'rgba(255,255,255,0.7)', transition: 'all .15s' }}>
            {o.label}
          </button>
        );
      })}
    </div>
  );
}

function Field({ label, value, onChange, rows, placeholder }) {
  const common = {
    width: '100%', boxSizing: 'border-box', resize: 'vertical', padding: '10px 12px', borderRadius: 10,
    background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.10)', color: '#fff',
    fontFamily: BODY, fontSize: 14, lineHeight: 1.4, outline: 'none',
  };
  return (
    <label style={{ display: 'block', marginBottom: 12 }}>
      <span style={{ display: 'block', fontSize: 12, color: 'rgba(255,255,255,0.5)', marginBottom: 6 }}>{label}</span>
      {rows ? (
        <textarea rows={rows} value={value} placeholder={placeholder} onChange={e => onChange(e.target.value)} style={common} />
      ) : (
        <input value={value} placeholder={placeholder} onChange={e => onChange(e.target.value)} style={common} />
      )}
    </label>
  );
}

function DropZone({ onFile, hasImage, title, compact, accept, sub }) {
  const [over, setOver] = useState(false);
  const inputRef = useRef(null);
  return (
    <div
      onDragOver={e => { e.preventDefault(); setOver(true); }}
      onDragLeave={() => setOver(false)}
      onDrop={e => { e.preventDefault(); setOver(false); onFile(e.dataTransfer.files[0]); }}
      onClick={() => inputRef.current.click()}
      style={{ borderRadius: 12, cursor: 'pointer', textAlign: 'center', padding: compact ? '12px 10px' : '20px 14px',
        border: `1px dashed ${over ? '#2f6df6' : 'rgba(255,255,255,0.2)'}`,
        background: over ? 'rgba(47,109,246,0.10)' : 'rgba(255,255,255,0.03)', transition: 'all .15s' }}>
      <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)', fontWeight: 600 }}>
        {title || (hasImage ? 'Replace screenshot' : 'Drop screenshot')}
      </div>
      <div style={{ fontSize: 11.5, color: 'rgba(255,255,255,0.4)', marginTop: 4 }}>{sub || 'PNG · drag here or click'}</div>
      <input ref={inputRef} type="file" accept={accept || 'image/*'} style={{ display: 'none' }}
        onChange={e => { onFile(e.target.files[0]); e.target.value = ''; }} />
    </div>
  );
}

Object.assign(window, { btnStyle, Section, Seg, Field, DropZone });