"use client";

import { useEffect, useState, useMemo, useRef } from "react";
import {
  FileText,
  RefreshCw,
  SlidersHorizontal,
  Clock,
  AlertCircle,
  TrendingUp,
  Send,
  Wallet,
  ArrowUpRight,
  Search,
  ChevronLeft,
  ChevronRight,
  ArrowUp,
  ArrowDown,
  ArrowUpDown,
} from "lucide-react";
import { Container } from "@/components/common/Container";
import { Button } from "@/components/common/Button";
import { StatCard } from "@/components/app/StatCard";
import Select from "react-select";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { format } from "date-fns";
import { cn } from "@/lib/utils";
import { SEARCHABLE_SELECT_COMPONENTS } from "@/components/common/SearchableSelectParts";
import { useControlledSelectMenu } from "@/hooks/useControlledSelectMenu";
import {
  useStatementTimePeriods,
  useStatementFilter,
  type StatementTransaction,
  type StatementFilterInput,
} from "@/hooks/queries/useAgentStatement";
import { useTranslation } from "@/hooks/useTranslation";

// ─── Constants & Styles ────────────────────────────────────────────────────────

const SELECT_CLS = {
  control: () =>
    "h-10 w-full rounded-xl border border-slate-200/80 bg-white px-2 text-sm font-medium text-slate-900 outline-none transition-all hover:border-slate-300 dark:border-slate-700/60 dark:bg-slate-900/80 dark:text-white cursor-pointer shadow-sm !min-h-10",
  menu: () =>
    "select-menu-portal mt-2 overflow-hidden rounded-xl border border-slate-200 bg-white shadow-2xl dark:border-slate-700 dark:bg-slate-900 z-50",
  menuList: () => "max-h-52 overflow-y-auto py-1",
  option: ({ isFocused }: { isFocused: boolean }) =>
    cn(
      "px-3 py-2.5 text-sm cursor-pointer transition-colors",
      isFocused
        ? "bg-brand-50 text-brand-700 dark:bg-brand-500/15 dark:text-brand-300 font-semibold"
        : "text-slate-700 dark:text-slate-300 font-medium",
    ),
  placeholder: () => "text-slate-400 text-sm font-medium",
  singleValue: () => "text-sm font-semibold text-slate-800 dark:text-slate-100",
  valueContainer: () => "px-0",
  dropdownIndicator: () =>
    "text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300",
  indicatorSeparator: () => "hidden",
};

// ─── Helpers ───────────────────────────────────────────────────────────────────

function formatPeriodLabel(key: string) {
  return key
    .replace("LAST_", "")
    .replace(/_/g, " ")
    .toLowerCase()
    .replace(/\b\w/g, (c) => c.toUpperCase());
}

const TYPE_META: Record<
  string,
  { icon: React.ElementType; color: string; bg: string; label: string }
> = {
  "SEND-REMITTANCE": {
    icon: Send,
    color: "text-brand-600 dark:text-brand-400",
    bg: "bg-brand-50 dark:bg-brand-500/10",
    label: "Send Remittance",
  },
  "Money In": {
    icon: ArrowUpRight,
    color: "text-emerald-600 dark:text-emerald-400",
    bg: "bg-emerald-50 dark:bg-emerald-500/10",
    label: "Money In",
  },
  "Money Out": {
    icon: Wallet,
    color: "text-rose-600 dark:text-rose-400",
    bg: "bg-rose-50 dark:bg-rose-500/10",
    label: "Money Out",
  },
};

const STATUS_MAP: Record<string, { cls: string }> = {
  pending: { cls: "bg-amber-50 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400" },
  "review payment": { cls: "bg-sky-50 text-sky-700 dark:bg-sky-500/10 dark:text-sky-400" },
  "confirm payment": { cls: "bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400" },
  complete: { cls: "bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400" },
  settled: { cls: "bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400" },
  hold: { cls: "bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300" },
  cancel: { cls: "bg-rose-50 text-rose-700 dark:bg-rose-500/10 dark:text-rose-400" },
  failed: { cls: "bg-rose-50 text-rose-700 dark:bg-rose-500/10 dark:text-rose-400" },
  refund: { cls: "bg-purple-50 text-purple-700 dark:bg-purple-500/10 dark:text-purple-400" },
  delayed: { cls: "bg-orange-50 text-orange-700 dark:bg-orange-500/10 dark:text-orange-400" },
};

