le-app/app/components/portal/UtilitySwitcher.tsx

"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import dynamic from "next/dynamic";
import { useRouter, useSearchParams } from "next/navigation";
import { cn } from "@/lib/utils";
import { ChevronRight, ExternalLink, TerminalSquare } from "lucide-react";

type Item = {
    key: string; // used in ?t=
    label: string;
    note?: string;
    icon?: string; // optional icon (public/images/utils/<icon>)
    href?: string; // optional absolute URL (used if no component)
    component?: React.ComponentType<{ embedded?: boolean }>;
};

// Lazy-load heavy utilities
const BackgroundRemoverPanel = dynamic(
    () => import("@/components/utilities/BackgroundRemoverPanel"),
                                       { ssr: false }
);
const SVGNestPanel = dynamic(() => import("@/components/utilities/SVGNestPanel"), {
    ssr: false,
});
const LaserToolkitSwitcher = dynamic(
    () => import("@/components/portal/LaserToolkitSwitcher"),
                                     { ssr: false }
);
// Inline File Server
const FileBrowserPanel = dynamic(
    () => import("@/components/utilities/files/FileBrowserPanel"),
                                 { ssr: false }
);

const ITEMS: Item[] = [
    {
        key: "laser-toolkit",
        label: "Laser Toolkit",
        note: "convert laser settings, interval and more",
        icon: "toolkit.png",
        component: LaserToolkitSwitcher,
        href: "/laser-toolkit",
    },
{
    key: "files",
    label: "File Server",
    note: "download from our file explorer",
    icon: "fs.png",
    component: FileBrowserPanel,
    href: "/files",
},
{
    key: "svgnest",
    label: "SVGnest",
    note: "automatically nests parts and exports svg",
    icon: "nest.png",
    component: SVGNestPanel,
    href: "/svgnest",
},
{
    key: "background-remover",
    label: "BG Remover",
    note: "open source background remover",
    icon: "bgrm.png",
    component: BackgroundRemoverPanel,
    href: "/background-remover",
},

// These stay on makearmy (external services)
{
    key: "picsur",
    label: "Picsur",
    note: "Simple Image Host",
    icon: "picsur.png",
    href: "https://images.makearmy.io",
},
{
    key: "privatebin",
    label: "PrivateBin",
    note: "Encrypted internet clipboard",
    icon: "privatebin.png",
    href: "https://paste.makearmy.io/",
},
{
    key: "forgejo",
    label: "Forgejo",
    note: "git for our community members",
    icon: "forge.png",
    href: "https://forge.makearmy.io",
},
];

function isAbsoluteUrl(href: string) {
    return /^https?:\/\//i.test(href);
}

/**
 * External if it's an absolute URL and NOT same-origin as the current site.
 * Relative paths are always internal.
 */
function isExternalHref(href?: string) {
    if (!href) return false;
    if (!isAbsoluteUrl(href)) return false;

    try {
        const u = new URL(href);
        if (typeof window === "undefined") return true;
        return u.origin !== window.location.origin;
    } catch {
        return true;
    }
}

/**
 * If href is absolute AND same-origin, convert it to a site-relative path.
 * Otherwise return as-is.
 */
function toSameOriginPath(href: string) {
    if (!isAbsoluteUrl(href)) return href;

    try {
        const u = new URL(href);
        if (typeof window === "undefined") return href;
        if (u.origin === window.location.origin) {
            return `${u.pathname}${u.search}${u.hash}`;
        }
    } catch {}
    return href;
}

function Panel({ item }: { item: Item }) {
    if (item.component) {
        const Cmp = item.component;
        return (
            <div className="space-y-3">
            {/* Removed notes/headers to keep UI clean */}
            <Cmp embedded />
            </div>
        );
    }

    const href = item.href || "/";
    const external = isExternalHref(href);

    if (external) {
        return (
            <div className="space-y-2 text-sm">
            <a
            href={href}
            target="_blank"
            rel="noopener noreferrer"
            className="underline"
            >
            Open {item.label}
            </a>
            </div>
        );
    }

    const src = toSameOriginPath(href);
    return (
        <iframe
        key={src}
        src={src}
        className="w-full"
        style={{ height: "72vh" }}
        // no sandbox; needs drag/drop etc.
        />
    );
}

