document.addEventListener('DOMContentLoaded', () => {
    const form            = document.getElementById('report-form');
    const output          = document.getElementById('output');
    const fightSelectRow  = document.getElementById('fight-select-row');
    const fightSelect     = document.getElementById('fight-select');

    let allFights = [];

    function formatDuration(ms) {
        const min = Math.floor(ms / 60000);
        const sec = String(Math.floor((ms % 60000) / 1000)).padStart(2, '0');
        return `${min}:${sec}`;
    }

    function formatBossHp(fight) {
        if (fight.kill) return 'Kill';
        const pct = fight.fightPercentage;
        if (pct == null) return '?';
        // fightPercentage is 0–10000 (e.g. 5000 = 50.00%)
        return (pct / 100).toFixed(2) + '%';
    }

    function displayFight(fight) {
        output.textContent = JSON.stringify(fight, null, 2);
    }

    fightSelect.addEventListener('change', () => {
        const id = parseInt(fightSelect.value, 10);
        const fight = allFights.find(f => f.id === id);
        if (fight) displayFight(fight);
    });

    form.addEventListener('submit', async (e) => {
        e.preventDefault();
        output.textContent = '// fetching...';
        fightSelectRow.style.display = 'none';
        fightSelect.innerHTML = '<option value="">— Fight auswählen —</option>';
        allFights = [];

        const params = new URLSearchParams({
            report_code: form.elements['report_code'].value.trim(),
        });

        let response, json;
        try {
            response = await fetch('api/fight.php', {
                method:  'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body:    params.toString(),
            });
            json = await response.json();
        } catch (err) {
            output.textContent = '// network error: ' + err.message;
            return;
        }

        if (json.reauth) {
            output.textContent = '// session expired — redirecting...';
            setTimeout(() => { window.location.href = 'auth/start.php'; }, 1500);
            return;
        }

        if (json.errors) {
            output.textContent = '// GraphQL error:\n' + JSON.stringify(json.errors, null, 2);
            return;
        }

        const report = json?.data?.reportData?.report;
        if (!report) {
            output.textContent = JSON.stringify(json, null, 2);
            return;
        }

        allFights = report.fights ?? [];

        if (allFights.length === 0) {
            output.textContent = '// Keine Fights in diesem Report gefunden.';
            return;
        }

        // populate dropdown
        allFights.forEach(fight => {
            const duration = formatDuration(fight.endTime - fight.startTime);
            const hp       = formatBossHp(fight);
            const label    = `${fight.name} — ${duration} — ${hp}`;
            const opt      = document.createElement('option');
            opt.value      = fight.id;
            opt.textContent = label;
            fightSelect.appendChild(opt);
        });

        fightSelectRow.style.display = 'flex';
        output.textContent = '// Fight auswählen ↑';
    });
});