import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { RemitStatusBadge } from "@/components/StatusBadge";
import { useAppStore } from "@/store";
import { fmt } from "@/lib/format";

export function Remittances() {
  const remits = useAppStore((s) => s.remittances);

  const total = remits.reduce(
    (acc, r) => ({
      paid: acc.paid + r.paidAmount,
      adjustments: acc.adjustments + r.adjustmentAmount,
    }),
    { paid: 0, adjustments: 0 }
  );

  return (
    <div className="space-y-8 animate-fade-in">
      <header>
        <div className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-muted-foreground mb-2 flex items-center gap-2">
          <span className="inline-block h-px w-6 bg-border" />
          Remittances
        </div>
        <h1 className="text-[22px] font-semibold tracking-tight">835 remittances</h1>
        <p className="text-muted-foreground mt-1.5 text-[14px]">
          Electronic remittance advice from payers, matched to submitted claims.
        </p>
      </header>

      <div className="grid gap-4 grid-cols-2 lg:grid-cols-3">
        <div className="surface rounded-xl p-5">
          <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
            Remits
          </div>
          <div className="display text-[28px] leading-none mt-3">{fmt.num(remits.length)}</div>
        </div>
        <div className="surface rounded-xl p-5">
          <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
            Total paid
          </div>
          <div className="display text-[28px] leading-none mt-3">{fmt.usd(total.paid)}</div>
        </div>
        <div className="surface rounded-xl p-5">
          <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
            Adjustments
          </div>
          <div className="display text-[28px] leading-none mt-3">{fmt.usd(total.adjustments)}</div>
        </div>
      </div>

      <div className="surface rounded-xl overflow-hidden">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Remit</TableHead>
              <TableHead>Claim</TableHead>
              <TableHead>Payer</TableHead>
              <TableHead className="text-right">Paid</TableHead>
              <TableHead className="text-right">Adjustment</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Received</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {remits.length === 0 ? (
              <TableRow>
                <TableCell colSpan={7} className="text-center py-12 text-muted-foreground">
                  No remittances yet.
                </TableCell>
              </TableRow>
            ) : (
              remits.map((r) => (
                <TableRow key={r.id}>
                  <TableCell className="display num text-[13px]">{r.id}</TableCell>
                  <TableCell className="display num text-[13px] text-muted-foreground">
                    {r.claimId}
                  </TableCell>
                  <TableCell>{r.payerName}</TableCell>
                  <TableCell className="text-right display num">
                    {fmt.usdPrecise(r.paidAmount)}
                  </TableCell>
                  <TableCell className="text-right display num text-muted-foreground">
                    {fmt.usdPrecise(r.adjustmentAmount)}
                  </TableCell>
                  <TableCell>
                    <RemitStatusBadge status={r.status} />
                  </TableCell>
                  <TableCell className="text-muted-foreground num text-[13px]">
                    {fmt.dateShort(r.receivedDate)}
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}