/* Course figures - custom on-brand SVG/CSS schemas (no stock art).
   Every figure draws with the design tokens (--accent / --grow / --line) and
   the shared <Icon> stroke set, echoing the existing Ring / po-track motifs so
   the lessons feel native to the landing page. Each takes a plain descriptor
   from course-data.jsx; <Schema> dispatches on figure.kind. */

/* ── 1. Application funnel (with referral fast-lane) ───────────────────────── */
function Funnel({ stages = [], fastLane }) {
  const max = Math.max(...stages.map((s) => s.value), 1);
  return (
    <div className="po-schema po-fn">
      <div className="po-fn-stack">
        {stages.map((s, i) => {
          const w = 30 + (s.value / max) * 70;
          const last = i === stages.length - 1;
          return (
            <div className="po-fn-row" key={i}>
              <div className={"po-fn-bar" + (last ? " is-end" : "")} style={{ width: w + "%" }}>
                <b className="mono">{s.value.toLocaleString()}</b>
              </div>
              <span className="po-fn-lbl">{s.label}</span>
            </div>
          );
        })}
      </div>
      {fastLane && (
        <div className="po-fn-lane">
          <span className="po-fn-lane-tag mono"><Icon name="bolt" size={13} /> {fastLane.label}</span>
          <span className="po-fn-lane-note">{fastLane.note}</span>
        </div>
      )}
    </div>
  );
}

/* ── 2. Channel-odds bars (cold → warm) ────────────────────────────────────── */
function ChannelBars({ bars = [] }) {
  return (
    <div className="po-schema po-cb">
      {bars.map((b, i) => (
        <div className="po-cb-row" key={i}>
          <span className="po-cb-lbl">{b.label}</span>
          <div className="po-cb-track">
            <div className={"po-cb-fill po-cb-" + (b.tone || "cold")} style={{ width: b.value + "%" }} />
          </div>
          <span className="po-cb-note">{b.note}</span>
        </div>
      ))}
    </div>
  );
}

/* ── 3. Three gates / generic labeled step-cards ───────────────────────────── */
function ThreeGates({ gates = [], prefix = "Gate" }) {
  return (
    <div className="po-schema po-gates">
      {gates.map((g, i) => (
        <React.Fragment key={i}>
          <div className="po-gate card">
            <span className="po-gate-n mono">{prefix} {i + 1}</span>
            <span className="po-gate-ic"><Icon name={g.icon} size={20} /></span>
            <strong>{g.name}</strong>
            <span className="po-gate-sym">{g.symptom}</span>
            {g.fixedIn && <span className="po-gate-fix mono">{g.fixedIn}</span>}
          </div>
          {i < gates.length - 1 && <span className="po-gate-arrow"><Icon name="arrow" size={18} /></span>}
        </React.Fragment>
      ))}
    </div>
  );
}

/* ── 4. The weekly loop / generic ordered process (repeat tag optional) ────── */
function WeeklyLoop({ steps = [], repeat = true }) {
  return (
    <div className="po-schema po-loop">
      {steps.map((s, i) => (
        <React.Fragment key={i}>
          <div className="po-loop-node">
            <span className="po-loop-ic"><Icon name={s.icon} size={18} /></span>
            <span className="po-loop-lbl">{s.label}</span>
          </div>
          {i < steps.length - 1 && <span className="po-loop-arrow"><Icon name="arrow" size={16} /></span>}
        </React.Fragment>
      ))}
      {repeat && <span className="po-loop-repeat mono"><Icon name="spark" size={13} /> repeat weekly</span>}
    </div>
  );
}

/* ── 5. Locus flip / generic two-column compare ────────────────────────────── */
function LocusFlip({ external = [], controllable = [],
  leftLabel = "Outside your control", rightLabel = "Yours to change",
  leftIcon = "close", rightIcon = "check" }) {
  return (
    <div className="po-schema po-locus">
      <div className="po-locus-col po-locus-out">
        <span className="po-locus-h mono"><Icon name={leftIcon} size={13} /> {leftLabel}</span>
        {external.map((x, i) => <span className="po-locus-item" key={i}>{x}</span>)}
      </div>
      <span className="po-locus-mid"><Icon name="arrow" size={20} /></span>
      <div className="po-locus-col po-locus-in">
        <span className="po-locus-h mono"><Icon name={rightIcon} size={13} /> {rightLabel}</span>
        {controllable.map((x, i) => <span className="po-locus-item" key={i}>{x}</span>)}
      </div>
    </div>
  );
}

/* ── 6. Three readers (the resume's three audiences) ───────────────────────── */
function ThreeReaders({ readers = [] }) {
  return (
    <div className="po-schema po-readers">
      {readers.map((r, i) => (
        <div className="po-reader card" key={i}>
          <div className="po-reader-top">
            <span className="po-reader-ic"><Icon name={r.icon} size={18} /></span>
            <span className="po-reader-time mono">{r.time}</span>
          </div>
          <strong>{r.name}</strong>
          <span className="po-reader-who">{r.who}</span>
          <span className="po-reader-wants"><em>Wants:</em> {r.wants}</span>
        </div>
      ))}
    </div>
  );
}

/* ── 7. Before/after bullet (interactive toggle) ───────────────────────────── */
function BeforeAfterBullet({ before, after, issue,
  labelBefore = "Duty", labelAfter = "Impact",
  cta = "Rewrite it", ctaBack = "Show the duty version" }) {
  const [on, setOn] = useState(false);
  return (
    <div className="po-schema po-bab card">
      <div className="po-toggle po-bab-toggle" role="group" aria-label="Version">
        <button className={!on ? "on" : ""} onClick={() => setOn(false)}>{labelBefore}</button>
        <button className={on ? "on" : ""} onClick={() => setOn(true)}>{labelAfter}</button>
      </div>
      <div className={"po-bab-line " + (on ? "good" : "bad")} key={on ? "a" : "b"}>
        <span className="po-bab-mark"><Icon name={on ? "check" : "close"} size={15} stroke={2.6} /></span>
        <span className="po-bab-text">{on ? after : before}</span>
      </div>
      {!on && issue && <span className="po-bab-issue">{issue}</span>}
      <button className="po-bab-run" onClick={() => setOn((v) => !v)}>
        <Icon name="spark" size={15} /> {on ? ctaBack : cta}
      </button>
    </div>
  );
}