function StatusBadge({ status }: { status: string }) {
  const cfg = STATUS_MAP[status.toLowerCase()] ?? {
    cls: "bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300",
  };
  return (
    <span
      className={cn(
        "badge text-[length:var(--text-sm-fixed)] font-medium",
        cfg.cls,
      )}
    >
      {status}
    </span>
  );
}



type SortField = "trx_id" | "type" | "amount" | "payable" | "status";
type SortDir = "asc" | "desc";

function TxRow({ tx }: { tx: StatementTransaction }) {
  const { t } = useTranslation();
  const meta = TYPE_META[tx.type] ?? {
    icon: FileText,
    color: "text-slate-500",
    bg: "bg-slate-100 dark:bg-slate-800",
    label: tx.type,
  };
  const Icon = meta.icon;

  const typeLabel =
    tx.type === "SEND-REMITTANCE" ? t("agent.statements.typeSendRemittance") :
    tx.type === "Money In" ? t("agent.statements.typeMoneyIn") :
    tx.type === "Money Out" ? t("agent.statements.typeMoneyOut") : meta.label;

  return (
    <tr className="border-b border-slate-100/60 transition-colors hover:bg-slate-50/60 dark:border-white/5 dark:hover:bg-slate-800/40">
      <td className="whitespace-nowrap pl-6 pr-4 py-4">
        <div className="flex items-center gap-3">
          <div className={cn("grid h-9 w-9 shrink-0 place-items-center rounded-xl", meta.bg)}>
            <Icon className={cn("icon-md", meta.color)} />
          </div>
          <p className="text-[length:var(--text-sm-fixed)] font-bold text-slate-800 dark:text-slate-100">
            #{tx.trx_id}
          </p>
        </div>
      </td>
      <td className="whitespace-nowrap px-4 py-4">
        <span className={cn("inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-[length:var(--text-sm-fixed)] font-medium", meta.bg, meta.color)}>
          <Icon className="icon-xs" />
          {typeLabel}
        </span>
      </td>
      <td className="whitespace-nowrap px-4 py-4">
        <p className="text-[length:var(--text-sm-fixed)] font-semibold tabular-nums text-slate-900 dark:text-white">
          {Number(tx.sending_amount).toFixed(2)}{" "}
          <span className="text-[length:var(--text-sm-fixed)] font-semibold text-slate-400">{tx.currency}</span>
        </p>
      </td>
      <td className="whitespace-nowrap px-4 py-4">
        <p className="text-[length:var(--text-sm-fixed)] font-semibold tabular-nums text-emerald-600 dark:text-emerald-400">
          {Number(tx.payable_amount).toFixed(2)}{" "}
          <span className="text-[length:var(--text-sm-fixed)] font-semibold text-slate-400">{tx.currency}</span>
        </p>
      </td>
      <td className="whitespace-nowrap px-4 py-4">
        <StatusBadge status={tx.status} />
      </td>
    </tr>
  );
}

// ─── Page ──────────────────────────────────────────────────────────────────────

const DEFAULT_PERIOD = "LAST_SIX_MONTHS";
const PAGE_SIZE = 10;

