"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { useSelector } from "react-redux";
import { motion } from "framer-motion";
import {
    Check,
    Shield,
    CreditCard,
    Zap,
    Star,
    ArrowRight,
} from "lucide-react";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import { useGetPlansQuery, useGetMyPlansQuery } from "@/redux/apis/planApi";
import { useGetPlanCategoriesQuery } from "@/redux/apis/planCategoryApi";
import { useInitiatePurchaseMutation, useVerifyPaymentMutation } from "@/redux/apis/paymentApi";
import { selectCurrentUser, selectIsAuthenticated } from "@/redux/slices/authSlice";

// Add global Razorpay type
declare global {
    interface Window {
        Razorpay: any;
    }
}

export default function PlansPage() {
    const router = useRouter();
    const isAuthenticated = useSelector(selectIsAuthenticated);
    const user = useSelector(selectCurrentUser);
    const [loadingPlanId, setLoadingPlanId] = useState<number | null>(null);

    // Fetch categories
    const { data: categoriesData, isLoading: isLoadingCategories } = useGetPlanCategoriesQuery({});
    const [activeCategoryId, setActiveCategoryId] = useState<number | null>(null);

    // Fetch plans
    const { data: plansData, isLoading: isLoadingPlans, error: plansError } = useGetPlansQuery({});

    // Set default category to 'Basic Membership' or first available
    useEffect(() => {
        if (categoriesData?.success && categoriesData.data.length > 0 && !activeCategoryId) {
            const basicCategory = categoriesData.data.find(c => c.name.toLowerCase().includes("basic"));
            if (basicCategory) {
                setActiveCategoryId(basicCategory.id);
            } else {
                setActiveCategoryId(categoriesData.data[0].id);
            }
        }
    }, [categoriesData, activeCategoryId]);

    // Fetch user's purchased plans
    // Note: Ideally we should use useGetMyPlansQuery but usually it returns user specific plans.
    // Let's use the explicit one if available or filter from getPlans?
    // Wait, the correct hook is useGetMyPlansQuery as per planApi.ts
    const { data: myPurchasedPlans } = useGetMyPlansQuery(undefined, { skip: !isAuthenticated });

    const basicPlan = plansData?.data?.find(p => p.name.toLowerCase().includes("membership - basic") || p.name.toLowerCase() === "basic");
    const basicPlanId = basicPlan?.id || 10; // Fallback to 10 if not found

    const hasBasicPlan = myPurchasedPlans?.data?.some((purchase: any) => Number(purchase.planId) === basicPlanId);

    const [initiatePurchase] = useInitiatePurchaseMutation();
    const [verifyPayment] = useVerifyPaymentMutation();

    const handleBuyPlan = async (plan: any) => {
        if (!isAuthenticated) {
            router.push("/login?redirect=/plans");
            return;
        }

        if (!window.Razorpay) {
            alert("Razorpay SDK not loaded. Please refresh the page.");
            return;
        }

        try {
            setLoadingPlanId(plan.id);

            // 1. Initiate Purchase
            const initiateResult = await initiatePurchase({ planId: plan.id }).unwrap();

            if (!initiateResult.success) {
                throw new Error(initiateResult.message);
            }

            const { orderId, amount, currency, keyId } = initiateResult.data;

            // 2. Open Razorpay Checkout
            const options = {
                key: keyId,
                amount: amount,
                currency: currency,
                name: "MSBSGOV",
                description: `Subscription for ${plan.name}`,
                order_id: orderId,
                prefill: {
                    name: user?.name || "",
                    email: user?.email || "",
                    contact: user?.phone || "",
                },
                theme: {
                    color: "#3B82F6", // Primary blue color
                },
                handler: async function (response: any) {
                    try {
                        // 3. Verify Payment
                        const verifyResult = await verifyPayment({
                            razorpay_order_id: response.razorpay_order_id,
                            razorpay_payment_id: response.razorpay_payment_id,
                            razorpay_signature: response.razorpay_signature,
                            planId: plan.id,
                        }).unwrap();

                        if (verifyResult.success) {
                            alert("Payment Successful! Plan Activated.");
                            router.push("/profile");
                        } else {
                            alert("Payment Verification Failed: " + verifyResult.message);
                        }
                    } catch (verifyError: any) {
                        console.error("Payment verification failed:", verifyError);
                        alert("Payment verification failed: " + (verifyError.data?.message || verifyError.message));
                    } finally {
                        setLoadingPlanId(null);
                    }
                },
                modal: {
                    ondismiss: function () {
                        setLoadingPlanId(null);
                    },
                },
            };

            const rzp1 = new window.Razorpay(options);
            rzp1.on("payment.failed", function (response: any) {
                alert("Payment Failed: " + response.error.description);
                setLoadingPlanId(null);
            });
            rzp1.open();

        } catch (error: any) {
            console.error("Error initiating payment:", error);
            alert("Failed to initiate payment: " + (error.data?.message || error.message));
            setLoadingPlanId(null);
        }
    };

    return (
        <div className="min-h-screen flex flex-col bg-[var(--background)] transition-colors duration-300">
            <Navbar />
            <main className="flex-1 pt-24 pb-16">
                <div className="w-full px-4 sm:px-6 lg:px-8 py-8">
                    <div className="max-w-7xl mx-auto">
                        {/* Header */}
                        <div className="text-center mb-16">
                            <motion.h1
                                initial={{ opacity: 0, y: 20 }}
                                animate={{ opacity: 1, y: 0 }}
                                className="text-4xl md:text-5xl font-bold text-theme-primary mb-4"
                            >
                                Choose Your Plan
                            </motion.h1>
                            <motion.p
                                initial={{ opacity: 0, y: 20 }}
                                animate={{ opacity: 1, y: 0 }}
                                transition={{ delay: 0.1 }}
                                className="text-xl text-theme-secondary max-w-2xl mx-auto"
                            >
                                Get access to premium features, tenders, and exclusive business opportunities.
                            </motion.p>
                        </div>

                        {/* Category Tabs */}
                        {!isLoadingCategories && categoriesData?.success && (
                            <div className="flex flex-wrap justify-center gap-4 mb-12">
                                {[...categoriesData.data]
                                    .sort((a, b) => {
                                        const order = ["basic", "tender", "b2b", "b2c", "crm"];
                                        const getIdx = (name: string) => {
                                            const lower = name.toLowerCase();
                                            return order.findIndex(o => lower.includes(o));
                                        };
                                        const idxA = getIdx(a.name);
                                        const idxB = getIdx(b.name);
                                        if (idxA === -1 && idxB === -1) return a.name.localeCompare(b.name);
                                        if (idxA === -1) return 1;
                                        if (idxB === -1) return -1;
                                        return idxA - idxB;
                                    })
                                    .map((category) => (
                                        <button
                                            key={category.id}
                                            onClick={() => setActiveCategoryId(category.id)}
                                            className={`px-6 py-2 rounded-full font-medium transition-all duration-300 ${activeCategoryId === category.id
                                                ? "bg-primary-500 text-white shadow-lg shadow-primary-500/30"
                                                : "bg-theme-input text-theme-secondary hover:bg-primary-500/10 hover:text-primary-500 border border-primary-500/20"
                                                }`}
                                        >
                                            {category.name}
                                        </button>
                                    ))}
                            </div>
                        )}

                        {/* Plans Grid */}
                        {isLoadingPlans ? (
                            <div className="flex justify-center items-center py-12">
                                <div className="w-12 h-12 border-4 border-primary-500 border-t-transparent rounded-full animate-spin" />
                            </div>
                        ) : plansError ? (
                            <div className="text-center text-red-500 py-12">
                                Failed to load plans. Please try again later.
                            </div>
                        ) : (
                            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                                {plansData?.data
                                    .filter(plan => {
                                        if (!activeCategoryId) return true;

                                        const activeCategory = categoriesData?.data.find(c => c.id === activeCategoryId);
                                        if (!activeCategory) return plan.categoryId === activeCategoryId;

                                        const catName = activeCategory.name.toLowerCase();
                                        const planName = plan.name.toLowerCase();
                                        const planCatName = plan.category?.name?.toLowerCase() || "";

                                        // 1. Strict Exclusion: Don't show basic/membership plans in "Tender" tab
                                        if (catName.includes("tender")) {
                                            if (planName.includes("basic") || planName.includes("membership")) return false;
                                        }

                                        // 2. Strict Match: "Basic Membership" tab
                                        if (catName.includes("basic")) {
                                            return planName.includes("basic") || planName.includes("membership");
                                        }

                                        // 3. Match by ID
                                        if (plan.categoryId === activeCategoryId) return true;

                                        // 4. Robust matching for Tenders, B2B, B2C, CRM
                                        if (catName.includes("tender")) return planCatName.includes("tender") || plan.service === "tenders";
                                        if (catName.includes("b2b")) return (planName.includes("b2b") || plan.service === "b2b");
                                        if (catName.includes("b2c")) return (planName.includes("b2c") || plan.service === "b2c");
                                        if (catName.includes("crm")) return (planName.includes("crm") || plan.service === "crm");

                                        // 5. Match by nested category name
                                        if (planCatName === catName) return true;

                                        return false;
                                    })
                                    .sort((a, b) => {
                                        const activeCategory = categoriesData?.data.find(c => c.id === activeCategoryId);
                                        const catName = activeCategory?.name.toLowerCase() || "";

                                        if (catName.includes("tender")) {
                                            const tenderOrder = ["silver", "gold", "premium", "classic", "corporate", "priority"];
                                            const getTenderIdx = (name: string) => {
                                                const lower = name.toLowerCase();
                                                return tenderOrder.findIndex(o => lower.includes(o));
                                            };
                                            const idxA = getTenderIdx(a.name);
                                            const idxB = getTenderIdx(b.name);

                                            if (idxA !== -1 && idxB !== -1) return idxA - idxB;
                                            if (idxA !== -1) return -1;
                                            if (idxB !== -1) return 1;
                                        }

                                        return 0; // Maintain original order for other categories
                                    })
                                    .map((plan, index) => (
                                        <motion.div
                                            key={plan.id}
                                            initial={{ opacity: 0, y: 20 }}
                                            animate={{ opacity: 1, y: 0 }}
                                            transition={{ delay: index * 0.1 + 0.2 }}
                                            className="relative p-8 rounded-2xl bg-theme-input border border-primary-500/20 hover:border-primary-500 transition-all duration-300 group hover:shadow-xl hover:shadow-primary-500/5"
                                        >
                                            {/* Popular Badge */}
                                            {plan.name.toLowerCase().includes("premium") && (
                                                <div className="absolute top-0 right-0 -mt-4 mr-4 px-4 py-1 bg-gradient-to-r from-primary-500 to-purple-600 text-white text-xs font-bold rounded-full shadow-lg">
                                                    POPULAR
                                                </div>
                                            )}

                                            <div className="mb-8">
                                                <h3 className="text-2xl font-bold text-theme-primary mb-2">{plan.name}</h3>
                                                <p className="text-theme-secondary">{plan.description}</p>
                                            </div>

                                            <div className="mb-8">
                                                <div className="flex items-baseline gap-1">
                                                    <span className="text-4xl font-bold text-theme-primary">{plan.currency} {plan.price}</span>
                                                    <span className="text-theme-secondary">/{plan.validity} days</span>
                                                </div>
                                                {plan.originalPrice && plan.originalPrice > plan.price && (
                                                    <p className="text-sm text-theme-muted line-through mt-1">
                                                        {plan.currency} {plan.originalPrice}
                                                    </p>
                                                )}
                                            </div>

                                            <div className="space-y-4 mb-8">
                                                <div className="flex items-center gap-3 text-sm text-theme-secondary">
                                                    <div className="p-1 rounded-full bg-green-500/20 text-green-500">
                                                        <Check className="w-3 h-3" />
                                                    </div>
                                                    <span>Access to {plan.planFor}</span>
                                                </div>
                                                <div className="flex items-center gap-3 text-sm text-theme-secondary">
                                                    <div className="p-1 rounded-full bg-green-500/20 text-green-500">
                                                        <Shield className="w-3 h-3" />
                                                    </div>
                                                    <span>Secure Payments</span>
                                                </div>
                                                <div className="flex items-center gap-3 text-sm text-theme-secondary">
                                                    <div className="p-1 rounded-full bg-green-500/20 text-green-500">
                                                        <Star className="w-3 h-3" />
                                                    </div>
                                                    <span>Premium Support</span>
                                                </div>
                                            </div>

                                            <button
                                                onClick={() => handleBuyPlan(plan)}
                                                disabled={loadingPlanId === plan.id || (!hasBasicPlan && Number(plan.id) !== basicPlanId)}
                                                className={`w-full py-4 rounded-xl font-semibold transition-all flex items-center justify-center gap-2 shadow-lg ${!hasBasicPlan && Number(plan.id) !== basicPlanId
                                                    ? "bg-gray-300 text-gray-500 cursor-not-allowed shadow-none"
                                                    : "bg-primary-500 text-white hover:bg-primary-600 group-hover:scale-[1.02] active:scale-[0.98] shadow-primary-500/20"
                                                    }`}
                                                title={
                                                    !hasBasicPlan && Number(plan.id) !== basicPlanId
                                                        ? "You must purchase the Basic Membership Plan first."
                                                        : ""
                                                }
                                            >
                                                {loadingPlanId === plan.id ? (
                                                    <>
                                                        <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
                                                        Processing...
                                                    </>
                                                ) : (
                                                    <>
                                                        {!hasBasicPlan && Number(plan.id) !== basicPlanId
                                                            ? "Requires Basic Plan"
                                                            : "Get Started"
                                                        }
                                                        {(hasBasicPlan || Number(plan.id) === basicPlanId) && (
                                                            <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
                                                        )}
                                                    </>
                                                )}
                                            </button>
                                        </motion.div>
                                    ))}
                            </div>
                        )}
                    </div>
                </div>
            </main>
            <Footer />
        </div>
    );
}