"use client";

import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import Link from "next/link";
import ScheduleDialog from "./ScheduleDialog";

interface TestHeroProps {
    selectedSeries?: string;
    onSeriesChange?: (series: string) => void;
}

export default function TestHero({ selectedSeries = "all", onSeriesChange }: TestHeroProps) {
    const testSeriesOptions = [
        { id: "jee-mains", label: "JEE Main" },
        { id: "neet", label: "NEET" },
        { id: "combo", label: "Combo" }
    ];

    const scheduleLinks: Record<string, string> = {
        "jee-mains": "https://cdn.prejee.com/prejee/schedule/mains-2026.pdf",
        "neet": "https://cdn.prejee.com/prejee/schedule/neet-2026.pdf",
        "combo": "https://cdn.prejee.com/prejee/schedule/mains+advanced.pdf"
    };

    return (
        <div className="relative overflow-hidden before:absolute before:top-0 before:start-1/2 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-top before:size-full before:-z-[1] before:transform before:-translate-x-1/2">
            <div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-10">
                <div className="text-center">
                    {/* Test Series Selector Buttons */}
                    <div className="flex flex-wrap justify-center gap-3 mb-8">
                        {testSeriesOptions.map((option) => (
                            <button
                                key={option.id}
                                onClick={() => onSeriesChange?.(option.id)}
                                className={`px-4 py-1 rounded-md text-xs cursor-pointer font-medium transition-all duration-200 ${selectedSeries === option.id
                                    ? 'bg-indigo-600 text-white shadow-md'
                                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200 border border-gray-600'
                                    }`}
                            >
                                {option.label}
                            </button>
                        ))}
                    </div>

                    <div className="font-neueHaas pointer-events-auto cursor-pointer mb-8">
                        <div className="focus:ring-ring inline-flex items-center rounded-lg border border-[#F60]/20 bg-[#ffe6d6]/90 px-2.5 py-0.5 text-center text-lg font-semibold text-[#F60] shadow-[0_4px_20px_rgba(255,102,0,0.15)] backdrop-blur-sm transition-all duration-200 select-none hover:bg-[#FC651E] hover:text-[#ffe6d6] focus:ring-2 focus:ring-offset-2 focus:outline-none">
                            <Badge style={{ backgroundColor: '#FC651E', color: '#fff' }} className="mr-2 ml-1 rounded-sm px-2 py-0.5 text-xs font-semibold align-middle">
                                FLASH SALE
                            </Badge>
                            <span className="font-medium text-md text-base">
                                1st AI-powered Test Series for 2026
                            </span>
                        </div>
                    </div>

                    <h1 className="scroll-m-20 text-5xl text-gray-900 font-bold tracking-tight lg:text-6xl lg:leading-tight mb-6">
                        {selectedSeries === "jee-mains" ? (
                            <>Crack <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">JEE Mains 2026</span><br />with AI-powered Test Series</>
                        ) : selectedSeries === "neet" ? (
                            <>Ace <span className="bg-gradient-to-r from-green-600 to-blue-600 bg-clip-text text-transparent">NEET 2026</span><br />with Comprehensive Test Series</>
                        ) : selectedSeries === "combo" ? (
                            <>Master <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">JEE Mains + Advanced</span><br />with Ultimate Test Series</>
                        ) : (
                            <>Master <span className="bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">JEE & NEET</span><br />with Test Series</>
                        )}
                    </h1>

                    <p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
                        {selectedSeries === "jee-mains" ? (
                            "The most trusted online testing platform designed specifically for JEE Mains aspirants. Get the most relevant test series with detailed analysis."
                        ) : selectedSeries === "neet" ? (
                            "Comprehensive NEET test series with expertly crafted questions following the latest NTA pattern and syllabus."
                        ) : selectedSeries === "combo" ? (
                            "Ultimate preparation package for students targeting both JEE Mains and JEE Advanced with comprehensive coverage."
                        ) : (
                            "Choose from our comprehensive test series designed for JEE Mains and NEET. Get detailed analysis and most relevant question patterns."
                        )}
                    </p>

                    <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
                        <Link
                            href="https://prejee.co/labs"
                            target="_blank"
                            rel="noopener noreferrer"
                        >
                            <Button size="lg" variant="default" className="cursor-pointer px-8 bg-indigo-600 hover:bg-indigo-700">
                                Start Now
                                <span className="text-lg">{">"}</span>
                            </Button>
                        </Link>
                        {selectedSeries === "all" ? (
                            <ScheduleDialog>
                                <Button size="lg" variant="outline" className="cursor-pointer border-indigo-600 text-indigo-600 hover:bg-indigo-50">
                                    Download Schedule
                                </Button>
                            </ScheduleDialog>
                        ) : (
                            <Link
                                href={scheduleLinks[selectedSeries] || "#"}
                                target="_blank"
                                rel="noopener noreferrer"
                            >
                                <Button size="lg" variant="outline" className="cursor-pointer border-indigo-600 text-indigo-600 hover:bg-indigo-50">
                                    Download Schedule
                                </Button>
                            </Link>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
}