import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useServerFn } from "@tanstack/react-start";
import { useState } from "react";
import { toast } from "sonner";
import { GraduationCap, CheckCircle2, Minus, Plus } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { getWalletAndProfile } from "@/lib/wallet.functions";
import { buyExamPin } from "@/lib/husmodata.functions";
import { listExamProducts } from "@/lib/catalogue.functions";
import { formatNaira } from "@/lib/format";
import { Money } from "@/components/Money";
import { PinPromptDialog } from "@/components/PinPromptDialog";
import { cn } from "@/lib/utils";

export const Route = createFileRoute("/app/exam-pins")({
  head: () => ({ meta: [{ title: "Exam PINs — Billsline" }] }),
  component: ExamPinPage,
});

type ExamId = "waec" | "neco" | "nabteb";
type ExamOption = { id: ExamId; name: string; amount: number; grad: string; cashback?: number };

const GRADS: Record<ExamId, string> = {
  waec: "from-emerald-500 to-teal-600",
  neco: "from-sky-500 to-blue-600",
  nabteb: "from-violet-500 to-purple-600",
};

/** Shown only until the live Billsline catalogue loads. */
const FALLBACK_EXAMS: ExamOption[] = [
  { id: "waec",   name: "WAEC Result Checker", amount: 3500, grad: GRADS.waec },
  { id: "neco",   name: "NECO Result Token",   amount: 1300, grad: GRADS.neco },
  { id: "nabteb", name: "NABTEB Scratch Card", amount: 900,  grad: GRADS.nabteb },
];

function ExamPinPage() {
  const qc = useQueryClient();
  const navigate = useNavigate();
  const fetchWP = useServerFn(getWalletAndProfile);
  const buy = useServerFn(buyExamPin);
  const { data } = useQuery({ queryKey: ["wallet"], queryFn: () => fetchWP() });

  const fetchExams = useServerFn(listExamProducts);
  const { data: dbExams } = useQuery({ queryKey: ["exam-products"], queryFn: () => fetchExams(), staleTime: 30_000 });

  const EXAMS: ExamOption[] = (dbExams && dbExams.length > 0)
    ? dbExams
        .filter((p) => ["waec", "neco", "nabteb"].includes(p.exam_code))
        .map((p) => ({
          id: p.exam_code as ExamId,
          name: p.exam_name,
          amount: p.sell_price,
          grad: GRADS[p.exam_code as ExamId] ?? GRADS.waec,
          cashback: p.cashback_percent,
        }))
    : FALLBACK_EXAMS;

  const [examId, setExamId] = useState<ExamId>("waec");
  const exam = EXAMS.find((e) => e.id === examId) ?? EXAMS[0];
  const [qty, setQty] = useState(1);
  const [pinOpen, setPinOpen] = useState(false);

  const total = exam.amount * qty;

  const m = useMutation({
    mutationFn: (pin: string) => buy({ data: { exam_id: exam.id, quantity: qty, amount: total, pin } }),
    onSuccess: (r) => {
      qc.invalidateQueries();
      navigate({ to: "/app/tx/$ref", params: { ref: r.reference } });
    },
    onError: (e: Error) => toast.error(e.message),
  });

  return (
    <div className="space-y-4 p-4">
      <header className="flex items-center justify-between">
        <h1 className="text-lg font-bold text-foreground">Exam PINs</h1>
        <span className="text-[11px] font-medium text-muted-foreground">
          Bal: <Money value={data?.wallet?.balance ?? 0} className="text-foreground" />
        </span>
      </header>

      <div>
        <Label className="text-[10px] uppercase tracking-wider text-muted-foreground">Exam</Label>
        <div className="mt-2 space-y-2">
          {EXAMS.map((e) => {
            const active = exam.id === e.id;
            return (
              <button key={e.id} onClick={() => setExamId(e.id)}
                className={cn(
                  "relative flex w-full items-center justify-between overflow-hidden rounded-2xl border p-3 text-left transition",
                  active ? "border-primary bg-primary/5 ring-2 ring-primary/20" : "border-border bg-card hover:border-primary/40",
                )}>
                <div className="flex items-center gap-3">
                  <span className={cn("grid h-9 w-9 place-items-center rounded-xl bg-gradient-to-br text-white shadow-sm", e.grad)}>
                    <GraduationCap className="h-4 w-4" />
                  </span>
                  <div>
                    <div className="text-sm font-bold">{e.name}</div>
                    <div className="text-[10px] uppercase tracking-wider text-muted-foreground">Per pin</div>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-sm font-extrabold text-primary">{formatNaira(e.amount)}</span>
                  {active && <CheckCircle2 className="h-4 w-4 text-primary" />}
                </div>
              </button>
            );
          })}
        </div>
      </div>

      <div className="rounded-2xl bg-card p-4 shadow-card">
        <Label className="text-[10px] uppercase tracking-wider text-muted-foreground">Quantity</Label>
        <div className="mt-2 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <button
              onClick={() => setQty((q) => Math.max(1, q - 1))}
              className="grid h-10 w-10 place-items-center rounded-full bg-secondary text-foreground transition hover:bg-secondary/70"
              aria-label="Decrease">
              <Minus className="h-4 w-4" />
            </button>
            <span className="min-w-[2rem] text-center text-xl font-extrabold">{qty}</span>
            <button
              onClick={() => setQty((q) => Math.min(20, q + 1))}
              className="grid h-10 w-10 place-items-center rounded-full bg-primary text-primary-foreground transition hover:bg-primary/90"
              aria-label="Increase">
              <Plus className="h-4 w-4" />
            </button>
          </div>
          <div className="text-right">
            <div className="text-[10px] uppercase tracking-wider text-muted-foreground">Total</div>
            <div className="text-lg font-extrabold text-primary">{formatNaira(total)}</div>
          </div>
        </div>
      </div>

      <div className="sticky bottom-20 z-10 -mx-4 border-t border-border/50 bg-background/85 px-4 py-3 backdrop-blur">
        <Button className="h-11 w-full bg-gradient-primary text-sm font-semibold" disabled={m.isPending} onClick={() => setPinOpen(true)}>
          {m.isPending ? "Processing…" : `Pay ${formatNaira(total)}`}
        </Button>
      </div>

      <PinPromptDialog
        open={pinOpen} onOpenChange={setPinOpen}
        title="Confirm exam PIN purchase"
        description="Enter your 4-digit PIN to authorize this purchase."
        amount={total}
        summary={[
          { label: "Service", value: "Exam PIN" },
          { label: "Exam", value: exam.name },
          { label: "Quantity", value: String(qty) },
          { label: "Paid from", value: "Billsline Wallet" },
        ]}
        onVerified={(pin) => m.mutate(pin)}
      />
    </div>
  );
}