{% extends "base.html" %}

{% block title %}Kontrol Pemuatan Karung{% endblock %}

{% block extra_head %}
<style>
    .operator-container {
        max-width: 600px;
        margin: 40px auto;
        padding: 0 16px;
    }

    .operator-card {
        background-color: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        padding: 32px 24px;
        box-shadow: var(--shadow-md);
        text-align: center;
    }

    .operator-title {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 8px;
    }

    .operator-subtitle {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 24px;
    }

    .status-badge-box {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 20px;
        border-radius: 30px;
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 28px;
    }

    .status-idle {
        background-color: rgba(142, 142, 147, 0.15);
        color: var(--text-secondary);
    }

    .status-active {
        background-color: rgba(52, 199, 89, 0.15);
        color: var(--accent-green);
    }

    .batch-info-box {
        background-color: var(--bg-base);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        padding: 16px;
        margin-bottom: 32px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        text-align: left;
    }

    .info-item .info-label {
        font-size: 12px;
        color: var(--text-secondary);
        font-weight: 500;
        margin-bottom: 4px;
    }

    .info-item .info-val {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-primary);
    }

    .btn-action-large {
        width: 100%;
        padding: 20px;
        font-size: 18px;
        font-weight: 700;
        border-radius: var(--radius-md);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        transition: transform 0.1s ease, filter 0.2s ease;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    }

    .btn-action-large:active {
        transform: scale(0.98);
    }

    .btn-start {
        background-color: var(--accent-green);
        color: #FFFFFF;
    }

    .btn-start:hover {
        filter: brightness(1.08);
    }

    .btn-stop {
        background-color: var(--accent-red);
        color: #FFFFFF;
    }

    .btn-stop:hover {
        filter: brightness(1.08);
    }

    .btn-disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    /* Simple Confirmation Modal */
    .modal-overlay {
        position: fixed;
        inset: 0;
        background-color: rgba(0,0,0,0.5);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 999;
        padding: 20px;
    }

    .modal-box {
        background-color: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        padding: 24px;
        max-width: 400px;
        width: 100%;
        text-align: center;
        box-shadow: var(--shadow-md);
    }

    .modal-title {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 12px;
    }

    .modal-desc {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 24px;
    }

    .modal-actions {
        display: flex;
        gap: 12px;
    }

    .modal-actions .btn {
        flex: 1;
        padding: 12px;
        font-size: 14px;
        font-weight: 600;
        border-radius: var(--radius-md);
    }

    /* Non-blocking mode banner (fixed top, status stays visible below) */
    .mode-banner {
        position: sticky;
        top: 0;
        z-index: 500;
        display: none;
        align-items: center;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
        padding: 10px 16px;
        font-size: 14px;
        font-weight: 600;
        background-color: rgba(255, 204, 0, 0.15);
        border-bottom: 1px solid var(--border-color);
        color: var(--text-primary);
    }

    .mode-banner .btn {
        padding: 6px 14px;
        font-size: 13px;
        font-weight: 700;
        border-radius: var(--radius-md);
        border: none;
        cursor: pointer;
    }

    .mode-banner .btn-yes {
        background-color: var(--accent-green);
        color: #fff;
    }

    .mode-banner .btn-no {
        background-color: var(--bg-base);
        color: var(--text-primary);
        border: 1px solid var(--border-color);
    }

    .model-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 16px;
        font-size: 13px;
        color: var(--text-secondary);
    }

    .model-row select {
        padding: 6px 10px;
        border-radius: var(--radius-md);
        border: 1px solid var(--border-color);
        background-color: var(--bg-base);
        color: var(--text-primary);
        font-size: 13px;
    }

    /* DO panel */
    .do-panel {
        display: none;
        text-align: left;
        margin-top: 20px;
        padding-top: 16px;
        border-top: 1px solid var(--border-color);
    }
    .do-panel.visible { display: block; }
    .do-panel h4 {
        font-size: 14px;
        font-weight: 700;
        margin: 0 0 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
    .do-strip {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 6px;
        margin-bottom: 10px;
    }
    .do-thumb {
        flex: 0 0 88px;
        width: 88px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        overflow: hidden;
        background: var(--bg-base);
        cursor: pointer;
    }
    .do-thumb img { width: 100%; height: 64px; object-fit: cover; display: block; }
    .do-thumb .cap {
        font-size: 10px;
        padding: 2px 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .do-card {
        background: var(--bg-base);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        padding: 10px;
        margin-bottom: 8px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        font-size: 12px;
    }
    .do-card label { display: block; font-size: 11px; color: var(--text-secondary); }
    .do-card input {
        width: 100%;
        padding: 6px 8px;
        border-radius: var(--radius-md);
        border: 1px solid var(--border-color);
        background: var(--bg-card);
        color: var(--text-primary);
        font-size: 13px;
        box-sizing: border-box;
    }
    .do-card .full { grid-column: 1 / -1; }
    .do-card .row-actions { display: flex; gap: 8px; grid-column: 1 / -1; }
    .do-chip {
        display: inline-block;
        background: rgba(0,113,227,0.12);
        color: var(--accent-blue);
        border-radius: 99px;
        padding: 2px 8px;
        font-size: 11px;
        font-weight: 600;
        margin: 2px 4px 2px 0;
    }
    .do-warn { color: var(--accent-orange); font-size: 12px; margin: 6px 0; }
    .ocr-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: var(--text-secondary);
        margin-top: 8px;
        justify-content: center;
        flex-wrap: wrap;
    }
    .ocr-row select {
        padding: 6px 10px;
        border-radius: var(--radius-md);
        border: 1px solid var(--border-color);
        background: var(--bg-base);
        color: var(--text-primary);
        font-size: 13px;
    }
    .mode-badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 99px;
        font-size: 12px;
        font-weight: 700;
        margin-top: 8px;
        background: var(--bg-base);
        border: 1px solid var(--border-color);
        color: var(--text-secondary);
    }
    .mode-badge.do_manual { background: rgba(0,113,227,0.12); color: var(--accent-blue); border-color: var(--accent-blue); }
    .mode-badge.auto { background: rgba(255,159,10,0.12); color: var(--accent-orange); }
    .mode-badge.manual { background: rgba(52,199,89,0.12); color: var(--accent-green); }
