// Diff table — Task 12. Renders the per-account differences from a
// POST /api/c/close/compare (or the same shape carried on a 409 from
// POST /api/c/close/lock, see close.ts's LockOutcome). Only shown when a
// comparison DIDN'T tie out to the penny — a clean match renders the green
// banner instead (see CloseScreen.tsx) — so every row here is by definition
// something that needs a look, and only the non-matching rows are rendered
// (a zero-diff account isn't news).

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

export interface CompareRow {
  account: string;
  ours: string | null;
  theirs: string | null;
  diff: string;
  status: "match" | "different" | "only-ours" | "only-theirs";
}

export function DiffTable({ rows }: { rows: CompareRow[] }) {
  const differences = rows.filter((r) => r.status !== "match");
  if (differences.length === 0) return null;

  return (
    <div style={{ overflowX: "auto" }}>
      <table className="diff-table">
        <thead>
          <tr>
            <th>Account</th>
            <th className="num">Our books</th>
            <th className="num">Your file</th>
            <th className="num">Difference</th>
          </tr>
        </thead>
        <tbody>
          {differences.map((r) => (
            <tr key={r.account} className="diff-row-bad">
              <td>
                {r.account}
                {r.status === "only-ours" && " — only in our books"}
                {r.status === "only-theirs" && " — only in your file"}
              </td>
              <td className="num">{r.ours !== null ? fmtMoney(r.ours) : "—"}</td>
              <td className="num">{r.theirs !== null ? fmtMoney(r.theirs) : "—"}</td>
              <td className="num">{fmtMoney(r.diff)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
