"use client";

import { useTranslation } from "react-i18next";

import type { SettlementPaymentRow } from "@/api/admin-agent-settlement";
import { AdminNoResourceState } from "@/components/admin/admin-no-resource-state";
import { AdminLoadingState } from "@/components/admin/admin-loading-state";
import { useAdminDateTimeFormatter } from "@/hooks/use-admin-datetime-formatter";
import { formatSettlementPeriodSpan } from "@/lib/agent-settlement-period-range";
import { formatDashboardMoneyMinor } from "@/modules/dashboard/use-dashboard-analytics";
import { settlementBillTypeLabel } from "@/modules/settlement/settlement-status-label";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

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

export function SettlementPaymentsTable({
  rows,
  loading,
  currencyCode,
  onOpenBill,
}: SettlementPaymentsTableProps): React.ReactElement {
  const { t } = useTranslation(["settlementCenter", "agents", "common"]);
  const formatTs = useAdminDateTimeFormatter();

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

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

  return (
    <div className="admin-table-shell overflow-x-auto">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>{t("columns.period", { defaultValue: "账期" })}</TableHead>
            <TableHead>{t("columns.billId", { defaultValue: "账单 ID" })}</TableHead>
            <TableHead>{t("columns.type", { defaultValue: "类型" })}</TableHead>
            <TableHead>{t("columns.payer", { defaultValue: "付款方" })}</TableHead>
            <TableHead>{t("columns.payee", { defaultValue: "收款方" })}</TableHead>
            <TableHead className="text-right">{t("columns.amount", { defaultValue: "金额" })}</TableHead>
            <TableHead>{t("columns.method", { defaultValue: "方式" })}</TableHead>
            <TableHead>{t("columns.status", { defaultValue: "状态" })}</TableHead>
            <TableHead>{t("columns.time", { defaultValue: "时间" })}</TableHead>
            <TableHead />
          </TableRow>
        </TableHeader>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.id}>
              <TableCell className="whitespace-nowrap text-xs text-muted-foreground">
                {formatSettlementPeriodSpan(row.period_start, row.period_end)}
              </TableCell>
              <TableCell className="tabular-nums">#{row.settlement_bill_id}</TableCell>
              <TableCell>{settlementBillTypeLabel(row.bill_type, t)}</TableCell>
              <TableCell>
                {row.payer_type}#{row.payer_id}
              </TableCell>
              <TableCell>
                {row.payee_type === "platform"
                  ? t("agents:settlementBills.platform", { defaultValue: "平台" })
                  : `${row.payee_type}#${row.payee_id}`}
              </TableCell>
              <TableCell className="text-right tabular-nums font-medium">
                {formatDashboardMoneyMinor(row.amount, currencyCode)}
              </TableCell>
              <TableCell>{row.method ?? "—"}</TableCell>
              <TableCell>
                {t(`paymentStatus.${row.status}`, {
                  defaultValue: row.status === "confirmed" ? "已确认" : row.status,
                })}
              </TableCell>
              <TableCell className="text-xs text-muted-foreground">
                {formatTs(row.confirmed_at ?? row.created_at)}
              </TableCell>
              <TableCell>
                <button
                  type="button"
                  className="text-sm text-primary underline"
                  onClick={() => onOpenBill(row.settlement_bill_id)}
                >
                  {t("actions.viewBill", { defaultValue: "查看账单" })}
                </button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}