import { createFileRoute, Link } from "@tanstack/react-router";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { useServerFn } from "@tanstack/react-start";
import { useState } from "react";
import { toast } from "sonner";
import { adminGetTransaction, adminReverseTransaction } from "@/lib/admin.functions";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Textarea } from "@/components/ui/textarea";
import { formatNaira } from "@/lib/format";
import { downloadReceipt } from "@/lib/receipt";
import { ArrowLeft, RotateCcw, Download } from "lucide-react";

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

function Row({ label, value }: { label: string; value: React.ReactNode }) {
  return (
    <div className="flex items-start justify-between gap-4 border-b py-2 last:border-0">
      <span className="text-xs uppercase tracking-wide text-muted-foreground">{label}</span>
      <span className="text-right font-medium">{value}</span>
    </div>
  );
}

function AdminTxDetail() {
  const { id } = Route.useParams();
  const qc = useQueryClient();
  const get = useServerFn(adminGetTransaction);
  const reverse = useServerFn(adminReverseTransaction);
  const { data } = useQuery({ queryKey: ["admin-tx", id], queryFn: () => get({ data: { id } }) });
  const [reason, setReason] = useState("");
  const [open, setOpen] = useState(false);

  const m = useMutation({
    mutationFn: () => reverse({ data: { id, reason } }),
    onSuccess: () => {
      toast.success("Transaction reversed");
      setOpen(false); setReason("");
      qc.invalidateQueries({ queryKey: ["admin-tx"] });
    },
    onError: (e: Error) => toast.error(e.message),
  });

  if (!data) return <div className="p-4 text-muted-foreground">Loading…</div>;
  const { tx, profile } = data;

  return (
    <div className="space-y-4">
      <Link to="/admin/transactions" className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground">
        <ArrowLeft className="h-4 w-4" />Back to transactions
      </Link>

      <div className="rounded-2xl border bg-card p-5 shadow-sm">
        <div className="flex items-start justify-between">
          <div>
            <p className="text-xs text-muted-foreground">Transaction</p>
            <h1 className="font-mono text-lg font-bold">{tx.reference}</h1>
          </div>
          <Badge variant={tx.status === "success" ? "default" : tx.status === "failed" || tx.status === "reversed" ? "destructive" : "secondary"}>
            {tx.status}
          </Badge>
        </div>

        <div className="mt-4">
          <Row label="Type" value={tx.type} />
          <Row label="Amount" value={formatNaira(Number(tx.amount))} />
          <Row label="Fee" value={formatNaira(Number(tx.fee ?? 0))} />
          <Row label="Markup" value={formatNaira(Number(tx.markup ?? 0))} />
          <Row label="Balance before" value={tx.balance_before != null ? formatNaira(Number(tx.balance_before)) : "—"} />
          <Row label="Balance after" value={tx.balance_after != null ? formatNaira(Number(tx.balance_after)) : "—"} />
          <Row label="Provider" value={tx.provider ?? "—"} />
          <Row label="External ref" value={tx.external_reference ?? "—"} />
          <Row label="Description" value={tx.description ?? "—"} />
          <Row label="Created" value={new Date(tx.created_at).toLocaleString()} />
        </div>

        <div className="mt-4 rounded-lg bg-muted/40 p-3">
          <p className="text-xs uppercase tracking-wide text-muted-foreground">User</p>
          <p className="font-medium">{profile?.full_name ?? profile?.username ?? "Unknown"}</p>
          <p className="text-sm text-muted-foreground">{profile?.email}</p>
          <p className="text-sm text-muted-foreground">{profile?.phone}</p>
        </div>

        <div className="mt-4">
          <details>
            <summary className="cursor-pointer text-sm font-medium text-primary">Raw metadata</summary>
            <pre className="mt-2 overflow-auto rounded-lg bg-muted/40 p-3 text-xs">{JSON.stringify(tx.metadata, null, 2)}</pre>
          </details>
        </div>

        <div className="mt-4 flex flex-wrap gap-2">
          <Button variant="outline" onClick={() => downloadReceipt(tx as never)}>
            <Download className="mr-2 h-4 w-4" />Regenerate receipt
          </Button>
          {tx.status !== "reversed" && (
            <Button variant="destructive" onClick={() => setOpen(true)}>
              <RotateCcw className="mr-2 h-4 w-4" />Reverse transaction
            </Button>
          )}
        </div>
      </div>

      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Reverse transaction</DialogTitle>
          </DialogHeader>
          <p className="text-sm text-muted-foreground">
            This refunds the user's wallet (for debits) or deducts (for credits) and marks the transaction as reversed.
            The action is audit-logged.
          </p>
          <Textarea placeholder="Reason for reversal (min 3 chars)" value={reason} onChange={(e) => setReason(e.target.value)} />
          <DialogFooter>
            <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
            <Button variant="destructive" disabled={reason.length < 3 || m.isPending} onClick={() => m.mutate()}>
              {m.isPending ? "Reversing…" : "Confirm reversal"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}