lotteryAdmin/src/modules/jackpot/jackpot-records-console.tsx

"use client";

import type React from "react";
import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";

import { getAdminJackpotContributions, getAdminJackpotPayoutLogs } from "@/api/admin-jackpot";
import { AdminListPaginationFooter } from "@/components/admin/admin-list-pagination-footer";
import { AdminTableExportButton } from "@/components/admin/admin-table-export-button";
import { ModuleScaffold } from "@/components/admin/module-scaffold";
import { Button } 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 {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { useAdminDateTimeFormatter } from "@/hooks/use-admin-datetime-formatter";
import { useExportLabels } from "@/hooks/use-export-labels";
import { formatAdminMinorUnits } from "@/lib/money";
import { LotteryApiBizError } from "@/types/api/errors";
import type {
  AdminJackpotContributionsData,
  AdminJackpotPayoutLogsData,
} from "@/types/api/admin-jackpot";

type JackpotRecordsConsoleProps = {
  embedded?: boolean;
};

/** 表格在 admin-table-shell 内时去掉 Table 组件自带的第二层边框 */
const TABLE_IN_SHELL_CLASS =
  "[&_[data-slot=table-container]]:rounded-none [&_[data-slot=table-container]]:border-0 [&_[data-slot=table-container]]:bg-transparent [&_[data-slot=table-container]]:shadow-none";

function JackpotRecordTableSection({
  title,
  tableId,
  exportFilename,
  exportSheetName,
  loading,
  hasData,
  children,
  footer,
}: {
  title: string;
  tableId: string;
  exportFilename: string;
  exportSheetName: string;
  loading: boolean;
  hasData: boolean;
  children: React.ReactNode;
  footer: React.ReactNode;
}) {
  const { t } = useTranslation("common");

  return (
    <div className="admin-table-shell">
      <div className="admin-table-toolbar flex items-center justify-between gap-3">
        <h3 className="text-sm font-semibold text-foreground">{title}</h3>
        <AdminTableExportButton
          tableId={tableId}
          filename={exportFilename}
          sheetName={exportSheetName}
        />
      </div>
      {loading && !hasData ? (
        <p className="px-4 py-6 text-sm text-muted-foreground">{t("states.loading")}</p>
      ) : (
        <div className={TABLE_IN_SHELL_CLASS}>{children}</div>
      )}
      {footer ? <div className="px-4 pb-4">{footer}</div> : null}
    </div>
  );
}

export function JackpotRecordsConsole({ embedded = false }: JackpotRecordsConsoleProps) {
  const { t } = useTranslation(["jackpot", "common"]);
  const payoutExport = useExportLabels("jackpotPayouts");
  const contributionExport = useExportLabels("jackpotContributions");
  const formatDt = useAdminDateTimeFormatter();
  const [drawNo, setDrawNo] = useState("");
  const [appliedDrawNo, setAppliedDrawNo] = useState("");

  const [payouts, setPayouts] = useState<AdminJackpotPayoutLogsData | null>(null);
  const [pPage, setPPage] = useState(1);
  const [pPer, setPPer] = useState(10);

  const [contribs, setContribs] = useState<AdminJackpotContributionsData | null>(null);
  const [cPage, setCPage] = useState(1);
  const [cPer, setCPer] = useState(10);

  const [loadingP, setLoadingP] = useState(true);
  const [loadingC, setLoadingC] = useState(true);
  const [err, setErr] = useState<string | null>(null);

  const loadPayouts = useCallback(async () => {
    setLoadingP(true);
    try {
      const d = await getAdminJackpotPayoutLogs({
        page: pPage,
        per_page: pPer,
        draw_no: appliedDrawNo.trim() || undefined,
      });
      setPayouts(d);
    } catch (e) {
      setErr(e instanceof LotteryApiBizError ? e.message : t("payoutLoadFailed"));
    } finally {
      setLoadingP(false);
    }
  }, [pPage, pPer, appliedDrawNo, t]);

  const loadContribs = useCallback(async () => {
    setLoadingC(true);
    try {
      const d = await getAdminJackpotContributions({
        page: cPage,
        per_page: cPer,
        draw_no: appliedDrawNo.trim() || undefined,
      });
      setContribs(d);
    } catch (e) {
      setErr(e instanceof LotteryApiBizError ? e.message : t("contributionLoadFailed"));
    } finally {
      setLoadingC(false);
    }
  }, [cPage, cPer, appliedDrawNo, t]);

  useEffect(() => {
    queueMicrotask(() => {
      void loadPayouts();
    });
  }, [loadPayouts]);

  useEffect(() => {
    queueMicrotask(() => {
      void loadContribs();
    });
  }, [loadContribs]);

  const applyDraw = () => {
    setAppliedDrawNo(drawNo);
    setPPage(1);
    setCPage(1);
  };

  const triggerTypeText = (value: string) => {
    const key = `triggerTypes.${value}`;
    const translated = t(key);
    return translated === key ? value : translated;
  };

  const filterBlock = embedded ? (
    <div className="admin-list-toolbar mb-0 border-t-0 pt-0">
      <div className="admin-list-field max-w-xs flex-1">
        <Label htmlFor="jk-draw">{t("drawNo")}</Label>
        <Input
          id="jk-draw"
          className="font-mono"
          value={drawNo}
          onChange={(e) => setDrawNo(e.target.value)}
          placeholder={t("optional")}
        />
      </div>
      <div className="admin-list-actions">
        <Button type="button" onClick={applyDraw}>
          {t("apply")}
        </Button>
      </div>
    </div>
  ) : (
    <Card className="mb-6">
      <CardHeader className="pb-3">
        <CardTitle className="text-base">{t("filter")}</CardTitle>
      </CardHeader>
      <CardContent className="flex flex-col gap-3 sm:flex-row sm:items-end">
        <div className="flex max-w-xs flex-1 flex-col gap-1.5">
          <Label htmlFor="jk-draw">{t("drawNo")}</Label>
          <Input
            id="jk-draw"
            className="font-mono"
            value={drawNo}
            onChange={(e) => setDrawNo(e.target.value)}
            placeholder={t("optional")}
          />
        </div>
        <Button type="button" onClick={applyDraw}>
          {t("apply")}
        </Button>
      </CardContent>
    </Card>
  );

  const payoutFooter = payouts ? (
    <AdminListPaginationFooter
      selectId="jk-payout-per"
      total={payouts.meta.total}
      page={payouts.meta.current_page}
      lastPage={payouts.meta.last_page}
      perPage={payouts.meta.per_page}
      loading={loadingP}
      onPerPageChange={(n) => {
        setPPer(n);
        setPPage(1);
      }}
      onPageChange={setPPage}
    />
  ) : null;

  const contributionFooter = contribs ? (
    <AdminListPaginationFooter
      selectId="jk-contrib-per"
      total={contribs.meta.total}
      page={contribs.meta.current_page}
      lastPage={contribs.meta.last_page}
      perPage={contribs.meta.per_page}
      loading={loadingC}
      onPerPageChange={(n) => {
        setCPer(n);
        setCPage(1);
      }}
      onPageChange={setCPage}
    />
  ) : null;

  const payoutTable = (
    <JackpotRecordTableSection
      title={t("payoutRecords")}
      tableId="jackpot-payout-table"
      exportFilename={payoutExport.filename}
      exportSheetName={payoutExport.sheetName}
      loading={loadingP}
      hasData={payouts != null}
      footer={payoutFooter}
    >
      <Table id="jackpot-payout-table" className="table-fixed">
        <TableHeader>
          <TableRow>
            <TableHead className="w-14">{t("table.id", { ns: "common" })}</TableHead>
            <TableHead className="w-[11rem]">{t("drawNo")}</TableHead>
            <TableHead className="w-28">{t("trigger")}</TableHead>
            <TableHead className="w-32 text-right">{t("payoutAmount")}</TableHead>
            <TableHead className="w-24 text-right">{t("winnerCount")}</TableHead>
            <TableHead className="w-[11rem]">{t("time")}</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {(payouts?.items ?? []).length === 0 ? (
            <TableRow>
              <TableCell colSpan={6} className="text-muted-foreground">
                {t("states.noData", { ns: "common" })}
              </TableCell>
            </TableRow>
          ) : (
            (payouts?.items ?? []).map((r) => (
              <TableRow key={r.id}>
                <TableCell className="font-mono text-xs">{r.id}</TableCell>
                <TableCell className="font-mono text-xs">{r.draw_no ?? "—"}</TableCell>
                <TableCell className="text-xs">{triggerTypeText(r.trigger_type)}</TableCell>
                <TableCell className="text-right font-mono text-xs tabular-nums">
                  {formatAdminMinorUnits(r.total_payout_amount, r.currency_code ?? "NPR")}
                </TableCell>
                <TableCell className="text-right tabular-nums">{r.winner_count}</TableCell>
                <TableCell className="text-xs text-muted-foreground whitespace-nowrap">
                  {formatDt(r.created_at)}
                </TableCell>
              </TableRow>
            ))
          )}
        </TableBody>
      </Table>
    </JackpotRecordTableSection>
  );

  const contributionTable = (
    <JackpotRecordTableSection
      title={t("contributionRecords")}
      tableId="jackpot-contribution-table"
      exportFilename={contributionExport.filename}
      exportSheetName={contributionExport.sheetName}
      loading={loadingC}
      hasData={contribs != null}
      footer={contributionFooter}
    >
      <Table id="jackpot-contribution-table" className="table-fixed">
        <TableHeader>
          <TableRow>
            <TableHead className="w-14">{t("table.id", { ns: "common" })}</TableHead>
            <TableHead className="w-[11rem]">{t("drawNo")}</TableHead>
            <TableHead className="w-[11rem]">{t("ticketNo")}</TableHead>
            <TableHead>{t("player")}</TableHead>
            <TableHead className="w-32 text-right">{t("contributionAmount")}</TableHead>
            <TableHead className="w-[11rem]">{t("time")}</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {(contribs?.items ?? []).length === 0 ? (
            <TableRow>
              <TableCell colSpan={6} className="text-muted-foreground">
                {t("states.noData", { ns: "common" })}
              </TableCell>
            </TableRow>
          ) : (
            (contribs?.items ?? []).map((r) => (
              <TableRow key={r.id}>
                <TableCell className="font-mono text-xs">{r.id}</TableCell>
                <TableCell className="font-mono text-xs">{r.draw_no ?? "—"}</TableCell>
                <TableCell className="font-mono text-xs">{r.ticket_no ?? "—"}</TableCell>
                <TableCell className="max-w-[12rem] truncate text-xs">{r.player_username ?? "—"}</TableCell>
                <TableCell className="text-right font-mono text-xs tabular-nums">
                  {formatAdminMinorUnits(r.contribution_amount, r.currency_code ?? "NPR")}
                </TableCell>
                <TableCell className="text-xs text-muted-foreground whitespace-nowrap">
                  {formatDt(r.created_at)}
                </TableCell>
              </TableRow>
            ))
          )}
        </TableBody>
      </Table>
    </JackpotRecordTableSection>
  );

  const content = (
    <>
      {filterBlock}
      {err ? <p className="text-destructive text-sm">{err}</p> : null}

      {embedded ? (
        <div className="space-y-8">
          {payoutTable}
          {contributionTable}
        </div>
      ) : (
        <div className="space-y-8">
          {payoutTable}
          {contributionTable}
        </div>
      )}
    </>
  );

  if (embedded) {
    return content;
  }

  return <ModuleScaffold>{content}</ModuleScaffold>;
}