// === DETAIL PANEL ===

async function showDetail(mrf) {
    const tag = state.tags.find(t => t.mrf === mrf);
    if (!tag) return;

    state.selectedTag = tag;
    document.getElementById("right-panel").classList.add("open");

    const hdr = document.getElementById("detail-header");
    const img = getFullImg(tag);
    const ref = (tag.ref || "").toUpperCase();

    // Set placeholder
    document.getElementById("detail-placeholder").textContent = ref.slice(0, 2);

    // Remove existing image
    hdr.querySelector("img")?.remove();

    // Add image if exists
    if (img) {
        const imgEl = document.createElement("img");
        imgEl.className = "detail-img";
        imgEl.src = img;
        imgEl.alt = ref;
        hdr.insertBefore(imgEl, hdr.firstChild);
    }

    // Bind close
    document.getElementById("detail-close").onclick = closeDetail;

    // Fill basic info
    document.getElementById("detail-ref").textContent = ref;
    document.getElementById("detail-mrf").textContent = tag.mrf || "";
    document.getElementById("detail-mrf").onclick = () => copyMrf(tag.mrf);
    document.getElementById("detail-name").textContent = getName(tag);
    document.getElementById("detail-desc").textContent = tag.txt || tag.alias || "";

    // Fetch and render children
    const children = await fetchChildren(mrf);
    const chSec = document.getElementById("children-section");
    const chList = document.getElementById("children-list");

    if (children.length) {
        chSec.style.display = "block";
        chList.innerHTML = children.map(c =>
            `<span class="tag-chip" data-mrf="${c.mrf}">${c.ref || c.mrf.slice(0,8)}</span>`
        ).join("");
        chList.querySelectorAll(".tag-chip").forEach(ch =>
            ch.onclick = () => showDetail(ch.dataset.mrf)
        );
    } else {
        chSec.style.display = "none";
    }

    // Fetch and render related
    const related = await fetchRelated(mrf);
    const relSec = document.getElementById("related-section");
    const relList = document.getElementById("related-list");

    if (related.length) {
        relSec.style.display = "block";
        relList.innerHTML = related.map(r =>
            `<span class="tag-chip" data-mrf="${r.mrf}" title="${r.edge_type}">${r.ref || r.mrf.slice(0,8)}</span>`
        ).join("");
        relList.querySelectorAll(".tag-chip").forEach(ch =>
            ch.onclick = () => showDetail(ch.dataset.mrf)
        );
    } else {
        relSec.style.display = "none";
    }
}