APP.ui.cards = {};

APP.ui.cards.renderFrameTrackList = function () {
    const { state } = APP.core;
    const { $ } = APP.core.utils;
    const frameTrackList = $("#frameTrackList");
    const trackList = $("#trackList");       // Tab 2 (Engage) uses the same card logic
    const trackCount = $("#trackCount");

    if (!frameTrackList && !trackList) return;
    if (frameTrackList) frameTrackList.innerHTML = "";
    if (trackList) trackList.innerHTML = "";

    // Filter: only show mission-relevant detections (or all in LEGACY mode)
    const dets = (state.detections || []).filter(d => {
        if (d.mission_relevant === null || d.mission_relevant === undefined) return true;
        return d.mission_relevant === true;
    });

    if (trackCount) trackCount.textContent = dets.length;

    if (dets.length === 0) {
        const emptyMsg = '<div style="font-style:italic; color:var(--faint); text-align:center; margin-top:20px; font-size:12px;">No objects tracked.</div>';
        if (frameTrackList) frameTrackList.innerHTML = emptyMsg;
        if (trackList) trackList.innerHTML = emptyMsg;
        return;
    }

    // Sort: ASSESSED first (by threat score), then UNASSESSED, then STALE
    const S = APP.core.gptMapping.STATUS;
    const statusOrder = { [S.ASSESSED]: 0, [S.UNASSESSED]: 1, [S.STALE]: 2 };
    const sorted = [...dets].sort((a, b) => {
        const statusA = statusOrder[a.assessment_status] ?? 1;
        const statusB = statusOrder[b.assessment_status] ?? 1;
        if (statusA !== statusB) return statusA - statusB;
        const scoreA = a.threat_level_score || 0;
        const scoreB = b.threat_level_score || 0;
        if (scoreB !== scoreA) return scoreB - scoreA;
        return (b.score || 0) - (a.score || 0);
    });

    sorted.forEach((det, i) => {
        const id = det.id || `T${String(i + 1).padStart(2, '0')}`;
        const isActive = state.selectedId === id;

        let rangeStr = "---";
        let bearingStr = "---";

        if (det.depth_valid && det.depth_est_m != null) {
            rangeStr = `${Math.round(det.depth_est_m)}m`;
        } else if (det.gpt_distance_m) {
            rangeStr = `~${det.gpt_distance_m}m`;
        } else if (det.baseRange_m) {
            rangeStr = `${Math.round(det.baseRange_m)}m`;
        }

        if (det.gpt_direction) {
            bearingStr = det.gpt_direction;
        }

        const card = document.createElement("div");
        card.className = "track-card" + (isActive ? " active" : "");
        card.id = `card-${id}`;

        card.onclick = () => {
            const ev = new CustomEvent("track-selected", { detail: { id } });
            document.dispatchEvent(ev);
        };

        // Assessment status badge
        let statusBadge = "";
        const assessStatus = det.assessment_status || S.UNASSESSED;
        if (assessStatus === S.UNASSESSED) {
            statusBadge = '<span class="badgemini" style="background:#6c757d; color:white">UNASSESSED</span>';
        } else if (assessStatus === S.STALE) {
            statusBadge = '<span class="badgemini" style="background:#ffc107; color:#333">STALE</span>';
        } else if (det.threat_level_score > 0) {
            statusBadge = `<span class="badgemini" style="background:${det.threat_level_score >= 8 ? '#ff4d4d' : '#ff9f43'}; color:white">T-${det.threat_level_score}</span>`;
        } else if (assessStatus === S.ASSESSED) {
            statusBadge = '<span class="badgemini" style="background:#17a2b8; color:white">ASSESSED</span>';
        }

        // GPT description (collapsed summary)
        const desc = det.gpt_description
            ? `<div class="track-card-body"><span class="gpt-text">${det.gpt_description}</span></div>`
            : "";

        // Inline features (only shown when active/expanded)
        let featuresHtml = "";
        if (isActive && det.features && Object.keys(det.features).length > 0) {
            const entries = Object.entries(det.features).slice(0, 12);
            const rows = entries.map(([k, v]) =>
                `<div class="feat-row"><span class="feat-key">${k}</span><span class="feat-val">${String(v)}</span></div>`
            ).join("");
            featuresHtml = `<div class="track-card-features">${rows}</div>`;
        }

        card.innerHTML = `
            <div class="track-card-header">
                <span>${id} · ${det.label}</span>
                <div style="display:flex; gap:4px; align-items:center">
                    ${statusBadge}
                    ${det.mission_relevant === true
                        ? '<span class="badgemini" style="background:#28a745; color:white">RELEVANT</span>'
                        : det.mission_relevant === false
                            ? '<span class="badgemini" style="background:#6c757d; color:white">N/R</span>'
                            : `<span class="badgemini" style="background:rgba(255,255,255,.08); color:rgba(255,255,255,.7)">${(det.score * 100).toFixed(0)}%</span>`
                    }
                </div>
            </div>
            <div class="track-card-meta">
               RNG ${rangeStr} · BRG ${bearingStr}
            </div>
            ${desc}
            ${featuresHtml}
        `;
        if (frameTrackList) frameTrackList.appendChild(card);
        if (trackList) trackList.appendChild(card.cloneNode(true));
    });

    // Wire up click handlers on cloned Tab 2 cards
    if (trackList) {
        trackList.querySelectorAll(".track-card").forEach(card => {
            const id = card.id.replace("card-", "");
            card.onclick = () => {
                document.dispatchEvent(new CustomEvent("track-selected", { detail: { id } }));
            };
        });
    }
};