"use client";

import { useEffect, useRef, useState, useCallback } from "react";
import { useTranslation } from "@/hooks/useTranslation";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import {
  fetchPackages,
  fetchPaymentOptions,
  addTransaction,
  updateTransactionStatus,
  selectPackages,
  selectPaymentOptions,
  selectPackagesLoaded,
  selectSubscribeLoading,
  selectSubscribeProcessing,
  type Package,
} from "@/store/slices/subscribeSlice";
import { getStoredUser } from "@/lib/utils/persistAuth";
import { useToast } from "@/lib/toast";
import { setPremiumStatus } from "@/lib/utils/permissions";
import { useGeneralSettings } from "@/lib/GeneralSettingsContext";

// Declare Razorpay global
declare global {
  interface Window {
    Razorpay: new (opts: Record<string, unknown>) => { open(): void };
  }
}

interface PlansSectionProps {
  locale: string;
}

function loadRazorpayScript(): Promise<boolean> {
  return new Promise((resolve) => {
    if (window.Razorpay) {
      resolve(true);
      return;
    }
    const s = document.createElement("script");
    s.src = "https://checkout.razorpay.com/v1/checkout.js";
    s.onload = () => resolve(true);
    s.onerror = () => resolve(false);
    document.head.appendChild(s);
  });
}

function PlanCard({
  pkg,
  onSubscribe,
  processing,
  currency,
}: {
  pkg: Package;
  onSubscribe: (pkg: Package) => void;
  processing: boolean;
  currency: string;
}) {
  const isPopular = pkg.name.toLowerCase() === "advanced";
  const periodLabel = `${pkg.time} ${pkg.type}${parseInt(pkg.time) > 1 ? "s" : ""}`;

  return (
    <div
      className="plan"
      style={{
        position: "relative",
        border: isPopular ? "2px solid var(--brand)" : undefined,
      }}
    >
      {isPopular && (
        <span
          style={{
            position: "absolute",
            top: -1,
            left: "50%",
            transform: "translateX(-50%) translateY(-50%)",
            background: "var(--brand)",
            color: "#fff",
            fontSize: 10,
            fontWeight: 800,
            letterSpacing: "0.1em",
            textTransform: "uppercase",
            padding: "3px 12px",
            borderRadius: 99,
            whiteSpace: "nowrap",
          }}
        >
          Most Popular
        </span>
      )}

      <div className="plan-tag">{pkg.name}</div>
      <h3 className="plan-name">{pkg.name}</h3>
      <p className="plan-desc">Access premium content for {periodLabel}</p>

      <div className="plan-price">
        <span className="cur">{currency}</span>
        <span className="amt">{pkg.price}</span>
        <span className="per">/ {periodLabel}</span>
      </div>

      <div
        className="plan-price-meta"
        style={{
          fontFamily: "var(--mono)",
          fontSize: 11,
          color: "var(--text-3)",
          marginBottom: "1rem",
        }}
      >
        Billed {currency}{pkg.price} every {periodLabel}
      </div>

      {/* Features */}
      <ul className="plan-features">
        <li className="on">Access all news articles</li>
        {pkg.is_premium_news === 1 && (
          <li className="on">Premium content unlocked</li>
        )}
        {pkg.is_ads_free === 1 && <li className="on">Ad-free experience</li>}
        {pkg.is_epaper === 1 && <li className="on">Daily e-paper access</li>}
        {pkg.is_epaper === 0 && <li className="off">Daily e-paper access</li>}
      </ul>

      <button
        className={`plan-cta${isPopular ? " primary" : ""}`}
        disabled={processing || pkg.is_buy === 1}
        onClick={() => onSubscribe(pkg)}
        style={{
          opacity: processing ? 0.7 : 1,
          cursor: processing ? "wait" : "pointer",
        }}
      >
        {pkg.is_buy === 1
          ? "Current plan"
          : processing
            ? "Processing…"
            : `Subscribe — ${currency}${pkg.price}`}
      </button>
    </div>
  );
}

