// atlas-figures.jsx
// Rich visual figures used in the Atlas (and in era chapters where helpful):
// trojan horse flow, domains table, naming bridge, translation layer,
// same-problem comparison, when-each-fits.

function FigureTrojan({ saveable, onSave, era }) {
  const tf = window.TROJAN_FLOW;
  return (
    <figure className="fig-trojan">
      <div className="trojan-flow">
        <div className="trojan-panel gate">
          <div className="t-label">{tf.gate.label}</div>
          <div className="t-headline">{tf.gate.headline}</div>
          <div className="t-detail">{tf.gate.detail}</div>
        </div>
        <div className="trojan-arrow">
          <div className="arrow-line"></div>
          <div className="arrow-label">becomes</div>
        </div>
        <div className="trojan-panel delivered">
          <div className="t-label">{tf.delivered.label}</div>
          <div className="t-headline">{tf.delivered.headline}</div>
          <div className="t-detail">{tf.delivered.detail}</div>
        </div>
      </div>
      <div className="trojan-callout">
        <div className="tc-label">{tf.principle.label}</div>
        <div className="tc-text">
          <strong>{tf.principle.bold}</strong> {tf.principle.rest}
        </div>
      </div>
    </figure>
  );
}

function FigureDomains({ saveable, onSave, era }) {
  const domains = window.DOMAINS;
  return (
    <figure className="fig-domains">
      <div className="domain-header">
        <div>Domain</div>
        <div className="conv-h">Conventional take</div>
        <div>Post-conventional take</div>
        <div className="hypo-h">Our hypothesis</div>
      </div>
      <div className="domain-list">
        {domains.map((d, i) => (
          <div key={i} className="domain-row">
            <div className="dr-cell">
              <div className="dr-name">{d.name}</div>
              <div className={`dr-tier ${d.tier.toLowerCase()}`}>{d.tier} tier</div>
            </div>
            <div className="dr-cell conv">
              <div className="dr-header">Conventional</div>
              <div className="dr-text">{d.conv}</div>
            </div>
            <div className="dr-cell post">
              <div className="dr-header">Post-conventional</div>
              <div className="dr-text">{d.post}</div>
            </div>
            <div className="dr-cell hypo">
              <div className="dr-header">Hypothesis</div>
              <div className="dr-text">{d.hypo}</div>
              {saveable && (
                <BookmarkButton
                  saved={false}
                  onClick={() => onSave({
                    kind: 'bookmark',
                    text: `${d.name} · Hypothesis: ${d.hypo}`,
                    eraId: era.id, eraTitle: era.title
                  })}
                  title="Save this hypothesis"
                />
              )}
            </div>
          </div>
        ))}
      </div>
    </figure>
  );
}

function FigureBridge({ saveable, onSave, era }) {
  const rows = window.BRIDGE;
  return (
    <figure className="fig-bridge">
      <div className="bridge">
        <div className="bridge-header">
          <div>Past consulting term</div>
          <div></div>
          <div>Current site domain</div>
          <div></div>
          <div>Proposed alternative</div>
        </div>
        {rows.map((r, i) => (
          <div key={i} className="bridge-row">
            <div className="bridge-cell conv-term">{r.past}</div>
            <div className="bridge-arrow"></div>
            <div className="bridge-cell current">{r.current}</div>
            <div className="bridge-arrow"></div>
            <div className="bridge-cell future">{r.future}</div>
          </div>
        ))}
      </div>
    </figure>
  );
}

function FigureTranslation({ saveable, onSave, era }) {
  const rows = window.TRANSLATION;
  return (
    <figure className="fig-translation">
      <div className="translation-grid">
        <div className="tg-head domain">Domain</div>
        <div className="tg-head market">What the market hears</div>
        <div className="tg-head real">What we actually mean</div>
        {rows.map((r, i) => (
          <React.Fragment key={i}>
            <div className="tg-domain">{r.domain}</div>
            <div className="tg-market">"{r.market}"</div>
            <div className="tg-real">
              "{r.real}"
              {saveable && (
                <button
                  className="tg-save"
                  onClick={() => onSave({
                    kind: 'bookmark',
                    text: `${r.domain} — what we actually mean: ${r.real}`,
                    eraId: era.id, eraTitle: era.title
                  })}
                  title="Save this translation"
                >
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
                </button>
              )}
            </div>
          </React.Fragment>
        ))}
      </div>
    </figure>
  );
}

