{% extends "base.html" %}

{% block title %}Gerar Códigos EAN-13 em Lote{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1><i class="bi bi-upc-scan text-primary"></i> Gerar Códigos EAN-13 em Lote</h1>
        <p class="text-muted mb-0">Atribui códigos de barras internos para produtos sem GTIN cadastrado.</p>
    </div>
    <a href="{{ url_for('produtos') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left"></i> Voltar
    </a>
</div>

<div class="row g-4">
    <div class="col-lg-4">
        <div class="card shadow-sm border-0 h-100">
            <div class="card-body text-center">
                <div class="display-5 fw-bold text-primary">{{ total_sem_codigo }}</div>
                <div class="text-muted">produtos sem código de barras</div>
                <hr>
                <p class="small text-muted mb-3">
                    O sistema gera códigos EAN-13 internos automaticamente e evita colisões já cadastradas.
                </p>
                <button id="btnGerar" class="btn btn-primary btn-lg w-100" {% if total_sem_codigo <= 0 %}disabled{% endif %}>
                    <i class="bi bi-magic"></i> Gerar Códigos Agora
                </button>
            </div>
        </div>
    </div>

    <div class="col-lg-8">
        <div class="card shadow-sm border-0 mb-4">
            <div class="card-header bg-white">
                <h5 class="mb-0"><i class="bi bi-info-circle"></i> Como funciona</h5>
            </div>
            <div class="card-body">
                <ul class="mb-0">
                    <li>Somente produtos sem `codigo_barras` recebem novo EAN-13.</li>
                    <li>Se houver colisão, o sistema tenta outro código automaticamente.</li>
                    <li>O processamento é feito no servidor e retorna uma amostra dos códigos gerados.</li>
                </ul>
            </div>
        </div>

        <div id="resultadoCard" class="card shadow-sm border-0 d-none">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-list-check"></i> Resultado da Geração</h5>
                <span id="resultadoBadge" class="badge bg-success">Concluído</span>
            </div>
            <div class="card-body">
                <div id="resultadoResumo" class="mb-3"></div>
                <div class="table-responsive">
                    <table class="table table-sm table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Produto ID</th>
                                <th>Nome</th>
                                <th>EAN-13</th>
                            </tr>
                        </thead>
                        <tbody id="resultadoTabela"></tbody>
                    </table>
                </div>
                <div id="resultadoErros" class="mt-3"></div>
            </div>
        </div>
    </div>
</div>

<script>
const btnGerar = document.getElementById('btnGerar');
const resultadoCard = document.getElementById('resultadoCard');
const resultadoResumo = document.getElementById('resultadoResumo');
const resultadoTabela = document.getElementById('resultadoTabela');
const resultadoErros = document.getElementById('resultadoErros');
const resultadoBadge = document.getElementById('resultadoBadge');

async function gerarCodigosEmLote() {
    btnGerar.disabled = true;
    btnGerar.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Gerando...';
    resultadoCard.classList.add('d-none');
    resultadoTabela.innerHTML = '';
    resultadoErros.innerHTML = '';

    try {
        const response = await fetch('{{ url_for("api_gerar_ean13_lote") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({})
        });
        const payload = await response.json();

        resultadoCard.classList.remove('d-none');
        if (!response.ok || !payload.success) {
            resultadoBadge.className = 'badge bg-danger';
            resultadoBadge.textContent = 'Falhou';
            resultadoResumo.innerHTML = `<div class="alert alert-danger mb-0">${payload.message || 'Falha ao gerar códigos em lote.'}</div>`;
            return;
        }

        resultadoBadge.className = 'badge bg-success';
        resultadoBadge.textContent = 'Concluído';
        resultadoResumo.innerHTML = `
            <div class="alert alert-success mb-0">
                <strong>${payload.message}</strong><br>
                Atualizados: <strong>${payload.total_atualizado || 0}</strong> &nbsp;|&nbsp;
                Erros: <strong>${payload.total_erros || 0}</strong>
            </div>`;

        const itens = payload.codigos_gerados || [];
        if (itens.length === 0) {
            resultadoTabela.innerHTML = '<tr><td colspan="3" class="text-center text-muted py-4">Nenhum código gerado.</td></tr>';
        } else {
            resultadoTabela.innerHTML = itens.map(item => `
                <tr>
                    <td><code>${item.produto_id ?? '-'}</code></td>
                    <td>${item.nome ?? '-'}</td>
                    <td><span class="badge bg-light text-dark border">${item.ean13 ?? '-'}</span></td>
                </tr>
            `).join('');
        }

        const erros = payload.erros || [];
        if (erros.length > 0) {
            resultadoErros.innerHTML = `
                <div class="alert alert-warning mb-0">
                    <strong>Alguns itens não puderam ser processados:</strong>
                    <ul class="mb-0 mt-2">${erros.slice(0, 10).map(err => `<li>${err.nome || 'Produto'}: ${err.erro || 'Erro não informado'}</li>`).join('')}</ul>
                </div>`;
        }
    } catch (error) {
        resultadoCard.classList.remove('d-none');
        resultadoBadge.className = 'badge bg-danger';
        resultadoBadge.textContent = 'Erro';
        resultadoResumo.innerHTML = `<div class="alert alert-danger mb-0">Erro ao comunicar com o servidor: ${error.message}</div>`;
    } finally {
        btnGerar.disabled = false;
        btnGerar.innerHTML = '<i class="bi bi-magic"></i> Gerar Códigos Agora';
    }
}

if (btnGerar) {
    btnGerar.addEventListener('click', gerarCodigosEmLote);
}
</script>
{% endblock %}