/* === What-changed / exception surface — three-column digest === */

function ExceptionsSurface() {
  const c = window.CHANGES;
  return (
    <div>
      <div className="section-head" data-comment-anchor="22d75b112c-div-7-7">
        <div>
          <div className="section-title">What's changed</div>
          <div className="section-sub">Auto-generated from data syncs — wins, risks, and stuck items — with human-written context.</div>
        </div>
        <div className="row">
          <Chip kind="soft">window: 14 days</Chip>
          <button className="btn btn--ghost">Open full feed →</button>
        </div>
      </div>

      <div className="exceptions">
        <ExcCol
          title="Newly won"
          subtitle="Milestone-relevant completions or commitments."
          kind="won"
          glyph="✓"
          items={c.wins} />

        <ExcCol
          title="At risk"
          subtitle="Newly amber or red; commitments now uncertain."
          kind="risk"
          glyph="!"
          items={c.risks} />

        <ExcCol
          title="Blocked / languishing"
          subtitle="Work items stuck past stage thresholds."
          kind="blocked"
          glyph="—"
          items={c.blocked} />

      </div>
    </div>);

}

function ExcCol({ title, subtitle, kind, glyph, items }) {
  return (
    <div>
      <div className={`exc-col__head exc-col__head--${kind}`}>
        <span className="exc-glyph">{glyph}</span>
        <div style={{ flex: 1 }}>
          <h3>{title}</h3>
          <div className="section-sub" style={{ marginTop: 2 }}>{subtitle}</div>
        </div>
        <span className="mono faint" style={{ fontSize: 11 }}>{items.length}</span>
      </div>
      <div className="exc-col__items">
        {items.map((it, idx) =>
        <div className="exc-item" key={idx}>
            <div className="exc-item__hd">
              <div className="exc-item__title">{it.title}</div>
              <div className="exc-item__date">{it.date}</div>
            </div>
            <div className="exc-item__body">{it.body}</div>
            <div className="exc-item__meta">
              {it.tags.map((t) => {
              if (t.startsWith("M-")) return <ODAChip key={t} id={t} />;
              if (t === "RED") return <Chip key={t} kind="red">RED</Chip>;
              return <Chip key={t} kind="ghost">{t}</Chip>;
            })}
              <span style={{ flex: 1 }}></span>
              <SourceTag source={it.source} />
            </div>
          </div>
        )}
      </div>
    </div>);

}

Object.assign(window, { ExceptionsSurface, ExcCol });

function SourceTag({ source }) {
  const map = {
    "auto": { label: "AUTO · from sync", color: "var(--ink-mute)" },
    "manual": { label: "MANUAL", color: "var(--ink-mute)" },
    "auto+manual": { label: "AUTO + annotation", color: "var(--ink-mute)" }
  }[source] || { label: "—", color: "var(--ink-faint)" };
  return (
    <span style={{
      fontFamily: "var(--mono)", fontSize: 10, fontWeight: 500,
      color: map.color, letterSpacing: ".1em", textTransform: "uppercase",
      paddingLeft: 8, borderLeft: "1px solid var(--rule)"
    }}>{map.label}</span>);

}