lotteryAdmin/src/modules/settlement/settlement-batches-console.tsx

"use client";

import Link from "next/link";
import { useCallback, useEffect, useState } from "react";

import { getAdminSettlementBatches } from "@/api/admin-settlement";
import { AdminListPaginationFooter } from "@/components/admin/admin-list-pagination-footer";
import { ModuleScaffold } from "@/components/admin/module-scaffold";
import { Button, buttonVariants } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { useAdminDateTimeFormatter } from "@/hooks/use-admin-datetime-formatter";
import { formatAdminMinorUnits } from "@/lib/money";
import { cn } from "@/lib/utils";
import { LotteryApiBizError } from "@/types/api/errors";
import type { AdminSettlementBatchListData, AdminSettlementBatchRow } from "@/types/api/admin-settlement";

import { settlementModuleMeta } from "@/modules/settlement/meta";

const STATUS_ALL = "__all__";
const STATUS_OPTIONS: { value: string; label: string }[] = [
  { value: STATUS_ALL, label: "不限" },
  { value: "running", label: "进行中" },
  { value: "completed", label: "已完成" },
  { value: "failed", label: "失败" },
];

export function SettlementBatchesConsole() {
  const formatDt = useAdminDateTimeFormatter();
  const [data, setData] = useState<AdminSettlementBatchListData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [draftDrawNo, setDraftDrawNo] = useState("");
  const [appliedDrawNo, setAppliedDrawNo] = useState("");
  const [draftStatus, setDraftStatus] = useState(STATUS_ALL);
  const [appliedStatus, setAppliedStatus] = useState(STATUS_ALL);
  const [page, setPage] = useState(1);
  const [perPage, setPerPage] = useState(20);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const d = await getAdminSettlementBatches({
        page,
        per_page: perPage,
        draw_no: appliedDrawNo.trim() || undefined,
        status:
          appliedStatus === STATUS_ALL || appliedStatus.trim() === ""
            ? undefined
            : appliedStatus.trim(),
      });
      setData(d);
    } catch (e) {
      setError(e instanceof LotteryApiBizError ? e.message : "加载失败");
      setData(null);
    } finally {
      setLoading(false);
    }
  }, [page, perPage, appliedDrawNo, appliedStatus]);

  useEffect(() => {
    const t = window.setTimeout(() => void load(), 0);
    return () => window.clearTimeout(t);
  }, [load]);

  const applyFilters = () => {
    setAppliedDrawNo(draftDrawNo);
    setAppliedStatus(draftStatus);
    setPage(1);
  };

  return (
    <ModuleScaffold>
      <div className="mb-6">
        <h1 className="text-lg font-semibold tracking-tight">{settlementModuleMeta.title}</h1>
      </div>
      <Card className="mb-6">
        <CardHeader className="pb-3">
          <CardTitle className="text-base">筛选</CardTitle>
        </CardHeader>
        <CardContent className="flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-end">
          <div className="flex min-w-[12rem] flex-1 flex-col gap-1.5">
            <Label htmlFor="sb-draw-no">期号</Label>
            <Input
              id="sb-draw-no"
              value={draftDrawNo}
              onChange={(e) => setDraftDrawNo(e.target.value)}
              placeholder="如 20260511-001"
              className="font-mono"
            />
          </div>
          <div className="flex min-w-[10rem] flex-col gap-1.5">
            <Label>状态</Label>
            <Select value={draftStatus} onValueChange={(v) => setDraftStatus(v ?? STATUS_ALL)}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {STATUS_OPTIONS.map((o) => (
                  <SelectItem key={o.value} value={o.value}>
                    {o.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <Button type="button" onClick={applyFilters}>
            应用
          </Button>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">结算批次</CardTitle>
        </CardHeader>
        <CardContent>
          {error ? <p className="text-destructive text-sm">{error}</p> : null}
          {loading && !data ? (
            <p className="text-muted-foreground text-sm">加载中…</p>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>ID</TableHead>
                  <TableHead>期号</TableHead>
                  <TableHead>版本</TableHead>
                  <TableHead>状态</TableHead>
                  <TableHead className="text-right">注单数</TableHead>
                  <TableHead className="text-right">中奖笔数</TableHead>
                  <TableHead className="text-right">派彩合计</TableHead>
                  <TableHead className="text-right">Jackpot</TableHead>
                  <TableHead>完成时间</TableHead>
                  <TableHead />
                </TableRow>
              </TableHeader>
              <TableBody>
                {(data?.items ?? []).map((row: AdminSettlementBatchRow) => (
                  <TableRow key={row.id}>
                    <TableCell className="font-mono text-xs">{row.id}</TableCell>
                    <TableCell className="font-mono text-sm">{row.draw_no ?? "—"}</TableCell>
                    <TableCell className="font-mono text-xs">v{row.settle_version}</TableCell>
                    <TableCell>
                      <span
                        className={cn(
                          "rounded px-1.5 py-0.5 text-xs font-medium",
                          row.status === "completed" && "bg-emerald-500/15 text-emerald-800",
                          row.status === "running" && "bg-amber-500/15 text-amber-900",
                          row.status === "failed" && "bg-destructive/15 text-destructive",
                        )}
                      >
                        {row.status}
                      </span>
                    </TableCell>
                    <TableCell className="text-right tabular-nums">{row.total_ticket_count}</TableCell>
                    <TableCell className="text-right tabular-nums">{row.total_win_count}</TableCell>
                    <TableCell className="text-right font-mono text-xs tabular-nums">
                      {formatAdminMinorUnits(row.total_payout_amount)}
                    </TableCell>
                    <TableCell className="text-right font-mono text-xs tabular-nums">
                      {formatAdminMinorUnits(row.total_jackpot_payout_amount)}
                    </TableCell>
                    <TableCell className="text-xs text-muted-foreground whitespace-nowrap">
                      {formatDt(row.finished_at ?? row.started_at)}
                    </TableCell>
                    <TableCell>
                      <Link
                        href={`/admin/settlement-batches/${row.id}/details`}
                        className={cn(buttonVariants({ variant: "link", size: "sm" }), "px-0")}
                      >
                        明细
                      </Link>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
          {data ? (
            <AdminListPaginationFooter
              selectId="settlement-batches-per-page"
              total={data.meta.total}
              page={data.meta.current_page}
              lastPage={data.meta.last_page}
              perPage={data.meta.per_page}
              loading={loading}
              onPerPageChange={(n) => {
                setPerPage(n);
                setPage(1);
              }}
              onPageChange={setPage}
            />
          ) : null}
        </CardContent>
      </Card>
    </ModuleScaffold>
  );
}