import { createFileRoute } from "@tanstack/react-router";
import { useQuery } from "@tanstack/react-query";
import { useServerFn } from "@tanstack/react-start";
import { adminListAllTx, adminListUsers } from "@/lib/admin.functions";
import { useMemo } from "react";
import { Loader2 } from "lucide-react";

export const Route = createFileRoute("/admin/transactions")({
  component: AdminTransactions,
});

const TYPE_LABEL: Record<string, string> = {
  send_money: "Send Money",
  received: "Received",
  cash_out: "Cash Out",
  mobile_recharge: "Recharge",
  pay_bill: "Pay Bill",
  payment: "Payment",
  add_money: "Add Money",
};

function AdminTransactions() {
  const listTx = useServerFn(adminListAllTx);
  const listUsers = useServerFn(adminListUsers);
  const txQ = useQuery({ queryKey: ["admin-transactions"], queryFn: () => listTx() });
  const usersQ = useQuery({ queryKey: ["admin-users", ""], queryFn: () => listUsers({ data: {} }) });

  const userMap = useMemo(() => {
    const m: Record<string, { full_name: string; phone: string }> = {};
    (usersQ.data ?? []).forEach((u: any) => (m[u.id] = { full_name: u.full_name, phone: u.phone }));
    return m;
  }, [usersQ.data]);

  return (
    <div className="bg-card rounded-xl border">
      <div className="p-3 border-b">
        <h2 className="font-bold">সকল ট্রানজ্যাকশন</h2>
        <p className="text-xs text-muted-foreground">সর্বশেষ ৩০০টি</p>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead className="text-xs text-muted-foreground bg-muted/40">
            <tr>
              <th className="text-left p-3 font-semibold">তারিখ</th>
              <th className="text-left p-3 font-semibold">ইউজার</th>
              <th className="text-left p-3 font-semibold">ধরন</th>
              <th className="text-left p-3 font-semibold">প্রাপক</th>
              <th className="text-right p-3 font-semibold">পরিমাণ</th>
              <th className="text-right p-3 font-semibold">ব্যালেন্স</th>
            </tr>
          </thead>
          <tbody>
            {txQ.isLoading && (
              <tr><td colSpan={6} className="p-6 text-center"><Loader2 className="h-4 w-4 animate-spin inline" /></td></tr>
            )}
            {!txQ.isLoading && (txQ.data ?? []).length === 0 && (
              <tr><td colSpan={6} className="p-6 text-center text-muted-foreground">কোনো লেনদেন নেই</td></tr>
            )}
            {(txQ.data ?? []).map((t: any) => {
              const u = userMap[t.user_id];
              return (
                <tr key={t.id} className="border-t">
                  <td className="p-3 text-xs text-muted-foreground whitespace-nowrap">
                    {new Date(t.created_at).toLocaleString("en-GB", { day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit" })}
                  </td>
                  <td className="p-3">
                    <div className="font-medium truncate max-w-[140px]">{u?.full_name ?? "—"}</div>
                    <div className="text-[10px] text-muted-foreground tabular-nums">{u?.phone}</div>
                  </td>
                  <td className="p-3"><span className="px-2 py-0.5 rounded-md bg-primary/10 text-primary text-[11px] font-semibold">{TYPE_LABEL[t.type] ?? t.type}</span></td>
                  <td className="p-3 text-xs">
                    <div className="truncate max-w-[140px]">{t.counterparty_name ?? "—"}</div>
                    <div className="text-[10px] text-muted-foreground tabular-nums">{t.counterparty_phone}</div>
                  </td>
                  <td className="p-3 text-right tabular-nums font-semibold">
                    ৳{Number(t.amount).toLocaleString()}
                    {Number(t.fee) > 0 && <div className="text-[10px] text-muted-foreground">fee ৳{Number(t.fee)}</div>}
                  </td>
                  <td className="p-3 text-right tabular-nums text-muted-foreground">
                    ৳{Number(t.balance_after).toLocaleString()}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}