"use client";

import { useEffect, useMemo, useState } from "react";
import { ArrowDownLeft, ArrowUpRight, ChevronLeft, ChevronRight, Filter, Layers, Receipt, RotateCcw, Search, Wallet, XCircle } from "lucide-react";
import { Container } from "@/components/common/Container";
import { Card } from "@/components/common/Card";
import { cn } from "@/lib/utils";
import { AgentTransactionsSkeleton } from "@/components/skeletons/AgentTransactionsSkeleton";
import { useTranslation } from "@/hooks/useTranslation";
import {
  useAgentTransactions,
  type SendRemittanceTx,
  type MoneyInTx,
  type MoneyOutTx,
} from "@/hooks/queries/useAgentDashboard";

// ─── Status badge ─────────────────────────────────────────────────────────────

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

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

// ─── Currency pair ────────────────────────────────────────────────────────────

function CurrencyPair({ from, to }: { from: string; to: string }) {
  return (
    <span dir="ltr" className="inline-flex items-center gap-1 text-xs font-medium text-slate-500 dark:text-slate-400">
      <span className="rounded-md bg-slate-100 px-1.5 py-0.5 dark:bg-slate-800">{from}</span>
      <span className="text-slate-300 dark:text-slate-600">→</span>
      <span className="rounded-md bg-slate-100 px-1.5 py-0.5 dark:bg-slate-800">{to}</span>
    </span>
  );
}

// ─── Table shell (clean, equally distributed) ────────────────────────────────

function TableShell({ children }: { children: React.ReactNode }) {
  return (
    <div className="-mx-6 sm:-mx-7 overflow-x-auto">
      <table className="w-full border-collapse [&_th:first-child]:ps-6 [&_th:last-child]:pe-6 [&_td:first-child]:ps-6 [&_td:last-child]:pe-6 sm:[&_th:first-child]:ps-7 sm:[&_th:last-child]:pe-7 sm:[&_td:first-child]:ps-7 sm:[&_td:last-child]:pe-7">{children}</table>
    </div>
  );
}

function THead({ children }: { children: React.ReactNode }) {
  return (
    <thead>
      <tr className="border-b border-slate-200 dark:border-slate-800">
        {children}
      </tr>
    </thead>
  );
}

function TH({ children, className = "" }: { children: React.ReactNode; className?: string }) {
  return (
    <th className={`whitespace-nowrap px-3 py-5 text-start text-[length:var(--text-sm)] font-medium capitalize text-slate-600 dark:text-slate-300 ${className}`}>
      {children}
    </th>
  );
}

function EmptyRow({ cols }: { cols: number }) {
  const { t } = useTranslation();
  return (
    <tr>
      <td colSpan={cols} className="py-16 text-center text-sm font-medium text-slate-400">
        {t("agent.transactions.noRecordsFound")}
      </td>
    </tr>
  );
}

// ─── Pagination footer ────────────────────────────────────────────────────────

const PAGE_SIZE = 10;

function PaginationFooter({
  page,
  totalPages,
  onPageChange,
}: {
  page: number;
  totalPages: number;
  onPageChange: (p: number) => void;
}) {
  if (totalPages <= 1) return null;
  return (
    <div className="-mx-6 sm:-mx-7 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">
        Page {page} of {totalPages}
      </p>
      <div className="flex items-center gap-1">
        <button
          type="button"
          onClick={() => onPageChange(Math.max(1, page - 1))}
          disabled={page === 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 - page) <= 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((item, idx) =>
            item === "…" ? (
              <span key={`ellipsis-${idx}`} className="px-1 text-xs text-slate-400">…</span>
            ) : (
              <button
                key={item}
                type="button"
                onClick={() => onPageChange(item)}
                className={[
                  "btn-icon-sm rounded-full text-xs font-bold transition",
                  page === item
                    ? "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",
                ].join(" ")}
              >
                {item}
              </button>
            ),
          )}

        <button
          type="button"
          onClick={() => onPageChange(Math.min(totalPages, page + 1))}
          disabled={page === 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>
  );
}

