"use client";

import { useState, useEffect } from "react";
import { useSearchParams } from "next/navigation";
import TestHero from "@/components/tests/TestHero";
import TestResults from "@/components/tests/TestResults";
import TestPricing from "@/components/tests/TestPricing";
import TestTestimonials from "@/components/tests/TestTestimonials";
import TestFAQ from "@/components/tests/TestFAQ";
import { Separator } from "../ui/separator";

export default function TestPageClient() {
    const searchParams = useSearchParams();
    const [selectedSeries, setSelectedSeries] = useState<string>("all");

    useEffect(() => {
        const seriesParam = searchParams.get("series");
        if (seriesParam) {
            setSelectedSeries(seriesParam);
        }
    }, [searchParams]);

    const handleSeriesChange = (seriesId: string) => {
        setSelectedSeries(seriesId);

        // Update URL without triggering page reload
        const url = new URL(window.location.href);
        if (seriesId === "all") {
            url.searchParams.delete("series");
        } else {
            url.searchParams.set("series", seriesId);
        }
        window.history.pushState({}, "", url.toString());
    };

    return (
        <div className="min-h-screen">
            {/* Hero Section */}
            <TestHero selectedSeries={selectedSeries} onSeriesChange={handleSeriesChange} />

            <TestResults />

            <Separator className="mx-auto w-full max-w-6xl opacity-60" />

            {/* Pricing */}
            <TestPricing selectedSeries={selectedSeries} />

            {/* Testimonials */}
            <TestTestimonials selectedSeries={selectedSeries} />

            {/* FAQ */}
            <TestFAQ selectedSeries={selectedSeries} />
        </div>
    );
}