export function PlansSection({ locale: _locale }: PlansSectionProps) {
  const { t } = useTranslation("subscribe");
  const dispatch = useAppDispatch();
  const { success, error: showError } = useToast();

  const packages = useAppSelector(selectPackages);
  const payOpts = useAppSelector(selectPaymentOptions);
  const loaded = useAppSelector(selectPackagesLoaded);
  const loading = useAppSelector(selectSubscribeLoading);
  const processing = useAppSelector(selectSubscribeProcessing);
  const fetchedRef = useRef(false);
  const [userId, setUserId] = useState(0);
  const { settings } = useGeneralSettings();
  const currency = settings?.currencySymbol ?? "₹";

  useEffect(() => {
    setUserId(getStoredUser()?.id ?? 0);
  }, []);

  useEffect(() => {
    if (!loaded && !fetchedRef.current) {
      fetchedRef.current = true;
      dispatch(fetchPackages());
      dispatch(fetchPaymentOptions());
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // ── Razorpay checkout ─────────────────────────────────────────────────────
  async function handleSubscribe(pkg: Package) {
    if (!userId) {
      showError("Sign in to subscribe");
      window.location.href = "/login";
      return;
    }

    const razorpayOpt = payOpts.find((p) => p.name === "razorpay");
    if (!razorpayOpt) {
      showError("No payment gateway available");
      return;
    }

    const loaded = await loadRazorpayScript();
    if (!loaded) {
      showError("Failed to load payment SDK");
      return;
    }

    const txnId = `txn_${Date.now()}_${userId}`;

    // Record as Processing
    await dispatch(
      addTransaction({
        userId,
        packageId: pkg.id,
        price: pkg.price,
        transactionId: txnId,
        description: `${pkg.name} plan — ${pkg.time} ${pkg.type}`,
      }),
    );
    await dispatch(
      updateTransactionStatus({ userId, transactionId: txnId, status: 1 }),
    );

    const rzp = new window.Razorpay({
      key: razorpayOpt.key_1,
      amount: pkg.price * 100, // paise
      currency: settings?.currencyCode ?? "INR",
      name: "DTNews",
      description: `${pkg.name} — ${pkg.time} ${pkg.type}`,
      prefill: {
        name: getStoredUser()?.full_name ?? "",
        email: getStoredUser()?.email ?? "",
      },
      theme: { color: "#C1272D" },
      handler: async () => {
        await dispatch(
          updateTransactionStatus({ userId, transactionId: txnId, status: 2 }),
        );
        setPremiumStatus(true); // unlock premium features
        success(`🎉 Subscribed to ${pkg.name}! Enjoy your benefits.`);
      },
      modal: {
        ondismiss: async () => {
          await dispatch(
            updateTransactionStatus({
              userId,
              transactionId: txnId,
              status: 3,
            }),
          );
          showError("Payment cancelled");
        },
      },
    });
    rzp.open();
  }

  // ── Render ────────────────────────────────────────────────────────────────
  return (
    <>
      <section className="wrap plans-shell">
        <div className="plans-grid">
          {/* Free plan — always shown */}
          <div className="plan">
            <div className="plan-tag">{t("plan_free_tag")}</div>
            <h3 className="plan-name">{t("plan_free_name")}</h3>
            <p className="plan-desc">{t("plan_free_desc")}</p>
            <div className="plan-price">
              <span className="cur">{currency}</span>
              <span className="amt">0</span>
              <span className="per">{t("per_month")}</span>
            </div>
            <div className="plan-price-meta">{t("plan_free_price_meta")}</div>
            <ul className="plan-features">
              <li className="on">Basic news access</li>
              <li className="on">Breaking alerts</li>
              <li className="off">Premium content</li>
              <li className="off">Ad-free experience</li>
              <li className="off">Daily e-paper</li>
            </ul>
            <button className="plan-cta" disabled>
              Current plan
            </button>
          </div>

          {/* API packages */}
          {loading && packages.length === 0
            ? Array.from({ length: 3 }).map((_, i) => (
                <div key={i} className="plan" style={{ opacity: 0.5 }}>
                  <div
                    style={{
                      height: 14,
                      width: "40%",
                      background: "#e5e7eb",
                      borderRadius: 4,
                      marginBottom: 12,
                    }}
                  />
                  <div
                    style={{
                      height: 20,
                      width: "60%",
                      background: "#e5e7eb",
                      borderRadius: 4,
                      marginBottom: 8,
                    }}
                  />
                  <div
                    style={{
                      height: 40,
                      background: "#e5e7eb",
                      borderRadius: 4,
                      marginBottom: 16,
                    }}
                  />
                  <div
                    style={{
                      height: 44,
                      background: "#e5e7eb",
                      borderRadius: 8,
                    }}
                  />
                </div>
              ))
            : packages.map((pkg) => (
                <PlanCard
                  key={pkg.id}
                  pkg={pkg}
                  onSubscribe={handleSubscribe}
                  processing={processing}
                  currency={currency}
                />
              ))}
        </div>
      </section>
    </>
  );
}