"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { Eye } from "lucide-react";
import { useTranslation } from "react-i18next";
import { toast } from "sonner";

import {
  getSettlementOperations,
  type SettlementOperationRow,
} from "@/api/admin-agent-settlement";
import { AdminListPaginationFooter } from "@/components/admin/admin-list-pagination-footer";
import { AdminTableLoadingRow } from "@/components/admin/admin-loading-state";
import { AdminTableNoResourceRow } from "@/components/admin/admin-no-resource-state";
import { AdminRowActionsMenu } from "@/components/admin/admin-row-actions-menu";
import { Button } from "@/components/ui/button";
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 { AdminTableMoney, adminMoneyCellClassName } from "@/components/admin/admin-table-money";
import { formatDashboardMoneyMinor } from "@/modules/dashboard/use-dashboard-analytics";
import { LotteryApiBizError } from "@/types/api/errors";
import { settlementAdjustmentTypeLabel } from "@/modules/settlement/settlement-status-label";
import { cn } from "@/lib/utils";

const OPERATION_TYPES = ["all", "payment", "adjustment", "reversal", "bad_debt"] as const;
type OperationTypeFilter = (typeof OPERATION_TYPES)[number];

type OperationFilters = {
  billId: string;
  keyword: string;
  operationType: OperationTypeFilter;
};

function defaultFilters(): OperationFilters {
  return {
    billId: "",
    keyword: "",
    operationType: "all",
  };
}

function rowKey(row: SettlementOperationRow): string {
  return `${row.kind}:${row.record_id}`;
}

type SettlementOperationsPanelProps = {
  adminSiteId: number;
  settlementPeriodId: number;
  currencyCode: string;
  refreshKey?: number;
  onOpenBill: (billId: number) => void;
};

