"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 { useAdminDateTimeFormatter } from "@/hooks/use-admin-datetime-formatter";
import { formatSettlementPeriodSpan } from "@/lib/agent-settlement-period-range";
import { formatDashboardMoneyMinor } from "@/modules/dashboard/use-dashboard-analytics";
import { settlementAdjustmentTypeLabel } from "@/modules/settlement/settlement-status-label";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

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

export function SettlementAdjustmentsTable({
  rows,
  loading,
  currencyCode,
  onOpenBill,
}: SettlementAdjustmentsTableProps): React.ReactElement {
  const { t } = useTranslation(["settlementCenter", "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.adjustmentType", { defaultValue: "调账类型" })}</TableHead>
            <TableHead>{t("columns.originalBill", { defaultValue: "原账单" })}</TableHead>
            <TableHead className="text-right">{t("columns.amount", { defaultValue: "调整金额" })}</TableHead>
            <TableHead>{t("columns.reason", { 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>
                {settlementAdjustmentTypeLabel(row.adjustment_type, t)}
              </TableCell>
              <TableCell className="tabular-nums">
                {row.original_bill_id != null ? `#${row.original_bill_id}` : "—"}
              </TableCell>
              <TableCell className="text-right tabular-nums">
                {formatDashboardMoneyMinor(row.amount, currencyCode)}
              </TableCell>
              <TableCell className="max-w-[200px] truncate text-sm">{row.reason ?? "—"}</TableCell>
              <TableCell className="text-xs text-muted-foreground">{formatTs(row.created_at)}</TableCell>
              <TableCell>
                {row.original_bill_id != null ? (
                  <button
                    type="button"
                    className="text-sm text-primary underline"
                    onClick={() => onOpenBill(row.original_bill_id!)}
                  >
                    {t("actions.viewBill", { defaultValue: "查看原账单" })}
                  </button>
                ) : null}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}