/* global React */
// Orae — shared parts: icons + Reel + Placeholder

const Ico = {
  play: (p) => <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M8 5v14l11-7z"/></svg>,
  arrow: (p) => <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12h14M13 6l6 6-6 6"/></svg>,
  check: (p) => <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M20 6L9 17l-5-5"/></svg>,
  image: (p) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="3" y="3" width="18" height="18" rx="2.5"/><circle cx="8.5" cy="8.5" r="1.6"/><path d="M21 15l-5-5L5 21"/></svg>,
  film: (p) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="3" y="3" width="18" height="18" rx="2.5"/><path d="M7 3v18M17 3v18M3 8h4M3 16h4M17 8h4M17 16h4"/></svg>,
  globe: (p) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 2.5 2.5 15 0 18M12 3c-2.5 2.5-2.5 15 0 18"/></svg>,
  layers: (p) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 3l9 5-9 5-9-5 9-5z"/><path d="M3 13l9 5 9-5M3 16l9 5 9-5" opacity="0.5"/></svg>,
  upload: (p) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 16V4M7 9l5-5 5 5M5 20h14"/></svg>,
  spark: (p) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5L18 18M18 6l-2.5 2.5M8.5 15.5L6 18"/></svg>,
  box: (p) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M21 8l-9-5-9 5v8l9 5 9-5V8z"/><path d="M3 8l9 5 9-5M12 13v8"/></svg>,
  info: (p) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="9"/><path d="M12 16v-4M12 8h.01"/></svg>,
  shield: (p) => <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z"/></svg>,
  bolt: (p) => <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z"/></svg>,
};

function Ph({ label, style }) {
  return (
    <div className="ph" style={style}>
      {label && <span className="ph-label">{label}</span>}
    </div>
  );
}

// 9:16 marketing reel mock
function Reel({ chip = "成片 · 9:16", phLabel = "成片画面", caption, sub, cta = "立即抢购", style }) {
  return (
    <div className="reel" style={style}>
      <Ph label={phLabel} />
      <div className="reel-grad" />
      <div className="reel-top">
        <span className="reel-chip">{chip}</span>
      </div>
      <div className="reel-play"><Ico.play style={{ color: "#1a1a1a" }} /></div>
      {sub && <div className="reel-sub">{sub}</div>}
      <div className="reel-bottom">
        {caption && <div className="reel-cap">{caption}</div>}
        {cta && <span className="reel-cta">{cta} <Ico.arrow style={{ width: 13, height: 13 }} /></span>}
      </div>
    </div>
  );
}

// 真实风格的竖屏成片卡（封面 + 钩子文案 + 播放 + 市场/类型标签）
function ResultReel({ tone = 0, type, flag, market, hook, sub, comment, id, badge }) {
  return (
    <div className={"rreel t" + (tone % 4)}>
      {id
        ? <image-slot id={id} class="rreel-img" shape="rounded" radius="20" placeholder="拖入成片封面"></image-slot>
        : <span className="rreel-img" aria-hidden="true" />}
      <span className="rreel-shade" />
      <div className="rreel-top">
        <span className="rreel-type"><span className="rreel-eq"><i /><i /><i /></span>{type}</span>
        {flag && <span className="rreel-flag">{flag}</span>}
      </div>
      {!comment && <span className="rreel-play" aria-hidden="true"><Ico.play style={{ width: 17, height: 17, color: "#1a1a1a", marginLeft: 2 }} /></span>}
      {comment && <div className="rreel-comment"><span className="rreel-ava" /><span className="rreel-bubble">{comment}</span></div>}
      <span className="rreel-prog"><i /></span>
      <div className="rreel-foot">
        {market && <span className="rreel-market">{market}</span>}
        {hook && <div className="rreel-hook">{hook}</div>}
        {sub && <div className="rreel-sub">{sub}</div>}
      </div>
      {badge && <span className="rreel-badge">{badge}</span>}
    </div>
  );
}

Object.assign(window, { Ico, Ph, Reel, ResultReel });