/* ── 8. Impact-and-stack formula (chained chips) ───────────────────────────── */
function ImpactFormula({ parts = [] }) {
  return (
    <div className="po-schema po-formula">
      {parts.map((p, i) => (
        <React.Fragment key={i}>
          <div className={"po-formula-chip" + (p.accent ? " is-accent" : "")}>
            <b>{p.label}</b>
            {p.hint && <span>{p.hint}</span>}
          </div>
          {i < parts.length - 1 && <span className="po-formula-op"><Icon name="arrow" size={15} /></span>}
        </React.Fragment>
      ))}
    </div>
  );
}

/* ── 9. Six-signals annotated resume ───────────────────────────────────────── */
function SixSignals({ signals = [] }) {
  const [active, setActive] = useState(0);
  const s = signals[active] || {};
  return (
    <div className="po-schema po-six">
      <div className="po-six-doc card" aria-hidden="true">
        <div className="po-six-docline po-six-docline-wide" />
        <div className="po-six-docline po-six-docline-mid" />
        <div className="po-six-docrule" />
        <div className="po-six-docline" />
        <div className="po-six-docline po-six-docline-mid" />
        <div className="po-six-docline po-six-docline-wide" />
        <div className="po-six-docline" />
      </div>
      <div className="po-six-right">
        <div className="po-six-pins">
          {signals.map((sig, i) => (
            <button key={i} className={"po-six-pin" + (i === active ? " on" : "")}
              onClick={() => setActive(i)} aria-label={"Signal " + (i + 1)}>
              <span className="po-six-pin-n mono">{i + 1}</span>
              <span className="po-six-pin-lbl">{sig.label}</span>
            </button>
          ))}
        </div>
        <div className="po-six-detail" key={active}>
          <span className="po-six-detail-n mono"><Icon name="pin" size={13} /> Signal {active + 1}</span>
          <strong>{s.label}</strong>
          <p>{s.fix}</p>
        </div>
      </div>
    </div>
  );
}

/* ── 10. ATS keyword-match meter (reuses Ring from courses.jsx) ─────────────── */
function KeywordMeter({ score = 72, label }) {
  const R = window.Ring;
  return (
    <div className="po-schema po-meter">
      {R ? <R value={score} /> : <div className="po-meter-num">{score}</div>}
      <p>{label}</p>
    </div>
  );
}

/* ── 11. Before/after one-page resume (interactive toggle) ─────────────────── */
function ResumeRebuild({ before, after }) {
  const [on, setOn] = useState(false);
  const r = on ? after : before;
  return (
    <div className="po-schema po-rb">
      <div className="po-toggle po-rb-toggle" role="group" aria-label="Resume version">
        <button className={!on ? "on" : ""} onClick={() => setOn(false)}>Before</button>
        <button className={on ? "on" : ""} onClick={() => setOn(true)}>After</button>
      </div>
      <div className={"po-rb-paper card " + (on ? "good" : "bad")} key={on ? "a" : "b"}>
        <div className="po-rb-head">
          {r.photo && <span className="po-rb-photo" aria-hidden="true"><Icon name="user" size={18} /></span>}
          <div className="po-rb-id">
            <strong>{r.name}</strong>
            <span className="po-rb-contact">{r.contact}</span>
            {r.extra && <span className="po-rb-extra">{r.extra}</span>}
          </div>
        </div>
        {r.roles.map((role, i) => (
          <div className="po-rb-role" key={i}>
            <div className="po-rb-role-top">
              <b>{role.title}</b><span className="mono">{role.dates}</span>
            </div>
            <span className="po-rb-company">{role.company}</span>
            <ul>{role.bullets.map((b, j) => <li key={j}>{b}</li>)}</ul>
          </div>
        ))}
        <div className="po-rb-skills"><b>Skills</b> {r.skills}</div>
      </div>
      <span className={"po-rb-verdict " + (on ? "good" : "bad")}>
        <Icon name={on ? "check" : "close"} size={14} stroke={2.6} /> {r.verdict}
      </span>
    </div>
  );
}

/* ── Dispatcher ────────────────────────────────────────────────────────────── */
function Schema({ figure }) {
  if (!figure) return null;
  switch (figure.kind) {
    case "funnel": return <Funnel {...figure} />;
    case "channelBars": return <ChannelBars {...figure} />;
    case "threeGates": return <ThreeGates {...figure} />;
    case "weeklyLoop": return <WeeklyLoop {...figure} />;
    case "locusFlip": return <LocusFlip {...figure} />;
    case "threeReaders": return <ThreeReaders {...figure} />;
    case "beforeAfterBullet": return <BeforeAfterBullet {...figure} />;
    case "impactFormula": return <ImpactFormula {...figure} />;
    case "sixSignals": return <SixSignals {...figure} />;
    case "keywordMeter": return <KeywordMeter {...figure} />;
    case "resume": return <ResumeRebuild {...figure} />;
    default: return null;
  }
}

Object.assign(window, {
  Funnel, ChannelBars, ThreeGates, WeeklyLoop, LocusFlip, ThreeReaders,
  BeforeAfterBullet, ImpactFormula, SixSignals, KeywordMeter, ResumeRebuild, Schema,
});