// Traction Forecasting . 24-month projection table (Section 05)
function TractionProjection({ data, projection }) {
  // Pick milestones to display: M1, M3, M6, M9, M12, M15, M18, M21, M24
  const horizon = data.meta.horizonMonths;
  const milestones = [1, 3, 6, 9, 12, 15, 18, 21, 24].filter(m => m <= horizon);
  const m11n = data.meta.monetization || {};
  const showTake = m11n.takeRateOn;
  const showSupplySub = m11n.supplySubOn;
  const showDemandSub = m11n.demandSubOn;
  const multiStream = (showTake?1:0) + (showSupplySub?1:0) + (showDemandSub?1:0) > 1;
  return (
    <section className="lm-page">
      <div className="lm-section-num">Section 05</div>
      <h2 className="lm-h2">{horizon}-month projection.</h2>
      <p className="lm-body" style={{maxWidth:680, marginBottom:8}}>The rollup. Active users, transactions, GMV, and revenue . Projected from your supply and demand cohorts, gated by your match rate. The numbers below are computed live; they will move when you change any input above.</p>

      <div className="lm-table-wrap">
        <table className="lm-table">
          <thead>
            <tr>
              <th>Metric</th>
              {milestones.map(m => <th key={m}>M{m}</th>)}
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Active suppliers</td>
              {milestones.map(m => <td key={m}>{fmt(projection.supply[m-1]?.active || 0)}</td>)}
            </tr>
            <tr>
              <td>Active buyers</td>
              {milestones.map(m => <td key={m}>{fmt(projection.demand[m-1]?.active || 0)}</td>)}
            </tr>
            <tr>
              <td>Transactions / month</td>
              {milestones.map(m => <td key={m}>{fmt(projection.matched[m-1] || 0)}</td>)}
            </tr>
            <tr>
              <td>GMV / month</td>
              {milestones.map(m => <td key={m}>{fmtCurrency(projection.gmv[m-1] || 0)}</td>)}
            </tr>
            {multiStream && showTake && (
              <tr className="lm-row-sub">
                <td>↳ Take revenue</td>
                {milestones.map(m => <td key={m}>{fmtCurrency(projection.takeRevenue[m-1] || 0)}</td>)}
              </tr>
            )}
            {multiStream && showSupplySub && (
              <tr className="lm-row-sub">
                <td>↳ Supplier subs</td>
                {milestones.map(m => <td key={m}>{fmtCurrency(projection.supplySubRevenue[m-1] || 0)}</td>)}
              </tr>
            )}
            {multiStream && showDemandSub && (
              <tr className="lm-row-sub">
                <td>↳ Buyer subs</td>
                {milestones.map(m => <td key={m}>{fmtCurrency(projection.demandSubRevenue[m-1] || 0)}</td>)}
              </tr>
            )}
            <tr className="lm-row-total">
              <td>Net revenue / month</td>
              {milestones.map(m => <td key={m}>{fmtCurrency(projection.netTake[m-1] || 0)}</td>)}
            </tr>
          </tbody>
        </table>
      </div>

      <div className="lm-page-section">
        <h4 className="lm-h4">Cumulative</h4>
        <div className="lm-kpis">
          <div className="lm-kpi"><div className="lm-kpi-l">Cumulative GMV</div><div className="lm-kpi-v">{fmtCurrency(projection.cumGMV)}</div><div className="lm-kpi-d">Across {horizon} months</div></div>
          <div className="lm-kpi"><div className="lm-kpi-l">Cumulative net revenue</div><div className="lm-kpi-v">{fmtCurrency(projection.cumNetTake)}</div><div className="lm-kpi-d">All streams, after costs</div></div>
          <div className="lm-kpi"><div className="lm-kpi-l">Total transactions</div><div className="lm-kpi-v">{fmt(projection.cumTx)}</div><div className="lm-kpi-d">Across {horizon} months</div></div>
          <div className="lm-kpi"><div className="lm-kpi-l">Exit-month run rate</div><div className="lm-kpi-v">{fmtCurrency((projection.netTake[horizon-1]||0) * 12)}</div><div className="lm-kpi-d">Annualized M{horizon}</div></div>
        </div>
      </div>

      {multiStream && (
        <div className="lm-page-section">
          <h4 className="lm-h4">Revenue mix · cumulative</h4>
          <RevenueMixBar takeR={projection.cumTake} supplyR={projection.cumSupplySub} demandR={projection.cumDemandSub}/>
        </div>
      )}
    </section>
  );
}

function RevenueMixBar({ takeR, supplyR, demandR }) {
  const total = (takeR||0) + (supplyR||0) + (demandR||0);
  if (total <= 0) return null;
  const tp = (takeR/total)*100, sp = (supplyR/total)*100, dp = (demandR/total)*100;
  return (
    <div className="lm-mix">
      <div className="lm-mix-bar">
        {takeR>0 && <div className="lm-mix-seg lm-mix-take" style={{width: tp+'%'}} title={`Take ${tp.toFixed(0)}%`}/>}
        {supplyR>0 && <div className="lm-mix-seg lm-mix-supply" style={{width: sp+'%'}} title={`Supply ${sp.toFixed(0)}%`}/>}
        {demandR>0 && <div className="lm-mix-seg lm-mix-demand" style={{width: dp+'%'}} title={`Demand ${dp.toFixed(0)}%`}/>}
      </div>
      <div className="lm-mix-legend">
        {takeR>0 && <span><i className="lm-mix-dot lm-mix-take"/> Take rate · {fmtCurrency(takeR)} ({tp.toFixed(0)}%)</span>}
        {supplyR>0 && <span><i className="lm-mix-dot lm-mix-supply"/> Supplier subs · {fmtCurrency(supplyR)} ({sp.toFixed(0)}%)</span>}
        {demandR>0 && <span><i className="lm-mix-dot lm-mix-demand"/> Buyer subs · {fmtCurrency(demandR)} ({dp.toFixed(0)}%)</span>}
      </div>
    </div>
  );
}

Object.assign(window, { TractionProjection, RevenueMixBar });