// Larger composite components: SuggestionCard, MediaSlot, ProvenanceCard,
// CitationChip, FourAnswerEditor, LocalizedStringEditor.

// ── ProvenanceCard ──────────────────────────────────────────────────────────
function ProvenanceCard({ data, compact = false }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{
      border: '1px solid var(--border)', borderRadius: 'var(--radius-md)',
      background: 'var(--surface-2)', fontSize: 12,
    }}>
      <button onClick={() => setOpen(o => !o)}
        style={{
          width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '8px 12px', background: 'transparent', border: 0, cursor: 'default',
          color: 'var(--text-muted)', fontFamily: 'inherit', fontSize: 12,
        }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <I.History size={12} />
          <span style={{ fontWeight: 500 }}>Provenance</span>
          <span style={{ color: 'var(--text-faint)' }}>· {data.model} · {data.cost}</span>
        </span>
        {open ? <I.ChevronUp size={12} /> : <I.ChevronDown size={12} />}
      </button>
      {open && (
        <div style={{ padding: '8px 12px 12px', borderTop: '1px solid var(--border)',
                      display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '6px 12px',
                      fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-muted)' }}>
          <span style={{ color: 'var(--text-faint)' }}>model</span><span>{data.model}</span>
          <span style={{ color: 'var(--text-faint)' }}>prompt</span><span>{data.prompt}</span>
          <span style={{ color: 'var(--text-faint)' }}>seed</span><span>{data.seed}</span>
          <span style={{ color: 'var(--text-faint)' }}>cost</span><span>{data.cost}</span>
          <span style={{ color: 'var(--text-faint)' }}>generated</span><span>{data.timestamp}</span>
        </div>
      )}
    </div>
  );
}

// ── CitationChip ────────────────────────────────────────────────────────────
function CitationChip({ source, status = 'verified', text }) {
  const cfg = {
    verified:  { icon: <I.Check size={10} />, bg: 'var(--success-bg)', fg: 'var(--success-text)' },
    verifying: { icon: <I.Loader size={10} className="spin" />, bg: 'var(--accent-bg)', fg: 'var(--accent-text)' },
    failed:    { icon: <I.X size={10} />, bg: 'var(--error-bg)', fg: 'var(--error-text)' },
  }[status];
  return (
    <span title={text}
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 4,
        padding: '2px 6px', borderRadius: 4,
        background: cfg.bg, color: cfg.fg,
        fontSize: 11, fontFamily: 'var(--font-mono)', cursor: 'default',
      }}>
      <I.Quote size={10} />{cfg.icon}<span style={{ color: 'inherit' }}>{source}</span>
    </span>
  );
}

