import { createFileRoute } from "@tanstack/react-router";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useServerFn } from "@tanstack/react-start";
import { useMemo, useState } from "react";
import { adminListUsers, adminAdjustBalance, adminSetBlocked } from "@/lib/admin.functions";
import { Search, Plus, Minus, Ban, Check, X, Loader2, Wallet } from "lucide-react";
import { toast } from "sonner";

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

type Row = {
  id: string;
  phone: string;
  full_name: string;
  balance: number;
  is_blocked: boolean;
  created_at: string;
};

function AdminUsers() {
  const [search, setSearch] = useState("");
  const list = useServerFn(adminListUsers);
  const usersQ = useQuery({
    queryKey: ["admin-users", search],
    queryFn: () => list({ data: { search } }),
    refetchOnWindowFocus: false,
  });
  const [editUser, setEditUser] = useState<Row | null>(null);

  const totalBalance = useMemo(
    () => (usersQ.data ?? []).reduce((sum, u: Row) => sum + Number(u.balance), 0),
    [usersQ.data],
  );

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
        <Stat label="মোট ইউজার" value={String(usersQ.data?.length ?? "—")} />
        <Stat label="মোট ব্যালেন্স" value={`৳ ${totalBalance.toLocaleString("en-BD", { maximumFractionDigits: 2 })}`} />
        <Stat label="ব্লকড" value={String((usersQ.data ?? []).filter((u: Row) => u.is_blocked).length)} />
      </div>

      <div className="bg-card rounded-xl border">
        <div className="p-3 border-b flex items-center gap-2">
          <Search className="h-4 w-4 text-muted-foreground" />
          <input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="ফোন বা নাম দিয়ে খুঁজুন..."
            className="bg-transparent outline-none text-sm w-full"
          />
        </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-right p-3 font-semibold">ব্যালেন্স</th>
                <th className="text-center p-3 font-semibold">স্ট্যাটাস</th>
                <th className="text-right p-3 font-semibold">অ্যাকশন</th>
              </tr>
            </thead>
            <tbody>
              {usersQ.isLoading && (
                <tr><td colSpan={5} className="p-6 text-center text-muted-foreground"><Loader2 className="h-4 w-4 animate-spin inline" /></td></tr>
              )}
              {!usersQ.isLoading && (usersQ.data ?? []).length === 0 && (
                <tr><td colSpan={5} className="p-6 text-center text-muted-foreground">কোনো ইউজার নেই</td></tr>
              )}
              {(usersQ.data ?? []).map((u: Row) => (
                <tr key={u.id} className="border-t">
                  <td className="p-3 font-medium truncate max-w-[160px]">{u.full_name}</td>
                  <td className="p-3 tabular-nums text-muted-foreground">{u.phone}</td>
                  <td className="p-3 text-right tabular-nums font-semibold">
                    ৳ {Number(u.balance).toLocaleString("en-BD", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                  </td>
                  <td className="p-3 text-center">
                    {u.is_blocked
                      ? <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold bg-destructive/10 text-destructive"><Ban className="h-3 w-3" />Blocked</span>
                      : <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold bg-success/10 text-success"><Check className="h-3 w-3" />Active</span>}
                  </td>
                  <td className="p-3 text-right">
                    <div className="inline-flex gap-1">
                      <button
                        onClick={() => setEditUser(u)}
                        className="h-8 px-2 rounded-lg bg-primary/10 text-primary text-xs font-semibold inline-flex items-center gap-1"
                      >
                        <Wallet className="h-3.5 w-3.5" /> ব্যালেন্স
                      </button>
                      <BlockToggle user={u} />
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {editUser && <AdjustModal user={editUser} onClose={() => setEditUser(null)} />}
    </div>
  );
}

function Stat({ label, value }: { label: string; value: string }) {
  return (
    <div className="bg-card border rounded-xl p-3">
      <p className="text-[11px] text-muted-foreground font-semibold uppercase tracking-wider">{label}</p>
      <p className="mt-1 text-lg font-bold tabular-nums">{value}</p>
    </div>
  );
}

function BlockToggle({ user }: { user: Row }) {
  const qc = useQueryClient();
  const setBlocked = useServerFn(adminSetBlocked);
  const [loading, setLoading] = useState(false);
  async function toggle() {
    setLoading(true);
    try {
      await setBlocked({ data: { targetUserId: user.id, blocked: !user.is_blocked } });
      toast.success(user.is_blocked ? "আনব্লক করা হয়েছে" : "ব্লক করা হয়েছে");
      qc.invalidateQueries({ queryKey: ["admin-users"] });
    } catch (e: any) {
      toast.error(e?.message ?? "ব্যর্থ");
    } finally {
      setLoading(false);
    }
  }
  return (
    <button
      onClick={toggle}
      disabled={loading}
      className={`h-8 px-2 rounded-lg text-xs font-semibold inline-flex items-center gap-1 disabled:opacity-50 ${user.is_blocked ? "bg-success/10 text-success" : "bg-destructive/10 text-destructive"}`}
    >
      {loading ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : user.is_blocked ? <Check className="h-3.5 w-3.5" /> : <Ban className="h-3.5 w-3.5" />}
      {user.is_blocked ? "Unblock" : "Block"}
    </button>
  );
}

function AdjustModal({ user, onClose }: { user: Row; onClose: () => void }) {
  const qc = useQueryClient();
  const adjust = useServerFn(adminAdjustBalance);
  const [amount, setAmount] = useState("");
  const [direction, setDirection] = useState<"add" | "sub">("add");
  const [note, setNote] = useState("");
  const [loading, setLoading] = useState(false);

  async function submit() {
    const n = Number(amount);
    if (!Number.isFinite(n) || n <= 0) return toast.error("সঠিক পরিমাণ দিন");
    setLoading(true);
    try {
      const res = await adjust({
        data: {
          targetUserId: user.id,
          amount: direction === "add" ? n : -n,
          note: note || undefined,
        },
      });
      toast.success(`সফল • নতুন ব্যালেন্স ৳${Number(res.new_balance).toLocaleString()}`);
      qc.invalidateQueries({ queryKey: ["admin-users"] });
      qc.invalidateQueries({ queryKey: ["admin-transactions"] });
      onClose();
    } catch (e: any) {
      toast.error(e?.message ?? "ব্যর্থ");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="fixed inset-0 z-50 bg-black/60 grid place-items-center p-4" onClick={onClose}>
      <div className="bg-card rounded-2xl w-full max-w-sm p-5 shadow-xl" onClick={(e) => e.stopPropagation()}>
        <div className="flex items-center justify-between mb-3">
          <h3 className="font-bold">ব্যালেন্স অ্যাডজাস্ট</h3>
          <button onClick={onClose} className="h-8 w-8 rounded-full hover:bg-muted grid place-items-center"><X className="h-4 w-4" /></button>
        </div>
        <p className="text-sm text-muted-foreground mb-3">
          <span className="font-semibold text-foreground">{user.full_name}</span> · {user.phone}<br />
          বর্তমান: ৳ {Number(user.balance).toLocaleString("en-BD", { minimumFractionDigits: 2 })}
        </p>
        <div className="flex gap-2 mb-3">
          {(["add", "sub"] as const).map((d) => (
            <button
              key={d}
              onClick={() => setDirection(d)}
              className={`flex-1 h-10 rounded-lg text-sm font-semibold inline-flex items-center justify-center gap-1 ${
                direction === d
                  ? d === "add" ? "bg-success text-success-foreground" : "bg-destructive text-destructive-foreground"
                  : "bg-muted text-muted-foreground"
              }`}
            >
              {d === "add" ? <><Plus className="h-4 w-4" />অ্যাড</> : <><Minus className="h-4 w-4" />মাইনাস</>}
            </button>
          ))}
        </div>
        <label className="block mb-3">
          <span className="text-xs font-semibold text-muted-foreground">পরিমাণ (৳)</span>
          <input
            value={amount}
            onChange={(e) => setAmount(e.target.value.replace(/[^\d.]/g, ""))}
            inputMode="decimal"
            placeholder="0"
            className="mt-1 w-full h-11 px-3 rounded-lg border border-input bg-background outline-none focus:border-primary"
          />
        </label>
        <label className="block mb-4">
          <span className="text-xs font-semibold text-muted-foreground">নোট (ঐচ্ছিক)</span>
          <input
            value={note}
            onChange={(e) => setNote(e.target.value)}
            maxLength={120}
            className="mt-1 w-full h-11 px-3 rounded-lg border border-input bg-background outline-none focus:border-primary"
          />
        </label>
        <button
          onClick={submit}
          disabled={loading}
          className="w-full h-11 rounded-full font-bold text-primary-foreground disabled:opacity-50 inline-flex items-center justify-center gap-2"
          style={{ background: "var(--gradient-primary)" }}
        >
          {loading && <Loader2 className="h-4 w-4 animate-spin" />}
          কনফার্ম করুন
        </button>
      </div>
    </div>
  );
}