"use client";

import { useEffect, useRef, useState } from "react";

/**
 * SVGNest panel – same-origin iframe wrapper (clean, frameless).
 * Hides the legacy page’s heading/tagline and the "Back to Main" link.
 */
export default function SVGNestPanel() {
    const iframeRef = useRef<HTMLIFrameElement | null>(null);
    const [ready, setReady] = useState(false);
    const [err, setErr] = useState<string | null>(null);

    useEffect(() => {
        const el = iframeRef.current;
        if (!el) return;

        const onLoad = () => {
            setReady(true);

            // Tidy up the embedded vendor page (no edits to files on disk)
            try {
                const doc = el.contentDocument;
                if (!doc) return;

                // 1) Hide the first H1 (their big title)
                const h1 = doc.querySelector("h1");
                if (h1) (h1 as HTMLElement).style.display = "none";

                // 2) Hide the tagline "automatically nests parts and exports svg"
                const all = Array.from(doc.querySelectorAll<HTMLElement>("body *"));
                for (const n of all) {
                    const t = (n.textContent || "").trim().toLowerCase();
                    if (t.includes("automatically nests parts") && t.includes("exports svg")) {
                        n.style.display = "none";
                    }
                }

                // 3) Hide "Back to Main" link(s)
                const anchors = Array.from(doc.querySelectorAll<HTMLAnchorElement>("a"));
                for (const a of anchors) {
                    const text = (a.textContent || "").trim().toLowerCase();
                    const href = a.getAttribute("href") || "";
                    const isBackText = text === "back to main" || text === "← back to main";
                    const isRootHref =
                    href === "/" ||
                    /^https?:\/\/[^/]+\/?$/.test(href); // absolute site root
                    if (isBackText || isRootHref) {
                        (a as HTMLElement).style.display = "none";
                    }
                }

                // 4) Tighten top spacing a touch
                (doc.body as HTMLElement).style.marginTop = "4px";
            } catch {
                // same-origin, so this *should* succeed; ignore if not
            }
        };

        const onError = () => setErr("Failed to load /svgnest/index.html");

        el.addEventListener("load", onLoad);
        el.addEventListener("error", onError);
        return () => {
            el.removeEventListener("load", onLoad);
            el.removeEventListener("error", onError);
        };
    }, []);

    return (
        <div className="w-full">
        {!ready && !err && (
            <div className="mb-2 text-sm text-zinc-400">Loading SVGnest…</div>
        )}
        {err && (
            <div className="mb-2 rounded border border-rose-600/40 bg-rose-600/10 p-3 text-sm">
            Couldn’t load SVGnest: {err}
            </div>
        )}

        {/* Frameless iframe (no border, no wrapper frame) */}
        <iframe
        ref={iframeRef}
        src="/svgnest/index.html"
        title="SVGNest"
        className="w-full"
        style={{ height: "72vh", background: "transparent", border: "none" }}
        />
        </div>
    );
}