// ─── Shared helpers + primitives ───
const { useState, useEffect, useRef, useCallback } = React;

const money = (n) => '$' + n.toLocaleString('en-US');
const compactMoney = (n) => n >= 1000 ? '$' + (n/1000).toFixed(n>=100000?0:1).replace(/\.0$/,'') + 'k' : '$' + n;

// Icon set — single source of truth
const I = {
  plus:  <path d="M12 5v14M5 12h14"/>,
  image: <><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></>,
  video: <><path d="m22 8-6 4 6 4V8Z"/><rect x="2" y="6" width="14" height="12" rx="2"/></>,
  layers:<><path d="m12 2 9 5-9 5-9-5 9-5Z"/><path d="m3 12 9 5 9-5"/><path d="m3 17 9 5 9-5"/></>,
  arrowL:<path d="M19 12H5M12 19l-7-7 7-7"/>,
  arrowR:<path d="M5 12h14M12 5l7 7-7 7"/>,
  chevR: <path d="m9 18 6-6-6-6"/>,
  x:     <path d="M18 6 6 18M6 6l12 12"/>,
  check: <path d="M20 6 9 17l-5-5"/>,
  dl:    <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M7 10l5 5 5-5M12 15V3"/></>,
  cart:  <><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6"/></>,
  play:  <path d="M8 5v14l11-7-8-7Z" fill="currentColor" stroke="none"/>,
  bolt:  <path d="M13 2 3 14h7l-1 8 10-12h-7l1-8Z"/>,
  lock:  <><rect x="4" y="11" width="16" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></>,
  clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
  spark: <path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M18.4 5.6l-2.8 2.8M8.4 15.6l-2.8 2.8"/>,
};
function Ico({ d, size=16, fill=false, sw=2, style }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill={fill?"currentColor":"none"}
      stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={style}>
      {I[d]}
    </svg>
  );
}

function StatusPill({ s }) {
  const map = { final:'Final', review:'Verify', pending:'Pending', proof:'Proof', production:'In production' };
  return <span className={`st ${s}`}>{map[s] || s}</span>;
}

// kind glyph for counts / placeholders
const kindIcon = { images:'image', videos:'video', aplus:'layers' };

function Counts({ c, accent }) {
  const items = [
    c.images && ['image', c.images],
    c.videos && ['video', c.videos],
    c.aplus  && ['layers', c.aplus],
  ].filter(Boolean);
  return (
    <div className="counts">
      {items.map(([ic, n]) => (
        <span className="c" key={ic}><Ico d={ic} size={13} sw={1.8}/>{n}</span>
      ))}
    </div>
  );
}

// Elegant placeholder fill for not-yet-uploaded creative
function Placeholder({ label='In production', glyph='image' }) {
  return (
    <div className="ph">
      <div className="pin">
        <div className="mk"><Ico d={glyph} size={18} sw={1.6}/></div>
        <div className="pl">{label}</div>
      </div>
    </div>
  );
}

// ─── Lightbox (loadable images only) ───
function Lightbox({ items, index, onClose, onStep }) {
  useEffect(() => {
    if (index < 0) return;
    const onKey = (e) => {
      if (e.key === 'Escape') onClose();
      else if (e.key === 'ArrowRight') onStep(1);
      else if (e.key === 'ArrowLeft') onStep(-1);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [index, onClose, onStep]);
  const cur = index >= 0 ? items[index] : null;
  return (
    <div className={`lb ${index >= 0 ? 'open' : ''}`} onClick={onClose}>
      {cur && <>
        <img src={cur.url} alt={cur.name} onClick={(e)=>e.stopPropagation()}/>
        <div className="lbcap">{cur.name}{items.length>1?`  ·  ${index+1} / ${items.length}`:''}</div>
        {items.length > 1 && <>
          <button className="nav prev" onClick={(e)=>{e.stopPropagation();onStep(-1);}}><Ico d="arrowL" size={20}/></button>
          <button className="nav next" onClick={(e)=>{e.stopPropagation();onStep(1);}}><Ico d="arrowR" size={20}/></button>
        </>}
        <button className="close" onClick={onClose}><Ico d="x" size={18}/></button>
      </>}
    </div>
  );
}

Object.assign(window, { useState, useEffect, useRef, useCallback, money, compactMoney, Ico, I, StatusPill, Counts, Placeholder, Lightbox, kindIcon });