// Serialized MES Chassis Traveler Client
let liveTravelers = [];

async function loadTravelers() {
    try {
        const res = await fetch('/api/travelers');
        if (!res.ok) throw new Error("Failed to load travelers");
        liveTravelers = await res.json();
        renderTravelersList();
    } catch (err) {
        console.error("Travelers Loading Error:", err);
    }
}

function renderTravelersList() {
    const container = document.getElementById('travelers-list-container');
    if (!container) return;
    container.innerHTML = '';

    liveTravelers.forEach(t => {
        const div = document.createElement('div');
        div.style.cssText = 'background:#0b0f17; padding:0.75rem; border-radius:6px; font-size:0.75rem; display:flex; justify-content:space-between; align-items:center; margin-bottom:0.5rem;';

        let badge = '<span style="color:var(--accent-amber); font-weight:700;"><i class="fa-solid fa-spinner fa-spin"></i> In Progress (Stage ' + t.current_stage + '/6)</span>';
        if (t.status === 'passed') {
            badge = '<span style="color:var(--accent-emerald); font-weight:700;"><i class="fa-solid fa-certificate"></i> PASSED (Stage 6/6)</span>';
        } else if (t.status === 'quarantine') {
            badge = '<span style="color:var(--accent-rose); font-weight:700;"><i class="fa-solid fa-triangle-exclamation"></i> Quarantined</span>';
        }

        div.innerHTML = `
            <div>
                <div style="font-weight:800; color:var(--accent-cyan); font-size:0.85rem;"><i class="fa-solid fa-barcode"></i> ${t.serial_number}</div>
                <div style="color:var(--text-muted); font-size:0.65rem;">${t.model_variant} • Tech: ${t.technician_name}</div>
                <div style="font-size:0.65rem; color:#94a3b8; margin-top:0.2rem;">${t.notes || ''}</div>
            </div>
            <div style="text-align:right;">
                ${badge}
                <div style="margin-top:0.3rem;">
                    <button class="btn btn-outline" style="padding:0.2rem 0.4rem; font-size:0.65rem;" onclick="advanceTravelerStage('${t.serial_number}', ${t.current_stage + 1})"><i class="fa-solid fa-forward-step"></i> Next Stage</button>
                </div>
            </div>
        `;
        container.appendChild(div);
    });
}

async function advanceTravelerStage(serial, nextStage) {
    if (nextStage > 6) {
        if (!confirm(`Mark chassis [${serial}] as COMPLETE & PASSED?`)) return;
    }
    const status = nextStage >= 6 ? 'passed' : 'in_progress';
    try {
        await fetch(`/api/travelers/${serial}/stage`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ stage: Math.min(nextStage, 6), status })
        });
        await loadTravelers();
    } catch (err) {
        console.error("Error advancing traveler:", err);
    }
}

async function createNewChassisTraveler() {
    const serial = `NAS-6U-2026-${Math.floor(1000 + Math.random() * 9000)}`;
    try {
        await fetch('/api/travelers', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                serial_number: serial,
                model_variant: "6U 8-Bay Tri-Mode Enterprise",
                current_stage: 1,
                status: "in_progress",
                technician_name: "Lead Hardware Tech",
                notes: "New production lot traveler initiated"
            })
        });
        await loadTravelers();
    } catch (err) {
        console.error("Error creating traveler:", err);
    }
}

window.loadTravelers = loadTravelers;
window.advanceTravelerStage = advanceTravelerStage;
window.createNewChassisTraveler = createNewChassisTraveler;