"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Heart, Check } from "lucide-react";
import { useToast } from "@/hooks/use-toast";
import { loadRazorpay } from "@/lib/razorpay";
import { useParams, useRouter } from "next/navigation";
import { completePayment, createOrder } from "@/lib/api/apis";
import { useLanguage } from "@/src/hooks/LanguageContext";
import { getTranslation } from "@/src/hooks/useTranslation";

const donationAmounts = [25, 50, 100, 250, 500, 1000];

export default function DonationForm() {
  const { toast } = useToast();
  const { id } = useParams(); // donation_id
  const router = useRouter();
  const { language } = useLanguage();
  const t = getTranslation(language).donationDetailPage;

  const [selectedAmount, setSelectedAmount] = useState<number | null>(null);
  const [customAmount, setCustomAmount] = useState("");
  const [loading, setLoading] = useState(false);

  const amount = Number(customAmount || selectedAmount);

  const user =
    typeof window !== "undefined"
      ? JSON.parse(localStorage.getItem("user_data") || "{}")
      : null;
  const handleDonate = async () => {
    if (!user?.id) {
      toast({
        description: t.loginRequired,
        variant: "destructive",
      });
      router.push("/login");
      return;
    }

    if (!amount || amount <= 0) {
      toast({
        description: t.invalidAmount,
        variant: "destructive",
      });
      return;
    }

    try {
      setLoading(true);

      // 1️⃣ Create Order (Backend)
      const formData = new FormData();
      formData.append("user_id", user.id);
      formData.append("donation_id", String(id));
      formData.append("donation_category_id", "1");
      formData.append("amount", String(amount));

      const res = await createOrder(formData);

      if (!res?.status) {
        throw new Error(res?.message || t.orderCreationFailed);
      }

      const { razorpay_order_id, amount: orderAmount, currency } = res.data;

      const razorpayKey = res.razorpay_key;

      // 2️⃣ Load Razorpay
      const loaded = await loadRazorpay();
      if (!loaded) {
        throw new Error(t.razorpayLoadFailed);
      }

      // 3️⃣ Open Razorpay Checkout
      const options = {
        key: razorpayKey,
        amount: Number(orderAmount), // in paise
        currency,
        name: "Give Gita",
        description: t.razorpayDescription,
        order_id: razorpay_order_id,

        // ✅ SUCCESS HANDLER
        handler: async function (response: any) {
          try {
            const paymentForm = new FormData();
            paymentForm.append("user_id", String(user.id));
            paymentForm.append("pre_transaction_id", razorpay_order_id);
            paymentForm.append(
              "post_transaction_id",
              response.razorpay_payment_id
            );
            paymentForm.append("status", "1"); // ✅ SUCCESS

            const paymentRes = await completePayment(paymentForm);

            if (!paymentRes?.status) {
              throw new Error(
                paymentRes?.message || t.paymentVerificationFailed
              );
            }

            toast({
              title: t.successTitle,
              description: t.successDescription,
            });

            setSelectedAmount(null);
            setCustomAmount("");
          } catch (err: any) {
            toast({
              // title: "Payment Error",
              description: err.message,
              variant: "destructive",
            });
          }
        },

        // ❌ FAILURE / DISMISS HANDLER
        modal: {
          ondismiss: async () => {
            try {
              const paymentForm = new FormData();
              paymentForm.append("user_id", String(user.id));
              paymentForm.append("pre_transaction_id", razorpay_order_id);
              paymentForm.append("post_transaction_id", ""); // ❌ no payment id
              paymentForm.append("status", "2"); // ❌ FAILED / CANCELLED

              await completePayment(paymentForm);

              toast({
                description: t.paymentCancelled,
                variant: "destructive",
              });
            } catch (err) {
              console.error("Failure status update error", err);
            }
          },
        },

        prefill: {
          name: user.name,
          email: user.email,
          contact: user.mobile, // ✅ fetched from localStorage
        },

        notes: {
          user_id: String(user.id),
          donation: "Give Gita",
        },

        theme: {
          color: "#FAA631",
        },
      };

      const rzp = new (window as any).Razorpay(options);
      rzp.open();
    } catch (err: any) {
      toast({
        description: err.message || t.somethingWentWrong,
        variant: "destructive",
      });
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="bg-white rounded-3xl shadow-xl p-6 space-y-6">
      <h3 className="text-xl font-bold text-center">{t.donateNow}</h3>

      <div>
        <Label>{t.selectAmount}</Label>
        <div className="grid grid-cols-3 gap-3 mt-3">
          {donationAmounts.map((amt) => (
            <button
              key={amt}
              onClick={() => {
                setSelectedAmount(amt);
                setCustomAmount("");
              }}
              className={`py-3 rounded-xl border font-semibold ${
                selectedAmount === amt
                  ? "border-orange-500 bg-orange-50 text-orange-600"
                  : "border-gray-300"
              }`}
            >
              ₹{amt}
            </button>
          ))}
        </div>
      </div>

      <Input
        type="number"
        placeholder={t.customAmountPlaceholder}
        value={customAmount}
        onChange={(e) => {
          setCustomAmount(e.target.value);
          setSelectedAmount(null);
        }}
      />

      <div className="bg-orange-50 rounded-xl p-4 text-sm space-y-2">
        <div className="flex gap-2">
          <Check className="w-4 h-4 text-orange-600" /> {t.securePayment}
        </div>
        <div className="flex gap-2">
          <Check className="w-4 h-4 text-orange-600" /> {t.receiptViaEmail}
        </div>
      </div>

      <Button
        onClick={handleDonate}
        disabled={loading}
        className="w-full bg-orange-500 py-6 text-lg"
      >
        <Heart className="mr-2" />
        {loading
          ? t.processing
          : `${t.donateButton} ${amount ? "₹" : ""}${amount || ""}`}
      </Button>
    </div>
  );
}