// ─── Send Remittance ──────────────────────────────────────────────────────────

function SendRemittanceTable({ rows, search }: { rows: SendRemittanceTx[]; search: string }) {
  const { t } = useTranslation();
  const [page, setPage] = useState(1);

  const filtered = useMemo(() => {
    const q = search.toLowerCase();
    if (!q) return rows;
    return rows.filter(
      (r) =>
        r.transaction_id.toLowerCase().includes(q) ||
        r.sender_name.toLowerCase().includes(q) ||
        r.recipient_name.toLowerCase().includes(q),
    );
  }, [rows, search]);

  useEffect(() => { setPage(1); }, [search, rows]);

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

  return (
    <div>
      <TableShell>
        <THead>
          <TH>{t("agent.transactions.colTransaction")}</TH>
          <TH>{t("agent.transactions.colSenderRecipient")}</TH>
          <TH>{t("agent.transactions.colPair")}</TH>
          <TH>{t("agent.transactions.colSent")}</TH>
          <TH>{t("agent.transactions.colCharge")}</TH>
          <TH>{t("agent.transactions.colWillGet")}</TH>
          <TH>{t("agent.transactions.colStatus")}</TH>
        </THead>
        <tbody className="">
          {paginated.length === 0 ? <EmptyRow cols={7} /> : paginated.map((r) => (
            <tr
              key={r.transaction_id}
              className="group hover:bg-slate-50/60 dark:hover:bg-slate-800/40 transition-colors"
            >
              <td className="px-3 py-5 text-start min-w-0">
                <p className="truncate text-sm font-medium tabular-nums text-brand-600 dark:text-brand-400">{r.transaction_id}</p>
                <p className="text-xs text-slate-400">{r.created_at}</p>
              </td>
              <td className="px-3 py-5 text-start min-w-0">
                <p className="truncate text-sm font-medium text-slate-800 dark:text-slate-200">{r.sender_name}</p>
                <p className="truncate text-xs text-slate-400">{r.recipient_name}</p>
              </td>
              <td className="px-3 py-5 text-start min-w-0">
                <CurrencyPair from={r.sender_currency} to={r.receiver_currency} />
              </td>
              <td className="px-3 py-5 text-start text-sm font-medium tabular-nums text-slate-800 dark:text-slate-200 min-w-0">
                {r.request_amount.toFixed(2)}
              </td>
              <td className="px-3 py-5 text-start text-sm font-medium tabular-nums text-rose-500 dark:text-rose-400 min-w-0">
                {r.total_charge.toFixed(2)}
              </td>
              <td className="px-3 py-5 text-start text-sm font-medium tabular-nums text-emerald-600 dark:text-emerald-400 min-w-0">
                {r.will_get_amount.toLocaleString()}
              </td>
              <td className="px-3 py-5 text-start min-w-0"><StatusBadge status={r.status} /></td>
            </tr>
          ))}
        </tbody>
      </TableShell>

      <PaginationFooter page={safePage} totalPages={totalPages} onPageChange={setPage} />
    </div>
  );
}

// ─── Money In ─────────────────────────────────────────────────────────────────

