{{ extends "global/Page.html" }}
{{ block title }}Lightweight Inventory Monitor{{ endblock }}

{{ block content }}

<style>
    .monitor-shell {
        max-width: 1100px;
        margin: 24px auto;
        font-family: Arial, sans-serif;
    }
    .monitor-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 10px;
        margin: 14px 0;
    }
    .monitor-card {
        border: 1px solid #d0d7de;
        border-radius: 6px;
        padding: 10px 12px;
        background: #f8fafc;
    }
    .monitor-card strong {
        display: block;
        color: #52606d;
        font-size: 12px;
        margin-bottom: 4px;
    }
    .monitor-card span {
        font-size: 20px;
        font-weight: 600;
    }
    .monitor-banner {
        border-radius: 6px;
        padding: 10px 12px;
        margin: 12px 0;
        background: #fff8e1;
        border: 1px solid #f6c343;
    }
    .monitor-error {
        background: #fff5f5;
        border-color: #d73a49;
        color: #8a1020;
    }
    .monitor-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
    }
    .monitor-table th,
    .monitor-table td {
        border: 1px solid #d0d7de;
        padding: 6px 8px;
        text-align: left;
    }
    .monitor-table th {
        background: #eef4ff;
    }
</style>

<div class="monitor-shell">
    <h2>Lightweight Inventory Monitor</h2>
    <p>This page reads cached inventory status only. It does not reconcile inventory or assign participants.</p>

    <div id="monitor-warning" class="monitor-banner" style="display:none;"></div>
    <div id="monitor-error" class="monitor-banner monitor-error" style="display:none;"></div>

    <h3>Inventory</h3>
    <div class="monitor-grid">
        <div class="monitor-card"><strong>Active phase</strong><span data-field="active_phase"></span></div>
        <div class="monitor-card"><strong>Standard replay-ready</strong><span data-field="total_standard_replay_ready"></span></div>
        <div class="monitor-card"><strong>Blind bundles available</strong><span data-field="blind_bundles_available_now"></span></div>
        <div class="monitor-card"><strong>Pending Blind participants</strong><span data-field="pending_blind_participants"></span></div>
        <div class="monitor-card"><strong>Unused slots</strong><span data-field="total_slots_unused"></span></div>
        <div class="monitor-card"><strong>Assigned uses</strong><span data-field="assigned_replay_uses"></span></div>
        <div class="monitor-card"><strong>Completed uses</strong><span data-field="completed_replay_uses"></span></div>
    </div>

    <h3>Assignment</h3>
    <div class="monitor-grid">
        <div class="monitor-card"><strong>Standard assigned</strong><span data-field="standard_assigned_count"></span></div>
        <div class="monitor-card"><strong>Blind assigned</strong><span data-field="blind_assigned_count"></span></div>
        <div class="monitor-card"><strong>Forced condition</strong><span data-field="adaptive_forced_condition"></span></div>
        <div class="monitor-card"><strong>Manual override active</strong><span data-field="manual_assignment_override_active"></span></div>
    </div>

    <h3>Safety</h3>
    <div class="monitor-grid">
        <div class="monitor-card"><strong>Monitor mode</strong><span data-field="monitor_mode"></span></div>
        <div class="monitor-card"><strong>Last cached update</strong><span data-field="last_updated"></span></div>
        <div class="monitor-card"><strong>Last browser refresh</strong><span id="last-browser-refresh"></span></div>
    </div>

    <details id="slot-debug" style="display:none;">
        <summary>Debug slot rows</summary>
        <table class="monitor-table">
            <thead>
                <tr>
                    <th>Slot #</th>
                    <th>Status</th>
                    <th>Max uses</th>
                    <th>Use count</th>
                    <th>Completed uses</th>
                    <th>Remaining uses</th>
                    <th>Row warning</th>
                </tr>
            </thead>
            <tbody id="slot-debug-body"></tbody>
        </table>
    </details>
</div>

<script>
    (function () {
        var payload = {{ payload_json }};
        var pollSeconds = {{ poll_seconds }};
        var refreshTimer = null;

        function asText(value) {
            if (value === null || value === undefined || value === '') {
                return '0';
            }
            return String(value);
        }

        function setBanner(id, text) {
            var node = document.getElementById(id);
            if (!node) return;
            if (text) {
                node.textContent = text;
                node.style.display = 'block';
            } else {
                node.textContent = '';
                node.style.display = 'none';
            }
        }

        function render(data) {
            payload = data || {};
            document.querySelectorAll('[data-field]').forEach(function (node) {
                var field = node.getAttribute('data-field');
                node.textContent = asText(payload[field]);
            });

            var warningText = '';
            if (payload.warnings && payload.warnings.length) {
                warningText = payload.warnings.join(' | ');
            } else if (payload.warning) {
                warningText = payload.warning;
            }
            setBanner('monitor-warning', warningText);
            setBanner('monitor-error', payload.error || '');

            var browserRefresh = document.getElementById('last-browser-refresh');
            if (browserRefresh) {
                browserRefresh.textContent = new Date().toLocaleTimeString();
            }

            var debug = document.getElementById('slot-debug');
            var body = document.getElementById('slot-debug-body');
            if (debug && body) {
                body.innerHTML = '';
                if (payload.debug_batch_matching && payload.slot_rows && payload.slot_rows.length) {
                    debug.style.display = 'block';
                    payload.slot_rows.forEach(function (slot) {
                        var tr = document.createElement('tr');
                        ['slot_index', 'status', 'max_uses', 'use_count', 'completed_use_count', 'remaining_uses', 'row_error'].forEach(function (field) {
                            var td = document.createElement('td');
                            td.textContent = asText(slot[field]);
                            tr.appendChild(td);
                        });
                        body.appendChild(tr);
                    });
                } else {
                    debug.style.display = 'none';
                }
            }
        }

        function schedulePoll() {
            window.clearTimeout(refreshTimer);
            refreshTimer = window.setTimeout(function () {
                try {
                    liveSend({type: 'poll_cached_inventory_monitor'});
                } catch (error) {
                    setBanner('monitor-error', 'temporary monitor refresh failure');
                    schedulePoll();
                }
            }, Math.max(5, pollSeconds) * 1000);
        }

        window.liveRecv = function (data) {
            if (!data || typeof data !== 'object') {
                setBanner('monitor-error', 'temporary monitor refresh failure');
            } else {
                render(data);
            }
            schedulePoll();
        };

        render(payload);
        schedulePoll();
    })();
</script>

{{ endblock }}