// frame-primitives.jsx — shared visual atoms for Charter to Code style frames
// Loaded as plain Babel script. Exposes everything on `window`.

const PHASES = [
  { n: '01', label: 'Charter',      who: '😍'      },
  { n: '02', label: 'BRD',          who: '😍 + 🤖' },
  { n: '03', label: 'FFD',          who: '😍 + 🤖' },
  { n: '04', label: 'Process Maps', who: '😍 + 🤖' },
  { n: '05', label: 'Code',         who: '🤖 + 😍' },
  { n: '06', label: 'UAT',          who: '😍'      },
];

// ── Pipeline tracker (top of screen during phase scenes) ────────
function PipelineBar({ active }) {
  return (
    <div className="pipeline-bar">
      {PHASES.map((p, i) => (
        <React.Fragment key={p.n}>
          <span className={`node ${active === i ? 'active' : (i < active ? 'done' : '')}`}>
            <span className="dot" />
            <span style={{ color: active === i ? 'var(--orange-hot)' : 'inherit', fontWeight: active === i ? 700 : 400 }}>
              {p.n} {p.label}
            </span>
          </span>
          {i < PHASES.length - 1 && <span className="arrow">→</span>}
        </React.Fragment>
      ))}
    </div>
  );
}

// ── Big six-station pipeline (Scene 3 hero) ─────────────────────
// Vertical/staggered for readability + explicit eval-loop arrows.
function PipelineHero({ showLegend = true }) {
  // Layout: 6 stations stepping diagonally down-right, generous spacing.
  // Phases 2 (BRD), 3 (FFD), 4 (Maps) each have an explicit eval loop arc.
  const stations = PHASES.map((p, i) => ({
    ...p,
    x: 220 + i * 280,
    y: 290 + i * 70,
  }));

  return (
    <div style={{ position: 'absolute', inset: 0 }}>
      {showLegend && (
        <div className="legend" style={{ position: 'absolute', top: 80, right: 96, fontSize: 22 }}>
          <span className="legend__item"><span style={{ fontSize: 28 }}>😍</span> Human</span>
          <span className="legend__item"><span style={{ fontSize: 28 }}>🤖</span> Machine</span>
          <span className="legend__item"><span style={{ color: 'var(--orange)', fontSize: 28 }}>↻</span> Eval loop</span>
        </div>
      )}

      <svg width="1920" height="1080" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
        <defs>
          <marker id="ph-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
            <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--ink-soft)" />
          </marker>
          <marker id="ph-arrow-orange" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
            <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--orange)" />
          </marker>
        </defs>

        {/* curved connectors station → station */}
        {stations.slice(0, -1).map((s, i) => {
          const next = stations[i + 1];
          const x1 = s.x + 130, y1 = s.y;
          const x2 = next.x - 130, y2 = next.y;
          return (
            <path key={i}
              d={`M ${x1} ${y1} C ${x1 + 80} ${y1}, ${x2 - 80} ${y2}, ${x2} ${y2}`}
              stroke="var(--ink-soft)" strokeWidth="2" fill="none"
              markerEnd="url(#ph-arrow)"
            />
          );
        })}

        {/* Eval loops on phases 2, 3, 4 (BRD, FFD, Maps) — each loops back on itself */}
        {[1, 2, 3].map((idx) => {
          const s = stations[idx];
          const cx = s.x, cy = s.y - 90;
          return (
            <g key={idx}>
              <path
                d={`M ${cx + 50} ${cy + 30} A 60 60 0 1 1 ${cx - 50} ${cy + 30}`}
                stroke="var(--orange)" strokeWidth="3" fill="none"
                strokeLinecap="round"
                markerEnd="url(#ph-arrow-orange)"
              />
              <text x={cx} y={cy - 50} fontFamily="var(--font-mono)" fontSize="15" fill="var(--orange)" textAnchor="middle" letterSpacing="1">↻ EVAL LOOP</text>
              <text x={cx} y={cy - 30} fontFamily="var(--font-mono)" fontSize="13" fill="var(--ink-faint)" textAnchor="middle">draft → review → refine</text>
            </g>
          );
        })}
      </svg>

      {/* Stations */}
      {stations.map((s) => (
        <div key={s.n} style={{
          position: 'absolute',
          left: s.x - 130, top: s.y - 60,
          width: 260, height: 120,
          background: 'var(--cream-base)',
          border: '2.5px solid var(--orange)',
          borderRadius: 10,
          padding: '14px 20px',
          fontFamily: 'var(--font-mono)',
          boxShadow: '0 12px 30px -14px rgba(184,92,56,0.35)',
          display: 'flex', flexDirection: 'column', justifyContent: 'center',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <span style={{ fontSize: 16, color: 'var(--ink-faint)', letterSpacing: '0.16em' }}>PHASE {s.n}</span>
            <span style={{ fontSize: 22 }}>{s.who}</span>
          </div>
          <div style={{ fontSize: 30, fontWeight: 700, color: 'var(--ink)', marginTop: 4 }}>{s.label}</div>
        </div>
      ))}
    </div>
  );
}

