// "What you have & what you owe" — ported from the original design prototype.
// Rows are rendered as buttons (not styled as buttons) so Task 9 can wire an
// account-drill-through onClick without restructuring this markup — CLAUDE.md
// §9 ("every number drills through"); this task only needs the pieces
// clickable-ready, the actual navigation lands in Task 9.

import { fmtMoney } from "../lib/money";

export interface BalanceRow {
  accountId: string;
  name: string;
  balance: string;
}

export interface BalancePanelProps {
  assets: BalanceRow[];
  liabilities: BalanceRow[];
  youHave: string;
  youOwe: string;
  netWorth: string;
  onSelectAccount?: (accountId: string) => void;
}

function Row({ row, onSelectAccount }: { row: BalanceRow; onSelectAccount?: (accountId: string) => void }) {
  return (
    <button
      type="button"
      className="row"
      style={{ all: "unset", display: "flex", width: "100%", cursor: "pointer" }}
      onClick={() => onSelectAccount?.(row.accountId)}
    >
      <span className="n">{row.name}</span>
      <span className="a">{fmtMoney(row.balance)}</span>
    </button>
  );
}

export function BalancePanel({ assets, liabilities, youHave, youOwe, netWorth, onSelectAccount }: BalancePanelProps) {
  return (
    <div className="card">
      <h2>What you have &amp; what you owe</h2>
      <div className="sub">Balances right now, from the full history.</div>
      <div className="rows">
        {assets.map((row) => (
          <Row key={row.accountId} row={row} onSelectAccount={onSelectAccount} />
        ))}
        <div className="row total">
          <span className="n">You have</span>
          <span className="a">{fmtMoney(youHave)}</span>
        </div>
        {liabilities.map((row) => (
          <Row key={row.accountId} row={row} onSelectAccount={onSelectAccount} />
        ))}
        <div className="row total">
          <span className="n">You owe</span>
          <span className="a">{fmtMoney(youOwe)}</span>
        </div>
      </div>
      <div className="net">
        <span>Net worth</span>
        <span>{fmtMoney(netWorth)}</span>
      </div>
    </div>
  );
}
