"use client";

import type { LedgerEntry } from "@/payload-types";
import { formatDate } from "@/lib/banking/format";

const typeMeta: Record<string, { label: string; cls: string }> = {
  deposit: { label: "Deposit", cls: "text-emerald-400" },
  withdrawal: { label: "Withdrawal", cls: "text-red-400" },
  transfer: { label: "Transfer", cls: "text-blue-400" },
  payment: { label: "Payment", cls: "text-red-400" },
  fee: { label: "Fee", cls: "text-muted-foreground" },
  salary: { label: "Salary", cls: "text-green-400" },
  adjustment: { label: "Adjustment", cls: "text-amber-400" },
};

export function LedgerTable({ entries }: { entries: LedgerEntry[] }) {
  if (entries.length === 0) {
    return (
      <p className="text-sm text-muted-foreground italic">
        No ledger entries yet.
      </p>
    );
  }

  return (
    <div className="border border-border rounded-lg overflow-hidden">
      <table className="w-full text-sm">
        <thead>
          <tr className="bg-muted/50 border-b border-border">
            <th className="text-left px-4 py-2.5 font-semibold uppercase text-xs tracking-wider text-muted-foreground">
              Date
            </th>
            <th className="text-left px-4 py-2.5 font-semibold uppercase text-xs tracking-wider text-muted-foreground">
              Type
            </th>
            <th className="text-left px-4 py-2.5 font-semibold uppercase text-xs tracking-wider text-muted-foreground">
              Memo
            </th>
            <th className="text-right px-4 py-2.5 font-semibold uppercase text-xs tracking-wider text-muted-foreground">
              Amount
            </th>
            <th className="text-right px-4 py-2.5 font-semibold uppercase text-xs tracking-wider text-muted-foreground">
              Balance
            </th>
          </tr>
        </thead>
        <tbody>
          {entries.map((entry) => {
            const meta = typeMeta[entry.type] ?? {
              label: entry.type,
              cls: "text-muted-foreground",
            };
            const amount = entry.amount ?? 0;
            return (
              <tr key={entry.id} className="border-b border-border/50">
                <td className="px-4 py-2 text-muted-foreground">
                  {formatDate(entry.timestamp)}
                </td>
                <td className={`px-4 py-2 font-medium ${meta.cls}`}>
                  {meta.label}
                </td>
                <td className="px-4 py-2 text-muted-foreground">{entry.memo}</td>
                <td
                  className={`px-4 py-2 text-right font-mono ${amount >= 0 ? "text-emerald-400" : "text-red-400"}`}
                >
                  {amount >= 0 ? "+" : ""}
                  {amount.toLocaleString()}
                </td>
                <td className="px-4 py-2 text-right font-mono">
                  {(entry.balanceAfter ?? 0).toLocaleString()}
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}