// ── Caption pill ────────────────────────────────────────────────
function Caption({ children, terminal, caret = true, bottom = 96 }) {
  return (
    <div className={'caption' + (terminal ? ' caption--terminal' : '')} style={{ bottom }}>
      {children}
      {caret && <span className="caret" />}
    </div>
  );
}

// ── Notebook page ──────────────────────────────────────────────
function Notebook({ children, width = 1280, height = 920, ribbon = true, style }) {
  return (
    <div className="notebook" style={{ width, height, ...style }}>
      {ribbon && <div className="notebook__ribbon" />}
      <div className="notebook__edge" />
      <div style={{ padding: '64px 80px', height: '100%', boxSizing: 'border-box', position: 'relative' }}>
        {children}
      </div>
    </div>
  );
}

function NotebookHeader({ children }) {
  return (
    <div className="notebook__title" style={{ marginBottom: 36 }}>
      {children}
    </div>
  );
}

function SectionHead({ children, hint }) {
  return (
    <div style={{ marginBottom: 28 }}>
      <div className="section-head">
        <span>{children}</span>
        <span className="section-head__rule" />
      </div>
      {hint && <div className="section-head__hint" style={{ marginTop: 10 }}>{hint}</div>}
    </div>
  );
}

// ── Terminal window ────────────────────────────────────────────
function Terminal({ children, width = 1280, height = 820, title = 'claude // BRD draft', dotColor = 'green', style }) {
  const dots = (
    <>
      <span className={'terminal__dot ' + (dotColor === 'red' ? 'red' : dotColor === 'amber' ? 'amber' : '')} />
      <span className="terminal__dot amber" />
      <span className="terminal__dot" />
    </>
  );
  return (
    <div className="terminal" style={{ width, height, ...style }}>
      <div className="terminal__chrome">
        {dots}
        <span className="terminal__title">{title}</span>
      </div>
      <div className="terminal__body" style={{ height: height - 36 }}>
        {children}
      </div>
    </div>
  );
}

function PhaseTagLegend({ style }) {
  return (
    <div className="legend" style={style}>
      <span className="legend__item"><span style={{ fontSize: 24 }}>😍</span> Human</span>
      <span className="legend__item"><span style={{ fontSize: 24 }}>🤖</span> Machine</span>
      <span className="legend__item"><span style={{ color: 'var(--orange)', fontSize: 24 }}>↻</span> Eval loop</span>
    </div>
  );
}

function PhaseHeader({ num, title, who, big }) {
  const fontSize = big ? 64 : 38;
  return (
    <div>
      <div className="phase-header" style={{ fontSize, lineHeight: 1.1 }}>
        Phase {num} — {title}
      </div>
      <div className="phase-header__rule" />
      {who && (
        <div style={{
          marginTop: 18,
          fontFamily: 'var(--font-mono)',
          fontSize: big ? 28 : 20,
          color: 'var(--ink-soft)',
        }}>{who}</div>
      )}
    </div>
  );
}

function FinalMark({ label = 'FINAL', size = 56 }) {
  const checkSize = Math.round(size * 1.15);
  return (
    <div className="final-mark" style={{ fontSize: size }}>
      <span className="check" style={{ width: checkSize, height: checkSize, borderWidth: Math.max(3, Math.round(size / 14)) }}>
        <svg viewBox="0 0 40 40" style={{ width: checkSize * 0.6, height: checkSize * 0.6 }}>
          <path d="M 6 22 L 16 32 L 34 10" fill="none" stroke="var(--orange)" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </span>
      <span>{label}</span>
    </div>
  );
}

Object.assign(window, {
  PHASES,
  PipelineBar, PipelineHero, Caption,
  Notebook, NotebookHeader, SectionHead,
  Terminal, PhaseTagLegend, PhaseHeader, FinalMark,
});