// components/portal/SettingsSwitcher.tsx
"use client";

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

/**
 * IMPORTANT:
 * We dynamically import the existing settings pages so you do NOT have to move their contents.
 * These imports point directly at your canonical routes:
 *   /app/settings/fiber/page.tsx
 *   /app/settings/uv/page.tsx
 *   /app/settings/co2-galvo/page.tsx
 *   /app/settings/co2-gantry/page.tsx
 *
 * If any of those filenames differ, update the paths below accordingly.
 */
const FiberPanel = dynamic(() => import("@/app/settings/fiber/page"), { ssr: false });
const UVPanel = dynamic(() => import("@/app/settings/uv/page"), { ssr: false });
const CO2GalvoPanel = dynamic(() => import("@/app/settings/co2-galvo/page"), { ssr: false });
const CO2GantryPanel = dynamic(() => import("@/app/settings/co2-gantry/page"), { ssr: false });

const TABS = [
    { key: "fiber", label: "Fiber" },
{ key: "uv", label: "UV" },
{ key: "co2-galvo", label: "CO₂ Galvo" },
{ key: "co2-gantry", label: "CO₂ Gantry" },
];

function Panel({ tab }: { tab: string }) {
    switch (tab) {
        case "fiber": return <FiberPanel />;
        case "uv": return <UVPanel />;
        case "co2-galvo": return <CO2GalvoPanel />;
        case "co2-gantry": return <CO2GantryPanel />;
        default: return <FiberPanel />;
    }
}

export default function SettingsSwitcher() {
    const router = useRouter();
    const sp = useSearchParams();
    const active = sp.get("t") || "fiber";

    function setTab(nextKey: string) {
        const q = new URLSearchParams(sp.toString());
        q.set("t", nextKey);
        router.replace(`/portal/laser-settings?${q.toString()}`, { scroll: false });
    }

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

        {/* panel */}
        <div className="rounded-md border p-4">
        <Panel tab={active} />
        </div>
        </div>
    );
}