import { useRef, useState } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { toast } from "sonner";
import { Banknote, CheckCircle2, Clock, Copy, Loader2, Sparkles, Upload } from "lucide-react";
import { supabase } from "@/integrations/supabase/client";
import { useAuth } from "@/lib/use-auth";
import { BANK_TRANSFER, formatNaira } from "@/lib/bank-details";
import { uploadToBucket } from "@/lib/storage";
import { scanRequiresPayment, useAppSettings } from "@/lib/settings";

export function useAiScanCredit() {
  const { user } = useAuth();
  const { settings } = useAppSettings();
  const required = scanRequiresPayment(settings);
  const query = useQuery({
    queryKey: ["ai-scan-credit", user?.id],
    enabled: Boolean(user) && required,
    queryFn: async () => {
      const { data, error } = await supabase
        .from("payments")
        .select("*")
        .eq("user_id", user!.id)
        .eq("purpose", "ai_scan")
        .is("consumed_at", null)
        .order("created_at", { ascending: false })
        .limit(1)
        .maybeSingle();
      if (error) throw error;
      return data;
    },
  });
  return {
    payment: query.data ?? null,
    required,
    approved: required ? query.data?.status === "approved" : true,
    refetch: query.refetch,
  };
}

export async function consumeCredit(paymentId: string) {
  await supabase.from("payments").update({ consumed_at: new Date().toISOString() }).eq("id", paymentId);
}