</style>
{% endblock %}

{% block content %}
<!-- Non-blocking mode info (office owns mode switch) -->
<div id="modeBanner" class="mode-banner">
    <span id="modeBannerText">Mode diatur dari monitoring/kantor</span>
    <button class="btn btn-no" onclick="dismissModeBanner()">Tutup</button>
</div>
<div class="operator-container">
    <div class="operator-card">
        <h1 class="operator-title"><i class="fa-solid fa-boxes-packing"></i> Kontrol Pemuatan Karung</h1>
        <p class="operator-subtitle" id="opSubtitle">Tekan tombol saat proses muat truk dimulai dan selesai</p>

        <!-- Status Indicator -->
        <div id="statusBadge" class="status-badge-box status-idle">
            <i id="statusIcon" class="fa-solid fa-circle-pause"></i>
            <span id="statusText">Status: Standby (Tidak Memuat)</span>
        </div>
        <div><span id="modeBadge" class="mode-badge">Mode: --</span></div>

        <!-- Info Detail -->
        <div class="batch-info-box">
            <div class="info-item">
                <div class="info-label">Batch Berjalan</div>
                <div class="info-val" id="opBatchNum">--</div>
            </div>
            <div class="info-item">
                <div class="info-label">Waktu Mulai</div>
                <div class="info-val" id="opStartTime">--:--:--</div>
            </div>
            <div class="info-item">
                <div class="info-label">Karung Masuk</div>
                <div class="info-val" id="opSackCount">0</div>
            </div>
            <div class="info-item">
                <div class="info-label">Box Masuk</div>
                <div class="info-val" id="opBoxCount">0</div>
            </div>
            <div class="info-item" id="opNetSackItem" style="display:none">
                <div class="info-label">Net Karung / Target</div>
                <div class="info-val" id="opNetSack">--</div>
            </div>
            <div class="info-item" id="opNetBoxItem" style="display:none">
                <div class="info-label">Net Box / Target</div>
                <div class="info-val" id="opNetBox">--</div>
            </div>
            <div class="info-item" id="opPlateItem" style="display:none; grid-column: 1 / -1;">
                <div class="info-label">Plat / No. DO</div>
                <div class="info-val" id="opPlateDos" style="font-size:13px;">--</div>
            </div>
        </div>

        <!-- Action Button -->
        <div id="actionContainer">
            <button id="btnStartBatch" class="btn-action-large btn-start" onclick="confirmStartBatch()">
                <i class="fa-solid fa-play"></i> MULAI BATCH BARU
            </button>
            <button id="btnStopBatch" class="btn-action-large btn-stop" style="display: none;" onclick="confirmStopBatch()">
                <i class="fa-solid fa-square"></i> SELESAI / AKHIRI BATCH
            </button>
        </div>

        <!-- DO panel (only do_manual) -->
        <div id="doPanel" class="do-panel">
            <h4>
                <span><i class="fa-solid fa-file-lines"></i> Foto DO (Smartphone)</span>
                <span id="doEngineBadge" style="font-size:11px;font-weight:600;color:var(--text-secondary);"></span>
            </h4>
            <input type="file" id="doPhotoInput" accept="image/*" capture="environment" multiple
                   style="display:none" onchange="uploadDoPhotos(this.files)">
            <button class="btn btn-primary btn-sm" style="width:100%;margin-bottom:8px;"
                    onclick="document.getElementById('doPhotoInput').click()">
                <i class="fa-solid fa-camera"></i> Ambil / Pilih Foto DO
            </button>
            <div id="doStrip" class="do-strip"></div>
            <div id="doCards"></div>
            <div id="doGroupPreview"></div>
            <div id="doWarn" class="do-warn" style="display:none;"></div>
            <div class="ocr-row">
                <span>OCR:</span>
                <select id="ocrEngineSelect" onchange="setOcrEngine(this.value)">
                    <option value="tesseract">Tesseract</option>
                    <option value="paddle">PaddleOCR</option>
                    <option value="none">Off (manual)</option>
                </select>
                <span id="ocrEngineHint"></span>
            </div>
            <div id="doRequirePlateRow" class="ocr-row" style="display:none;">
                <label><input type="checkbox" id="requirePlateChk" onchange="setRequirePlate(this.checked)"> Wajib plat nomor</label>
            </div>
        </div>

        <!-- Model mode (read-only badge) -->
        <div class="model-row">
            <span>Model:</span>
            <strong id="opModelMode">--</strong>
        </div>
        <p class="operator-subtitle" style="margin-top:6px;font-size:12px">
            Mode batch & model diatur dari monitoring/kantor.
        </p>
    </div>
