"use client";

import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Check, Gift, Shield, TrendingUp } from "lucide-react";
import Image from "next/image";
import Link from "next/link";

// Logo configuration for each plan
const getPlanLogo = (planId: string) => {
    switch (planId) {
        case "jee-mains":
            return {
                src: "https://cdn.prejee.com/prejee/beta/iit.png",
                alt: "IIT JEE Logo",
                fallbackText: "JEE"
            };
        case "neet":
            return {
                src: "https://cdn.prejee.com/prejee/beta/aiims-delhi.svg",
                alt: "AIIMS NEET Logo",
                fallbackText: "NEET"
            };
        case "combo":
            return {
                src: "https://cdn.prejee.com/prejee/beta/JEEMains_prejee.webp",
                alt: "Mains + Advanced Combo",
                fallbackText: "COMBO"
            };
        default:
            return {
                src: "",
                alt: "",
                fallbackText: "TEST"
            };
    }
};

interface PricingPlan {
    id: string;
    name: string;
    description: string;
    originalPrice: number;
    currentPrice: number;
    discount: number;
    badge?: string;
    popular?: boolean;
    features: string[];
    guarantee?: string;
    validTill: string;
    scheduleLink?: string;
}

const pricingPlans: PricingPlan[] = [
    {
        id: "jee-mains",
        name: "JEE Mains Test Series",
        description: "Complete test series for JEE Mains 2026 aspirants",
        originalPrice: 3100,
        currentPrice: 1500,
        discount: 1600,
        badge: "52% OFF",
        popular: true,
        validTill: "JEE Mains 2026 (All Attempts)",
        guarantee: "100% Money back if you score 99+ Percentile",
        scheduleLink: "https://cdn.prejee.com/prejee/schedule/mains-2026.pdf",
        features: [
            "30+ Full Syllabus Tests",
            "FREE 471+ Chapter-wise Tests",
            "In-Depth Detailed Analysis",
            "Easy Solutions by AI",
            "Real Exam Pattern",
            "1:1 AI Mentorship"
        ]
    },
    {
        id: "neet",
        name: "NEET Test Series",
        description: "Comprehensive test series for NEET 2026 preparation",
        originalPrice: 3100,
        currentPrice: 1500,
        discount: 1600,
        badge: "52% OFF",
        validTill: "NEET 2026",
        guarantee: "Score improvement guarantee",
        scheduleLink: "https://cdn.prejee.com/prejee/schedule/neet-2026.pdf",
        features: [
            "20+ Full Syllabus Tests",
            "FREE 392+ Chapter-wise Tests",
            "Subject-wise Analysis",
            "Biology Focus Sessions",
            "Time Management Tips",
            "1:1 AI Mentorship"
        ]
    },
    {
        id: "combo",
        name: "JEE Mains + Advanced",
        description: "Ultimate combo for JEE aspirants targeting both exams",
        originalPrice: 5555,
        currentPrice: 3456,
        discount: 2099,
        badge: "BEST VALUE",
        validTill: "JEE Mains & Advanced 2026",
        guarantee: "Free Gift for Rankers",
        scheduleLink: "https://cdn.prejee.com/prejee/schedule/mains+advanced.pdf",
        features: [
            "Everything in JEE Mains",
            "20 JEE Advanced Tests",
            "Advanced Level Questions",
            "Subjective Questions",
            "IIT-level Problem Solving",
            "1:1 AI Mentorship",
        ]
    }
];

interface TestPricingProps {
    selectedSeries?: string;
}

