import type { View } from "./types";
import { clear, formatTime, money, node, signedMoney } from "./dom";

function summary(record: any): string {
  const details = record.details ?? {};
  switch (record.game) {
    case "slots":
      return String(details.win_type ?? "spin");
    case "roulette":
      return `${details.number ?? "?"} ${details.color ?? ""}`.trim();
    case "blackjack":
      return String(details.result ?? "");
    case "crash": {
      const result = String(details.result ?? "");
      const point = details.crash_point;
      return point === undefined || point === null ? result : `${result} @ ${Number(point).toFixed(2)}×`;
    }
    default:
      return "";
  }
}

export function renderHistory(root: HTMLElement, view: View): void {
  clear(root);
  const records: any[] = view.records ?? [];
  if (records.length === 0) {
    const empty = node("div", "board");
    empty.append(
      node("h2", undefined, "No plays yet"),
      node("p", "muted", "Your settled plays will appear here."),
    );
    root.append(empty);
    return;
  }

  const wrap = node("div", "table-wrap");
  const table = node("table");
  const head = node("thead");
  const headRow = node("tr");
  for (const label of ["Time", "Game", "Bet", "Result", "Net", "Balance"]) {
    headRow.append(node("th", undefined, label));
  }
  head.append(headRow);
  const body = node("tbody");
  for (const record of records) {
    const row = node("tr");
    row.append(node("td", "mono", formatTime(String(record.at ?? ""))));
    row.append(node("td", undefined, String(record.game ?? "")));
    row.append(node("td", "num", money(Number(record.bet ?? 0))));
    row.append(node("td", "muted", summary(record)));
    const net = Number(record.winnings ?? 0) - Number(record.bet ?? 0);
    const netCell = node("td", `num ${net > 0 ? "pos" : net < 0 ? "neg" : ""}`, net === 0 ? "0 Kr" : signedMoney(net));
    row.append(netCell);
    row.append(node("td", "num", money(Number(record.balance_after ?? 0))));
    body.append(row);
  }
  table.append(head, body);
  wrap.append(table);
  root.append(wrap);
}