// Right pane — KPI hero, breakdown, projection, break-even, calendar, compare table

function Results({ scenarios, activeId, compareMode, mkt }) {
  const { Card: RCard, Pill, fmtMoney: F$, fmtPct: F_p, fmtNum: F_n } = window.UI;
  const { WaterfallBreakdown, CostDonut, CalendarHeatmap, ProjectionChart } = window.Charts;
  const active = scenarios.find(s => s.id === activeId);
  const result = window.FBA.calc.compute(active.input);
  const sym = mkt.symbol;
  const money = (n, d = 2) => F$(n, sym, mkt.locale, d);

  // Margin tone
  const marginTone = result.margin >= 0.25 ? "good" : result.margin >= 0.10 ? "ok" : result.margin >= 0 ? "warn" : "bad";

  return (
    <div className="results-pane">
      {/* ───── Hero KPI ───── */}
      <div className={"hero hero-" + marginTone}>
        <div className="hero-eyebrow">
          <span>NET PROFIT PER UNIT</span>
          <Pill tone={marginTone}>
            {result.margin >= 0.25 ? "Healthy" :
             result.margin >= 0.10 ? "Tight" :
             result.margin >= 0   ? "Marginal" : "Loss"}
          </Pill>
        </div>
        <div className="hero-figure">
          <span className="hero-amount mono">{money(result.profit)}</span>
        </div>
        <div className="hero-stats">
          <div className="hero-stat">
            <div className="hero-stat-label">Margin</div>
            <div className="hero-stat-val mono">{F_p(result.margin)}</div>
          </div>
          <div className="hero-stat">
            <div className="hero-stat-label">ROI</div>
            <div className="hero-stat-val mono">{F_p(result.roi)}</div>
          </div>
          <div className="hero-stat">
            <div className="hero-stat-label">Revenue</div>
            <div className="hero-stat-val mono">{money(result.revenue)}</div>
          </div>
          <div className="hero-stat">
            <div className="hero-stat-label">Total fees</div>
            <div className="hero-stat-val mono">{money(result.totalFees)}</div>
          </div>
        </div>
      </div>

      {compareMode ? (
        <CompareTable scenarios={scenarios} mkt={mkt} />
      ) : (
        <>
          {/* ───── Cost breakdown ───── */}
          <RCard title="Per-unit breakdown" right={<span className="card-sub mono">{money(result.revenue)} → {money(result.profit)}</span>}>
            <WaterfallBreakdown result={result} fmtMoney={money} />
          </RCard>

          {/* ───── Two-up: Break-even + Donut ───── */}
          <div className="result-grid two">
            <RCard title="Break-even">
              <BreakEvenCard result={result} input={active.input} money={money} />
            </RCard>
            <RCard title="Cost composition">
              <CostDonut result={result} fmtMoney={money} />
            </RCard>
          </div>

          {/* ───── Monthly projection ───── */}
          <RCard
            title="Monthly projection"
            right={<span className="card-sub mono">@ {active.input.unitsPerDay} units/day</span>}
          >
            <div className="proj-stats">
              <ProjStat label="Daily profit"   value={money(result.dailyProfit)} />
              <ProjStat label="Weekly profit"  value={money(result.dailyProfit * 7)} />
              <ProjStat label="Monthly profit" value={money(result.monthlyProfit)} primary />
              <ProjStat label="Annual profit"  value={money(result.annualProfit)} />
            </div>
            <ProjectionChart result={result} fmtMoney={money} />
            <div className="proj-foot">
              <span>12-month forecast — Q4 seasonal lift modeled.</span>
              <span className="mono">Annual revenue {money(result.dailyRevenue * 365, 0)}</span>
            </div>
          </RCard>

          {/* ───── Calendar heatmap ───── */}
          <RCard title="Profit calendar — next 30 days" right={<span className="card-sub">Weekend lift applied</span>}>
            <CalendarHeatmap result={result} fmtMoney={money} />
          </RCard>
        </>
      )}
    </div>
  );
}

function ProjStat({ label, value, primary }) {
  return (
    <div className={"proj-stat " + (primary ? "primary" : "")}>
      <div className="proj-stat-label">{label}</div>
      <div className="proj-stat-val mono">{value}</div>
    </div>
  );
}