export default function TestPricing({ selectedSeries = "all" }: TestPricingProps) {
    const filteredPlans = selectedSeries === "all"
        ? pricingPlans
        : pricingPlans.filter(plan =>
            plan.id.toLowerCase().includes(selectedSeries.toLowerCase()) ||
            (selectedSeries === "jee-mains" && plan.id === "combo")
        );

    return (
        <section className="py-20 bg-gradient-to-tr from-blue-100 via-transparent dark:from-blue-950 dark:via-transparent">
            <div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8">
                <div className="text-center mb-16">
                    <div className="inline-flex justify-center gap-x-1.5 py-2 px-3 rounded-full text-xs font-bold bg-orange-100 text-orange-800 mb-4">
                        Special Launch Offer
                    </div>
                    <h2 className="text-4xl font-bold text-gray-900 mb-4">
                        Choose Your Success Plan
                    </h2>
                    <p className="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
                        Rankers get exciting gifts worth up to ₹1,00,000. Hurry, offer valid for a limited time!
                    </p>

                    <div className="bg-gradient-to-r from-orange-500 to-red-500 text-white rounded-lg p-2 max-w-2xl mx-auto">
                        <div className="flex items-center justify-center space-x-2">
                            <Gift className="h-5 w-5" />
                            <span className="font-semibold text-sm">Launch Offer: Join now to get upto 52% off!</span>
                        </div>
                    </div>
                </div>

                <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
                    {filteredPlans.map((plan) => (
                        <div key={plan.id} className="group flex flex-col h-full border border-gray-200 shadow-sm rounded-xl dark:bg-neutral-900 dark:border-neutral-700 dark:shadow-neutral-700/70 relative">

                            {/* Popular Badge - only this one stays on top */}
                            {plan.popular && (
                                <Badge className="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-indigo-500 text-white px-4 py-1 z-20">
                                    <TrendingUp /> Most Popular
                                </Badge>
                            )}

                            {/* Header with Icon */}
                            <div className="relative h-40 flex flex-col justify-center items-center rounded-t-xl overflow-hidden bg-gray-100 before:absolute before:bg-[url('https://preline.co/assets/svg/examples/squared-bg-element.svg')] dark:before:bg-[url('https://preline.co/assets/svg/examples-dark/squared-bg-element.svg')] before:bg-no-repeat before:bg-center before:bg-[length:150px_150px] before:opacity-40">
                                {/* Custom grid background overlay */}
                                <div className="absolute inset-0 h-full w-full bg-white">
                                    <div className="absolute inset-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>
                                </div>
                                {/* Discount Badge - back to original position */}
                                {plan.badge && (
                                    <Badge className="absolute top-4 right-4 bg-orange-500 text-white text-xs z-10">
                                        {plan.badge}
                                    </Badge>
                                )}

                                <div className="relative z-10 w-20 h-20 bg-white rounded-xl flex items-center justify-center shadow-sm border border-gray-100">
                                    {(() => {
                                        const logo = getPlanLogo(plan.id);
                                        return (
                                            <div className="relative w-12 h-12 flex items-center justify-center">
                                                <Image
                                                    src={logo.src}
                                                    alt={logo.alt}
                                                    width={48}
                                                    height={48}
                                                    className="object-contain"
                                                    onError={(e) => {
                                                        // Fallback to text if image fails to load
                                                        const target = e.target as HTMLImageElement;
                                                        target.style.display = 'none';
                                                        const parent = target.parentElement;
                                                        if (parent) {
                                                            parent.innerHTML = `<span class="text-2xl font-bold text-indigo-600">${logo.fallbackText}</span>`;
                                                        }
                                                    }}
                                                />
                                            </div>
                                        );
                                    })()}
                                </div>
                            </div>

                            {/* Separator */}
                            <div className="border-t border-gray-200"></div>

                            <div className="p-6 flex-1 flex flex-col bg-white rounded-b-xl">
                                <span className="text-center block mb-1 text-xs font-semibold uppercase text-indigo-600 dark:text-indigo-500">
                                    Powered by NTA
                                </span>
                                <h3 className="text-center text-xl font-medium text-gray-800 dark:text-neutral-300 dark:hover:text-white mb-4">
                                    {plan.name}
                                </h3>

                                <div className="text-center mb-4">
                                    <div className="flex items-center justify-center space-x-2">
                                        <span className="text-3xl font-bold text-gray-800">
                                            ₹{plan.currentPrice.toLocaleString('en-IN')}
                                        </span>
                                        <span className="text-lg text-gray-400 line-through">
                                            ₹{plan.originalPrice.toLocaleString('en-IN')}
                                        </span>
                                    </div>
                                    <div className="text-green-600 font-semibold text-sm">
                                        Save ₹{plan.discount.toLocaleString('en-IN')}
                                    </div>
                                </div>

                                <div className="text-xs text-gray-500 text-center mb-6">
                                    Valid till {plan.validTill}
                                </div>
                                <Link
                                    href="https://prejee.co/labs"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                >
                                    <Button
                                        size="lg"
                                        className={`w-full mb-6 cursor-pointer ${plan.popular ? 'bg-indigo-600 hover:bg-indigo-700' : 'bg-gray-800 hover:bg-gray-900'} text-white`}
                                    >
                                        Buy now ₹{plan.currentPrice.toLocaleString('en-IN')} {">"}
                                    </Button>
                                </Link>

                                <ul className="space-y-3 mb-6 flex-1">
                                    {plan.features.slice(0, 6).map((feature, featureIndex) => (
                                        <li key={featureIndex} className="flex items-center text-sm">
                                            <Check className="h-4 w-4 text-green-500 flex-shrink-0 mr-3" />
                                            <span className="text-gray-700">
                                                {feature}
                                            </span>
                                        </li>
                                    ))}
                                </ul>

                                {plan.guarantee && (
                                    <div className="bg-green-50 rounded-lg p-3 border border-green-200 mt-auto">
                                        <div className="flex items-center space-x-2 text-green-700">
                                            <Shield className="h-4 w-4" />
                                            <span className="font-semibold text-xs">
                                                {plan.guarantee}
                                            </span>
                                        </div>
                                    </div>
                                )}
                            </div>

                            {/* Footer with Schedule Link */}
                            <div className="mt-auto flex border-t border-gray-200 divide-x divide-gray-200 dark:border-neutral-700 dark:divide-neutral-700">
                                <Link
                                    href={plan.scheduleLink || "#"}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-es-xl rounded-ee-xl bg-white text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-800 dark:focus:bg-neutral-800 cursor-pointer"
                                >
                                    View schedule {">"}
                                </Link>
                            </div>
                        </div>
                    ))}
                </div>

                {/* Money Back Guarantee Details */}
                <div className="mt-16 bg-gradient-to-r from-green-50 to-blue-50 rounded-2xl p-8">
                    <div className="text-center mb-6">
                        <h3 className="text-2xl font-bold text-gray-900 mb-4">
                            Get 100% Money Back + Exciting Gifts for Rankers ✨
                        </h3>
                    </div>

                    <div className="bg-white rounded-lg p-6 border border-green-200">
                        <h4 className="font-semibold text-gray-900 mb-4 text-center">
                            100% Money Back Guarantee Terms:
                        </h4>
                        <ul className="text-sm text-gray-700 space-y-2 max-w-4xl mx-auto">
                            <li>(i) For verification, you will be required to share your JEE Mains 2026 scorecard along with a video testimonial</li>
                            <li>(ii) The scholarship amount will be transferred after all attempts of JEE Mains 2026 are completed</li>
                            <li>(iii) Your registered name should match with the name on the JEE Mains 2026 scorecard</li>
                            <li>(iv) Requests must be made within 45 days of result declaration</li>
                        </ul>
                    </div>
                </div>

                {/* Alternative Options */}
                <div className="mt-12 text-center">
                    <p className="text-gray-600 mb-4">Looking for something else?</p>
                    <div className="flex flex-wrap justify-center gap-4">
                        {selectedSeries !== "jee-mains" && (
                            <Button variant="outline" size="sm" asChild>
                                <a href="/tests?series=jee-mains">JEE Mains Test Series</a>
                            </Button>
                        )}
                        {selectedSeries !== "neet" && (
                            <Button variant="outline" size="sm" asChild>
                                <a href="/tests?series=neet">NEET Test Series</a>
                            </Button>
                        )}
                        {selectedSeries !== "combo" && (
                            <Button variant="outline" size="sm" asChild>
                                <a href="/tests?series=combo">JEE Mains + Advanced Combo</a>
                            </Button>
                        )}
                    </div>
                </div>
            </div>
        </section>
    );
}