"use client";

import { useEffect, useState } from "react";

import { useRouter } from "next/navigation";

import Header from "@/app/components/layout/Header";
import Footer from "@/app/components/layout/Footer";

import {
  DEFAULT_WALLET_OFFERS,
  WalletOffer,
  createWalletOrder,
  extractPaymentRedirectUrl,
  getWalletOffers,
  parseWalletOffers,
} from "@/app/lib/wallet";

import "../add-wallet-money.css";

export default function AddWalletMoneyPriceListPage() {
  const router = useRouter();

  const [loading, setLoading] = useState(true);

  const [offers, setOffers] = useState<WalletOffer[]>(DEFAULT_WALLET_OFFERS);

  const [selectedAmount, setSelectedAmount] = useState<number | null>(null);

  const [customAmount, setCustomAmount] = useState("");

  const [paying, setPaying] = useState(false);

  const [error, setError] = useState("");

  const [info, setInfo] = useState("");

  useEffect(() => {
    let cancelled = false;

    async function loadOffers() {
      const token = localStorage.getItem("token");

      if (!token) {
        router.replace("/signin?redirect=/add-wallet-money/price-list");
        return;
      }

      try {
        const response = await getWalletOffers();

        if (cancelled) return;

        if (!response.authenticated) {
          router.replace("/signin?redirect=/add-wallet-money/price-list");
          return;
        }

        if (response.success) {
          const parsed = parseWalletOffers(response.data);

          if (parsed.length > 0) {
            setOffers(parsed);
            setSelectedAmount(parsed.find((o) => o.isPopular)?.amount ?? parsed[0].amount);
            setLoading(false);
            return;
          }
        }

        // Fall back to the default price list — the offers
        // endpoint returned nothing usable (or failed), but the
        // recharge flow itself should still work.
        setSelectedAmount(
          DEFAULT_WALLET_OFFERS.find((o) => o.isPopular)?.amount ??
            DEFAULT_WALLET_OFFERS[0].amount,
        );
      } catch (err) {
        console.error("Wallet offers load error:", err);
      } finally {
        if (!cancelled) {
          setLoading(false);
        }
      }
    }

    loadOffers();

    return () => {
      cancelled = true;
    };
  }, [router]);

  const activeAmount = customAmount ? Number(customAmount) || 0 : selectedAmount ?? 0;

  const handlePay = async () => {
    setError("");
    setInfo("");

    if (!activeAmount || activeAmount <= 0) {
      setError("Please select or enter a valid amount.");
      return;
    }

    const token = localStorage.getItem("token");

    if (!token) {
      router.replace("/signin?redirect=/add-wallet-money/price-list");
      return;
    }

    setPaying(true);

    try {
      const response = await createWalletOrder({ amount: activeAmount });

      if (!response.authenticated) {
        router.replace("/signin?redirect=/add-wallet-money/price-list");
        return;
      }

      if (!response.success) {
        setError(response.message || "Unable to create payment order.");
        return;
      }

      const redirectUrl = extractPaymentRedirectUrl(response.data);

      if (redirectUrl) {
        window.location.href = redirectUrl;
        return;
      }

      setInfo(
        "Payment order created, but no payment link was returned. Please contact support if this keeps happening.",
      );
    } catch (err) {
      console.error("Create order error:", err);
      setError("Something went wrong while creating your payment order.");
    } finally {
      setPaying(false);
    }
  };

  if (loading) {
    return (
      <>
        <Header />
        <main className="horoscope-loading">Loading price list...</main>
        <Footer />
      </>
    );
  }

  return (
    <>
      <Header />

      <section className="wallet-page">
        <div className="container">
          <div className="wallet-wrapper card-bg-primary">
            <div className="price-list-heading">
              <h1>Add Money to Wallet</h1>
              <p>Pick an amount or enter your own to recharge your wallet.</p>
            </div>

            {error && <div className="wallet-error">{error}</div>}

            <div className="price-list-grid">
              {offers.map((offer) => (
                <div
                  key={offer.id}
                  className={`price-card ${
                    !customAmount && selectedAmount === offer.amount ? "selected" : ""
                  }`}
                  onClick={() => {
                    setSelectedAmount(offer.amount);
                    setCustomAmount("");
                  }}
                >
                  {offer.isPopular && <span className="price-card-badge">Popular</span>}

                  <span className="price-card-amount">₹{offer.amount.toLocaleString("en-IN")}</span>

                  {offer.bonus ? (
                    <span className="price-card-bonus">+ ₹{offer.bonus} bonus</span>
                  ) : null}

                  {offer.label && <span className="price-card-label">{offer.label}</span>}
                </div>
              ))}
            </div>

            <div className="custom-amount-card">
              <label>Or enter a custom amount</label>

              <input
                type="number"
                min={1}
                placeholder="Enter amount"
                value={customAmount}
                onChange={(event) => setCustomAmount(event.target.value)}
              />
            </div>

            {info && <div className="wallet-info-card mb-3">{info}</div>}

            <div className="pay-summary-bar">
              <div className="pay-summary-amount">
                <small className="d-block">You pay</small>
                <strong>₹{activeAmount ? activeAmount.toLocaleString("en-IN") : 0}</strong>
              </div>

              <button
                className="btn btn-warning rounded-pill px-4"
                disabled={paying || !activeAmount}
                onClick={handlePay}
              >
                {paying ? "Processing..." : "Proceed to Pay"}
              </button>
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
}