function BreakEvenCard({ result, input, money }) {
  const { fmtNum: F_n } = window.UI;
  const beUnits = isFinite(result.breakEvenUnits) ? Math.ceil(result.breakEvenUnits) : null;
  const beDays  = isFinite(result.daysToBE) ? result.daysToBE : null;
  const beShareOfOrder = beUnits && input.orderQty ? (beUnits / input.orderQty) : null;

  return (
    <div className="be-card">
      <div className="be-headline">
        <div className="be-num mono">
          {beUnits === null ? "—" : F_n(beUnits)}
        </div>
        <div className="be-label">units to recoup<br/>{money(result.upfront, 0)} inventory</div>
      </div>
      <div className="be-bar">
        <div
          className="be-bar-fill"
          style={{ width: Math.min(100, ((beShareOfOrder || 0) * 100)) + "%" }}
        />
        <div className="be-bar-labels">
          <span>0</span>
          <span className="mono">{F_n(input.orderQty)} ordered</span>
        </div>
      </div>
      <div className="be-meta">
        <div className="be-meta-row">
          <span>Days to break even</span>
          <span className="mono">{beDays === null ? "—" : beDays < 1 ? "<1 day" : Math.ceil(beDays) + " days"}</span>
        </div>
        <div className="be-meta-row">
          <span>Cash recovered / sale</span>
          <span className="mono">{money(result.cashPerSale)}</span>
        </div>
        <div className="be-meta-row">
          <span>Inventory at risk</span>
          <span className="mono">{money(result.upfront, 0)}</span>
        </div>
      </div>
    </div>
  );
}

function CompareTable({ scenarios, mkt }) {
  const { Card: RCard, fmtMoney: F$, fmtPct: F_p, fmtNum: F_n } = window.UI;
  const { CATEGORIES, SIZE_TIERS } = window.FBA;
  const sym = mkt.symbol;
  const money = (n, d = 2) => F$(n, sym, mkt.locale, d);
  const rows = scenarios.map(s => ({ s, r: window.FBA.calc.compute(s.input) }));
  const sharedProduct = rows[0]?.s.input;

  const metrics = [
    { key: "sellPrice",    label: "Sell price",       fmt: r => money(r.r.revenue) },
    { key: "landed",       label: "Landed cost",      fmt: r => money(r.r.landed) },
    { key: "totalFees",    label: "Total fees",       fmt: r => money(r.r.totalFees) },
    { key: "profit",       label: "Profit / unit",    fmt: r => money(r.r.profit), strong: true },
    { key: "margin",       label: "Margin",           fmt: r => F_p(r.r.margin) },
    { key: "roi",          label: "ROI",              fmt: r => F_p(r.r.roi) },
    { key: "breakEven",    label: "Break-even units", fmt: r => isFinite(r.r.breakEvenUnits) ? F_n(Math.ceil(r.r.breakEvenUnits)) : "—" },
    { key: "monthly",      label: "Monthly profit",   fmt: r => money(r.r.monthlyProfit, 0), strong: true },
    { key: "annual",       label: "Annual profit",    fmt: r => money(r.r.annualProfit, 0) },
  ];

  // Find best per row for highlight
  const bestIdx = (row) => {
    let best = 0;
    let bestVal = -Infinity;
    rows.forEach((rr, i) => {
      let v = 0;
      switch (row.key) {
        case "sellPrice":  v = rr.r.revenue; break;
        case "landed":     v = -rr.r.landed; break;
        case "totalFees":  v = -rr.r.totalFees; break;
        case "profit":     v = rr.r.profit; break;
        case "margin":     v = rr.r.margin; break;
        case "roi":        v = rr.r.roi; break;
        case "breakEven":  v = -rr.r.breakEvenUnits; break;
        case "monthly":    v = rr.r.monthlyProfit; break;
        case "annual":     v = rr.r.annualProfit; break;
      }
      if (v > bestVal) { bestVal = v; best = i; }
    });
    return best;
  };

  return (
    <RCard title="Scenario comparison" right={<span className="card-sub">Best value highlighted per row</span>}>
      {sharedProduct && (
        <div className="cmp-product-banner">
          <window.UI.ProductGlyph kind={sharedProduct.image} size={28} />
          <div className="cmp-product-text">
            <div className="cmp-product-label">Comparing strategies for</div>
            <div className="cmp-product-name">{sharedProduct.title}</div>
          </div>
          <div className="cmp-product-meta mono">
            {CATEGORIES[sharedProduct.category]?.name} · {SIZE_TIERS[sharedProduct.sizeTier]?.group}
          </div>
        </div>
      )}
      <div className="compare-wrap">
        <table className="compare-table">
          <thead>
            <tr>
              <th></th>
              {rows.map(r => (
                <th key={r.s.id}>
                  <div className="cmp-th">
                    <span className="cmp-dot" style={{ background: r.s.color }} />
                    <span className="cmp-name">{r.s.name}</span>
                  </div>
                  <div className="cmp-sub mono">
                    {money(r.s.input.sellPrice)} sell · {money(r.s.input.unitCost)} cost
                  </div>
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {metrics.map(m => {
              const best = bestIdx(m);
              return (
                <tr key={m.key} className={m.strong ? "strong" : ""}>
                  <th>{m.label}</th>
                  {rows.map((r, i) => (
                    <td key={r.s.id} className={"mono " + (i === best && rows.length > 1 ? "best" : "")}>
                      {m.fmt(r)}
                    </td>
                  ))}
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </RCard>
  );
}

window.Results = Results;