import { useState } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { toast } from "sonner";
import { supabase } from "@/integrations/supabase/client";
import { useAuth } from "@/lib/use-auth";
import { signedUrl } from "@/lib/storage";
import { formatNaira } from "@/lib/bank-details";

export function PaymentsAdmin() {
  const { user } = useAuth();
  const qc = useQueryClient();
  const [proofs, setProofs] = useState<Record<string, string>>({});
  const [notes, setNotes] = useState<Record<string, string>>({});

  const { data } = useQuery({
    queryKey: ["admin-payments"],
    queryFn: async () => {
      const { data, error } = await supabase.from("payments").select("*").order("created_at", { ascending: false });
      if (error) throw error;
      return data;
    },
  });

  async function review(id: string, status: "approved" | "rejected") {
    const { error } = await supabase
      .from("payments")
      .update({
        status,
        admin_note: notes[id] || null,
        reviewed_by: user?.id ?? null,
        reviewed_at: new Date().toISOString(),
      })
      .eq("id", id);
    if (error) return toast.error("Could not update this payment.");
    toast.success(status === "approved" ? "Payment approved." : "Payment rejected.");
    qc.invalidateQueries({ queryKey: ["admin-payments"] });
  }

  async function viewProof(id: string, path: string) {
    const url = await signedUrl(path);
    if (!url) return toast.error("Could not open the proof of payment.");
    setProofs((p) => ({ ...p, [id]: url }));
  }

  const items = data ?? [];

  return (
    <div className="mt-4 space-y-3">
      {items.map((p) => (
        <article key={p.id} className="rounded-2xl border border-border/60 bg-card p-4 shadow-card">
          <div className="flex items-start justify-between gap-3">
            <h2 className="text-sm font-semibold">
              {p.reference} — {formatNaira(Number(p.amount))}
            </h2>
            <span className="shrink-0 rounded-full bg-muted px-2.5 py-1 text-[11px] font-semibold">
              {p.status.replaceAll("_", " ")}
            </span>
          </div>
          <p className="mt-1 text-xs text-muted-foreground">
            {p.payer_name ?? "No payer name"} • {new Date(p.created_at).toLocaleString()}
            {p.consumed_at ? " • used" : ""}
          </p>

          {p.proof_url ? (
            proofs[p.id] ? (
              <a href={proofs[p.id]} target="_blank" rel="noreferrer" className="mt-2 block">
                <img src={proofs[p.id]} alt="Proof of payment" className="mt-2 max-h-56 rounded-xl border border-border" />
              </a>
            ) : (
              <button
                onClick={() => viewProof(p.id, p.proof_url!)}
                className="mt-2 rounded-xl border border-border px-3 py-1.5 text-[11px] font-semibold"
              >
                View proof of payment
              </button>
            )
          ) : (
            <p className="mt-2 text-xs text-muted-foreground">No proof uploaded yet.</p>
          )}

          {p.status !== "approved" ? (
            <>
              <input
                value={notes[p.id] ?? ""}
                onChange={(e) => setNotes((n) => ({ ...n, [p.id]: e.target.value }))}
                placeholder="Note to the customer (optional)"
                className="mt-3 w-full rounded-xl border border-border bg-background px-3 py-2 text-xs"
              />
              <div className="mt-2 grid grid-cols-2 gap-2">
                <button
                  onClick={() => review(p.id, "approved")}
                  className="rounded-xl bg-brand py-2 text-xs font-semibold text-primary-foreground"
                >
                  Approve
                </button>
                <button
                  onClick={() => review(p.id, "rejected")}
                  className="rounded-xl border border-border py-2 text-xs font-semibold"
                >
                  Reject
                </button>
              </div>
            </>
          ) : null}
        </article>
      ))}
      {items.length === 0 ? <p className="text-sm text-muted-foreground">No payments yet.</p> : null}
    </div>
  );
}