</div>

<!-- Modal Konfirmasi Start -->
<div id="modalStart" class="modal-overlay">
    <div class="modal-box">
        <h3 class="modal-title"><i class="fa-solid fa-play" style="color: var(--accent-green);"></i> Mulai Batch Baru?</h3>
        <p class="modal-desc" id="startModalDesc">Pastikan truk sudah siap di posisi pemuatan karung.</p>
        <div id="startGateList" class="modal-desc" style="display:none;color:var(--accent-red);"></div>
        <div class="modal-actions">
            <button class="btn btn-secondary" onclick="closeModal('modalStart')">Batal</button>
            <button class="btn btn-primary" style="background-color: var(--accent-green);" onclick="executeStartBatch()">Ya, Mulai</button>
        </div>
    </div>
</div>

<!-- Modal Konfirmasi Stop -->
<div id="modalStop" class="modal-overlay">
    <div class="modal-box">
        <h3 class="modal-title"><i class="fa-solid fa-square" style="color: var(--accent-red);"></i> Selesai Batch?</h3>
        <p class="modal-desc" id="stopModalDesc">Pemuatan untuk batch ini akan ditutup dan data akan disimpan.</p>
        <div id="zoneBusyWarn" class="modal-desc" style="display:none;color:var(--accent-orange);">
            Masih ada aktivitas di zona — akhir paksa?
        </div>
        <div class="modal-actions">
            <button class="btn btn-secondary" onclick="closeModal('modalStop')">Batal</button>
            <button class="btn btn-primary" style="background-color: var(--accent-red);" onclick="executeStopBatch(false)">Ya, Selesai</button>
            <button id="btnForceStop" class="btn btn-primary" style="background-color: var(--accent-red); display:none;"
                    onclick="executeStopBatch(true)">Akhir Paksa</button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    let isBatchActive = false;
    let currentMode = 'auto';
    let stagedDos = [];
    let settings = { require_plate: false, require_do: true, ocr_engine: 'tesseract', editable: false };

    function closeModal(id) {
        document.getElementById(id).style.display = 'none';
    }

    async function loadModeBanner() {
        try {
            const res = await fetch('/api/batch/mode');
            const data = await res.json();
            updateModeUI(data.mode || 'auto');
            if (data.mode === 'auto') {
                document.getElementById('modeBannerText').textContent =
                    'Mode OTOMATIS aktif. Mode diatur dari monitoring/kantor.';
                if (!sessionStorage.getItem('mode_banner_dismissed')) {
                    document.getElementById('modeBanner').style.display = 'flex';
                }
            } else {
                document.getElementById('modeBanner').style.display = 'none';
            }
        } catch (e) {
            console.error('Mode load error:', e);
        }
    }

    function dismissModeBanner() {
        sessionStorage.setItem('mode_banner_dismissed', '1');
        document.getElementById('modeBanner').style.display = 'none';
    }

    function updateModeUI(mode) {
        currentMode = mode;
        const badge = document.getElementById('modeBadge');
        const panel = document.getElementById('doPanel');
        const sub = document.getElementById('opSubtitle');
        if (badge) {
            badge.textContent = 'Mode: ' + mode;
            badge.className = 'mode-badge ' + mode;
        }
        if (panel) panel.classList.toggle('visible', mode === 'do_manual');
        if (mode === 'do_manual') {
            if (sub) sub.textContent = 'Foto DO → review → mulai batch';
            loadStagedDos();
            loadDoSettings();
        } else if (mode === 'manual') {
            if (sub) sub.textContent = 'Tekan tombol saat proses muat truk dimulai dan selesai';
        } else {
            if (sub) sub.textContent = 'Mode otomatis — batch dikontrol AI truk';
        }
    }

    async function loadDoSettings() {
        try {
            const res = await fetch('/api/do/settings');
            const data = await res.json();
            if (!data.success) return;
            settings = data;
            const sel = document.getElementById('ocrEngineSelect');
            if (sel && data.ocr_engine) sel.value = data.ocr_engine;
            const hint = document.getElementById('ocrEngineHint');
            if (hint) hint.textContent = 'engine: ' + (data.ocr_engine || 'tesseract');
            const badge = document.getElementById('doEngineBadge');
            if (badge) badge.textContent = (data.ocr_engine || 'tesseract');
            const chk = document.getElementById('requirePlateChk');
            const row = document.getElementById('doRequirePlateRow');
            if (chk) chk.checked = !!data.require_plate;
            if (row) row.style.display = data.editable ? 'flex' : 'none';
        } catch (e) { console.error(e); }
    }

    async function setOcrEngine(eng) {
        try {
            const res = await fetch('/api/do/settings', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ ocr_engine: eng })
            });
            const data = await res.json();
            if (!data.success) {
                alert('Gagal set OCR: ' + (data.error || res.status));
                loadDoSettings();
                return;
            }
            loadDoSettings();
        } catch (e) {
            alert('Gagal terhubung ke server');
            loadDoSettings();
        }
    }

    async function setRequirePlate(val) {
        try {
            const res = await fetch('/api/do/settings', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ require_plate: val })
            });
            const data = await res.json();
            if (!data.success) {
                alert(data.error || 'Gagal (403 = office only)');
                loadDoSettings();
            } else {
                loadDoSettings();
                loadStagedDos();
            }
        } catch (e) { alert('Gagal terhubung ke server'); loadDoSettings(); }
    }

    async function loadModelModes() {
        try {
            const res = await fetch('/api/model-modes');
            const data = await res.json();
            if (!data.success) return;
            const el = document.getElementById('opModelMode');
            if (el) el.textContent = data.active || '--';
        } catch (e) {
            console.error('Model modes load error:', e);
        }
    }

    async function uploadDoPhotos(fileList) {
        if (!fileList || !fileList.length) return;
        const fd = new FormData();
        for (const f of fileList) fd.append('photos', f);
        try {
            const res = await fetch('/api/do/upload', { method: 'POST', body: fd });
            const data = await res.json();
            if (!data.success) {
                alert('Upload gagal: ' + (data.error || res.status));
                return;
            }
            await loadStagedDos();
            await loadDoSettings();
        } catch (e) {
            alert('Upload gagal: tidak terhubung ke server');
        } finally {
            document.getElementById('doPhotoInput').value = '';
        }
    }

    async function loadStagedDos() {
        if (currentMode !== 'do_manual') return;
        try {
            const res = await fetch('/api/do/staged');
            const data = await res.json();
            if (!data.success) return;
            stagedDos = data.items || [];
            renderDoPanel();
        } catch (e) { console.error(e); }
    }

    function renderDoPanel() {
        const strip = document.getElementById('doStrip');
        const cards = document.getElementById('doCards');
        const group = document.getElementById('doGroupPreview');
        const warn = document.getElementById('doWarn');
        if (!strip) return;
        strip.innerHTML = '';
        cards.innerHTML = '';
        stagedDos.forEach(d => {
            const th = document.createElement('div');
            th.className = 'do-thumb';
            th.innerHTML = `<img src="${d.photo_url}" alt=""><div class="cap">${d.no_do || 'DO?'}</div>`;
            strip.appendChild(th);

            const card = document.createElement('div');
            card.className = 'do-card';
            card.innerHTML = `
                <div class="full"><label>No. DO</label>
                    <input data-id="${d.id}" data-k="no_do" value="${escapeHtml(d.no_do || '')}"></div>
                <div><label>Plat</label>
                    <input data-id="${d.id}" data-k="plate" value="${escapeHtml(d.plate || '')}"></div>
                <div><label>Ekspektasi karung</label>
                    <input data-id="${d.id}" data-k="expected_sack" type="number" min="0" value="${d.expected_sack || 0}"></div>
                <div><label>Ekspektasi box</label>
                    <input data-id="${d.id}" data-k="expected_box" type="number" min="0" value="${d.expected_box || 0}"></div>
                <div class="row-actions">
                    <button class="btn btn-primary btn-sm" data-act="save" data-id="${d.id}">Simpan</button>
                    <button class="btn btn-secondary btn-sm" data-act="del" data-id="${d.id}">Hapus</button>
                    <span style="font-size:11px;color:${d.ocr_ok ? 'var(--accent-green)' : 'var(--accent-orange)'};">
                        ${d.ocr_ok ? 'OCR ok' : ('OCR: ' + (d.ocr_error || 'manual'))}
                    </span>
                </div>`;
            cards.appendChild(card);
        });
        cards.querySelectorAll('button[data-act="save"]').forEach(btn => {
            btn.onclick = () => saveDo(parseInt(btn.dataset.id, 10));
        });
        cards.querySelectorAll('button[data-act="del"]').forEach(btn => {
            btn.onclick = () => deleteDo(parseInt(btn.dataset.id, 10));
        });

        // group preview by plate
        const byPlate = {};
        stagedDos.forEach(d => {
            const p = (d.plate || '').trim().toUpperCase() || 'tanpa plat';
            if (!byPlate[p]) byPlate[p] = { n: 0, sack: 0, box: 0, nos: [] };
            byPlate[p].n++;
            byPlate[p].sack += d.expected_sack || 0;
            byPlate[p].box += d.expected_box || 0;
            if (d.no_do) byPlate[p].nos.push(d.no_do);
        });
        group.innerHTML = Object.entries(byPlate).map(([p, g]) =>
            `<span class="do-chip">${escapeHtml(p)} · ${g.n} DO · ${g.sack} karung · ${g.box} box</span>`
        ).join('');

        const plates = Object.keys(byPlate).filter(p => p !== 'tanpa plat');
        let w = '';
        if (plates.length > 1) w = 'Plat nomor berbeda — start diblokir.';
        if (settings.require_do && stagedDos.length === 0 && currentMode === 'do_manual')
            w = 'Butuh minimal satu foto DO sebelum mulai batch.';
        if (warn) {
            warn.textContent = w;
            warn.style.display = w ? 'block' : 'none';
        }
    }

    function escapeHtml(s) {
        return String(s).replace(/[&<>"']/g, c => ({
            '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
        })[c]);
    }

    async function saveDo(id) {
        const fields = {};
        document.querySelectorAll(`.do-card input[data-id="${id}"]`).forEach(inp => {
            fields[inp.dataset.k] = inp.dataset.k.startsWith('expected')
                ? parseInt(inp.value || '0', 10) : inp.value;
        });
        try {
            const res = await fetch('/api/do/' + id, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(fields)
            });
            const data = await res.json();
            if (!data.success) alert(data.error || 'Gagal simpan');
            await loadStagedDos();
        } catch (e) { alert('Gagal simpan'); }
    }

    async function deleteDo(id) {
        if (!confirm('Hapus DO ini?')) return;
        try {
            const res = await fetch('/api/do/' + id, { method: 'DELETE' });
            const data = await res.json();
            if (!data.success) alert(data.error || 'Gagal hapus');
            await loadStagedDos();
        } catch (e) { alert('Gagal hapus'); }
    }

    async function fetchStagedForStart() {
        const res = await fetch('/api/do/staged');
        const data = await res.json();
        return (data && data.items) || [];
    }

    function confirmStartBatch() {
        const gate = document.getElementById('startGateList');
        const desc = document.getElementById('startModalDesc');
        if (currentMode === 'do_manual') {
            fetchStagedForStart().then(items => {
                stagedDos = items;
                const problems = [];
                if (settings.require_do && items.length === 0) problems.push('Butuh foto DO.');
                if (items.some(d => !(d.no_do || '').trim())) problems.push('Ada DO tanpa No. DO.');
                if (settings.require_plate && items.some(d => !(d.plate || '').trim()))
                    problems.push('Ada DO tanpa plat.');
                const plates = new Set(items.map(d => (d.plate || '').trim().toUpperCase()).filter(Boolean));
                if (plates.size > 1) problems.push('Plat DO berbeda.');
                if (problems.length) {
                    gate.style.display = 'block';
                    gate.innerHTML = problems.map(p => '• ' + escapeHtml(p)).join('<br>');
                    document.getElementById('modalStart').style.display = 'flex';
                    return;
                }
                gate.style.display = 'none';
                desc.textContent = items.length + ' DO akan disiapkan untuk batch ini.';
                document.getElementById('modalStart').style.display = 'flex';
                renderDoPanel();
            }).catch(() => {
                document.getElementById('modalStart').style.display = 'flex';
            });
            return;
        }
        gate.style.display = 'none';
        desc.textContent = 'Pastikan truk sudah siap di posisi pemuatan karung.';
        document.getElementById('modalStart').style.display = 'flex';
    }

    async function confirmStopBatch() {
        document.getElementById('zoneBusyWarn').style.display = 'none';
        document.getElementById('btnForceStop').style.display = 'none';
        try {
            const res = await fetch('/api/batch/stop-preview');
            const data = await res.json();
            if (data.success && data.zone_busy) {
                document.getElementById('zoneBusyWarn').style.display = 'block';
                document.getElementById('btnForceStop').style.display = 'flex';
            }
        } catch (e) { /* soft */ }
        document.getElementById('modalStop').style.display = 'flex';
    }

    async function executeStartBatch() {
        closeModal('modalStart');
        const btn = document.getElementById('btnStartBatch');
        btn.classList.add('btn-disabled');
        btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Memulai...';
        try {
            let body = null;
            if (currentMode === 'do_manual') {
                const items = await fetchStagedForStart();
                body = JSON.stringify({ do_ids: items.map(d => d.id) });
            }
            const res = await fetch('/api/batch/start', {
                method: 'POST',
                headers: body ? { 'Content-Type': 'application/json' } : {},
                body: body
            });
            const data = await res.json();
            if (data.success) {
                await pollStatus();
                await loadStagedDos();
            } else {
                alert('Gagal memulai batch: ' + (data.error || 'Terjadi kesalahan'));
            }
        } catch (e) {
            alert('Gagal terhubung ke server');
        } finally {
            btn.classList.remove('btn-disabled');
            btn.innerHTML = '<i class="fa-solid fa-play"></i> MULAI BATCH BARU';
        }
    }

    async function executeStopBatch(force) {
        closeModal('modalStop');
        const btn = document.getElementById('btnStopBatch');
        btn.classList.add('btn-disabled');
        btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Mengakhiri...';
        try {
            const res = await fetch('/api/batch/stop', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ force: !!force })
            });
            const data = await res.json();
            if (data.success) {
                await pollStatus();
                await loadStagedDos();
            } else {
                alert('Gagal mengakhiri batch: ' + (data.error || 'Terjadi kesalahan'));
            }
        } catch (e) {
            alert('Gagal terhubung ke server');
        } finally {
            btn.classList.remove('btn-disabled');
            btn.innerHTML = '<i class="fa-solid fa-square"></i> SELESAI / AKHIRI BATCH';
        }
    }

    async function pollStatus() {
        try {
            const res = await fetch('/api/current-batch');
            const data = await res.json();

            const badge = document.getElementById('statusBadge');
            const icon = document.getElementById('statusIcon');
            const text = document.getElementById('statusText');
            const batchNum = document.getElementById('opBatchNum');
            const startTime = document.getElementById('opStartTime');
            const sackCount = document.getElementById('opSackCount');
            const boxCount = document.getElementById('opBoxCount');
            const modelMode = document.getElementById('opModelMode');
            const btnStart = document.getElementById('btnStartBatch');
            const btnStop = document.getElementById('btnStopBatch');

            if (data.model_mode) modelMode.textContent = data.model_mode;
            if (data.mode) updateModeUI(data.mode);
            sackCount.textContent = data.count || 0;
            boxCount.textContent = data.box_count || 0;

            const netSack = document.getElementById('opNetSack');
            const netBox = document.getElementById('opNetBox');
            const netSackItem = document.getElementById('opNetSackItem');
            const netBoxItem = document.getElementById('opNetBoxItem');
            const plateItem = document.getElementById('opPlateItem');
            const plateDos = document.getElementById('opPlateDos');
            const showNet = currentMode === 'do_manual' && data.success && data.batch_number;
            if (netSackItem) netSackItem.style.display = showNet ? 'block' : 'none';
            if (netBoxItem) netBoxItem.style.display = showNet ? 'block' : 'none';
            if (plateItem) plateItem.style.display = showNet ? 'block' : 'none';
            if (showNet) {
                netSack.textContent = `${data.net_sack ?? data.count} / ${data.expected_sack ?? '-'}`;
                netBox.textContent = `${data.net_box ?? data.box_count} / ${data.expected_box ?? '-'}`;
                plateDos.textContent = (data.plate || 'tanpa plat') +
                    (data.do_numbers && data.do_numbers.length ? ' · ' + data.do_numbers.join(', ') : '');
            }

            if (data.success && data.batch_number) {
                isBatchActive = true;
                badge.className = 'status-badge-box status-active';
                icon.className = 'fa-solid fa-circle-play';
                text.textContent = 'Status: Sedang Memuat (Batch #' + data.batch_number + ')';

                batchNum.textContent = '#' + data.batch_number;
                if (data.start_time) {
                    const st = new Date(data.start_time);
                    startTime.textContent = st.toLocaleTimeString('id-ID', { hour12: false });
                } else {
                    startTime.textContent = '--:--:--';
                }

                btnStart.style.display = 'none';
                btnStop.style.display = 'flex';
            } else {
                isBatchActive = false;
                badge.className = 'status-badge-box status-idle';
                icon.className = 'fa-solid fa-circle-pause';
                text.textContent = 'Status: Standby (Siap Memuat)';

                batchNum.textContent = '--';
                startTime.textContent = '--:--:--';

                btnStart.style.display = 'flex';
                btnStop.style.display = 'none';
            }
        } catch (e) {
            console.error('Poll error:', e);
        }
    }

    setInterval(pollStatus, 2000);
    setInterval(loadModeBanner, 5000);
    setInterval(() => { if (currentMode === 'do_manual') { loadStagedDos(); loadDoSettings(); } }, 4000);
    pollStatus();
    loadModeBanner();
    loadModelModes();
</script>
{% endblock %}