// ── SuggestionCard ──────────────────────────────────────────────────────────
function SuggestionCard({ suggestion, isTop = false, onAccept, onOpen, onReroll }) {
  const meta = (window.LAYOUT_TYPES || []).find(t => t.id === suggestion.type) || {};
  const Icon = I[meta.icon] || I.Hash;
  const scorePct = Math.round(suggestion.score * 100);
  return (
    <div className="card" style={{ overflow: 'hidden' }}>
      {/* Thumbnail */}
      <div style={{
        height: 96, background: 'var(--bg-deep)',
        borderBottom: '1px solid var(--border)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        position: 'relative',
      }}>
        <SuggestionThumb type={suggestion.type} />
        <div style={{ position: 'absolute', top: 8, left: 8, display: 'flex', gap: 6 }}>
          <AiBadge />
          {isTop && (
            <span style={{ background: 'var(--accent-bg)', color: 'var(--accent-text)',
              fontSize: 10.5, fontWeight: 600, padding: '2px 6px', borderRadius: 4, letterSpacing: '.02em' }}>
              TOP PICK
            </span>
          )}
        </div>
        <div style={{ position: 'absolute', top: 8, right: 8 }}>
          <span className="chip" style={{ background: 'var(--surface)', fontFamily: 'var(--font-mono)' }}>
            <Icon size={11} />{suggestion.type}
          </span>
        </div>
      </div>
      {/* Body */}
      <div style={{ padding: '10px 12px 12px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
          <span style={{ fontWeight: 600, fontSize: 13 }}>Score {scorePct}</span>
          <div style={{ flex: 1, height: 4, background: 'var(--surface-inset)', borderRadius: 2, overflow: 'hidden' }}>
            <div style={{ height: '100%', width: `${scorePct}%`,
              background: scorePct > 85 ? 'var(--success)' : scorePct > 70 ? 'var(--accent)' : 'var(--warning)' }} />
          </div>
        </div>
        <p style={{ margin: 0, fontSize: 12.5, color: 'var(--text-muted)', lineHeight: 1.45 }}>
          {suggestion.rationale}
        </p>
        <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
          <button className={`btn sm ${isTop ? 'primary' : ''}`} onClick={onAccept} style={{ flex: 1 }}>
            <I.Check size={12} />Accept
          </button>
          <button className="btn sm" onClick={onOpen}>
            <I.Edit size={12} />Open
          </button>
          <button className="btn sm ghost" onClick={onReroll} title="Re-roll (R)">
            <I.RefreshCw size={12} />
          </button>
        </div>
      </div>
    </div>
  );
}

// Tiny visual stand-in for the suggestion preview — abstract diagram per type.
function SuggestionThumb({ type }) {
  const stroke = 'var(--text-faint)';
  const fill = 'var(--surface-inset)';
  const accent = 'var(--accent)';
  const W = 200, H = 96;
  switch (type) {
    case 'sequence':
      return <svg viewBox={`0 0 ${W} ${H}`} width="80%" height="68">
        <rect x="20" y="14" width="160" height="50" rx="4" fill={fill} stroke={stroke}/>
        {[0,1,2,3,4,5].map(i => (
          <circle key={i} cx={50 + i*20} cy={78} r="4" fill={i === 2 ? accent : 'var(--border-strong)'}/>
        ))}
      </svg>;
    case 'small_video':
      return <svg viewBox={`0 0 ${W} ${H}`} width="80%" height="68">
        <rect x="20" y="14" width="100" height="56" rx="3" fill={fill} stroke={stroke}/>
        <polygon points="60,30 60,54 82,42" fill={stroke}/>
        <rect x="128" y="20" width="48" height="3" fill={stroke}/>
        <rect x="128" y="28" width="40" height="3" fill={stroke} opacity=".6"/>
        <rect x="128" y="36" width="44" height="3" fill={stroke} opacity=".6"/>
      </svg>;
    case 'vertical_tabs':
      return <svg viewBox={`0 0 ${W} ${H}`} width="80%" height="68">
        <rect x="20" y="14" width="40" height="56" rx="3" fill={fill} stroke={stroke}/>
        <rect x="22" y="18" width="36" height="10" rx="2" fill={accent} opacity=".2"/>
        <rect x="22" y="32" width="36" height="8" rx="2" fill={stroke} opacity=".3"/>
        <rect x="22" y="44" width="36" height="8" rx="2" fill={stroke} opacity=".3"/>
        <rect x="68" y="14" width="112" height="56" rx="3" fill={fill} stroke={stroke}/>
        <rect x="74" y="22" width="60" height="3" fill={stroke}/>
        <rect x="74" y="30" width="80" height="3" fill={stroke} opacity=".6"/>
        <rect x="74" y="38" width="70" height="3" fill={stroke} opacity=".6"/>
      </svg>;
    case 'icons_discover':
      return <svg viewBox={`0 0 ${W} ${H}`} width="80%" height="68">
        {[[60,22],[110,22],[60,52],[110,52]].map(([x,y],i) => (
          <g key={i}>
            <rect x={x} y={y} width="30" height="30" rx="3" fill={fill} stroke={stroke}/>
            <circle cx={x+15} cy={y+15} r="6" fill="none" stroke={stroke} strokeWidth="1.5"/>
          </g>
        ))}
      </svg>;
    case 'text_and_image':
      return <svg viewBox={`0 0 ${W} ${H}`} width="80%" height="68">
        <rect x="20" y="14" width="70" height="56" rx="3" fill={fill} stroke={stroke}/>
        <circle cx="55" cy="38" r="10" fill="none" stroke={stroke}/>
        <rect x="100" y="20" width="80" height="3" fill={stroke}/>
        <rect x="100" y="28" width="70" height="3" fill={stroke} opacity=".6"/>
        <rect x="100" y="36" width="80" height="3" fill={stroke} opacity=".6"/>
        <rect x="100" y="44" width="60" height="3" fill={stroke} opacity=".6"/>
      </svg>;
    case 'fullscreen_video':
    case 'fullscreen_text_and_image':
      return <svg viewBox={`0 0 ${W} ${H}`} width="80%" height="68">
        <rect x="20" y="14" width="160" height="56" rx="3" fill={fill} stroke={stroke}/>
        {type === 'fullscreen_video'
          ? <polygon points="92,32 92,52 112,42" fill={stroke}/>
          : <><rect x="30" y="22" width="80" height="3" fill={stroke}/><rect x="30" y="30" width="60" height="3" fill={stroke} opacity=".6"/></>}
      </svg>;
    case 'mandatoryQuestion':
      return <svg viewBox={`0 0 ${W} ${H}`} width="80%" height="68">
        <rect x="20" y="14" width="160" height="14" rx="2" fill="var(--warning)" opacity=".4"/>
        <rect x="20" y="32" width="160" height="9" rx="2" fill={fill} stroke={stroke}/>
        <rect x="20" y="44" width="160" height="9" rx="2" fill={fill} stroke={stroke}/>
        <rect x="20" y="56" width="160" height="9" rx="2" fill={fill} stroke={stroke}/>
      </svg>;
    default:
      return <svg viewBox={`0 0 ${W} ${H}`} width="80%" height="68">
        <rect x="20" y="14" width="160" height="56" rx="3" fill={fill} stroke={stroke}/>
      </svg>;
  }
}

Object.assign(window, { ProvenanceCard, CitationChip, SuggestionCard, SuggestionThumb });