"use client";

import { useTranslation } from "react-i18next";

import type { SettlementAdjustmentRow } from "@/api/admin-agent-settlement";
import { AdminNoResourceState } from "@/components/admin/admin-no-resource-state";
import { AdminLoadingState } from "@/components/admin/admin-loading-state";
import { formatDashboardMoneyMinor } from "@/modules/dashboard/use-dashboard-analytics";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { formatSettlementPeriodSpan } from "@/lib/agent-settlement-period-range";

type SettlementBadDebtTableProps = {
  rows: SettlementAdjustmentRow[];
  loading: boolean;
  currencyCode: string;
  onOpenBill: (billId: number) => void;
};

export function SettlementBadDebtTable({
  rows,
  loading,
  currencyCode,
  onOpenBill,
}: SettlementBadDebtTableProps): React.ReactElement {
  const { t } = useTranslation(["settlementCenter", "common"]);

  if (loading) {
    return <AdminLoadingState />;
  }

  if (rows.length === 0) {
    return <AdminNoResourceState />;
  }

  return (
    <div className="admin-table-shell overflow-x-auto rounded-lg border border-border/60">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>{t("columns.period", { defaultValue: "账期" })}</TableHead>
            <TableHead>{t("columns.originalBill", { defaultValue: "原账单" })}</TableHead>
            <TableHead className="text-right">{t("columns.badDebtAmount", { defaultValue: "核销金额" })}</TableHead>
            <TableHead>{t("columns.reason", { defaultValue: "原因" })}</TableHead>
            <TableHead className="text-right" />
          </TableRow>
        </TableHeader>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.id}>
              <TableCell className="text-sm text-muted-foreground">
                {row.period_start && row.period_end
                  ? formatSettlementPeriodSpan(row.period_start, row.period_end)
                  : "—"}
              </TableCell>
              <TableCell className="tabular-nums">#{row.original_bill_id ?? "—"}</TableCell>
              <TableCell className="text-right tabular-nums">
                {formatDashboardMoneyMinor(row.amount, currencyCode)}
              </TableCell>
              <TableCell className="max-w-[200px] truncate text-sm text-muted-foreground">
                {row.reason?.trim() || "—"}
              </TableCell>
              <TableCell className="text-right">
                {row.original_bill_id != null ? (
                  <Button
                    type="button"
                    size="sm"
                    variant="outline"
                    onClick={() => onOpenBill(row.original_bill_id!)}
                  >
                    {t("actions.viewBill", { defaultValue: "查看账单" })}
                  </Button>
                ) : null}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}
