{% extends "base.html" %}
{% block title %}SKU-uri Lipsa - GoMag Import{% endblock %}
{% block nav_missing %}active{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0">SKU-uri Lipsa</h4>
    <div class="d-flex align-items-center gap-2">
        <button class="btn btn-sm btn-outline-secondary d-none d-md-inline-flex" onclick="exportMissingCsv()">
            <i class="bi bi-download"></i> Export CSV
        </button>
        <!-- Mobile ⋯ dropdown -->
        <div class="dropdown d-md-none">
            <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi bi-three-dots-vertical"></i></button>
            <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" href="#" onclick="document.getElementById('rescanBtn').click();return false"><i class="bi bi-arrow-clockwise me-1"></i> Re-scan</a></li>
                <li><a class="dropdown-item" href="#" onclick="exportMissingCsv();return false"><i class="bi bi-download me-1"></i> Export CSV</a></li>
            </ul>
        </div>
    </div>
</div>

<!-- Unified filter bar -->
<div class="filter-bar" id="skusFilterBar">
    <button class="filter-pill active d-none d-md-inline-flex" data-sku-status="unresolved">
        Nerezolvate <span class="filter-count fc-yellow" id="cntUnres">0</span>
    </button>
    <button class="filter-pill d-none d-md-inline-flex" data-sku-status="resolved">
        Rezolvate <span class="filter-count fc-green" id="cntRes">0</span>
    </button>
    <button class="filter-pill d-none d-md-inline-flex" data-sku-status="all">
        Toate <span class="filter-count fc-neutral" id="cntAllSkus">0</span>
    </button>
    <input type="search" id="skuSearch" placeholder="Cauta SKU / produs..." class="search-input">
    <button id="rescanBtn" class="btn btn-sm btn-secondary ms-2 d-none d-md-inline-flex">&#8635; Re-scan</button>
    <span id="rescanProgress" class="align-items-center gap-2 text-primary" style="display:none;">
        <span class="sync-live-dot"></span>
        <span id="rescanProgressText">Scanare...</span>
    </span>
</div>
<div class="d-md-none mb-2" id="skusMobileSeg"></div>
<!-- Result banner -->
<div id="rescanResult" class="result-banner" style="display:none;margin-bottom:0.75rem;"></div>

<div id="skusPagTop" class="pag-strip mb-2"></div>
<div class="card">
    <div class="card-body p-0">
        <div id="missingMobileList" class="mobile-list"></div>
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th>Status</th>
                        <th>SKU</th>
                        <th>Produs</th>
                        <th>Actiune</th>
                    </tr>
                </thead>
                <tbody id="missingBody">
                    <tr><td colspan="4" class="text-center text-muted py-4">Se incarca...</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div id="skusPagBottom" class="pag-strip pag-strip-bottom"></div>

{% endblock %}

{% block scripts %}
<script>
let currentPage = 1;
let skuStatusFilter = 'unresolved';
let missingPerPage = 20;

function missingChangePerPage(val) { missingPerPage = parseInt(val) || 20; currentPage = 1; loadMissingSkus(); }

// ── Filter pills ──────────────────────────────────
document.querySelectorAll('.filter-pill[data-sku-status]').forEach(btn => {
    btn.addEventListener('click', function() {
        document.querySelectorAll('.filter-pill[data-sku-status]').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        skuStatusFilter = this.dataset.skuStatus;
        currentPage = 1;
        loadMissingSkus();
    });
});

// ── Search with debounce ─────────────────────────
let skuSearchTimer = null;
document.getElementById('skuSearch')?.addEventListener('input', function() {
    clearTimeout(skuSearchTimer);
    skuSearchTimer = setTimeout(() => { currentPage = 1; loadMissingSkus(); }, 300);
});

// ── Rescan ────────────────────────────────────────
document.getElementById('rescanBtn')?.addEventListener('click', async function() {
    this.disabled = true;
    const prog = document.getElementById('rescanProgress');
    const result = document.getElementById('rescanResult');
    const progText = document.getElementById('rescanProgressText');
    if (prog) { prog.style.display = 'flex'; }
    if (result) result.style.display = 'none';
    try {
        const data = await fetch('/api/validate/scan', { method: 'POST' }).then(r => r.json());
        if (progText) progText.textContent = 'Gata.';
        if (result) {
            result.innerHTML = `&#10003; ${data.total_skus_scanned || 0} scanate &nbsp;|&nbsp; ${data.new_missing || 0} noi lipsa &nbsp;|&nbsp; ${data.auto_resolved || 0} rezolvate`;
            result.style.display = 'block';
        }
        loadMissingSkus();
    } catch(e) {
        if (progText) progText.textContent = 'Eroare.';
    } finally {
        this.disabled = false;
        setTimeout(() => { if (prog) prog.style.display = 'none'; }, 2500);
    }
});

document.addEventListener('DOMContentLoaded', () => {
    loadMissingSkus();
});

function resolvedParamFor(statusFilter) {
    if (statusFilter === 'resolved') return 1;
    if (statusFilter === 'all') return -1;
    return 0; // unresolved (default)
}

function loadMissingSkus(page) {
    currentPage = page || currentPage;
    const params = new URLSearchParams();
    const resolvedVal = resolvedParamFor(skuStatusFilter);
    params.set('resolved', resolvedVal);
    params.set('page', currentPage);
    params.set('per_page', missingPerPage);
    const search = document.getElementById('skuSearch')?.value?.trim();
    if (search) params.set('search', search);

    fetch('/api/validate/missing-skus?' + params.toString())
        .then(r => r.json())
        .then(data => {
            const c = data.counts || {};
            const el = id => document.getElementById(id);
            if (el('cntUnres')) el('cntUnres').textContent = c.unresolved || 0;
            if (el('cntRes')) el('cntRes').textContent = c.resolved || 0;
            if (el('cntAllSkus')) el('cntAllSkus').textContent = c.total || 0;

            // Mobile segmented control
            renderMobileSegmented('skusMobileSeg', [
                { label: 'Nerez.', count: c.unresolved || 0, value: 'unresolved', active: skuStatusFilter === 'unresolved', colorClass: 'fc-yellow' },
                { label: 'Rez.', count: c.resolved || 0, value: 'resolved', active: skuStatusFilter === 'resolved', colorClass: 'fc-green' },
                { label: 'Toate', count: c.total || 0, value: 'all', active: skuStatusFilter === 'all', colorClass: 'fc-neutral' }
            ], (val) => {
                document.querySelectorAll('.filter-pill[data-sku-status]').forEach(b => b.classList.remove('active'));
                const pill = document.querySelector(`.filter-pill[data-sku-status="${val}"]`);
                if (pill) pill.classList.add('active');
                skuStatusFilter = val;
                currentPage = 1;
                loadMissingSkus();
            });

            renderMissingSkusTable(data.skus || data.missing_skus || [], data);
            renderPagination(data);
        })
        .catch(err => {
            document.getElementById('missingBody').innerHTML =
                `<tr><td colspan="4" class="text-center text-danger">${err.message}</td></tr>`;
        });
}

// Keep backward compat alias
function loadMissing(page) { loadMissingSkus(page); }

function renderMissingSkusTable(skus, data) {
    const tbody = document.getElementById('missingBody');
    const mobileList = document.getElementById('missingMobileList');

    if (!skus || skus.length === 0) {
        const msg = skuStatusFilter === 'unresolved' ? 'Toate SKU-urile sunt mapate!' :
                    skuStatusFilter === 'resolved' ? 'Niciun SKU rezolvat' : 'Niciun SKU gasit';
        tbody.innerHTML = `<tr><td colspan="4" class="text-center text-muted py-4">${msg}</td></tr>`;
        if (mobileList) mobileList.innerHTML = `<div class="flat-row text-muted py-3 justify-content-center">${msg}</div>`;
        return;
    }

    tbody.innerHTML = skus.map(s => {
        const trAttrs = !s.resolved
            ? ` style="cursor:pointer" onclick="openMapModal('${esc(s.sku)}', '${esc(s.product_name || '')}')"`
            : '';
        return `<tr${trAttrs}>
            <td>${s.resolved ? '<span class="dot dot-green"></span>' : '<span class="dot dot-yellow"></span>'}</td>
            <td><code>${esc(s.sku)}</code></td>
            <td class="truncate" style="max-width:300px">${esc(s.product_name || '-')}</td>
            <td>
                ${!s.resolved
                    ? `<a href="#" class="btn-map-icon" onclick="event.stopPropagation(); openMapModal('${esc(s.sku)}', '${esc(s.product_name || '')}'); return false;" title="Mapeaza">
                        <i class="bi bi-link-45deg"></i>
                       </a>`
                    : `<small class="text-muted">${s.resolved_at ? new Date(s.resolved_at).toLocaleDateString('ro-RO') : ''}</small>`}
            </td>
        </tr>`;
    }).join('');

    if (mobileList) {
        mobileList.innerHTML = skus.map(s => {
            const actionHtml = !s.resolved
                ? `<a href="#" class="btn-map-icon" onclick="event.stopPropagation(); openMapModal('${esc(s.sku)}', '${esc(s.product_name || '')}'); return false;"><i class="bi bi-link-45deg"></i></a>`
                : `<small class="text-muted">${s.resolved_at ? new Date(s.resolved_at).toLocaleDateString('ro-RO') : ''}</small>`;
            const flatRowAttrs = !s.resolved
                ? ` onclick="openMapModal('${esc(s.sku)}', '${esc(s.product_name || '')}')" style="cursor:pointer"`
                : '';
            return `<div class="flat-row"${flatRowAttrs}>
                ${s.resolved ? '<span class="dot dot-green"></span>' : '<span class="dot dot-yellow"></span>'}
                <code class="me-1 text-nowrap">${esc(s.sku)}</code>
                <span class="grow truncate">${esc(s.product_name || '-')}</span>
                ${actionHtml}
            </div>`;
        }).join('');
    }
}

function renderPagination(data) {
    const pagOpts = { perPage: missingPerPage, perPageFn: 'missingChangePerPage', perPageOptions: [20, 50, 100] };
    const infoHtml = `<small class="text-muted me-auto">Total: ${data.total || 0} | Pagina ${data.page || 1} din ${data.pages || 1}</small>`;
    const pagHtml = infoHtml + renderUnifiedPagination(data.page || 1, data.pages || 1, 'loadMissing', pagOpts);
    const top = document.getElementById('skusPagTop');
    const bot = document.getElementById('skusPagBottom');
    if (top) top.innerHTML = pagHtml;
    if (bot) bot.innerHTML = pagHtml;
}

// ── Map Modal (uses shared openQuickMap) ─────────

function openMapModal(sku, productName) {
    openQuickMap({
        sku,
        productName,
        onSave: () => { loadMissingSkus(currentPage); }
    });
}

function exportMissingCsv() {
    window.location.href = '/api/validate/missing-skus-csv';
}

</script>
{% endblock %}