export default function AgentStatementsPage() {
  const { t } = useTranslation();
  const { data: metaData, isLoading: metaLoading } = useStatementTimePeriods();
  const { mutate: filter, data: filterData, isPending: filtering, isError } = useStatementFilter();

  const [timePeriod, setTimePeriod] = useState(DEFAULT_PERIOD);
  const [status, setStatus] = useState("ALL");
  const [timePeriodSearch, setTimePeriodSearch] = useState("");
  const [statusSearch, setStatusSearch] = useState("");
  const timePeriodRef = useRef<HTMLDivElement>(null);
  const timePeriodMenu = useControlledSelectMenu(timePeriodRef, "select-menu-portal");
  const statusRef = useRef<HTMLDivElement>(null);
  const statusMenu = useControlledSelectMenu(statusRef, "select-menu-portal");
  const [startDate, setStartDate] = useState<Date | null>(null);
  const [endDate, setEndDate] = useState<Date | null>(null);
  const [search, setSearch] = useState("");
  const [page, setPage] = useState(1);

  // Load default view on mount
  useEffect(() => {
    filter({ time_period: DEFAULT_PERIOD, status: "ALL" });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Reset to page 1 when search or result set changes
  useEffect(() => { setPage(1); }, [search, filterData]);

  function handleFilter() {
    const input: StatementFilterInput = { time_period: timePeriod, status: status as "ALL" };
    if (startDate) input.start_date = format(startDate, "MM/dd/yy");
    if (endDate) input.end_date = format(endDate, "MM/dd/yy");
    filter(input);
  }

  const txList = filterData?.transaction_data ?? [];

  const filtered = search.trim()
    ? txList.filter(
        (t) =>
          t.trx_id.toLowerCase().includes(search.toLowerCase()) ||
          t.type.toLowerCase().includes(search.toLowerCase()) ||
          t.status.toLowerCase().includes(search.toLowerCase()),
      )
    : txList;

  const [sortField, setSortField] = useState<SortField>("trx_id");
  const [sortDir, setSortDir] = useState<SortDir>("desc");

  const sorted = useMemo(() => {
    return [...filtered].sort((a, b) => {
      let cmp = 0;
      if (sortField === "trx_id") cmp = String(a.trx_id).localeCompare(String(b.trx_id), undefined, { numeric: true });
      else if (sortField === "type") cmp = a.type.localeCompare(b.type);
      else if (sortField === "amount") cmp = Number(a.sending_amount) - Number(b.sending_amount);
      else if (sortField === "payable") cmp = Number(a.payable_amount) - Number(b.payable_amount);
      else if (sortField === "status") cmp = a.status.localeCompare(b.status);
      return sortDir === "asc" ? cmp : -cmp;
    });
  }, [filtered, sortField, sortDir]);

  function handleSort(field: SortField) {
    if (sortField === field) {
      setSortDir((d) => (d === "asc" ? "desc" : "asc"));
    } else {
      setSortField(field);
      setSortDir("asc");
    }
  }

  function HeaderItem({ field, label, hiddenSm }: { field: SortField; label: string; hiddenSm?: boolean }) {
    const isSorted = sortField === field;
    return (
      <button
        type="button"
        onClick={() => handleSort(field)}
        className={cn(
          "flex items-center gap-1 text-[length:var(--text-sm-fixed)] font-semibold capitalize transition-colors hover:text-slate-600 dark:hover:text-slate-200 text-start outline-none select-none whitespace-nowrap",
          hiddenSm ? "hidden sm:flex" : "flex",
          isSorted ? "text-brand-600 dark:text-brand-400" : "text-slate-400"
        )}
      >
        <span>{label}</span>
        {isSorted ? (
          sortDir === "asc" ? <ArrowUp className="icon-xs" /> : <ArrowDown className="icon-xs" />
        ) : (
          <ArrowUpDown className="h-3 w-3 opacity-30" />
        )}
      </button>
    );
  }

  // Summary stats
  const totalVolume = sorted.reduce((s, t) => s + Number(t.sending_amount), 0);
  const totalPayable = sorted.reduce((s, t) => s + Number(t.payable_amount), 0);
  const currencies = new Set(sorted.map((t) => t.currency));
  const commonCurrency = currencies.size === 1 ? sorted[0].currency : "";

  // Pagination
  const totalPages = Math.max(1, Math.ceil(sorted.length / PAGE_SIZE));
  const safePage = Math.min(page, totalPages);
  const pageStart = (safePage - 1) * PAGE_SIZE;
  const paginated = sorted.slice(pageStart, pageStart + PAGE_SIZE);

  const timePeriods = metaData?.time_period ?? [];
  const statusMap = metaData?.status ?? {};

  const INPUT =
    "h-10 w-full rounded-xl border border-slate-200/80 bg-white px-3 text-[14px] font-medium text-slate-900 outline-none transition-all hover:border-slate-300 focus:border-brand-500 focus:ring-4 focus:ring-brand-500/10 dark:border-slate-700/60 dark:bg-slate-900/80 dark:text-white dark:focus:border-brand-400 shadow-sm";

  return (
    <Container className="max-w-full space-y-6">
      {/* Page header */}
      <header className="flex items-center gap-4">
        <div className="icon-box-md grid place-items-center rounded-2xl bg-gradient-to-br from-brand-500 to-accent-500 text-white shadow-lg">
          <FileText className="icon-xl" />
        </div>
        <div>
          <h1 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-white">{t("agent.statements.title")}</h1>
          <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
            {t("agent.statements.subtitle")}
          </p>
        </div>
      </header>

      {/* Filter Panel */}
      <div className="relative z-20 rounded-3xl border border-slate-200/60 bg-white/70 shadow-lg backdrop-blur-xl dark:border-white/10 dark:bg-slate-900/50">
        <div className="flex items-center gap-3 border-b border-slate-100/80 p-6 sm:p-7 dark:border-white/5">
          <SlidersHorizontal className="h-4 w-4 text-slate-400" />
          <span className="text-[length:var(--text-lg-fixed)] font-bold text-slate-700 dark:text-white">{t("agent.statements.filterTitle")}</span>
        </div>
        <div className="p-4 sm:p-7">
          {metaLoading ? (
            <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
              {[1, 2, 3, 4].map((i) => (
                <div key={i} className="h-10 animate-pulse rounded-xl bg-slate-200 dark:bg-slate-800" />
              ))}
            </div>
          ) : (
            <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 sm:gap-3 md:grid-cols-3 xl:grid-cols-5">
              {/* Time Period */}
              <div>
                <label className="mb-1.5 block text-sm font-medium capitalize text-slate-400">
                  {t("agent.statements.timePeriodLabel")}
                </label>
                <div ref={timePeriodRef}>
                  <Select
                    instanceId="time-period-select"
                    unstyled
                    isSearchable
                    inputValue={timePeriodSearch}
                    onInputChange={(val, { action }) => { if (action === "input-change") setTimePeriodSearch(val); }}
                    menuIsOpen={timePeriodMenu.menuIsOpen}
                    onMenuOpen={timePeriodMenu.onMenuOpen}
                    onMenuClose={() => { timePeriodMenu.onMenuClose(); setTimePeriodSearch(""); }}
                    components={SEARCHABLE_SELECT_COMPONENTS}
                    menuPortalTarget={typeof document !== "undefined" ? document.body : undefined}
                    menuPosition="fixed"
                    styles={{ menuPortal: (base) => ({ ...base, zIndex: 9999 }) }}
                    classNames={SELECT_CLS}
                    options={timePeriods.map((p) => ({ value: p, label: formatPeriodLabel(p) }))}
                    value={{ value: timePeriod, label: formatPeriodLabel(timePeriod) }}
                    onChange={(opt) => setTimePeriod(opt?.value ?? DEFAULT_PERIOD)}
                  />
                </div>
              </div>

              {/* Status */}
              <div>
                <label className="mb-1.5 block text-sm font-medium capitalize text-slate-400">
                  {t("agent.statements.statusLabel")}
                </label>
                <div ref={statusRef}>
                  <Select
                    instanceId="status-select"
                    unstyled
                    isSearchable
                    inputValue={statusSearch}
                    onInputChange={(val, { action }) => { if (action === "input-change") setStatusSearch(val); }}
                    menuIsOpen={statusMenu.menuIsOpen}
                    onMenuOpen={statusMenu.onMenuOpen}
                    onMenuClose={() => { statusMenu.onMenuClose(); setStatusSearch(""); }}
                    components={SEARCHABLE_SELECT_COMPONENTS}
                    menuPortalTarget={typeof document !== "undefined" ? document.body : undefined}
                    menuPosition="fixed"
                    styles={{ menuPortal: (base) => ({ ...base, zIndex: 9999 }) }}
                    classNames={SELECT_CLS}
                    options={Object.entries(statusMap).map(([label, val]) => ({ value: String(val), label }))}
                    value={{
                      value: status,
                      label: Object.entries(statusMap).find(([_, v]) => String(v) === status)?.[0] ?? "ALL",
                    }}
                    onChange={(opt) => setStatus(opt?.value ?? "ALL")}
                  />
                </div>
              </div>

              {/* Start Date */}
              <div className="relative">
                <label className="mb-1.5 block text-sm font-medium capitalize text-slate-400">
                  {t("agent.statements.startDateLabel")}
                </label>
                <DatePicker
                  selected={startDate}
                  onChange={(date: Date | null) => setStartDate(date)}
                  placeholderText="mm/dd/yyyy"
                  className={INPUT}
                  wrapperClassName="w-full"
                  dateFormat="MM/dd/yyyy"
                />
              </div>

              {/* End Date */}
              <div className="relative">
                <label className="mb-1.5 block text-sm font-medium capitalize text-slate-400">
                  {t("agent.statements.endDateLabel")}
                </label>
                <DatePicker
                  selected={endDate}
                  onChange={(date: Date | null) => setEndDate(date)}
                  placeholderText="mm/dd/yyyy"
                  className={INPUT}
                  wrapperClassName="w-full"
                  dateFormat="MM/dd/yyyy"
                />
              </div>

              {/* Apply Filter Button */}
              <div className="flex items-end">
                <Button
                  size="md"
                  onClick={handleFilter}
                  disabled={filtering}
                  className="h-10 w-full bg-gradient-to-r from-brand-600 to-brand-500 font-bold text-white shadow-lg shadow-brand-500/20 hover:-translate-y-0.5 transition-all"
                >
                  {filtering ? (
                    <>
                      <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
                      {t("agent.statements.loading")}
                    </>
                  ) : (
                    <>
                      <RefreshCw className="mr-2 h-4 w-4" />
                      {t("agent.statements.applyFilter")}
                    </>
                  )}
                </Button>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Stats Row */}
      {txList.length > 0 && (
        <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-3">
          <StatCard
            label={t("agent.statements.statTotalTransactions")}
            value={String(sorted.length)}
            icon={FileText}
            accent="brand"
          />
          <StatCard
            label={t("agent.statements.statTotalVolume")}
            value={`${totalVolume.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}${commonCurrency ? ` ${commonCurrency}` : ""}`}
            icon={TrendingUp}
            accent="emerald"
          />
          <StatCard
            label={t("agent.statements.statTotalPayable")}
            value={`${totalPayable.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}${commonCurrency ? ` ${commonCurrency}` : ""}`}
            icon={Wallet}
            accent="amber"
          />
        </div>
      )}

      {/* Results Table */}
      <div className="relative rounded-3xl border border-slate-200/60 bg-white/60 shadow-lg backdrop-blur-xl dark:border-white/10 dark:bg-slate-900/40">
        {/* Table Header */}
        <div className="flex flex-col gap-3 border-b border-slate-100/80 p-6 sm:flex-row sm:items-center sm:justify-between sm:p-7 dark:border-white/5">
          <div>
            <h2 className="text-[length:var(--text-lg-fixed)] font-bold text-slate-900 dark:text-white">
              {t("agent.statements.tableTitle")}
            </h2>
            <p className="mt-0.5 text-[length:var(--text-sm-fixed)] font-medium text-slate-400">
              {filtering
                ? t("agent.statements.fetching")
                : sorted.length > 0
                  ? t("agent.statements.range")
                      .replace("{start}", String(pageStart + 1))
                      .replace("{end}", String(Math.min(pageStart + PAGE_SIZE, sorted.length)))
                      .replace("{total}", String(sorted.length))
                  : "0 records"}
            </p>
          </div>

          {/* Search */}
          {txList.length > 0 && (
            <div className="relative sm:w-64">
              <Search className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-400" />
              <input
                type="text"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder={t("agent.statements.searchPlaceholder")}
                className="h-9 w-full rounded-xl border border-slate-200/80 bg-white pl-9 pr-3 text-sm font-normal text-slate-900 outline-none transition-all focus:border-brand-500 focus:ring-4 focus:ring-brand-500/10 dark:border-slate-700 dark:bg-slate-900 dark:text-white shadow-sm"
              />
            </div>
          )}
        </div>

        {/* Body */}
        {filtering ? (
          <div className="divide-y divide-slate-100/60 dark:divide-white/5">
            {Array.from({ length: 5 }).map((_, i) => (
              <div key={i} className="flex items-center gap-6 px-6 py-4 sm:px-7">
                <div className="h-9 w-9 animate-pulse rounded-xl bg-slate-200 dark:bg-slate-700 shrink-0" />
                <div className="space-y-1.5 flex-1">
                  <div className="h-4 w-32 animate-pulse rounded-lg bg-slate-200 dark:bg-slate-700" />
                  <div className="h-3 w-20 animate-pulse rounded-lg bg-slate-200 dark:bg-slate-700" />
                </div>
                <div className="h-4 w-24 animate-pulse rounded-lg bg-slate-200 dark:bg-slate-700" />
                <div className="h-6 w-20 animate-pulse rounded-full bg-slate-200 dark:bg-slate-700" />
              </div>
            ))}
          </div>
        ) : isError ? (
          <div className="flex flex-col items-center gap-3 py-16 text-center">
            <AlertCircle className="h-8 w-8 text-rose-400" />
            <p className="text-sm font-bold text-slate-700 dark:text-slate-200">
              {t("agent.statements.failedToLoad")}
            </p>
            <button
              onClick={handleFilter}
              className="text-xs font-bold text-brand-600 hover:underline dark:text-brand-400"
            >
              {t("agent.statements.tryAgain")}
            </button>
          </div>
        ) : sorted.length === 0 ? (
          <div className="flex flex-col items-center gap-3 py-16 text-center">
            <div className="icon-box-lg grid place-items-center rounded-2xl bg-slate-100 dark:bg-slate-800">
              <Clock className="h-7 w-7 text-slate-400" />
            </div>
            <div>
              <p className="text-sm font-bold text-slate-600 dark:text-slate-300">
                {search ? t("agent.statements.noMatchingTransactions") : t("agent.statements.noTransactions")}
              </p>
              <p className="mt-1 text-xs text-slate-400">
                {search ? t("agent.statements.tryDifferentSearch") : t("agent.statements.tryAdjustFilters")}
              </p>
            </div>
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full border-collapse">
              <thead>
                <tr className="border-b border-slate-100/60 dark:border-white/5">
                  {(["trx_id", "type", "amount", "payable", "status"] as SortField[]).map((f, i) => (
                    <th key={f} className={cn("px-4 py-3 text-start", i === 0 && "pl-6")}>
                      <HeaderItem
                        field={f}
                        label={[
                          t("agent.statements.colTransactionId"),
                          t("agent.statements.colType"),
                          t("agent.statements.colAmount"),
                          t("agent.statements.colPayable"),
                          t("agent.statements.colStatus"),
                        ][i]}
                        hiddenSm={false}
                      />
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {paginated.map((tx) => (
                  <TxRow key={tx.trx_id} tx={tx} />
                ))}
              </tbody>
            </table>
          </div>
        )}

        {/* Pagination */}
        {!filtering && sorted.length > PAGE_SIZE && (
          <div className="flex items-center justify-between border-t border-slate-100/80 px-6 py-6 dark:border-white/5 sm:px-7 sm:py-7">
            <p className="text-xs font-medium text-slate-400">
              {t("agent.statements.pageOf").replace("{page}", String(safePage)).replace("{total}", String(totalPages))}
            </p>
            <div className="flex items-center gap-1">
              <button
                type="button"
                onClick={() => setPage((p) => Math.max(1, p - 1))}
                disabled={safePage === 1}
                className="btn-icon-sm rounded-full border border-slate-200 bg-white text-slate-500 transition hover:border-brand-300 hover:text-brand-600 disabled:cursor-not-allowed disabled:opacity-40 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400"
              >
                <ChevronLeft className="icon-md" />
              </button>

              {Array.from({ length: totalPages }, (_, i) => i + 1)
                .filter((n) => n === 1 || n === totalPages || Math.abs(n - safePage) <= 1)
                .reduce<(number | "…")[]>((acc, n, idx, arr) => {
                  if (idx > 0 && n - (arr[idx - 1] as number) > 1) acc.push("…");
                  acc.push(n);
                  return acc;
                }, [])
                .map((n, i) =>
                  n === "…" ? (
                    <span key={`ellipsis-${i}`} className="px-1 text-xs text-slate-400">…</span>
                  ) : (
                    <button
                      key={n}
                      type="button"
                      onClick={() => setPage(n as number)}
                      className={cn(
                        "h-8 min-w-8 rounded-full px-2 text-xs font-semibold transition",
                        safePage === n
                          ? "bg-brand-600 text-white shadow-sm"
                          : "border border-slate-200 bg-white text-slate-600 hover:border-brand-300 hover:text-brand-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300",
                      )}
                    >
                      {n}
                    </button>
                  ),
                )}

              <button
                type="button"
                onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
                disabled={safePage === totalPages}
                className="btn-icon-sm rounded-full border border-slate-200 bg-white text-slate-500 transition hover:border-brand-300 hover:text-brand-600 disabled:cursor-not-allowed disabled:opacity-40 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400"
              >
                <ChevronRight className="icon-md" />
              </button>
            </div>
          </div>
        )}
      </div>
    </Container>
  );
}