// public/ways-to-invest.jsx — window.WaysToInvest. Dynamic tier comparison for
// the project panel. One row per tier, sourced from col.cells (the same
// residency-resolved tier→offering map the matrix uses), in TIER_ORDER — so
// residency-variant offerings (e.g. MEZZ-US vs EQ-MX) resolve to the right
// one for the profile instead of showing duplicate rows.
//
// Each row mirrors the matrix cell's eligibility state (lit / strategic /
// strategic-idle / gray) via the same derivation as matrix/Tower.jsx, so a
// tier that's no longer applicable to the investor reads gray here too.
function WaysToInvest({ col, lang, onOpenOffering, profile }) {
  const order = window.TIER_ORDER || [];
  // Same Investment-type filter dimming as the matrix (matrix.jsx → Tower.jsx):
  // rows whose tier isn't in the selected typeInterest are de-emphasized, never
  // hidden. Keeps the project-panel list in lockstep with the grid.
  const mutedTiers = window.mutedTypeTiers ? window.mutedTypeTiers(profile) : null;
  // "Buy a Home" (DG-OWN-LAND) is a direct unit purchase, not a return-bearing
  // investment, so its row hides the Min/Target/Horizon stats.
  const BUY_HOME_TIER = "DG-OWN-LAND";
  const cells = order
    .map((tier) => ({ tierId: tier, cell: col.cells && col.cells.get(tier) }))
    .filter(({ cell }) => cell && cell.product);
  const rows = cells.map(({ tierId, cell }) => {
    const p = cell.product;
    const hideStats = tierId === BUY_HOME_TIER;
    // Same state derivation as matrix/Tower.jsx so coloring stays in lockstep.
    const state = cell.strategicActive
      ? "strategic"
      : cell.strategicOnly
        ? "strategic-idle"
        : cell.eligible
          ? "lit"
          : "gray";
    // Prefer the per-offering label override (e.g. DevCo "Rev Share") from the
    // bundle, then the shared tier label, then the raw group id.
    const tier = (p.headerLabel && window.pickLang(p.headerLabel, lang))
      || window.pickLang((window.TIER_LABELS && window.TIER_LABELS[p.displayGroupId]) || {}, lang)
      || p.displayGroupId;
    // A null amount means the minimum is not published (terms shared on engagement).
    const min = p.minimumInvestment && p.minimumInvestment.amount != null
      ? window.formatCurrencyShort(p.minimumInvestment.amount)
      : "—";
    const es = lang === "es";
    // One number when both ends match ("10% IRR", not "10–10% IRR"), the way
    // the horizon below already reads.
    const span = ([lo, hi]) => (lo === hi ? `${lo}` : `${lo}–${hi}`);
    let target = "—";
    if (p.targetReturn && Array.isArray(p.targetReturn.irr)) {
      target = `${span(p.targetReturn.irr)}% ${es ? "TIR" : "IRR"}`;
    } else if (p.targetReturn && Array.isArray(p.targetReturn.yield)) {
      target = `${span(p.targetReturn.yield)}% ${es ? "rendimiento" : "yield"}`;
    }
    const years = (n) => (es ? (n === 1 ? "año" : "años") : "yr");
    const horizon = Array.isArray(p.holdPeriodYears)
      ? (p.holdPeriodYears[0] === p.holdPeriodYears[1]
          ? `${p.holdPeriodYears[1]} ${years(p.holdPeriodYears[1])}`
          : `${p.holdPeriodYears[0]}–${p.holdPeriodYears[1]} ${years(p.holdPeriodYears[1])}`)
      : "—";
    const isMuted = !!(mutedTiers && mutedTiers.has(tierId));
    return { p, state, tier, min, target, horizon, hideStats, isMuted };
  });
  if (rows.length === 0) return null;
  return (
    <div className="r-wti">
      <div className="r-wti-head">
        <span>{lang === "es" ? "Nivel" : "Tier"}</span>
        <span>{lang === "es" ? "Mínimo" : "Min"}</span>
        <span>{lang === "es" ? "Objetivo" : "Target"}</span>
        <span>{lang === "es" ? "Horizonte" : "Horizon"}</span>
        <span/>
      </div>
      {rows.map(({ p, state, tier, min, target, horizon, hideStats, isMuted }) => (
        <button key={p.id} className={`r-wti-row r-wti-state-${state}${isMuted ? " r-floor-muted" : ""}`} onClick={() => onOpenOffering(p)}>
          <span className="r-wti-tier">{tier}</span>
          <span>{hideStats ? "" : min}</span>
          <span>{hideStats ? "" : target}</span>
          <span>{hideStats ? "" : horizon}</span>
          <span className="r-wti-chev">›</span>
        </button>
      ))}
    </div>
  );
}
window.WaysToInvest = WaysToInvest;