{% extends "base.html" %}
{% block title %}Sync Run - GoMag Import{% endblock %}
{% block nav_sync %}active{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <a href="/" class="text-decoration-none text-muted"><i class="bi bi-arrow-left"></i> Dashboard</a>
        <h4 class="mb-0 mt-1">Sync Run <small class="text-muted" id="runId">{{ run_id }}</small></h4>
    </div>
    <span class="badge bg-secondary fs-6" id="runStatusBadge">-</span>
</div>

<!-- Run summary -->
<div class="row g-3 mb-4">
    <div class="col-md-3">
        <div class="card stat-card">
            <div class="stat-value" id="runTotal">-</div>
            <div class="stat-label">Total Comenzi</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stat-card">
            <div class="stat-value text-success" id="runImported">-</div>
            <div class="stat-label">Imported</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stat-card">
            <div class="stat-value text-warning" id="runSkipped">-</div>
            <div class="stat-label">Skipped</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stat-card">
            <div class="stat-value text-danger" id="runErrors">-</div>
            <div class="stat-label">Errors</div>
        </div>
    </div>
</div>

<div class="mb-3">
    <small class="text-muted" id="runTiming"></small>
</div>

<!-- Orders table -->
<div class="card">
    <div class="card-header">Comenzi</div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Nr Comanda</th>
                        <th>Data</th>
                        <th>Client</th>
                        <th>Articole</th>
                        <th>Status</th>
                        <th>Detalii</th>
                    </tr>
                </thead>
                <tbody id="ordersBody">
                    <tr><td colspan="7" class="text-center text-muted py-4">Se incarca...</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const RUN_ID = '{{ run_id }}';

document.addEventListener('DOMContentLoaded', loadRunDetail);

async function loadRunDetail() {
    try {
        const res = await fetch(`/api/sync/run/${RUN_ID}`);
        const data = await res.json();

        if (data.error) {
            document.getElementById('ordersBody').innerHTML =
                `<tr><td colspan="7" class="text-center text-danger">${data.error}</td></tr>`;
            return;
        }

        const run = data.run;

        // Update summary
        document.getElementById('runTotal').textContent = run.total_orders || 0;
        document.getElementById('runImported').textContent = run.imported || 0;
        document.getElementById('runSkipped').textContent = run.skipped || 0;
        document.getElementById('runErrors').textContent = run.errors || 0;

        const badge = document.getElementById('runStatusBadge');
        badge.textContent = run.status;
        badge.className = 'badge fs-6 ' + (run.status === 'completed' ? 'bg-success' : run.status === 'running' ? 'bg-primary' : 'bg-danger');

        // Timing
        if (run.started_at) {
            let timing = 'Start: ' + new Date(run.started_at).toLocaleString('ro-RO');
            if (run.finished_at) {
                const sec = Math.round((new Date(run.finished_at) - new Date(run.started_at)) / 1000);
                timing += ` | Durata: ${sec < 60 ? sec + 's' : Math.floor(sec/60) + 'm ' + (sec%60) + 's'}`;
            }
            document.getElementById('runTiming').textContent = timing;
        }

        // Orders table
        const orders = data.orders || [];
        if (orders.length === 0) {
            document.getElementById('ordersBody').innerHTML =
                '<tr><td colspan="7" class="text-center text-muted py-4">Nicio comanda</td></tr>';
            return;
        }

        document.getElementById('ordersBody').innerHTML = orders.map((o, i) => {
            const statusClass = o.status === 'IMPORTED' ? 'badge-imported' : o.status === 'SKIPPED' ? 'badge-skipped' : 'badge-error';

            let details = '';
            if (o.status === 'IMPORTED' && o.id_comanda) {
                details = `<small class="text-success">ID: ${o.id_comanda}</small>`;
            } else if (o.status === 'SKIPPED' && o.missing_skus) {
                try {
                    const skus = JSON.parse(o.missing_skus);
                    details = `<small class="text-warning">SKU lipsa: ${skus.map(s => '<code>' + esc(s) + '</code>').join(', ')}</small>`;
                } catch(e) {
                    details = `<small class="text-warning">${esc(o.missing_skus)}</small>`;
                }
            } else if (o.status === 'ERROR' && o.error_message) {
                details = `<small class="text-danger">${esc(o.error_message).substring(0, 100)}</small>`;
            }

            return `<tr>
                <td>${i + 1}</td>
                <td><strong>${esc(o.order_number)}</strong></td>
                <td><small>${o.order_date ? o.order_date.substring(0, 10) : '-'}</small></td>
                <td>${esc(o.customer_name)}</td>
                <td>${o.items_count || '-'}</td>
                <td><span class="badge ${statusClass}">${o.status}</span></td>
                <td>${details}</td>
            </tr>`;
        }).join('');

    } catch (err) {
        document.getElementById('ordersBody').innerHTML =
            `<tr><td colspan="7" class="text-center text-danger">Eroare: ${err.message}</td></tr>`;
    }
}

function esc(s) {
    if (s == null) return '';
    return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}
</script>
{% endblock %}