/* === Overview screen — twin centerpieces (map + milestone rollup) + below === */

function Overview({ tweaks, onSelectState, selectedState }) {
  const M = window.MILESTONES;
  const [selectedM, setSelectedM] = React.useState(null);
  const mapRef = React.useRef(null);
  const [mapH, setMapH] = React.useState(null);
  React.useEffect(() => {
    if (!mapRef.current) return;
    const ro = new ResizeObserver(([e]) => setMapH(e.contentRect.height));
    ro.observe(mapRef.current);
    return () => ro.disconnect();
  }, []);
  const numericMilestones = M.filter((m) => m.kind === "numeric");
  const qualitativeMilestones = M.filter((m) => m.kind === "qualitative");
  const numericOnTrack = numericMilestones.filter((m) => m.rag === "green").length;
  const qualitativeOnTrack = qualitativeMilestones.filter((m) => m.rag === "green").length;
  const totals = {
    green: M.filter((m) => m.rag === "green").length,
    yellow: M.filter((m) => m.rag === "yellow").length,
    red: M.filter((m) => m.rag === "red").length
  };
  const numericYellow = numericMilestones.filter((m) => m.rag === "yellow").length;
  const numericRed = numericMilestones.filter((m) => m.rag === "red").length;
  const qualitativeYellow = qualitativeMilestones.filter((m) => m.rag === "yellow").length;
  const qualitativeRed = qualitativeMilestones.filter((m) => m.rag === "red").length;
  const live = window.STATES_LIVE.length;
  const enacted = window.STATES_ENACTED.length;
  const activeLeg = window.STATES_ACTIVE_LEG.length;
  const stuckWork = window.WORK_ITEMS.filter((w) => w.stuckSince || w.stageStatus && w.stageStatus.includes("stuck")).length;
  const contractsExpiring = window.CONTRACTS.filter((c) => {
    const d = new Date(c.expire);const t = new Date();
    const m = (d - t) / (1000 * 60 * 60 * 24 * 30);
    return m >= 0 && m <= 5;
  }).length;
  const contractsExpired = window.CONTRACTS.filter((c) => new Date(c.expire) < new Date()).length;
  const contractsPending = (window.PENDING_CONTRACTS || []).length;
  const publishedFY = window.WORK_ITEMS.filter(w => w.completedDate && window.inCurrentFY(w.completedDate)).length;

  return (
    <div className="content" data-comment-anchor="84062c7683-div-31-5">
      {/* HERO */}
      <div className="hero" data-comment-anchor="878744dba3-div-19-7">
        <div className="hero__top">
          <div className="eyebrow" data-comment-anchor="226e53cf9d-div-21-11">As of {window.ASOF} · {window.FY} board cycle</div>
          <h1 className="hero__lede" style={{ marginTop: 10 }} data-comment-anchor="75e69e081b-h1-22-11">
            {totals.green}/{M.length} milestones on track. <em>{totals.yellow} need a written note</em>; {totals.red} cannot be met as scoped.
          </h1>
        </div>

        <div className="hero__kpis">
          <div className="kpi-group">
            <div className="kpi-group__label">Milestones</div>
            <div className="kpi-group__cards">
              <KPI label="Numeric" value={numericOnTrack} suffix={`/${numericMilestones.length}`}
              delta={<RagDelta on={numericOnTrack === numericMilestones.length ? "on track" : "on track"} red={numericRed} yellow={numericYellow} />} />
              <KPI label="Qualitative" value={qualitativeOnTrack} suffix={`/${qualitativeMilestones.length}`}
              delta={<RagDelta on="on track" red={qualitativeRed} yellow={qualitativeYellow} />} />
              <KPI label="At-risk" value={totals.red + totals.yellow}
              delta={<RagDelta red={totals.red} yellow={totals.yellow} />} />
            </div>
          </div>
          <div className="kpi-group">
            <div className="kpi-group__label">Work</div>
            <div className="kpi-group__cards kpi-group__cards--two">
              <KPI label="In flight" value={window.WORK_ITEMS.filter(w => !w.completedDate).length}
              delta={stuckWork > 0 ?
              <span style={{ color: "var(--yellow)" }}>{stuckWork} stuck &gt; 30 days</span> :
              "no items stuck"} />
              <KPI label="Published this FY" value={publishedFY}
              delta="across products, events, TA" />
            </div>
          </div>
          <div className="kpi-group">
            <div className="kpi-group__label">Contracts</div>
            <div className="kpi-group__cards kpi-group__cards--two">
              <KPI label="Expiring" value={contractsExpiring + contractsExpired}
              delta={
              <>
                       {contractsExpiring - contractsExpired > 0 ? <span style={{ color: "var(--yellow)" }}>{contractsExpiring} within 5 mo</span> : null}
                       {contractsExpired > 0 ?
                <>
                           {contractsExpiring - contractsExpired > 0 ? " · " : null}
                           <span style={{ color: "var(--red)" }}>{contractsExpired} expired</span>
                         </> :
                null}
                     </>
              } />
              <KPI label="Pending" value={contractsPending}
              delta="in CAPS, not yet executed" />
            </div>
          </div>
        </div>

        <div className="hero__meta">
          <div className="hero__meta-item">
            <span className="eyebrow">Live programs</span>
            <div className="hero__meta-item-value">{live} states{window.HAS_DC_LIVE ? " + DC" : ""}</div>
          </div>
          <div className="hero__meta-item">
            <span className="eyebrow">Implementing</span>
            <div className="hero__meta-item-value">{enacted} states{window.HAS_DC_ENACTED ? " + DC" : ""}</div>
          </div>
          <div className="hero__meta-item">
            <span className="eyebrow">Legislation moving</span>
            <div className="hero__meta-item-value">{activeLeg} states this session</div>
          </div>
          <div className="hero__meta-item">
            <span className="eyebrow">Bills tracked</span>
            <div className="hero__meta-item-value">{window.BILLS.length} auto-IRA bills</div>
          </div>
        </div>
      </div>

      {/* TWIN CENTERPIECES */}
      <div className="twin">
        <div ref={mapRef} className="card map-card">
          <div className="map-toolbar">
            <div className="map-toolbar__title-row">
              <span className="map-toolbar__title">Jurisdictions</span>
              <TrifectaLegend />
            </div>
            <MapLegend />
          </div>
          <div className="us-map">
            <USTileMap onSelectState={onSelectState} selectedState={selectedState} showHatch={true} />
          </div>
        </div>

        <div className="card" style={mapH ? { maxHeight: mapH } : null}>
          <div className="card__head">
            <div>
              <h3>Milestone rollup · {window.FY}</h3>
              <div className="section-sub">{M.length} milestones · ⊕ numeric / ◇ qualitative</div>
            </div>
            <div className="row">
              <Chip kind="green" mono={false}>{totals.green}</Chip>
              <Chip kind="yellow" mono={false}>{totals.yellow}</Chip>
              <Chip kind="red" mono={false}>{totals.red}</Chip>
            </div>
          </div>
          <MilestoneRollup density={tweaks.rollupDensity} showODA={tweaks.showODA} onSelect={setSelectedM} />
        </div>
      </div>

      {selectedM ? <MilestonePanel id={selectedM} onClose={() => setSelectedM(null)} /> : null}

      {/* ODA BACKBONE — optional */}
      {tweaks.showODA ?
      <div style={{ marginBottom: 28 }}>
          <div className="section-head">
            <div>
              <div className="section-title">Objectives, Deliverables, and Activities (ODAs)</div>
              <div className="section-sub">The multi-year ODAs that inform milestones.</div>
            </div>
            <div className="row">
              <Chip kind="navy">{(window.META && window.META.cycleLabel) || "current cycle"}</Chip>
            </div>
          </div>
          <ODABackbone />
        </div> :
      null}

      {/* EXCEPTIONS */}
      <ExceptionsSurface />

      <div style={{ marginTop: 28 }}>
        <FirmnessTimeline
          fuzziness={tweaks.timelineFuzziness}
          title="Upcoming"
          sub="Milestone-relevant work + contract expiries · navy = on track, yellow = at risk, red = expired/blocked."
          items={window.workItemsToTimeline(window.WORK_ITEMS).slice(0, 8)}
          contracts={window.contractsToTimeline(window.CONTRACTS).slice(0, 6)}
          contractsLabel="Contracts"
        />
      </div>
    </div>);

}

function KPI({ label, value, suffix, delta, negative }) {
  return (
    <div className="kpi">
      <div className="kpi__label">{label}</div>
      <div className="kpi__value">{value}{suffix ? <sup>{suffix}</sup> : null}</div>
      <div className={`kpi__delta ${negative ? "kpi__delta--down" : ""}`}>{delta}</div>
    </div>);

}

function RagDelta({ on, red, yellow }) {
  const parts = [];
  if (on) parts.push(<span key="on">{on}</span>);
  if (red > 0) parts.push(<span key="r" style={{ color: "var(--red)" }}>{red} red</span>);
  if (yellow > 0) parts.push(<span key="y" style={{ color: "var(--yellow)" }}>{yellow} yellow</span>);
  if (parts.length === 0) return <span style={{ color: "var(--green)" }}>all green</span>;
  return parts.reduce((acc, p, i) => i === 0 ? [p] : [...acc, " · ", p], []);
}

Object.assign(window, { Overview });