/* === Milestones rollup === */

function MilestoneRow({ m, density = "cards", showODA = true, onClick }) {
  const isNumeric = m.kind === "numeric";
  const pct = isNumeric ? Math.min(100, Math.round((m.current / m.target) * 100)) : null;
  return (
    <div
      className="milestone-row"
      onClick={onClick}
      style={{
        borderLeft: m.rag === "red" ? "3px solid var(--red)" : m.rag === "yellow" ? "3px solid var(--yellow)" : "3px solid transparent",
        paddingLeft: 14,
      }}
    >
      <div className="milestone-row__glyph" title={isNumeric ? "Numeric target" : "Qualitative — hand-rated"}>{m.glyph}</div>
      <div className="milestone-row__main">
        <div className="milestone-row__title">{m.title}</div>
        {density !== "table" && showODA ? (
          <div className="milestone-row__meta">
            {m.oda.map(id => <ODAChip key={id} id={id} />)}
            <span className="chip chip--soft">{m.workItems} work items</span>
            {m.note ? <span className="chip chip--ghost" style={{ color: "var(--ink-mute)" }}>{m.note}</span> : null}
          </div>
        ) : null}
        {isNumeric && density !== "table" ? <div className="milestone-row__bar"><ProgressBar value={m.current} max={m.target} rag={m.rag} /></div> : null}
        {density === "cards" && m.rationale ? (
          <div className={`milestone-row__rationale ${m.rag === "red" ? "is-red" : ""}`}>
            <strong>{m.rationale.label}</strong>
            {m.rationale.text}
          </div>
        ) : null}
      </div>
      <div className="milestone-row__counts">
        {isNumeric ? (
          <NumericMilestoneCounts current={m.current} target={m.target}
            secondaryCurrent={m.secondaryCurrent} secondaryTarget={m.secondaryTarget}
            secondaryLabel={m.secondaryLabel} unit={m.unit} />
        ) : (
          <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-mute)", textAlign: "right" }}>
            qualitative<br />hand-rated
          </div>
        )}
        <RagBadge rag={m.rag} />
      </div>
    </div>
  );
}

function MilestoneRollup({ density = "cards", showODA = true, onSelect }) {
  const M = window.MILESTONES;
  return (
    <div className="milestone-rollup">
      {M.map(m => <MilestoneRow key={m.id} m={m} density={density} showODA={showODA} onClick={() => onSelect && onSelect(m.id)} />)}
    </div>
  );
}

function ODABackbone({ collapsed = false }) {
  return (
    <div className="card" style={{ padding: "10px 14px" }}>
      <div className="row row--between" style={{ marginBottom: 8 }}>
        <div className="eyebrow">Objectives · Deliverables · Activities</div>
        <div className="mono faint" style={{ fontSize: 11 }}>{(window.META && window.META.cycleLabel) || "current cycle"}</div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
        {window.ODA.map(o => (
          <div key={o.id} style={{ borderTop: "1px solid var(--rule)", paddingTop: 8 }}>
            <div style={{ display: "flex", gap: 6, alignItems: "baseline" }}>
              <span className="mono" style={{ fontSize: 11, color: "var(--navy)", fontWeight: 600 }}>{o.id}</span>
              <span style={{ fontSize: 12, fontWeight: 600, color: "var(--ink)" }}>{o.short}</span>
            </div>
            {!collapsed && (
              <div style={{ marginTop: 4, display: "flex", flexDirection: "column", gap: 2 }}>
                {o.deliverables.map(d => (
                  <div key={d.id} style={{ display: "flex", gap: 6, fontSize: 11, color: "var(--ink-2)" }}>
                    <span className="mono" style={{ color: "var(--ink-mute)" }}>{d.id}</span>
                    <span style={{ flex: 1 }}>{d.title}</span>
                    {d.conditional ? <span style={{ color: "var(--yellow)", fontSize: 10 }} title="Conditional — board latitude">⚠</span> : null}
                    {d.target ? <span className="mono faint" style={{ fontSize: 10 }}>{d.target}</span> : null}
                  </div>
                ))}
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { MilestoneRow, MilestoneRollup, ODABackbone });