function MoneyInTable({ rows, search }: { rows: MoneyInTx[]; search: string }) {
  const { t } = useTranslation();
  const [page, setPage] = useState(1);

  const filtered = useMemo(() => {
    const q = search.toLowerCase();
    if (!q) return rows;
    return rows.filter(
      (r) => r.transaction_id.toLowerCase().includes(q) || r.payment_method.toLowerCase().includes(q),
    );
  }, [rows, search]);

  useEffect(() => { setPage(1); }, [search, rows]);

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

  return (
    <div>
      <TableShell>
        <THead>
          <TH>{t("agent.transactions.colTransaction")}</TH>
          <TH>{t("agent.transactions.colMethod")}</TH>
          <TH>{t("agent.transactions.colPair")}</TH>
          <TH>{t("agent.transactions.colAmount")}</TH>
          <TH>{t("agent.transactions.colCharge")}</TH>
          <TH>{t("agent.transactions.colPayable")}</TH>
          <TH>{t("agent.transactions.colStatus")}</TH>
        </THead>
        <tbody className="">
          {paginated.length === 0 ? <EmptyRow cols={7} /> : paginated.map((r) => (
            <tr key={r.transaction_id} className="group hover:bg-slate-50/60 dark:hover:bg-slate-800/40 transition-colors">
              <td className="px-3 py-5 text-start min-w-0">
                <p className="truncate text-sm font-medium tabular-nums text-brand-600 dark:text-brand-400">{r.transaction_id}</p>
                <p className="text-xs text-slate-400">{r.created_at}</p>
              </td>
              <td className="px-3 py-5 text-start text-sm font-medium text-slate-700 dark:text-slate-300 min-w-0">
                <p className="truncate">{r.payment_method}</p>
              </td>
              <td className="px-3 py-5 text-start min-w-0">
                <CurrencyPair from={r.sender_currency} to={r.receiver_currency} />
              </td>
              <td className="px-3 py-5 text-start text-sm font-medium tabular-nums text-slate-800 dark:text-slate-200 min-w-0">
                {r.request_amount.toFixed(2)}
              </td>
              <td className="px-3 py-5 text-start text-sm font-medium tabular-nums text-rose-500 dark:text-rose-400 min-w-0">
                {r.total_charge.toFixed(2)}
              </td>
              <td className="px-3 py-5 text-start text-sm font-medium tabular-nums text-brand-600 dark:text-brand-400 min-w-0">
                {r.payable_amount.toFixed(2)}
              </td>
              <td className="px-3 py-5 text-start min-w-0"><StatusBadge status={r.status} /></td>
            </tr>
          ))}
        </tbody>
      </TableShell>

      <PaginationFooter page={safePage} totalPages={totalPages} onPageChange={setPage} />
    </div>
  );
}

// ─── Money Out ────────────────────────────────────────────────────────────────

function MoneyOutTable({ rows, search }: { rows: MoneyOutTx[]; search: string }) {
  const { t } = useTranslation();
  const [page, setPage] = useState(1);

  const filtered = useMemo(() => {
    const q = search.toLowerCase();
    if (!q) return rows;
    return rows.filter(
      (r) => r.transaction_id.toLowerCase().includes(q) || r.payment_method.toLowerCase().includes(q),
    );
  }, [rows, search]);

  useEffect(() => { setPage(1); }, [search, rows]);

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

  return (
    <div>
      <TableShell>
        <THead>
          <TH>{t("agent.transactions.colTransaction")}</TH>
          <TH>{t("agent.transactions.colMethod")}</TH>
          <TH>{t("agent.transactions.colPair")}</TH>
          <TH>{t("agent.transactions.colAmount")}</TH>
          <TH>{t("agent.transactions.colCharge")}</TH>
          <TH>{t("agent.transactions.colPayable")}</TH>
          <TH>{t("agent.transactions.colStatus")}</TH>
        </THead>
        <tbody className="">
          {paginated.length === 0 ? <EmptyRow cols={7} /> : paginated.map((r) => (
            <tr key={r.transaction_id} className="group hover:bg-slate-50/60 dark:hover:bg-slate-800/40 transition-colors">
              <td className="px-3 py-5 text-start min-w-0">
                <p className="truncate text-sm font-medium tabular-nums text-brand-600 dark:text-brand-400">{r.transaction_id}</p>
                <p className="text-xs text-slate-400">{r.created_at}</p>
              </td>
              <td className="px-3 py-5 text-start text-sm font-medium text-slate-700 dark:text-slate-300 min-w-0">
                <p className="truncate">{r.payment_method}</p>
              </td>
              <td className="px-3 py-5 text-start min-w-0">
                <CurrencyPair from={r.sender_currency} to={r.receiver_currency} />
              </td>
              <td className="px-3 py-5 text-start text-sm font-medium tabular-nums text-slate-800 dark:text-slate-200 min-w-0">
                {r.request_amount.toFixed(2)}
              </td>
              <td className="px-3 py-5 text-start text-sm font-medium tabular-nums text-rose-500 dark:text-rose-400 min-w-0">
                {r.total_charge.toFixed(2)}
              </td>
              <td className="px-3 py-5 text-start text-sm font-medium tabular-nums text-brand-600 dark:text-brand-400 min-w-0">
                {r.payable_amount.toFixed(2)}
              </td>
              <td className="px-3 py-5 text-start min-w-0"><StatusBadge status={r.status} /></td>
            </tr>
          ))}
        </tbody>
      </TableShell>

      <PaginationFooter page={safePage} totalPages={totalPages} onPageChange={setPage} />
    </div>
  );
}

