import { createFileRoute } from "@tanstack/react-router";
import { useServerFn } from "@tanstack/react-start";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Check, X as XIcon, ImageIcon } from "lucide-react";
import { toast } from "sonner";
import { useState } from "react";
import { AdminShell } from "@/components/admin/AdminShell";
import { listOrdersAdmin, setOrderStatus } from "@/lib/payments.functions";

export const Route = createFileRoute("/admin/orders")({
  head: () => ({ meta: [{ title: "Orders · Admin" }] }),
  component: OrdersPage,
});

function OrdersPage() {
  const fetchAll = useServerFn(listOrdersAdmin);
  const setStatus = useServerFn(setOrderStatus);
  const qc = useQueryClient();
  const { data, isLoading } = useQuery({ queryKey: ["admin-orders"], queryFn: () => fetchAll() });
  const [filter, setFilter] = useState<"all" | "pending" | "approved" | "rejected">("pending");

  const update = useMutation({
    mutationFn: (vars: { id: string; status: "approved" | "rejected" }) =>
      setStatus({ data: vars }),
    onSuccess: () => {
      toast.success("Updated");
      qc.invalidateQueries({ queryKey: ["admin-orders"] });
      qc.invalidateQueries({ queryKey: ["admin-stats"] });
    },
    onError: (e) => toast.error(e instanceof Error ? e.message : "Failed"),
  });

  const orders = (data?.orders ?? []).filter((o) => filter === "all" || o.status === filter);

  return (
    <AdminShell title="Order Verification" subtitle="Review payment screenshots and approve or reject">
      <div className="flex gap-2 mb-6 flex-wrap">
        {(["pending", "approved", "rejected", "all"] as const).map((f) => (
          <button
            key={f}
            onClick={() => setFilter(f)}
            className={`px-4 py-1.5 rounded-full text-xs uppercase tracking-widest font-bold transition-all ${
              filter === f
                ? "bg-gradient-to-r from-primary to-accent text-primary-foreground"
                : "glass border border-border text-muted-foreground hover:text-foreground"
            }`}
          >
            {f}
          </button>
        ))}
      </div>

      {isLoading ? (
        <p className="p-10 text-center text-sm text-muted-foreground">Loading…</p>
      ) : orders.length === 0 ? (
        <div className="glass-strong rounded-2xl border border-border p-10 text-center text-sm text-muted-foreground">
          No {filter !== "all" && filter} orders.
        </div>
      ) : (
        <div className="space-y-3">
          {orders.map((o) => (
            <div key={o.id} className="glass-strong rounded-2xl border border-border p-5 grid grid-cols-1 md:grid-cols-[auto_1fr_auto] gap-4 items-center">
              <div className="w-20 h-28 rounded-lg bg-muted flex items-center justify-center overflow-hidden">
                {o.screenshot_url ? (
                  <a href={o.screenshot_url} target="_blank" rel="noreferrer">
                    <img src={o.screenshot_url} alt="proof" className="w-full h-full object-cover" />
                  </a>
                ) : (
                  <ImageIcon className="w-6 h-6 text-muted-foreground" />
                )}
              </div>
              <div className="min-w-0">
                <div className="font-display font-bold text-base">{o.manga?.title ?? "Manga removed"}</div>
                <div className="text-xs text-muted-foreground mt-0.5">
                  {o.payment_methods?.label ?? o.payment_methods?.type ?? "—"} · {o.txn_ref || "no ref"}
                </div>
                <div className="text-xs text-muted-foreground mt-0.5">User: {o.user_id.slice(0, 8)}…</div>
                <div className="text-[11px] text-muted-foreground mt-1">
                  {new Date(o.created_at).toLocaleString()}
                </div>
              </div>
              <div className="flex flex-col items-end gap-2">
                <div className="font-display text-2xl font-bold neon-text">₹{Number(o.amount).toLocaleString()}</div>
                <div className={`text-[10px] uppercase tracking-widest font-bold ${
                  o.status === "approved" ? "text-green-400"
                  : o.status === "rejected" ? "text-red-400" : "text-yellow-400"
                }`}>{o.status}</div>
                {o.status === "pending" && (
                  <div className="flex gap-2">
                    <button onClick={() => update.mutate({ id: o.id, status: "approved" })} className="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-green-500/20 text-green-400 hover:bg-green-500/30 text-xs font-bold">
                      <Check className="w-3 h-3" /> Approve
                    </button>
                    <button onClick={() => update.mutate({ id: o.id, status: "rejected" })} className="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-red-500/20 text-red-400 hover:bg-red-500/30 text-xs font-bold">
                      <XIcon className="w-3 h-3" /> Reject
                    </button>
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>
      )}
    </AdminShell>
  );
}