/* cflow-rationale.jsx — consolidation map (before/after) */
/* global React, CF_OLD_FLOW, CF_NEW_FLOW, CF_CHANGES, CF_STATUSES, CFStatusPill, Icon */

function CFMap() {
  return (
    <div className="cf-map">
      <div className="eyebrow">Campaign flow · v2</div>
      <h2>Brief + Campaign → one Campaign with statuses.</h2>
      <div className="lede">
        Audited the codebase. Brand has two near-identical wizards today (Brief 4 steps + Campaign 3 steps),
        two list screens, two detail pages. Per <b>plans/campaign-flow-v2</b> we collapse to one entity:
        <b> Campaign</b>, with a status field that does the same job as “publish brief” / “close brief”.
      </div>

      {/* Side-by-side flow comparison */}
      <div className="compare">
        <div className="col old">
          <h3>
            <span className="tag">Old · today</span>
            Two parallel flows
          </h3>
          <div className="flowbox">
            {CF_OLD_FLOW.map((n, i) => (
              <React.Fragment key={i}>
                <div className={'node' + (n.danger ? ' danger' : '')}>
                  <span style={{ width: 4, height: 4, borderRadius: 999, background: n.danger ? 'var(--red)' : 'var(--ink-soft)' }}></span>
                  {n.l}
                  {n.note && <span style={{ marginLeft: 'auto', fontSize: 9, color: 'var(--ink-soft)' }}>{n.note}</span>}
                </div>
                {i < CF_OLD_FLOW.length - 1 && <div className="down">↓</div>}
              </React.Fragment>
            ))}
          </div>
        </div>

        <div className="arrow-col">→</div>

        <div className="col new">
          <h3>
            <span className="tag">New · v2</span>
            One flow, statuses replace screens
          </h3>
          <div className="flowbox">
            {CF_NEW_FLOW.map((n, i) => (
              <React.Fragment key={i}>
                <div className="node ok">
                  <span style={{ width: 4, height: 4, borderRadius: 999, background: 'var(--indigo)' }}></span>
                  {n.l}
                  {n.note && <span style={{ marginLeft: 'auto', fontSize: 9, color: 'var(--ink-soft)' }}>{n.note}</span>}
                </div>
                {i < CF_NEW_FLOW.length - 1 && <div className="down">↓</div>}
              </React.Fragment>
            ))}
          </div>

          <div style={{ marginTop: 12, fontSize: 10.5, fontWeight: 700, letterSpacing: '0.10em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>
            Status state-machine
          </div>
          <div className="status-chain">
            <CFStatusPill status="draft" />
            <span style={{ color: 'var(--ink-soft)' }}>→</span>
            <CFStatusPill status="recruiting" />
            <span style={{ color: 'var(--ink-soft)' }}>→</span>
            <CFStatusPill status="in_progress" />
            <span style={{ color: 'var(--ink-soft)' }}>→</span>
            <CFStatusPill status="completed" />
            <span style={{ color: 'var(--ink-soft)' }}>→</span>
            <CFStatusPill status="archived" />
          </div>
          <div style={{ fontSize: 10.5, color: 'var(--ink-soft)', marginTop: 6, lineHeight: 1.4 }}>
            <b>cancelled</b> can branch from any active state · <b>archived</b> is the only terminal state.
          </div>
        </div>
      </div>

      {/* What changes */}
      <div className="changes">
        <h3>What changes</h3>
        {CF_CHANGES.map((c, i) => (
          <div className="row" key={i}>
            <svg className="ic" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
              <path d="M3 8h10M9 4l4 4-4 4" />
            </svg>
            <div>
              <span className="from">{c.from}</span> &nbsp;→&nbsp; <b>{c.to}</b>
            </div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 18, fontSize: 11, color: 'var(--ink-soft)', lineHeight: 1.5 }}>
        <b style={{ color: 'var(--ink)' }}>Source:</b> apps/web/plans/260513-2151-campaign-flow-v2/plan.md ·
        phase-01 (wizard) · phase-02 (status actions) · phase-03 (creator apply) · phase-04 (timeline + reports).
      </div>
    </div>
  );
}

Object.assign(window, { CFMap });