// ─── All (combined) ───────────────────────────────────────────────────────────

type TxCategory = "remittance" | "money_in" | "money_out";

interface UnifiedRow {
  key: string;
  category: TxCategory;
  transaction_id: string;
  created_at: string;
  detail: string;
  detailSub?: string;
  from: string;
  to: string;
  amount: number;
  charge: number;
  net: number;
  status: string;
}

const TYPE_CHIP_STYLE: Record<TxCategory, string> = {
  remittance: "bg-brand-50 text-brand-700 dark:bg-brand-500/10 dark:text-brand-400",
  money_in:   "bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400",
  money_out:  "bg-amber-50 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400",
};

function toUnifiedRows(
  remittance: SendRemittanceTx[],
  moneyIn: MoneyInTx[],
  moneyOut: MoneyOutTx[],
): UnifiedRow[] {
  return [
    ...remittance.map((r): UnifiedRow => ({
      key: `remittance-${r.transaction_id}`,
      category: "remittance",
      transaction_id: r.transaction_id,
      created_at: r.created_at,
      detail: r.sender_name,
      detailSub: r.recipient_name,
      from: r.sender_currency,
      to: r.receiver_currency,
      amount: r.request_amount,
      charge: r.total_charge,
      net: r.will_get_amount,
      status: r.status,
    })),
    ...moneyIn.map((r): UnifiedRow => ({
      key: `money_in-${r.transaction_id}`,
      category: "money_in",
      transaction_id: r.transaction_id,
      created_at: r.created_at,
      detail: r.payment_method,
      from: r.sender_currency,
      to: r.receiver_currency,
      amount: r.request_amount,
      charge: r.total_charge,
      net: r.payable_amount,
      status: r.status,
    })),
    ...moneyOut.map((r): UnifiedRow => ({
      key: `money_out-${r.transaction_id}`,
      category: "money_out",
      transaction_id: r.transaction_id,
      created_at: r.created_at,
      detail: r.payment_method,
      from: r.sender_currency,
      to: r.receiver_currency,
      amount: r.request_amount,
      charge: r.total_charge,
      net: r.payable_amount,
      status: r.status,
    })),
  ];
}

