{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Bulk Operations Center{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/hil-pages/bulk_operations.css">
{% endblock %}
{% block content %}
<main class="shell">
    <div class="topbar">
        <div>
            <h1>Bulk Operations Center</h1>
            <p class="muted">Mass product import, pricing, inventory reconciliation, branch-safe updates, cashier-ready activation, offline staging, rollback, and audit traceability.</p>
        </div>
        <div class="actions">
            <a class="btn secondary" href="/sales">Open POS</a>
            <a class="btn secondary" href="/inventory">Inventory</a>
            <a class="btn secondary" href="/barcode">Barcode Hub</a>
            <a class="btn secondary" href="/pos-acceleration">POS Acceleration</a>
        </div>
    </div>

    <section class="panel">
        <h2>Operational Readiness</h2>
        {% set continuity = snapshot.continuity or {} %}
        {% set governance = snapshot.governance or {} %}
        {% set pos_priority = continuity.pos_priority or 'pos first' %}
        <div class="kpis">
            <div class="kpi"><span>Cashier-Ready Index</span><strong>{{ snapshot.indexed_cashier_ready_products }}</strong></div>
            <div class="kpi"><span>Offline Staged</span><strong>{{ snapshot.offline_staged_operations }}</strong></div>
            <div class="kpi"><span>Approval Gates</span><strong>{{ snapshot.pending_approvals }}</strong></div>
            <div class="kpi"><span>Open Conflicts</span><strong>{{ snapshot.open_conflicts }}</strong></div>
            <div class="kpi"><span>Rollback</span><strong>{{ 'Ready' if governance.rollback_supported else 'Limited' }}</strong></div>
            <div class="kpi"><span>Queue Safety</span><strong>{{ pos_priority.split(',')[0]|title }}</strong></div>
        </div>
    </section>

    <section class="grid hil-inline-d6f2af6e0a">
        <article class="panel">
            <h2>Import Products</h2>
            <form id="bulk-import-form">
                <input name="file" type="file" accept=".csv,.json,.xlsx">
                <div class="hil-inline-83ca52ef1c"></div>
                <select name="mode">
                    <option value="upsert">Update/restock existing, create new</option>
                    <option value="replace">Replace matching stock</option>
                    <option value="insert_only">Create only, skip duplicates</option>
                </select>
                <div class="actions hil-inline-d2c171b18b">
                    <button type="button" onclick="previewImport()">Preview</button>
                    <button type="button" onclick="applyImport()">Apply</button>
                </div>
            </form>
            <p class="muted hil-inline-d2c171b18b">CSV, JSON, and XLSX imports become searchable, sellable, barcode-accessible, inventory-valid, sync-safe, and cashier-ready through the activation pipeline.</p>
        </article>

        <article class="panel">
            <h2>Continuity Rules</h2>
            {% for key, value in continuity.items() %}
                <div class="result"><strong>{{ key.replace('_', ' ')|title }}</strong><br><span class="muted">{{ value }}</span></div>
            {% endfor %}
        </article>

        <article class="panel">
            <h2>Governance</h2>
            {% for key, value in governance.items() %}
                <div class="result"><strong>{{ key.replace('_', ' ')|title }}</strong><br><span class="muted">{{ value }}</span></div>
            {% endfor %}
        </article>
    </section>

    <section class="panel hil-inline-d6f2af6e0a">
        <h2>Recent Operations</h2>
        <table>
            <thead><tr><th>ID</th><th>Type</th><th>Status</th><th>Rows</th><th>Applied</th><th>Created</th><th>Finished</th></tr></thead>
            <tbody>
            {% for op in snapshot.recent_operations %}
                <tr>
                    <td>{{ op.id }}</td>
                    <td>{{ op.operation_type }}</td>
                    <td class="{{ 'ok' if op.status == 'completed' else 'warning' }}">{{ op.status }}</td>
                    <td>{{ op.processed_rows }} / {{ op.total_rows }}</td>
                    <td>{{ op.updated_count }}</td>
                    <td>{{ op.inserted_count }}</td>
                    <td>{{ op.finished_at or 'running' }}</td>
                </tr>
            {% else %}
                <tr><td colspan="7">No bulk operations yet.</td></tr>
            {% endfor %}
            </tbody>
        </table>
            <div class="actions hil-inline-56f4356299">
            <button type="button" onclick="loadCommandCenter()">Command Center</button>
            <button type="button" onclick="runStress()">Run Stress Test</button>
            <button type="button" onclick="validateVisibility()">Validate Visibility</button>
            <button type="button" onclick="rebuildIndexes()">Rebuild Indexes</button>
            <button type="button" onclick="reconcileInventory()">Reconcile Inventory</button>
            <button type="button" onclick="selfHeal()">Self-Heal</button>
            <button type="button" onclick="regenerateReports()">Regenerate Reports</button>
        </div>
    </section>

    <section class="panel hil-inline-d6f2af6e0a">
        <h2>Operation Output</h2>
        <pre id="bulk-output">Ready.</pre>
    </section>
</main>
<script>
let bulkDbPromise;
function bulkDb() {
    if (!bulkDbPromise) {
        bulkDbPromise = new Promise((resolve, reject) => {
            const request = indexedDB.open('gvelo_bulk_operations', 1);
            request.onupgradeneeded = () => request.result.createObjectStore('staged_operations', { keyPath: 'client_operation_uid' });
            request.onsuccess = () => resolve(request.result);
            request.onerror = () => reject(request.error);
        });
    }
    return bulkDbPromise;
}
async function stageLocal(operationType, payload) {
    const db = await bulkDb();
    const client_operation_uid = payload.client_operation_uid || ('offline-' + Date.now() + '-' + Math.random().toString(16).slice(2));
    const record = { client_operation_uid, operation_type: operationType, payload, status: 'staged', created_at: new Date().toISOString() };
    return new Promise((resolve, reject) => {
        const tx = db.transaction('staged_operations', 'readwrite');
        tx.objectStore('staged_operations').put(record);
        tx.oncomplete = () => resolve(record);
        tx.onerror = () => reject(tx.error);
    });
}
async function postForm(url, form) {
    const response = await fetch(url, { method: 'POST', body: new FormData(form) });
    return response.json();
}
async function postJson(url, payload) {
    try {
        const response = await fetch(url, { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify(payload || {}) });
        return response.json();
    } catch (error) {
        const staged = await stageLocal(url.split('/').pop() || 'bulk_operation', payload || {});
        return { ok: true, offline_staged: true, staged };
    }
}
function show(payload) {
    document.getElementById('bulk-output').textContent = JSON.stringify(payload, null, 2);
}
async function previewImport() {
    const form = document.getElementById('bulk-import-form');
    show(await postForm('/api/bulk-operations/import/preview', form));
}
async function applyImport() {
    const form = document.getElementById('bulk-import-form');
    show(await postForm('/api/bulk-operations/import', form));
}
async function runStress() {
    show(await postJson('/api/bulk-operations/stress-test', { rows: 250 }));
}
async function loadCommandCenter() {
    const response = await fetch('/api/bulk-operations/command-center');
    show(await response.json());
}
async function validateVisibility() {
    show(await postJson('/api/bulk-operations/visibility/validate', {}));
}
async function rebuildIndexes() {
    show(await postJson('/api/bulk-operations/indexes/rebuild', {}));
}
async function reconcileInventory() {
    show(await postJson('/api/bulk-operations/inventory/reconcile', { repair: true }));
}
async function selfHeal() {
    show(await postJson('/api/bulk-operations/self-heal', {}));
}
async function regenerateReports() {
    show(await postJson('/api/bulk-operations/reports/regenerate', {}));
}
</script>
{% endblock %}