// ==========================================================================
// HANDOFF CHECKLIST — for Claude Code wiring the real backend
// ==========================================================================
// 1. `src/api.js` — every function carries a TODO[backend] marker with the
//    endpoint shape + return contract. Replace the stub bodies with real
//    fetches / SSE streams. Artifact shapes are the contract; don't change
//    them or the UI breaks.
//
// 2. MOAT — the `chat()` function in api.js has a big comment block above
//    it covering `consulting-brand` and `consulting-data`. These are the
//    two retrieval skills that MUST run first on every turn. Implement:
//      POST /api/skills/consulting-brand  { orgId, threadId, query }
//      POST /api/skills/consulting-data   { orgId, threadId, query, horizon }
//    Results get injected into every downstream skill's system prompt so
//    the model never invents claims the brand can't back.
//
// 3. IMAGE PIPELINE — search this file for `TODO[image-pipeline`. Two cards
//    (AdConceptGrid, VariantMatrix) render with a CSS `bg` placeholder;
//    extend the concept/variant shapes to include imageUrl / imagePrompt /
//    imageModel and swap the placeholder for the generated asset. Per-org
//    brand-LoRA routing is expected — tag each artifact with the LoRA
//    version for audit.
//
// 4. BRAND ENGINE — the `parsed-files` artifact carries parsed uploads;
//    the real brand engine should (a) chunk + embed uploaded brand docs
//    into the per-org vector store, (b) extract brand facts (tone, palette,
//    approved claims), (c) return them via consulting-brand for every turn.
//    Ingest pipeline is out of scope of this frontend.
//
// 5. AGENTS — scheduled agents (api.listAgents, getLatestBriefing) need a
//    real scheduler (cron / Temporal) + a run history store. The briefing
//    shape in getLatestBriefing() is the contract the real backend should
//    match.
// ==========================================================================


function InkuLogo({ size = 22 }) {
  // an abstract "I" with a seed — a droplet within a column.
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
      <circle cx="16" cy="16" r="15" stroke="var(--moss-deep)" strokeWidth="1" fill="var(--bg-2)" />
      <circle cx="16" cy="13" r="3.2" fill="var(--moss-deep)" />
      <rect x="14.2" y="18" width="3.6" height="8" rx="1.8" fill="var(--moss-deep)" />
    </svg>
  );
}

