// Finance fact-sheet building blocks: waterfall diagram, generic finance
// table with bold totals, financed-vs-cash two-path block, risk-factor list,
// and the link card surfaced on the Nodes page.

// Generic data table. cols = ["Line Item", "75% Util", "85% Util", "100% Util"]
// rows = [{ label, values: ["$85,000", "$96,300", "$113,300"], emphasis: true }]
// emphasis: true makes the row bold + heavier rule (used for capacity payment + net cash totals).
// negative: true colors the row's values muted (used for "Less:" lines).
const FinanceTable = ({ cols, rows, footnote }) => {
  const n = cols.length;
  return (
    <div className="pyrra-fintable" style={{ "--cols": n }}>
      <div className="pyrra-fintable__head">
        {cols.map((c, i) => (
          <div
            key={i}
            className={`pyrra-fintable__cell pyrra-fintable__cell--head ${i === 0 ? "pyrra-fintable__cell--label" : ""}`}
          >
            {c}
          </div>
        ))}
      </div>
      <div className="pyrra-fintable__body">
        {rows.map((r, i) => (
          <div
            key={i}
            className={`pyrra-fintable__row ${r.emphasis ? "is-emphasis" : ""} ${r.negative ? "is-negative" : ""}`}
          >
            <div className="pyrra-fintable__cell pyrra-fintable__cell--label">{r.label}</div>
            {r.values.map((v, j) => (
              <div key={j} className="pyrra-fintable__cell">{v}</div>
            ))}
          </div>
        ))}
      </div>
      {footnote ? <p className="pyrra-fintable__footnote">{footnote}</p> : null}
    </div>
  );
};

// Cash flow waterfall: three nodes (Gross → Capacity → Net) connected by
// subtraction stacks. Pure structural diagram, not values-driven.
const CashWaterfall = () => (
  <div className="pyrra-waterfall">
    <div className="pyrra-waterfall__node pyrra-waterfall__node--gross">
      <div className="pyrra-waterfall__num">01</div>
      <div className="pyrra-waterfall__label">Gross Inference Revenue</div>
      <div className="pyrra-waterfall__hint">100% sold by Pyrra under multi-year enterprise contracts</div>
    </div>

    <div className="pyrra-waterfall__deduct">
      <div className="pyrra-waterfall__deduct-arrow" aria-hidden>↓</div>
      <div className="pyrra-waterfall__deduct-row">
        <span className="pyrra-waterfall__op">−</span>
        <span className="pyrra-waterfall__deduct-label">Pyrra Service Fee</span>
        <span className="pyrra-waterfall__deduct-val">50%</span>
      </div>
    </div>

    <div className="pyrra-waterfall__node pyrra-waterfall__node--capacity">
      <div className="pyrra-waterfall__num">02</div>
      <div className="pyrra-waterfall__label">Capacity Payment to Node Owner</div>
      <div className="pyrra-waterfall__hint">Consolidated monthly payment from Pyrra</div>
    </div>

    <div className="pyrra-waterfall__deduct">
      <div className="pyrra-waterfall__deduct-arrow" aria-hidden>↓</div>
      <div className="pyrra-waterfall__deduct-row">
        <span className="pyrra-waterfall__op">−</span>
        <span className="pyrra-waterfall__deduct-label">Electricity</span>
        <span className="pyrra-waterfall__deduct-val">Site tariff</span>
      </div>
      <div className="pyrra-waterfall__deduct-row">
        <span className="pyrra-waterfall__op">−</span>
        <span className="pyrra-waterfall__deduct-label">Site overhead</span>
        <span className="pyrra-waterfall__deduct-val">Tax, insurance</span>
      </div>
      <div className="pyrra-waterfall__deduct-row">
        <span className="pyrra-waterfall__op">−</span>
        <span className="pyrra-waterfall__deduct-label">Debt service</span>
        <span className="pyrra-waterfall__deduct-val">If financed</span>
      </div>
    </div>

    <div className="pyrra-waterfall__node pyrra-waterfall__node--net">
      <div className="pyrra-waterfall__num">03</div>
      <div className="pyrra-waterfall__label">Net Cash to Owner</div>
      <div className="pyrra-waterfall__hint">Pre-tax. ITC and MACRS layered on top for taxable buyers.</div>
    </div>
  </div>
);

// Two-path compare for Financed vs Cash. Same shape as FitsBlock but with
// titles, prose, and a "best for" list per side.
const TwoPathsBlock = ({ left, right }) => (
  <div className="pyrra-twopaths">
    {[left, right].map((p, i) => (
      <div key={i} className={`pyrra-twopaths__col pyrra-twopaths__col--${p.tone || (i === 0 ? "lev" : "liq")}`}>
        <div className="pyrra-twopaths__head">
          <span className="pyrra-twopaths__pill">{p.pill}</span>
          <h3>{p.title}</h3>
        </div>
        <p>{p.body}</p>
        <div className="pyrra-twopaths__meta">
          {p.meta.map((m, j) => (
            <div key={j}>
              <strong>{m.key}</strong>
              <span>{m.val}</span>
            </div>
          ))}
        </div>
        <div className="pyrra-twopaths__bestfor">
          <span className="pyrra-twopaths__bestfor-label">Best for</span>
          <ul>
            {p.bestFor.map((b, j) => <li key={j}>{b}</li>)}
          </ul>
        </div>
      </div>
    ))}
  </div>
);

// Simple definition list for risk factors. items = [{ title, body }]
const DefList = ({ items, columns = 2 }) => (
  <dl className={`pyrra-deflist pyrra-deflist--cols-${columns}`}>
    {items.map((it, i) => (
      <div key={i} className="pyrra-deflist__item">
        <dt>{it.title}</dt>
        <dd>{it.body}</dd>
      </div>
    ))}
  </dl>
);

// Inline bulleted lists used inside the fee-covers + owner-pays panels.
const BulletPanel = ({ eyebrow, title, items, tone = "default" }) => (
  <div className={`pyrra-bullets pyrra-bullets--${tone}`}>
    <Eyebrow>{eyebrow}</Eyebrow>
    <h4>{title}</h4>
    <ul>
      {items.map((it, i) => <li key={i}>{it}</li>)}
    </ul>
  </div>
);

// Link card on the Nodes page that points to the financials fact sheet.
const FinancialsLinkCard = ({ onClick }) => (
  <a
    className="pyrra-specslink pyrra-specslink--finance"
    href="#/financials"
    onClick={(e) => { e.preventDefault(); onClick(); }}
  >
    <div className="pyrra-specslink__icon"><IconDollar size={26} /></div>
    <div className="pyrra-specslink__text">
      <Eyebrow>Node Financial Projections</Eyebrow>
      <h3>Model the asset under your assumptions.</h3>
      <p>Illustrative scenarios to help you prepare financial projections for your node.</p>
    </div>
    <div className="pyrra-specslink__cta">
      <span>Read the projections</span>
      <IconArrowRight size={18} />
    </div>
  </a>
);

Object.assign(window, {
  FinanceTable, CashWaterfall, TwoPathsBlock, DefList, BulletPanel, FinancialsLinkCard,
});