function FigureCompare({ saveable, onSave, era }) {
  const c = window.COMPARE;
  return (
    <figure className="fig-compare">
      <div className="compare-frame">
        <div className="compare-problem">
          <div className="cp-label">The problem</div>
          <div className="cp-text">{c.problem}</div>
        </div>
        <div className="compare-paths">
          <div className="compare-path conv">
            <div className="cpath-label">{c.conv.label}</div>
            <h4>{c.conv.title}</h4>
            {c.conv.steps.map((s, i) => (
              <div key={i} className="compare-step">
                <span className="cs-num">{String(i + 1).padStart(2, '0')}</span>
                {s}
              </div>
            ))}
            <div className="compare-outcome">
              <div className="co-label">Outcome</div>
              <div className="co-text">{c.conv.outcome}</div>
            </div>
          </div>
          <div className="compare-path post">
            <div className="cpath-label">{c.post.label}</div>
            <h4>{c.post.title}</h4>
            {c.post.steps.map((s, i) => (
              <div key={i} className="compare-step">
                <span className="cs-num">{String(i + 1).padStart(2, '0')}</span>
                {s}
              </div>
            ))}
            <div className="compare-outcome">
              <div className="co-label">Outcome</div>
              <div className="co-text">{c.post.outcome}</div>
            </div>
          </div>
        </div>
      </div>
    </figure>
  );
}

function FigureWhen({ saveable, onSave, era }) {
  const w = window.WHEN_EACH;
  return (
    <figure className="fig-when">
      <div className="when-grid">
        <div className="when-col conv">
          <h3>{w.conv.title}</h3>
          <div className="when-sub">use this dispatch when…</div>
          <div className="when-section">
            <h5>Fits</h5>
            <ul>
              {w.conv.fits.map((f, i) => <li key={i}>{f}</li>)}
            </ul>
          </div>
          <div className="when-section">
            <h5>Examples</h5>
            <ul>
              {w.conv.examples.map((e, i) => <li key={i}>{e}</li>)}
            </ul>
          </div>
        </div>
        <div className="when-col post">
          <h3>{w.post.title}</h3>
          <div className="when-sub">use this dispatch when…</div>
          <div className="when-section">
            <h5>Fits</h5>
            <ul>
              {w.post.fits.map((f, i) => <li key={i}>{f}</li>)}
            </ul>
          </div>
          <div className="when-section">
            <h5>Examples</h5>
            <ul>
              {w.post.examples.map((e, i) => <li key={i}>{e}</li>)}
            </ul>
          </div>
        </div>
      </div>
    </figure>
  );
}

// =====================================================
// Atlas chapter renderer (multiple sections, one chapter)
// =====================================================
function AtlasChapter({ atlas, onSavedPassage, isSaved, saveable, onSidenoteClick }) {
  return (
    <article
      className={`chapter atlas-chapter palette-${atlas.palette} is-dark`}
      data-era={atlas.id}
      data-era-title={atlas.title}
      style={eraThemeStyle(atlas)}
    >
      <header className="chapter-opener atlas-opener">
        <div className="opener-meta">
          <div className="opener-numwrap"><span className="opener-num">{atlas.number}</span></div>
          <div className="opener-chapter">{atlas.chapter}</div>
        </div>
        <h1 className="opener-title">{atlas.title}</h1>
        <div className="opener-subtitle">{atlas.subtitle}</div>
        <div className="opener-dates">{atlas.dates}</div>
        <div className="opener-motif"><EraMotif kind="compass" size={84} /></div>
        <div className="opener-motto">"{atlas.motto}"</div>
        <p className="opener-intro">{atlas.intro}</p>
      </header>

      <div className="atlas-sections">
        {atlas.sections.map((sec) => (
          <section key={sec.id} className="atlas-section" id={'atlas-' + sec.id}>
            <div className="atlas-section-head">
              <div className="atlas-section-num">{sec.num}</div>
              <h2 className="atlas-section-title">{sec.title}</h2>
            </div>
            <div className="atlas-section-body">
              {sec.blocks.map((b, i) => (
                <Block
                  key={i}
                  block={b}
                  era={atlas}
                  onSavedPassage={onSavedPassage}
                  isSaved={isSaved}
                  saveable={saveable}
                  onSidenoteClick={onSidenoteClick}
                />
              ))}
            </div>
          </section>
        ))}
      </div>
    </article>
  );
}

// =====================================================
// Atlas-specific motif: compass
// =====================================================
const _origMotif = window.EraMotif;
window.EraMotif = function EraMotifWithCompass(props) {
  if (props.kind === 'compass') {
    const s = props.size || 56;
    const c = props.color || 'currentColor';
    return (
      <svg width={s} height={s} viewBox="0 0 60 60" fill="none" stroke={c} strokeWidth="1">
        <circle cx="30" cy="30" r="22"/>
        <circle cx="30" cy="30" r="2" fill={c}/>
        <polygon points="30,10 33,30 30,28 27,30" fill={c} stroke={c} strokeWidth="0.5"/>
        <polygon points="30,50 27,30 30,32 33,30" fill="none" stroke={c} strokeWidth="0.5"/>
        <text x="30" y="9" textAnchor="middle" fontSize="5" fill={c} fontFamily="serif">N</text>
        <text x="30" y="56" textAnchor="middle" fontSize="5" fill={c} fontFamily="serif">S</text>
      </svg>
    );
  }
  return _origMotif(props);
};

Object.assign(window, {
  FigureTrojan, FigureDomains, FigureBridge, FigureTranslation,
  FigureCompare, FigureWhen, AtlasChapter,
});