export function SettlementOperationsPanel({
  adminSiteId,
  settlementPeriodId,
  currencyCode,
  refreshKey = 0,
  onOpenBill,
}: SettlementOperationsPanelProps): React.ReactElement {
  const { t } = useTranslation(["settlementCenter", "agents", "common"]);
  const formatTs = useAdminDateTimeFormatter();
  const initialFilters = useMemo(() => defaultFilters(), []);

  const [draft, setDraft] = useState<OperationFilters>(initialFilters);
  const [applied, setApplied] = useState<OperationFilters>(initialFilters);
  const [rows, setRows] = useState<SettlementOperationRow[]>([]);
  const [total, setTotal] = useState(0);
  const [lastPage, setLastPage] = useState(1);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(1);
  const [perPage, setPerPage] = useState(20);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const billId = Number(applied.billId.trim());
      const data = await getSettlementOperations({
        admin_site_id: adminSiteId,
        settlement_period_id: settlementPeriodId,
        bill_id:
          applied.billId.trim() !== "" && Number.isInteger(billId) && billId > 0
            ? billId
            : undefined,
        keyword: applied.keyword.trim() || undefined,
        operation_type: applied.operationType,
        page,
        per_page: perPage,
      });

      setRows(data.items ?? []);
      setTotal(data.total ?? 0);
      setLastPage(Math.max(1, data.last_page ?? 1));
    } catch (err: unknown) {
      setRows([]);
      setTotal(0);
      setLastPage(1);
      toast.error(
        err instanceof LotteryApiBizError
          ? err.message
          : t("settlementCenter:operations.loadFailed", { defaultValue: "收付与调账记录加载失败" }),
      );
    } finally {
      setLoading(false);
    }
  }, [adminSiteId, applied, page, perPage, settlementPeriodId, t]);

  useEffect(() => {
    void load();
  }, [load, refreshKey]);

  useEffect(() => {
    setDraft(initialFilters);
    setApplied(initialFilters);
    setPage(1);
  }, [initialFilters, settlementPeriodId]);

  useEffect(() => {
    if (page > lastPage) {
      setPage(lastPage);
    }
  }, [lastPage, page]);

  const operationTypeLabel = (value: OperationTypeFilter): string => {
    if (value === "all") {
      return t("operations.filterAllTypes", { defaultValue: "全部类型" });
    }
    if (value === "payment") {
      return t("operations.typePayment", { defaultValue: "登记收付" });
    }
    return settlementAdjustmentTypeLabel(value, t);
  };

  const kindBadgeClass = (kind: SettlementOperationRow["kind"]): string => {
    if (kind === "payment") {
      return "border-emerald-200/60 bg-emerald-50 text-emerald-700 dark:border-emerald-800/60 dark:bg-emerald-950/30 dark:text-emerald-400";
    }
    if (kind === "bad_debt") {
      return "border-rose-200/60 bg-rose-50 text-rose-700 dark:border-rose-800/60 dark:bg-rose-950/30 dark:text-rose-400";
    }
    if (kind === "reversal") {
      return "border-amber-200/60 bg-amber-50 text-amber-700 dark:border-amber-800/60 dark:bg-amber-950/30 dark:text-amber-400";
    }
    return "border-blue-200/60 bg-blue-50 text-blue-700 dark:border-blue-800/60 dark:bg-blue-950/30 dark:text-blue-400";
  };

  const runSearch = (): void => {
    setPage(1);
    setApplied({ ...draft });
  };

  const resetFilters = (): void => {
    setDraft(initialFilters);
    setApplied(initialFilters);
    setPage(1);
  };

  const colSpan = 7;

  return (
    <div className="space-y-5">
      <div className="rounded-xl border border-border/70 bg-card p-5 shadow-sm">
        <div className="grid gap-x-5 gap-y-4 sm:grid-cols-2 lg:grid-cols-3">
          <div className="grid gap-2">
            <Label htmlFor="ops-bill-id" className="text-muted-foreground">
              {t("columns.billId", { defaultValue: "账单 ID" })}
            </Label>
            <Input
              id="ops-bill-id"
              inputMode="numeric"
              placeholder={t("billsPanel.optional", { defaultValue: "可选" })}
              value={draft.billId}
              onChange={(e) => setDraft((d) => ({ ...d, billId: e.target.value }))}
              onKeyDown={(e) => {
                if (e.key === "Enter") {
                  runSearch();
                }
              }}
              className="bg-background/50 transition-colors focus:bg-background"
            />
          </div>
          <div className="grid gap-2">
            <Label htmlFor="ops-keyword" className="text-muted-foreground">
              {t("operations.keyword", { defaultValue: "关键词" })}
            </Label>
            <Input
              id="ops-keyword"
              placeholder={t("operations.keywordPh", {
                defaultValue: "方式、原因、凭证、收付方向",
              })}
              value={draft.keyword}
              onChange={(e) => setDraft((d) => ({ ...d, keyword: e.target.value }))}
              onKeyDown={(e) => {
                if (e.key === "Enter") {
                  runSearch();
                }
              }}
              className="bg-background/50 transition-colors focus:bg-background"
            />
          </div>
          <div className="grid gap-2">
            <Label htmlFor="ops-type" className="text-muted-foreground">
              {t("operations.operationType", { defaultValue: "操作类型" })}
            </Label>
            <Select
              modal={false}
              value={draft.operationType}
              onValueChange={(v) =>
                setDraft((d) => ({
                  ...d,
                  operationType: (v ?? "all") as OperationTypeFilter,
                }))
              }
            >
              <SelectTrigger id="ops-type" className="w-full bg-background/50 transition-colors focus:bg-background">
                <SelectValue>{() => operationTypeLabel(draft.operationType)}</SelectValue>
              </SelectTrigger>
              <SelectContent>
                {OPERATION_TYPES.map((value) => (
                  <SelectItem key={value} value={value}>
                    {operationTypeLabel(value)}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>

        <div className="mt-5 flex flex-wrap items-center gap-3">
          <Button type="button" onClick={runSearch}>
            {t("billsPanel.searchBtn", { defaultValue: "搜索" })}
          </Button>
          <Button type="button" variant="outline" onClick={resetFilters}>
            {t("billsPanel.reset", { defaultValue: "重置" })}
          </Button>
        </div>
      </div>

      <div className="admin-table-shell overflow-x-auto rounded-xl border border-border/70 bg-card shadow-sm">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>{t("columns.time", { defaultValue: "时间" })}</TableHead>
              <TableHead>{t("operations.operationType", { defaultValue: "操作类型" })}</TableHead>
              <TableHead>{t("columns.billId", { defaultValue: "账单 ID" })}</TableHead>
              <TableHead className="text-right">{t("columns.amount", { defaultValue: "金额" })}</TableHead>
              <TableHead>{t("columns.summary", { defaultValue: "摘要" })}</TableHead>
              <TableHead>{t("columns.detail", { defaultValue: "说明" })}</TableHead>
              <TableHead className="sticky right-0 z-20 w-14 bg-muted text-center shadow-[-1px_0_0_rgba(203,213,225,0.7)]">
                {t("common:table.actions", { defaultValue: "操作" })}
              </TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {loading ? <AdminTableLoadingRow colSpan={colSpan} /> : null}
            {!loading && rows.length === 0 ? (
              <AdminTableNoResourceRow colSpan={colSpan} cellClassName="py-12 text-center" />
            ) : null}
            {!loading
              ? rows.map((row) => (
                  <TableRow key={rowKey(row)}>
                    <TableCell className="whitespace-nowrap text-xs text-muted-foreground">
                      {formatTs(row.sort_at)}
                    </TableCell>
                    <TableCell>
                      <span
                        className={cn(
                          "inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium",
                          kindBadgeClass(row.kind),
                        )}
                      >
                        {operationTypeLabel(row.kind)}
                      </span>
                    </TableCell>
                    <TableCell className="tabular-nums">
                      {row.bill_id > 0 ? `#${row.bill_id}` : "—"}
                    </TableCell>
                    <TableCell className={adminMoneyCellClassName("text-right font-medium")}>
                      <AdminTableMoney>
                        {formatDashboardMoneyMinor(row.amount, currencyCode)}
                      </AdminTableMoney>
                    </TableCell>
                    <TableCell className="max-w-[160px] truncate text-sm">{row.summary}</TableCell>
                    <TableCell className="max-w-[240px] truncate text-sm text-muted-foreground">
                      {row.detail ?? "—"}
                    </TableCell>
                    <TableCell
                      className="sticky right-0 z-10 bg-card text-center shadow-[-1px_0_0_rgba(203,213,225,0.7)]"
                      onClick={(e) => e.stopPropagation()}
                    >
                      {row.bill_id > 0 ? (
                        <AdminRowActionsMenu
                          actions={[
                            {
                              key: "detail",
                              label: t("actions.detail", { defaultValue: "详情" }),
                              icon: Eye,
                              onClick: () => onOpenBill(row.bill_id),
                            },
                          ]}
                        />
                      ) : (
                        "—"
                      )}
                    </TableCell>
                  </TableRow>
                ))
              : null}
          </TableBody>
        </Table>
      </div>

      {!loading && total > 0 ? (
        <AdminListPaginationFooter
          selectId="settlement-operations-per-page"
          page={page}
          perPage={perPage}
          total={total}
          lastPage={lastPage}
          loading={loading}
          onPageChange={setPage}
          onPerPageChange={(value) => {
            setPerPage(value);
            setPage(1);
          }}
        />
      ) : null}
    </div>
  );
}