export default function UtilitySwitcher() {
    const router = useRouter();
    const sp = useSearchParams();
    const openedRef = useRef<string | null>(null);
    const [firstPaint, setFirstPaint] = useState(true);

    const activeKey = useMemo(() => {
        const t = (sp.get("t") || ITEMS[0].key).toLowerCase();
        return ITEMS.some((i) => i.key === t) ? t : ITEMS[0].key;
    }, [sp]);

    const activeItem = useMemo(
        () => ITEMS.find((i) => i.key === activeKey) || ITEMS[0],
                               [activeKey]
    );

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

    /**
     * Optional auto-open behavior for external tools when selected via URL (?t=...).
     * RECOMMENDED: keep this off to avoid popup blockers / surprise tabs.
     */
    useEffect(() => {
        const item = activeItem;
        if (!item?.href) return;
        if (item.component) return;
        if (!isExternalHref(item.href)) return;

        if (openedRef.current === item.key) return;
        openedRef.current = item.key;

        const AUTO_OPEN_ON_FIRST_PAINT = false;
        if (AUTO_OPEN_ON_FIRST_PAINT || !firstPaint) {
            window.open(item.href, "_blank", "noopener,noreferrer");
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [activeItem?.key]);

    useEffect(() => {
        setFirstPaint(false);
    }, []);

    return (
        <div className="grid min-w-0 gap-4 lg:grid-cols-[220px_minmax(0,1fr)]">
        <aside className="h-fit overflow-hidden rounded-xl border border-border/70 bg-card/40 lg:sticky lg:top-4">
        <div className="flex items-center gap-2 border-b border-border/60 px-3 py-2.5 text-[11px] uppercase tracking-[0.16em] text-muted-foreground">
            <TerminalSquare className="h-3.5 w-3.5 text-accent" />
            Select utility
        </div>
        <div className="grid grid-cols-2 gap-1 p-1.5 sm:grid-cols-3 lg:grid-cols-1">
        {ITEMS.map((it) => {
            const isInline = Boolean(it.component);
            const external = !isInline && isExternalHref(it.href);
            const iconSrc = it.icon ? `/images/utils/${it.icon}` : null;
            const isActive = it.key === activeKey;

            return (
                <button
                key={it.key}
                onClick={() => {
                    setTab(it.key);
                    if (!isInline && external) {
                        window.open(it.href!, "_blank", "noopener,noreferrer");
                    }
                }}
                className={cn(
                    "group flex min-w-0 items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-xs transition-all sm:text-sm",
                    isActive
                    ? "bg-accent/15 text-foreground shadow-[inset_2px_0_0_hsl(var(--accent))]"
                    : "text-muted-foreground hover:bg-muted/30 hover:text-foreground"
                )}
                title={it.note || it.label}
                >
                {iconSrc ? (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img
                    src={iconSrc}
                    alt=""
                    width={16}
                    height={16}
                    className="h-5 w-5 shrink-0 rounded border border-border/60 object-cover opacity-80"
                    onError={(e) => {
                        (e.currentTarget as HTMLImageElement).style.display = "none";
                    }}
                    />
                ) : null}

                <span className="min-w-0 flex-1 truncate">{it.label}</span>

                {!isInline && external && (
                    <ExternalLink className="h-3 w-3 shrink-0 opacity-50" />
                )}
                {isInline && <ChevronRight className="hidden h-3.5 w-3.5 shrink-0 opacity-0 transition group-hover:opacity-50 lg:block" />}
                </button>
            );
        })}
        </div></aside>

        <section className="min-w-0 overflow-hidden rounded-xl border border-border/70 bg-card/20 shadow-sm">
            <Panel item={activeItem} />
        </section>
        </div>
    );
}