function Icon({ name, size = 16, stroke = 1.5 }) {
  const s = { width: size, height: size, fill: 'none', stroke: 'currentColor', strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'upload':   return <svg viewBox="0 0 24 24" {...s}><path d="M12 4v12m0-12l-4 4m4-4l4 4M4 20h16"/></svg>;
    case 'send':     return <svg viewBox="0 0 24 24" {...s}><path d="M4 12l16-8-6 16-2-7-8-1z"/></svg>;
    case 'sparkle':  return <svg viewBox="0 0 24 24" {...s}><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3z"/><path d="M19 17l.9 2.1L22 20l-2.1.9L19 23l-.9-2.1L16 20l2.1-.9L19 17z"/></svg>;
    case 'check':    return <svg viewBox="0 0 24 24" {...s}><path d="M5 13l4 4L19 7"/></svg>;
    case 'plus':     return <svg viewBox="0 0 24 24" {...s}><path d="M12 5v14M5 12h14"/></svg>;
    case 'chat':     return <svg viewBox="0 0 24 24" {...s}><path d="M4 5h16v11H9l-5 4V5z"/></svg>;
    case 'clock':    return <svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case 'grid':     return <svg viewBox="0 0 24 24" {...s}><rect x="4" y="4" width="7" height="7"/><rect x="13" y="4" width="7" height="7"/><rect x="4" y="13" width="7" height="7"/><rect x="13" y="13" width="7" height="7"/></svg>;
    case 'folder':   return <svg viewBox="0 0 24 24" {...s}><path d="M4 6h5l2 2h9v10H4V6z"/></svg>;
    case 'arrow':    return <svg viewBox="0 0 24 24" {...s}><path d="M5 12h14m-5-5l5 5-5 5"/></svg>;
    case 'arrow-up-right':
                     return <svg viewBox="0 0 24 24" {...s}><path d="M7 17L17 7M9 7h8v8"/></svg>;
    case 'x':        return <svg viewBox="0 0 24 24" {...s}><path d="M6 6l12 12M18 6L6 18"/></svg>;
    case 'pdf':      return <svg viewBox="0 0 24 24" {...s}><path d="M6 3h9l4 4v14H6V3z"/><path d="M14 3v4h5"/><text x="12" y="17" textAnchor="middle" fontSize="5" stroke="none" fill="currentColor" fontFamily="monospace">PDF</text></svg>;
    case 'csv':      return <svg viewBox="0 0 24 24" {...s}><path d="M6 3h9l4 4v14H6V3z"/><path d="M14 3v4h5"/><text x="12" y="17" textAnchor="middle" fontSize="5" stroke="none" fill="currentColor" fontFamily="monospace">CSV</text></svg>;
    case 'dot':      return <svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="4" fill="currentColor"/></svg>;
    case 'bell':     return <svg viewBox="0 0 24 24" {...s}><path d="M18 16v-5a6 6 0 10-12 0v5l-2 3h16l-2-3z"/><path d="M10 21a2 2 0 004 0"/></svg>;
    case 'pause':    return <svg viewBox="0 0 24 24" {...s}><rect x="6" y="5" width="4" height="14"/><rect x="14" y="5" width="4" height="14"/></svg>;
    case 'play':     return <svg viewBox="0 0 24 24" {...s}><path d="M7 5l12 7-12 7V5z"/></svg>;
    case 'refresh':  return <svg viewBox="0 0 24 24" {...s}><path d="M20 12a8 8 0 11-2.5-5.8M20 4v4h-4"/></svg>;
    case 'eye':      return <svg viewBox="0 0 24 24" {...s}><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg>;
    case 'more':     return <svg viewBox="0 0 24 24" {...s}><circle cx="6" cy="12" r="1" fill="currentColor"/><circle cx="12" cy="12" r="1" fill="currentColor"/><circle cx="18" cy="12" r="1" fill="currentColor"/></svg>;
    case 'route':    return <svg viewBox="0 0 24 24" {...s}><circle cx="6" cy="6" r="2"/><circle cx="18" cy="18" r="2"/><path d="M8 6h6a4 4 0 014 4v6"/></svg>;
    case 'calendar': return <svg viewBox="0 0 24 24" {...s}><rect x="4" y="6" width="16" height="15" rx="2"/><path d="M4 10h16M8 3v5M16 3v5"/></svg>;
    case 'meta':     return <svg viewBox="0 0 24 24" {...s}><path d="M4 16c0-6 3-9 6-9s4 2 6 5 3 5 4 5c1.5 0 2-1.5 2-3s-.5-3-2-3-3 2-5 5-4 5-6 5-3-2-3-5z"/></svg>;
    case 'tiktok':   return <svg viewBox="0 0 24 24" {...s}><path d="M13 4v11a4 4 0 11-4-4"/><path d="M13 4c0 2.5 2 5 5 5"/></svg>;
    case 'pinterest':return <svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="9"/><path d="M11 8c-1.5 2 0 4 0 4m-1 7l2-8"/></svg>;
    case 'ooh':      return <svg viewBox="0 0 24 24" {...s}><rect x="3" y="5" width="18" height="11"/><path d="M8 21l2-5m6 5l-2-5"/></svg>;
    case 'mail':     return <svg viewBox="0 0 24 24" {...s}><rect x="3" y="5" width="18" height="14" rx="1"/><path d="M3 7l9 6 9-6"/></svg>;
    case 'youtube':  return <svg viewBox="0 0 24 24" {...s}><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M11 10l4 2-4 2v-4z" fill="currentColor"/></svg>;
    case 'search':   return <svg viewBox="0 0 24 24" {...s}><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>;
    case 'arrow-up': return <svg viewBox="0 0 24 24" {...s}><path d="M12 19V5M5 12l7-7 7 7"/></svg>;
    case 'chevron-right': return <svg viewBox="0 0 24 24" {...s}><path d="M9 6l6 6-6 6"/></svg>;
    case 'users':    return <svg viewBox="0 0 24 24" {...s}><circle cx="9" cy="8" r="3.5"/><path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6"/><path d="M16 4.5a3.5 3.5 0 010 7M21 20c0-2.5-1.5-4.7-3.5-5.6"/></svg>;
    case 'message':  return <svg viewBox="0 0 24 24" {...s}><path d="M4 5h16v11H9l-5 4V5z"/></svg>;
    case 'bar-chart':return <svg viewBox="0 0 24 24" {...s}><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg>;
    case 'edit':     return <svg viewBox="0 0 24 24" {...s}><path d="M4 20h4l10-10-4-4L4 16v4z"/><path d="M14 6l4 4"/></svg>;
    case 'flask':    return <svg viewBox="0 0 24 24" {...s}><path d="M9 3h6M10 3v6L5 20h14L14 9V3"/><path d="M7.5 15h9"/></svg>;
    case 'file':     return <svg viewBox="0 0 24 24" {...s}><path d="M6 3h9l4 4v14H6V3z"/><path d="M14 3v4h5"/></svg>;
    case 'palette':  return <svg viewBox="0 0 24 24" {...s}><path d="M12 3a9 9 0 108 13c.6-1 0-2-1.5-2H17a3 3 0 01-3-3c0-1.5 1-2 2-2h1c2 0 3-1 3-3a6 6 0 00-8-3z"/><circle cx="8" cy="11" r="1" fill="currentColor"/><circle cx="12" cy="7" r="1" fill="currentColor"/></svg>;
    case 'shop':     return <svg viewBox="0 0 24 24" {...s}><path d="M4 8l2-4h12l2 4M4 8v12h16V8M4 8h16M9 12h6"/></svg>;
    case 'rocket':   return <svg viewBox="0 0 24 24" {...s}><path d="M14 3c3 0 6 3 6 6l-8 8-4-4 6-8c0-1 0-2 0-2z"/><path d="M14 3l-4 4M7 14l-3 3 3 3 3-3"/></svg>;
    case 'sparkles': return <svg viewBox="0 0 24 24" {...s}><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3z"/></svg>;
    default: return null;
  }
}