function AllTransactionsTable({ rows, search }: { rows: UnifiedRow[]; search: string }) {
  const { t } = useTranslation();
  const [page, setPage] = useState(1);

  const typeLabel: Record<TxCategory, string> = {
    remittance: t("agent.transactions.tabSendRemittance"),
    money_in:   t("agent.transactions.tabMoneyIn"),
    money_out:  t("agent.transactions.tabMoneyOut"),
  };

  const filtered = useMemo(() => {
    const q = search.toLowerCase();
    if (!q) return rows;
    return rows.filter(
      (r) =>
        r.transaction_id.toLowerCase().includes(q) ||
        r.detail.toLowerCase().includes(q) ||
        (r.detailSub?.toLowerCase().includes(q) ?? false),
    );
  }, [rows, search]);

  useEffect(() => { setPage(1); }, [search, rows]);

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

  return (
    <div>
      <TableShell>
        <THead>
          <TH>{t("agent.transactions.colTransaction")}</TH>
          <TH>{t("agent.transactions.colType")}</TH>
          <TH>{t("agent.transactions.colDetail")}</TH>
          <TH>{t("agent.transactions.colPair")}</TH>
          <TH>{t("agent.transactions.colAmount")}</TH>
          <TH>{t("agent.transactions.colCharge")}</TH>
          <TH>{t("agent.transactions.colNet")}</TH>
          <TH>{t("agent.transactions.colStatus")}</TH>
        </THead>
        <tbody>
          {paginated.length === 0 ? <EmptyRow cols={8} /> : paginated.map((r) => (
            <tr key={r.key} className="group hover:bg-slate-50/60 dark:hover:bg-slate-800/40 transition-colors">
              <td className="px-3 py-5 text-start min-w-0">
                <p className="truncate text-sm font-medium tabular-nums text-brand-600 dark:text-brand-400">{r.transaction_id}</p>
                <p className="text-xs text-slate-400">{r.created_at}</p>
              </td>
              <td className="px-3 py-5 text-start min-w-0">
                <span className={cn("badge text-[length:var(--text-sm-fixed)] font-medium", TYPE_CHIP_STYLE[r.category])}>
                  {typeLabel[r.category]}
                </span>
              </td>
              <td className="px-3 py-5 text-start min-w-0">
                <p className="truncate text-sm font-medium text-slate-800 dark:text-slate-200">{r.detail}</p>
                {r.detailSub && <p className="truncate text-xs text-slate-400">{r.detailSub}</p>}
              </td>
              <td className="px-3 py-5 text-start min-w-0">
                <CurrencyPair from={r.from} to={r.to} />
              </td>
              <td className="px-3 py-5 text-start text-sm font-medium tabular-nums text-slate-800 dark:text-slate-200 min-w-0">
                {r.amount.toFixed(2)}
              </td>
              <td className="px-3 py-5 text-start text-sm font-medium tabular-nums text-rose-500 dark:text-rose-400 min-w-0">
                {r.charge.toFixed(2)}
              </td>
              <td className="px-3 py-5 text-start text-sm font-medium tabular-nums text-emerald-600 dark:text-emerald-400 min-w-0">
                {r.net.toFixed(2)}
              </td>
              <td className="px-3 py-5 text-start min-w-0"><StatusBadge status={r.status} /></td>
            </tr>
          ))}
        </tbody>
      </TableShell>

      <PaginationFooter page={safePage} totalPages={totalPages} onPageChange={setPage} />
    </div>
  );
}

// ─── Tab config ───────────────────────────────────────────────────────────────

type TabKey = "all" | TxCategory;

const TABS: { key: TabKey; icon: React.ReactNode }[] = [
  { key: "all",        icon: <Layers className="icon-sm" /> },
  { key: "remittance", icon: <RotateCcw className="icon-sm" /> },
  { key: "money_in",   icon: <ArrowDownLeft className="icon-sm" /> },
  { key: "money_out",  icon: <ArrowUpRight className="icon-sm" /> },
];

// ─── Main view ────────────────────────────────────────────────────────────────

