"use client";

import { useMemo } from "react";
import { useSearchParams, useRouter } from "next/navigation";
import dynamic from "next/dynamic";
import { cn } from "@/lib/utils";

// these should already exist under components/buying-guide/*
const BuyingGuideList = dynamic(
    () => import("@/components/buying-guide/BuyingGuideList"),
                                { ssr: false }
);
const LaserFinderPanel = dynamic(
    () => import("@/components/buying-guide/LaserFinderPanel"),
                                 { ssr: false }
);

const TABS = [
    { key: "list", label: "Guide" },
{ key: "finder", label: "Laser Finder" },
] as const;

export default function BuyingGuideSwitcher() {
    const sp = useSearchParams();
    const router = useRouter();

    const active = useMemo(() => {
        const t = (sp.get("bg") || TABS[0].key).toLowerCase();
        return TABS.some(x => x.key === t) ? t : TABS[0].key;
    }, [sp]);

    function setTab(k: string) {
        const q = new URLSearchParams(sp.toString());
        q.set("bg", k);
        router.replace(`/portal/buying-guide?${q.toString()}`, { scroll: false });
    }

    return (
        <div className="space-y-4">
        <div className="flex gap-2">
        {TABS.map(t => (
            <button
            key={t.key}
            onClick={() => setTab(t.key)}
            className={cn(
                "rounded-md border px-3 py-1.5 text-sm",
                active === t.key ? "bg-primary text-primary-foreground" : "hover:bg-muted"
            )}
            >
            {t.label}
            </button>
        ))}
        </div>

        <div className="rounded-md border p-4">
        {active === "finder" ? <LaserFinderPanel /> : <BuyingGuideList />}
        </div>
        </div>
    );
}