export function PaymentGate() {
  const { user } = useAuth();
  const qc = useQueryClient();
  const { payment, required } = useAiScanCredit();
  const proofRef = useRef<HTMLInputElement>(null);
  const [payerName, setPayerName] = useState("");
  const [busy, setBusy] = useState(false);

  const refresh = () => qc.invalidateQueries({ queryKey: ["ai-scan-credit"] });

  if (!required) {
    return (
      <div className="rounded-3xl border border-border/60 bg-success/10 p-4 shadow-card">
        <p className="flex items-center gap-2 text-sm font-semibold">
          <Sparkles className="h-4 w-4 text-primary" /> Free for now (Testing Mode)
        </p>
        <p className="mt-1 text-xs text-muted-foreground">
          AI mold checks are free during testing. Paid scans ({formatNaira(BANK_TRANSFER.amount)} per analysis) can be
          switched back on at any time from admin settings.
        </p>
      </div>
    );
  }

  async function startPayment() {
    if (!user) return;
    setBusy(true);
    const { error } = await supabase.from("payments").insert({ user_id: user.id, purpose: "ai_scan", amount: BANK_TRANSFER.amount });
    setBusy(false);
    if (error) return toast.error("Could not start the payment.");
    refresh();
  }

  async function submitProof(file: File) {
    if (!user || !payment) return;
    setBusy(true);
    try {
      const path = await uploadToBucket(file, "payments", user.id);
      const { error } = await supabase
        .from("payments")
        .update({ proof_url: path, payer_name: payerName || null, status: "proof_submitted" })
        .eq("id", payment.id);
      if (error) throw error;
      toast.success("Proof submitted — our team will confirm shortly.");
      refresh();
    } catch {
      toast.error("Could not upload your proof of payment.");
    } finally {
      setBusy(false);
    }
  }

  if (!user) {
    return (
      <div className="rounded-3xl border border-border/60 bg-card p-4 text-sm shadow-card">
        <p className="font-semibold">Sign in to pay for an AI assessment</p>
        <p className="mt-1 text-xs text-muted-foreground">
          The fee is {formatNaira(BANK_TRANSFER.amount)} per image analysis.
        </p>
      </div>
    );
  }

  if (payment?.status === "approved") {
    return (
      <div className="flex items-center gap-2 rounded-3xl border border-border/60 bg-success/10 p-4 text-sm font-semibold shadow-card">
        <CheckCircle2 className="h-4 w-4 text-primary" />
        Payment approved ({payment.reference}) — one analysis unlocked.
      </div>
    );
  }

  if (payment?.status === "proof_submitted") {
    return (
      <div className="rounded-3xl border border-border/60 bg-card p-4 shadow-card">
        <p className="flex items-center gap-2 text-sm font-semibold">
          <Clock className="h-4 w-4 text-primary" /> Awaiting payment confirmation
        </p>
        <p className="mt-1 text-xs text-muted-foreground">
          Reference {payment.reference}. We verify transfers manually — you will get a notification once approved.
        </p>
        <button onClick={refresh} className="mt-3 rounded-xl border border-border px-4 py-2 text-xs font-semibold">
          Check status
        </button>
      </div>
    );
  }

  if (!payment) {
    return (
      <div className="rounded-3xl border border-border/60 bg-card p-4 shadow-card">
        <p className="text-sm font-semibold">AI Mold Photo Assessment Fee</p>
        <p className="mt-1 text-xs text-muted-foreground">
          {formatNaira(BANK_TRANSFER.amount)} per image analysis, paid by bank transfer and confirmed by our team.
        </p>
        <button
          onClick={startPayment}
          disabled={busy}
          className="mt-3 flex w-full items-center justify-center gap-2 rounded-2xl bg-brand py-3.5 text-sm font-semibold text-primary-foreground disabled:opacity-50"
        >
          {busy ? <Loader2 className="h-4 w-4 animate-spin" /> : <Banknote className="h-4 w-4" />} Pay {formatNaira(BANK_TRANSFER.amount)}
        </button>
      </div>
    );
  }

  return (
    <div className="rounded-3xl border border-border/60 bg-card p-4 shadow-card">
      <p className="text-sm font-semibold">Transfer {formatNaira(Number(payment.amount))} to</p>
      {payment.status === "rejected" && payment.admin_note ? (
        <p className="mt-2 rounded-xl bg-destructive/10 px-3 py-2 text-xs text-destructive">{payment.admin_note}</p>
      ) : null}
      <dl className="mt-3 space-y-1.5 rounded-2xl bg-muted p-3 text-sm">
        <div className="flex justify-between gap-3">
          <dt className="text-muted-foreground">Bank</dt>
          <dd className="font-semibold">{BANK_TRANSFER.bank}</dd>
        </div>
        <div className="flex justify-between gap-3">
          <dt className="text-muted-foreground">Account name</dt>
          <dd className="font-semibold">{BANK_TRANSFER.accountName}</dd>
        </div>
        <div className="flex items-center justify-between gap-3">
          <dt className="text-muted-foreground">Account number</dt>
          <dd className="flex items-center gap-2 font-semibold">
            {BANK_TRANSFER.accountNumber}
            <button
              type="button"
              aria-label="Copy account number"
              onClick={() => {
                navigator.clipboard.writeText(BANK_TRANSFER.accountNumber);
                toast.success("Account number copied.");
              }}
            >
              <Copy className="h-3.5 w-3.5 text-primary" />
            </button>
          </dd>
        </div>
        <div className="flex justify-between gap-3">
          <dt className="text-muted-foreground">Use as narration</dt>
          <dd className="font-semibold">{payment.reference}</dd>
        </div>
      </dl>

      <label className="mt-3 block text-[11px] text-muted-foreground" htmlFor="payer-name">
        Name on the transfer
      </label>
      <input
        id="payer-name"
        value={payerName}
        onChange={(e) => setPayerName(e.target.value)}
        maxLength={100}
        className="mt-1 w-full rounded-xl border border-border bg-background px-3 py-2 text-sm"
        placeholder="e.g. Chineye Okoro"
      />

      <button
        onClick={() => proofRef.current?.click()}
        disabled={busy}
        className="mt-3 flex w-full items-center justify-center gap-2 rounded-2xl bg-accent py-3.5 text-sm font-semibold text-accent-foreground disabled:opacity-50"
      >
        {busy ? <Loader2 className="h-4 w-4 animate-spin" /> : <Upload className="h-4 w-4" />} Upload proof of payment
      </button>
      <input
        ref={proofRef}
        type="file"
        accept="image/*,application/pdf"
        hidden
        onChange={(e) => {
          const file = e.target.files?.[0];
          if (file) submitProof(file);
        }}
      />
      <p className="mt-2 text-[11px] text-muted-foreground">
        Your analysis unlocks as soon as an administrator confirms the transfer.
      </p>
    </div>
  );
}