export function AgentTransactionsView() {
  const { t } = useTranslation();
  const { data, isLoading, isError } = useAgentTransactions();
  const [activeTab, setActiveTab] = useState<TabKey>("all");
  const [search, setSearch] = useState("");

  const remittance = useMemo(() => data?.send_remittance ?? [], [data?.send_remittance]);
  const moneyIn    = useMemo(() => data?.money_in ?? [], [data?.money_in]);
  const moneyOut   = useMemo(() => data?.money_out ?? [], [data?.money_out]);
  const unifiedRows = useMemo(
    () => toUnifiedRows(remittance, moneyIn, moneyOut),
    [remittance, moneyIn, moneyOut],
  );

  const counts: Record<TabKey, number> = {
    all:        unifiedRows.length,
    remittance: remittance.length,
    money_in:   moneyIn.length,
    money_out:  moneyOut.length,
  };

  const tabLabel: Record<TabKey, string> = {
    all:        t("agent.transactions.tabAll"),
    remittance: t("agent.transactions.tabSendRemittance"),
    money_in:   t("agent.transactions.tabMoneyIn"),
    money_out:  t("agent.transactions.tabMoneyOut"),
  };

  const searchPlaceholder =
    activeTab === "remittance" ? t("agent.transactions.searchSendRemittance")
    : activeTab === "all" ? t("agent.transactions.searchAll")
    : t("agent.transactions.searchMoneyInOut");

  const activeStats = useMemo(() => {
    if (activeTab === "all") {
      return [
        { label: t("agent.transactions.tabSendRemittance"), value: String(remittance.length), color: "text-brand-600 dark:text-brand-300", icon: RotateCcw },
        { label: t("agent.transactions.tabMoneyIn"),        value: String(moneyIn.length),    color: "text-emerald-600 dark:text-emerald-400", icon: ArrowDownLeft },
        { label: t("agent.transactions.tabMoneyOut"),       value: String(moneyOut.length),   color: "text-amber-600 dark:text-amber-400", icon: ArrowUpRight },
      ];
    }
    if (activeTab === "remittance") {
      const cur = remittance[0]?.sender_currency ?? "";
      const recCur = remittance[0]?.receiver_currency ?? "";
      return [
        { label: t("agent.transactions.statTotalSent"),     value: `${cur} ${remittance.reduce((s, r) => s + r.request_amount, 0).toFixed(2)}`, color: "text-brand-600 dark:text-brand-300", icon: ArrowUpRight },
        { label: t("agent.transactions.statTotalCharges"),  value: `${cur} ${remittance.reduce((s, r) => s + r.total_charge, 0).toFixed(2)}`,   color: "text-rose-500 dark:text-rose-400", icon: Receipt },
        { label: t("agent.transactions.statTotalReceived"), value: `${recCur} ${remittance.reduce((s, r) => s + r.will_get_amount, 0).toFixed(2)}`, color: "text-emerald-600 dark:text-emerald-400", icon: ArrowDownLeft },
      ];
    }
    if (activeTab === "money_in") {
      const cur = moneyIn[0]?.sender_currency ?? "";
      const recCur = moneyIn[0]?.receiver_currency ?? "";
      return [
        { label: t("agent.transactions.statTotalReceived"), value: `${recCur} ${moneyIn.reduce((s, r) => s + r.will_get_amount, 0).toFixed(2)}`, color: "text-emerald-600 dark:text-emerald-400", icon: ArrowDownLeft },
        { label: t("agent.transactions.statTotalCharges"),  value: `${cur} ${moneyIn.reduce((s, r) => s + r.total_charge, 0).toFixed(2)}`,        color: "text-rose-500 dark:text-rose-400", icon: Receipt },
        { label: t("agent.transactions.statTotalPayable"),  value: `${cur} ${moneyIn.reduce((s, r) => s + r.payable_amount, 0).toFixed(2)}`,      color: "text-brand-600 dark:text-brand-300", icon: Wallet },
      ];
    }
    const cur = moneyOut[0]?.sender_currency ?? "";
    return [
      { label: t("agent.transactions.statTotalSent"),    value: `${cur} ${moneyOut.reduce((s, r) => s + r.request_amount, 0).toFixed(2)}`, color: "text-rose-500 dark:text-rose-400", icon: ArrowUpRight },
      { label: t("agent.transactions.statTotalCharges"), value: `${cur} ${moneyOut.reduce((s, r) => s + r.total_charge, 0).toFixed(2)}`,   color: "text-amber-600 dark:text-amber-400", icon: Receipt },
      { label: t("agent.transactions.statTotalPayable"), value: `${cur} ${moneyOut.reduce((s, r) => s + r.payable_amount, 0).toFixed(2)}`, color: "text-brand-600 dark:text-brand-300", icon: Wallet },
    ];
  }, [activeTab, remittance, moneyIn, moneyOut, t]);

  if (isLoading) return <AgentTransactionsSkeleton />;

  if (isError) {
    return (
      <Container className="max-w-full pb-10">
        <div className="flex flex-col items-center gap-4 rounded-3xl border border-rose-200 bg-rose-50 p-16 text-center dark:border-rose-500/20 dark:bg-rose-500/10">
          <XCircle className="h-10 w-10 text-rose-500" />
          <div>
            <p className="font-semibold text-slate-900 dark:text-white">{t("agent.transactions.failedToLoad")}</p>
            <p className="mt-1 text-sm font-medium text-slate-500">Refresh the page and try again.</p>
          </div>
        </div>
      </Container>
    );
  }

  return (
    <Container className="max-w-full space-y-4 pb-10">
      {/* 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">
          <Receipt className="icon-xl" />
        </div>
        <div>
          <h1 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-white">{t("agent.transactions.title")}</h1>
          <p className="mt-1 text-sm font-medium text-slate-500 dark:text-slate-400">
            {t("agent.transactions.subtitle")}
          </p>
        </div>
      </header>

      {/* Stats — outside Card */}
      <div className="flex gap-2 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden sm:gap-3">
          {activeStats.map((s) => (
            <div key={s.label} className="flex min-h-[4.5rem] w-56 shrink-0 items-center gap-3 rounded-xl border border-slate-200/60 bg-white px-4 py-2.5 sm:min-h-[5rem] sm:w-72 sm:gap-4 sm:rounded-2xl sm:px-5 sm:py-4 dark:border-slate-800/60 dark:bg-slate-900/40">
              <div className={cn("grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-slate-100 dark:bg-slate-800 sm:h-11 sm:w-11", s.color)}>
                <s.icon className="h-5 w-5" />
              </div>
              <div className="min-w-0 space-y-1.5">
                <p className="whitespace-nowrap text-sm font-medium capitalize leading-tight text-slate-400">{s.label}</p>
                <p className={`whitespace-nowrap text-sm font-medium tabular-nums leading-none sm:text-lg ${s.color}`}>{s.value}</p>
              </div>
            </div>
          ))}
        </div>

        {/* Tab content — table Card with header: label (left) + tab pills (right) */}
        <Card>
          <div className="flex flex-wrap items-center gap-4 border-b border-slate-100 px-6 py-4 sm:gap-3 sm:px-7 dark:border-slate-800/60">
            <div className="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-brand-50 text-brand-600 dark:bg-brand-500/10 dark:text-brand-400">
              <Filter className="h-4 w-4" />
            </div>
            <div className="relative min-w-0 flex-1 sm:w-64 sm:flex-none">
              <Search className="pointer-events-none absolute start-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
              <input
                type="search"
                aria-label={searchPlaceholder}
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder={searchPlaceholder}
                className="h-9 w-full rounded-xl border border-slate-200 bg-white ps-9 pe-3 text-sm font-medium outline-none transition 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 className="ms-auto flex flex-wrap gap-2">
              {TABS.map((tab) => {
                  const active = activeTab === tab.key;
                  const label = tabLabel[tab.key];
                  return (
                    <button
                      key={tab.key}
                      type="button"
                      onClick={() => { setActiveTab(tab.key); setSearch(""); }}
                      className={cn(
                        "flex items-center gap-1.5 rounded-full px-4 py-2 text-sm font-medium transition-all duration-200",
                        active
                          ? "bg-brand-600 text-white shadow-sm"
                          : "bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-700 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-200",
                      )}
                    >
                      {tab.icon}
                      <span>{label}</span>
                      <span className={cn(
                        "inline-flex h-5 min-w-[20px] items-center justify-center rounded-full px-1.5 text-xs font-bold tabular-nums",
                        active ? "bg-white/20 text-white" : "bg-slate-200 text-slate-600 dark:bg-slate-700 dark:text-slate-300",
                      )}>
                        {counts[tab.key]}
                      </span>
                    </button>
                  );
                })}
            </div>
          </div>
          <div className="px-6 sm:px-7">
            {activeTab === "all"        && <AllTransactionsTable rows={unifiedRows} search={search} />}
            {activeTab === "remittance" && <SendRemittanceTable rows={remittance} search={search} />}
            {activeTab === "money_in"   && <MoneyInTable rows={moneyIn} search={search} />}
            {activeTab === "money_out"  && <MoneyOutTable rows={moneyOut} search={search} />}
          </div>
        </Card>
    </Container>
  );
}