function ChannelIcon({ name, size = 14 }) {
  const map = { Meta: 'meta', TikTok: 'tiktok', Pinterest: 'pinterest', OOH: 'ooh', Email: 'mail', YouTube: 'youtube' };
  const base = name.split(' ')[0];
  return <Icon name={map[base] || 'dot'} size={size} />;
}

// Typing indicator — three dots
function Typing() {
  return (
    <span style={{ display:'inline-flex', gap: 3, alignItems:'center', height: 16 }}>
      <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--ink-mute)', animation: 'pulse 1.3s ease-in-out infinite' }} />
      <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--ink-mute)', animation: 'pulse 1.3s ease-in-out infinite .2s' }} />
      <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--ink-mute)', animation: 'pulse 1.3s ease-in-out infinite .4s' }} />
    </span>
  );
}

// Orbital loader (used on skill pills when "thinking")
function Orbit({ size = 10 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 10 10" className="spinner">
      <circle cx="5" cy="5" r="3.5" fill="none" stroke="currentColor" strokeWidth="1" strokeDasharray="4 16" />
    </svg>
  );
}

// Aura blob used as decorative background
function Aura({ x = '50%', y = '50%', size = 400, color = 'var(--aura-1)', opacity = 0.6 }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      width: size, height: size,
      background: `radial-gradient(circle, ${color} 0%, transparent 70%)`,
      filter: 'blur(60px)',
      opacity,
      transform: 'translate(-50%, -50%)',
      pointerEvents: 'none',
    }} />
  );
}

// BRAME bottle sketch — used in ad concepts when no image available
function BrameBottle({ w = 60, fill = '#6E2A14', label = '#F3EADB' }) {
  return (
    <svg width={w} height={w * 2.4} viewBox="0 0 60 144">
      <path d="M22 6 h16 v18 c 0 2, 6 4, 6 10 v100 c 0 4, -2 6, -6 6 h-16 c-4 0, -6 -2, -6 -6 v-100 c 0 -6, 6 -8, 6 -10 z"
        fill={fill} stroke="rgba(0,0,0,.2)" strokeWidth="0.5"/>
      <rect x="14" y="60" width="32" height="44" fill={label} opacity="0.95"/>
      <text x="30" y="78" textAnchor="middle" fontFamily="Elms Sans, sans-serif" fontWeight="500" fontSize="11" fill={fill}>BRAME</text>
      <line x1="18" y1="84" x2="42" y2="84" stroke={fill} strokeWidth="0.4" opacity="0.6"/>
      <text x="30" y="96" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="4.2" letterSpacing="0.2em" fill={fill}>APERITIF · NL</text>
    </svg>
  );
}

Object.assign(window, { InkuLogo, Icon, ChannelIcon, Typing, Orbit, Aura, BrameBottle });