{% extends "base.html" %}

{% block title %}Imprimir Etiquetas{% endblock %}

{% block extra_css %}
<style>
    .campo-lote-readonly {
        background: linear-gradient(180deg, #f8fafc 0%, #eef4ff 100%);
        border-color: #cbd5e1;
        color: #334155;
        font-weight: 600;
        cursor: not-allowed;
    }

    .campo-lote-readonly:focus {
        border-color: #93c5fd;
        box-shadow: none;
    }

    .campo-lote-addon {
        background: #eff6ff;
        color: #2563eb;
        border-color: #cbd5e1;
    }
    
    .hint-lote-readonly {
        color: #64748b;
        font-size: 0.78rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="mb-4">
    <div class="d-flex justify-content-between align-items-center">
        <h1><i class="bi bi-printer"></i> Imprimir Etiquetas</h1>
        <a href="{{ url_for('etiquetas_modelos') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> Voltar aos Modelos
        </a>
    </div>
</div>

<div class="row">
    <!-- Painel Esquerdo: Seleção -->
    <div class="col-md-8">
        <!-- Seleção do modelo -->
        <div class="card mb-3">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-tag"></i> 1. Selecione o Modelo</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-8">
                        <select class="form-select" id="select-modelo">
                            <option value="">-- Selecione um modelo --</option>
                            {% for modelo in modelos %}
                            <option value="{{ modelo.id }}" 
                                    data-tipo="{{ modelo.tipo }}"
                                    data-papel="{{ modelo.papel or 'a4' }}"
                                    data-largura="{{ modelo.largura }}"
                                    data-altura="{{ modelo.altura }}"
                                    data-colunas="{{ modelo.colunas_por_linha or '' }}"
                                    {% if modelo_selecionado and modelo.id == modelo_selecionado.id %}selected{% endif %}>
                                {{ modelo.nome }} ({{ modelo.tamanho_formatado }})
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-4">
                        <select class="form-select" id="select-formato">
                            <option value="pdf">PDF (Impressora Normal)</option>
                            <option value="zpl">ZPL (Zebra)</option>
                            <option value="epl">EPL (Elgin/Argox)</option>
                        </select>
                    </div>
                </div>

                <div class="row mt-3" id="row-posicao-inicial" style="display: none;">
                    <div class="col-md-8">
                        <label class="form-label mb-1">Começar na posição</label>
                        <select class="form-select" id="select-posicao-inicial">
                            <option value="1">Posição 1</option>
                            <option value="2">Posição 2</option>
                            <option value="3">Posição 3</option>
                        </select>
                        <small class="text-muted d-block mt-1" id="hint-posicao-inicial">Use quando a folha já tiver etiquetas usadas no início da linha.</small>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Seleção de produtos -->
        <div class="card mb-3">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="bi bi-box"></i> 2. Selecione os Produtos</h5>
                    <div class="input-group" style="width: 300px;">
                        <input type="text" class="form-control form-control-sm" 
                               id="busca-produto" placeholder="Buscar produto...">
                        <button class="btn btn-outline-secondary btn-sm" type="button" id="btn-buscar">
                            <i class="bi bi-search"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="card-body p-0">
                <!-- Resultados da busca -->
                <div id="resultados-busca" class="list-group list-group-flush" style="max-height: 200px; overflow-y: auto; display: none;">
                </div>
                
                <!-- Produtos selecionados -->
                <table class="table table-sm mb-0" id="tabela-produtos">
                    <thead class="table-light">
                        <tr>
                            <th>Código</th>
                            <th>Produto</th>
                            <th style="width: 100px;">Preço</th>
                            <th style="width: 80px;">Qtd</th>
                            <th style="width: 50px;"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr id="row-vazio">
                            <td colspan="5" class="text-center text-muted py-4">
                                <i class="bi bi-inbox fs-3"></i>
                                <p class="mb-0">Busque e adicione produtos acima</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="card-footer">
                <div class="d-flex justify-content-between align-items-center">
                    <span>
                        <strong id="total-produtos">0</strong> produto(s) | 
                        <strong id="total-etiquetas">0</strong> etiqueta(s)
                    </span>
                    <button class="btn btn-sm btn-outline-danger" id="btn-limpar">
                        <i class="bi bi-trash"></i> Limpar Lista
                    </button>
                </div>
            </div>
        </div>

        <div class="card mb-3" id="card-tabelas-preco">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-tags"></i> 3. Tabelas de Preço na Etiqueta</h5>
            </div>
            <div class="card-body">
                <div class="row g-2">
                    {% for slot in range(1, 5) %}
                    <div class="col-md-6">
                        <label class="form-label">Opção {{ slot }}</label>
                        <select class="form-select select-tabela-preco" data-slot="{{ slot }}">
                            <option value="">-- Não usar --</option>
                            {% for tabela in tabelas_preco %}
                            <option value="{{ tabela.id }}">{{ tabela.nome }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    {% endfor %}
                </div>
                <small class="text-muted d-block mt-2">Use de 1 até 4 opções. O mais comum é 2: por exemplo <strong>Dinheiro</strong> e <strong>Cartão</strong>.</small>
            </div>
        </div>
        
        <!-- Opções de lote -->
        <div class="card mb-3" id="card-lote" style="display: none;">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-layers"></i> 4. Informações de Lote</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-5">
                        <label class="form-label">Número do Lote</label>
                        <select class="form-select" id="numero-lote">
                            <option value="">Selecione um produto para carregar os lotes</option>
                        </select>
                        <small class="text-muted d-block mt-1" id="hint-lote">Ao escolher uma etiqueta de lote, o sistema busca os lotes cadastrados no controle de lote do produto.</small>
                        <a href="#" class="btn btn-sm btn-outline-primary mt-2 d-none" id="btn-abrir-controle-lotes" target="_blank">
                            <i class="bi bi-box-seam"></i> Abrir controle de lotes
                        </a>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Data de Fabricação</label>
                        <div class="input-group">
                            <span class="input-group-text campo-lote-addon" title="Preenchido automaticamente pelo lote">
                                <i class="bi bi-lock-fill"></i>
                            </span>
                            <input type="text" class="form-control campo-lote-readonly" id="data-fabricacao" placeholder="DD/MM/AAAA" readonly aria-readonly="true" tabindex="-1">
                        </div>
                        <small class="hint-lote-readonly d-block mt-1">Preenchido automaticamente pelo lote selecionado.</small>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Data de Validade</label>
                        <div class="input-group">
                            <span class="input-group-text campo-lote-addon" title="Preenchido automaticamente pelo lote">
                                <i class="bi bi-lock-fill"></i>
                            </span>
                            <input type="text" class="form-control campo-lote-readonly" id="data-validade" placeholder="DD/MM/AAAA" readonly aria-readonly="true" tabindex="-1">
                        </div>
                        <small class="hint-lote-readonly d-block mt-1">Preenchido automaticamente pelo lote selecionado.</small>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Opções de expedição -->
        <div class="card mb-3" id="card-expedicao" style="display: none;">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-truck"></i> 4. Informações de Expedição</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <label class="form-label">Número do Pedido</label>
                        <input type="text" class="form-control" id="numero-pedido">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Cliente/Destinatário</label>
                        <input type="text" class="form-control" id="destinatario">
                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col-md-12">
                        <label class="form-label">Endereço de Entrega</label>
                        <textarea class="form-control" id="endereco-entrega" rows="2"></textarea>
                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col-md-4">
                        <label class="form-label">Transportadora</label>
                        <input type="text" class="form-control" id="transportadora-entrega" readonly>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Serviço</label>
                        <input type="text" class="form-control" id="servico-entrega" readonly>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Resumo do Frete</label>
                        <input type="text" class="form-control" id="resumo-frete" readonly>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Painel Direito: Preview e Ações -->
    <div class="col-md-4">
        <div class="card sticky-top" style="top: 80px;">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-eye"></i> Pré-visualização</h5>
            </div>
            <div class="card-body text-center bg-light" id="preview-container" style="min-height: 200px;">
                <div class="text-muted py-5">
                    <i class="bi bi-image fs-1"></i>
                    <p class="mb-0">Selecione um modelo e produtos</p>
                </div>
            </div>
            <div class="card-footer">
                <div class="d-grid gap-2">
                    <button class="btn btn-primary btn-lg" id="btn-imprimir" disabled>
                        <i class="bi bi-printer"></i> Gerar Etiquetas
                    </button>
                    <button class="btn btn-outline-secondary" id="btn-preview">
                        <i class="bi bi-eye"></i> Atualizar Preview
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Loading -->
<div class="modal fade cape-modal-standard" id="modal-loading" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center py-4">
                <div class="spinner-border text-primary mb-3" role="status">
                    <span class="visually-hidden">Gerando...</span>
                </div>
                <p class="mb-0">Gerando etiquetas...</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
console.log('🚀 SCRIPT INICIADO - Etiquetas Imprimir');
const produtosSelecionados = [];
const produtoPreselecionado = {{ produto_preselecionado|tojson if produto_preselecionado else 'null' }};
const produtosPreselecionados = {{ produtos_preselecionados|tojson if produtos_preselecionados else '[]' }};
const lotePreselecionado = {{ lote_preselecionado|tojson if lote_preselecionado else 'null' }};
const expedicaoPreselecionada = {{ expedicao_preselecionada|tojson if expedicao_preselecionada else 'null' }};
const quantidadeInicial = {{ quantidade_inicial|default(1) }};
let lotesDisponiveisProduto = [];
let loteSelecionadoAtual = lotePreselecionado || null;

function adicionarProdutoPreselecionado(produto) {
    if (!produto?.id) return;

    const existente = produtosSelecionados.find(item => String(item.id) === String(produto.id));
    const quantidadeRef = parseInt(produto.quantidade || quantidadeInicial || 1, 10) || 1;

    if (existente) {
        existente.codigo = existente.codigo || produto.codigo || '';
        existente.nome = existente.nome || produto.nome || 'Produto';
        existente.cota = existente.cota || produto.cota || '';
        existente.gtin = existente.gtin || produto.gtin || '';
        existente.preco = parseFloat(existente.preco || produto.preco || 0);
        existente.quantidade = quantidadeRef;
        return;
    }

    produtosSelecionados.push({
        id: produto.id,
        codigo: produto.codigo || '',
        nome: produto.nome || 'Produto',
        cota: produto.cota || '',
        gtin: produto.gtin || '',
        preco: parseFloat(produto.preco || 0),
        quantidade: quantidadeRef
    });
}

function preencherExpedicaoPreselecionada() {
    if (!expedicaoPreselecionada) return;

    const campos = {
        'numero-pedido': expedicaoPreselecionada.numero_pedido || '',
        'destinatario': expedicaoPreselecionada.destinatario || '',
        'endereco-entrega': expedicaoPreselecionada.endereco_entrega || '',
        'transportadora-entrega': expedicaoPreselecionada.transportadora || '',
        'servico-entrega': expedicaoPreselecionada.servico || '',
        'resumo-frete': expedicaoPreselecionada.resumo_frete || ''
    };

    Object.entries(campos).forEach(([id, valor]) => {
        const input = document.getElementById(id);
        if (input) {
            input.value = valor;
        }
    });
}

function inferirColunasModelo(option) {
    if (!option) return 1;
    const papel = String(option.dataset.papel || 'a4').trim().toLowerCase();
    const largurasBobina = { bobina60: 60, bobina80: 80, bobina100: 100 };
    const colunasConfiguradas = parseInt(option.dataset.colunas || '0', 10) || 0;

    const largura = Math.round(parseFloat(option.dataset.largura || '0'));
    const altura = Math.round(parseFloat(option.dataset.altura || '0'));
    const nome = String(option.textContent || '').trim().toLowerCase();
    const perfilPequeno3Colunas = largura >= 30 && largura <= 35 && altura >= 15 && altura <= 25;
    const conhecidos = {
        '60x40': 3,
        '65x45': 3,
        '50x30': 4
    };
    const chave = `${largura}x${altura}`;
    let colunas = colunasConfiguradas > 0 ? colunasConfiguradas : (conhecidos[chave] || 1);

    if (colunasConfiguradas <= 0) {
        if (nome.includes('3 por linha') || nome.includes('3 colunas')) {
            if (!perfilPequeno3Colunas || papel === 'bobina100') return 3;
        }
        if (nome.includes('4 por linha') || nome.includes('4 colunas')) return 4;
        if (papel === 'bobina100' && largura >= 30 && largura <= 35 && altura >= 15 && altura <= 25) colunas = 3;
        if (largura >= 48 && largura <= 52 && altura >= 25 && altura <= 35) colunas = 4;
        if (largura >= 58 && largura <= 66 && altura >= 38 && altura <= 48) colunas = 3;
    }

    if (perfilPequeno3Colunas && papel !== 'bobina100') {
        colunas = 1;
    }

    if (largurasBobina[papel]) {
        const maxColunasFisicas = Math.max(1, Math.floor((largurasBobina[papel] + 0.5) / Math.max(largura, 1)));
        colunas = Math.min(colunas, maxColunasFisicas);
    }

    return colunas;
}

function atualizarOpcaoPosicaoInicial() {
    const option = document.querySelector('#select-modelo option:checked');
    const row = document.getElementById('row-posicao-inicial');
    const select = document.getElementById('select-posicao-inicial');
    const hint = document.getElementById('hint-posicao-inicial');
    const formato = document.getElementById('select-formato')?.value || 'pdf';
    if (!row || !select) return;

    const colunas = inferirColunasModelo(option);
    const mostrar = option?.value && formato === 'pdf' && colunas > 1;
    row.style.display = mostrar ? '' : 'none';

    if (!mostrar) {
        select.innerHTML = '<option value="1">Posição 1</option>';
        select.value = '1';
        return;
    }

    select.innerHTML = Array.from({ length: colunas }, (_, idx) => {
        const pos = idx + 1;
        return `<option value="${pos}">Posição ${pos}</option>`;
    }).join('');

    if (!Array.from(select.options).some(opt => opt.value === select.value)) {
        select.value = '1';
    }

    if (hint) {
        hint.textContent = colunas === 3
            ? 'Escolha se a primeira etiqueta deve sair na coluna 1, 2 ou 3 para evitar desperdício.'
            : `Escolha em qual coluna (1 a ${colunas}) a impressão deve começar.`;
    }
}

function escaparHtml(valor) {
    return String(valor ?? '')
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
}

function obterTipoModeloSelecionado() {
    return document.querySelector('#select-modelo option:checked')?.dataset?.tipo || '';
}

function obterProdutoPrincipalSelecionado() {
    if (!produtosSelecionados.length) return null;
    return produtosSelecionados[0] || null;
}

function limparSelecoesTabelasPreco() {
    document.querySelectorAll('.select-tabela-preco').forEach(select => {
        select.value = '';
    });
}

function atualizarVisibilidadeTabelaPreco() {
    const cardTabelasPreco = document.getElementById('card-tabelas-preco');
    if (!cardTabelasPreco) return;

    const ocultar = obterTipoModeloSelecionado() === 'lote';
    cardTabelasPreco.style.display = ocultar ? 'none' : '';

    if (ocultar) {
        limparSelecoesTabelasPreco();
    }
}

function obterTabelasPrecoSelecionadas() {
    if (obterTipoModeloSelecionado() === 'lote') {
        return [];
    }

    return Array.from(document.querySelectorAll('.select-tabela-preco'));
}

function aplicarLoteSelecionado(lote) {
    loteSelecionadoAtual = lote || null;

    const inputFabricacao = document.getElementById('data-fabricacao');
    const inputValidade = document.getElementById('data-validade');

    if (inputFabricacao) {
        inputFabricacao.value = lote?.data_fabricacao || '';
        inputFabricacao.readOnly = true;
    }
    if (inputValidade) {
        inputValidade.value = lote?.data_validade || '';
        inputValidade.readOnly = true;
    }
}

async function carregarLotesProduto(produtoId, lotePreferencialId = null) {
    const selectLote = document.getElementById('numero-lote');
    const hintLote = document.getElementById('hint-lote');
    const btnControle = document.getElementById('btn-abrir-controle-lotes');

    if (!selectLote) return;

    lotesDisponiveisProduto = [];
    aplicarLoteSelecionado(null);

    if (btnControle) {
        btnControle.classList.add('d-none');
        btnControle.href = '#';
    }

    if (!produtoId) {
        selectLote.innerHTML = '<option value="">Selecione um produto para carregar os lotes</option>';
        selectLote.disabled = true;
        if (hintLote) {
            hintLote.textContent = 'Ao escolher uma etiqueta de lote, o sistema busca os lotes cadastrados no controle de lote do produto.';
        }
        return;
    }

    selectLote.disabled = true;
    selectLote.innerHTML = '<option value="">Carregando lotes cadastrados...</option>';

    try {
        const response = await fetch(`/api/etiquetas/produto/${produtoId}/lotes`);
        const respostaTexto = await response.text();
        let data = null;

        try {
            data = respostaTexto ? JSON.parse(respostaTexto) : null;
        } catch (parseError) {
            console.error('❌ Resposta inválida ao carregar lotes:', respostaTexto?.slice?.(0, 500) || respostaTexto);
            throw new Error('A resposta do servidor para os lotes veio em formato inválido. Atualize a página e tente novamente.');
        }

        if (!response.ok || !data?.success) {
            throw new Error(data?.message || 'Não foi possível carregar os lotes do produto.');
        }

        lotesDisponiveisProduto = Array.isArray(data.lotes) ? data.lotes : [];
        if (btnControle && data.url_controle_lotes) {
            btnControle.href = data.url_controle_lotes;
            btnControle.classList.remove('d-none');
        }

        if (!lotesDisponiveisProduto.length) {
            selectLote.innerHTML = '<option value="">Nenhum lote cadastrado para este produto</option>';
            selectLote.disabled = true;
            if (hintLote) {
                hintLote.textContent = 'Este produto ainda não possui lotes cadastrados no controle de lote.';
            }
            return;
        }

        selectLote.innerHTML = ['<option value="">Selecione um lote cadastrado</option>']
            .concat(lotesDisponiveisProduto.map(lote => {
                const detalhes = [];
                if (lote.data_validade) detalhes.push(`Val: ${lote.data_validade}`);
                if (lote.quantidade_formatada) detalhes.push(`Saldo: ${lote.quantidade_formatada}`);
                const legenda = detalhes.length ? ` • ${detalhes.join(' • ')}` : '';
                return `<option value="${lote.id}">${escaparHtml(lote.numero)}${escaparHtml(legenda)}</option>`;
            }))
            .join('');
        selectLote.disabled = false;

        const lotePreferencial = lotesDisponiveisProduto.find(lote => String(lote.id) === String(lotePreferencialId || lotePreselecionado?.id || ''));
        const lotePadrao = lotePreferencial || lotesDisponiveisProduto[0];

        if (lotePadrao) {
            selectLote.value = String(lotePadrao.id);
            aplicarLoteSelecionado(lotePadrao);
            if (hintLote) {
                hintLote.textContent = 'Lotes carregados a partir da rotina de controle de lote do produto selecionado.';
            }
        }
    } catch (error) {
        console.error('❌ Erro ao carregar lotes do produto:', error);
        selectLote.innerHTML = '<option value="">Erro ao carregar lotes cadastrados</option>';
        selectLote.disabled = true;
        if (hintLote) {
            hintLote.textContent = error?.message || 'Não foi possível carregar os lotes do produto.';
        }
    }
}

async function sincronizarContextoLote() {
    const tipoModelo = obterTipoModeloSelecionado();
    const cardLote = document.getElementById('card-lote');
    const cardExpedicao = document.getElementById('card-expedicao');
    const hintLote = document.getElementById('hint-lote');
    const produtoPrincipal = obterProdutoPrincipalSelecionado();

    atualizarVisibilidadeTabelaPreco();

    if (cardLote) cardLote.style.display = tipoModelo === 'lote' ? '' : 'none';
    if (cardExpedicao) cardExpedicao.style.display = tipoModelo === 'expedicao' ? '' : 'none';

    if (tipoModelo !== 'lote') {
        await carregarLotesProduto(null);
        return;
    }

    if (!produtoPrincipal) {
        await carregarLotesProduto(null);
        return;
    }

    if (produtosSelecionados.length > 1 && hintLote) {
        hintLote.textContent = 'Para etiqueta de lote, use um produto por vez. Os lotes abaixo correspondem ao primeiro produto da lista.';
    }

    await carregarLotesProduto(produtoPrincipal.id, loteSelecionadoAtual?.id || lotePreselecionado?.id || null);
}

// Buscar produtos
async function buscarProdutos(termo) {
    if (!termo || termo.length < 2) return [];
    
    const empresaId = parseInt('{{ empresa_id|default("0") }}') || 0;
    const url = `/api/produtos/buscar?q=${encodeURIComponent(termo)}&limite=10${empresaId ? '&empresa_id=' + empresaId : ''}`;
    console.log('🔍 Buscando produtos:', url);
    console.log('📊 Empresa ID:', empresaId);
    
    try {
        const response = await fetch(url);
        console.log('📡 Response status:', response.status);
        
        if (!response.ok) {
            console.error('❌ Erro na busca:', response.status);
            return [];
        }
        
        // A API retorna array direto
        const data = await response.json();
        console.log('✅ Produtos encontrados:', data.length, data);
        return Array.isArray(data) ? data : [];
    } catch (error) {
        console.error('❌ Erro ao buscar produtos:', error);
        return [];
    }
}

// Exibir resultados da busca
function exibirResultados(produtos) {
    const container = document.getElementById('resultados-busca');
    container.innerHTML = '';
    
    if (produtos.length === 0) {
        container.innerHTML = '<div class="list-group-item text-muted">Nenhum produto encontrado</div>';
        container.style.display = 'block';
        return;
    }
    
    produtos.forEach(p => {
        const item = document.createElement('a');
        item.href = '#';
        item.className = 'list-group-item list-group-item-action';
        item.innerHTML = `
            <div class="d-flex justify-content-between">
                <div>
                    <strong>${p.codigo || '-'}</strong> - ${p.nome}
                    ${p.ean ? `<small class="text-muted">(${p.ean})</small>` : ''}
                </div>
                <span class="text-success">R$ ${parseFloat(p.preco || 0).toFixed(2)}</span>
            </div>
        `;
        item.addEventListener('click', (e) => {
            e.preventDefault();
            adicionarProduto(p);
            container.style.display = 'none';
            document.getElementById('busca-produto').value = '';
        });
        container.appendChild(item);
    });
    
    container.style.display = 'block';
}

// Adicionar produto à lista
function adicionarProduto(produto) {
    // Verificar se já existe
    const existe = produtosSelecionados.find(p => p.id === produto.id);
    if (existe) {
        existe.quantidade++;
        atualizarTabela();
        return;
    }
    
    produtosSelecionados.push({
        id: produto.id,
        codigo: produto.codigo,
        nome: produto.nome,
        cota: produto.cota || '',
        gtin: produto.ean,  // API usa 'ean'
        preco: parseFloat(produto.preco || 0),  // API usa 'preco'
        quantidade: 1
    });
    
    atualizarTabela();
    sincronizarContextoLote();
}

// Atualizar tabela de produtos
function atualizarTabela() {
    const tbody = document.querySelector('#tabela-produtos tbody');
    const rowVazio = document.getElementById('row-vazio');
    
    // Limpar linhas de produtos
    tbody.querySelectorAll('tr:not(#row-vazio)').forEach(tr => tr.remove());
    
    if (produtosSelecionados.length === 0) {
        rowVazio.style.display = '';
    } else {
        rowVazio.style.display = 'none';
        
        produtosSelecionados.forEach((p, idx) => {
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>${p.codigo || '-'}</td>
                <td>
                    ${p.nome}
                    ${p.gtin ? `<br><small class="text-muted">${p.gtin}</small>` : ''}
                </td>
                <td>
                    <input type="number" class="form-control form-control-sm input-preco" 
                           value="${p.preco.toFixed(2)}" step="0.01" min="0" data-idx="${idx}">
                </td>
                <td>
                    <input type="number" class="form-control form-control-sm input-qtd" 
                           value="${p.quantidade}" min="1" data-idx="${idx}">
                </td>
                <td>
                    <button class="btn btn-sm btn-outline-danger btn-remover" data-idx="${idx}">
                        <i class="bi bi-x"></i>
                    </button>
                </td>
            `;
            tbody.appendChild(tr);
        });
    }
    
    // Atualizar totais
    const totalProdutos = produtosSelecionados.length;
    const totalEtiquetas = produtosSelecionados.reduce((sum, p) => sum + p.quantidade, 0);
    document.getElementById('total-produtos').textContent = totalProdutos;
    document.getElementById('total-etiquetas').textContent = totalEtiquetas;
    
    // Habilitar botão
    const selectModelo = document.getElementById('select-modelo');
    document.getElementById('btn-imprimir').disabled = !selectModelo.value || totalProdutos === 0;
    
    // Adicionar eventos
    tbody.querySelectorAll('.input-preco').forEach(input => {
        input.addEventListener('change', function() {
            const idx = parseInt(this.dataset.idx);
            produtosSelecionados[idx].preco = parseFloat(this.value) || 0;
        });
    });
    
    tbody.querySelectorAll('.input-qtd').forEach(input => {
        input.addEventListener('change', function() {
            const idx = parseInt(this.dataset.idx);
            produtosSelecionados[idx].quantidade = parseInt(this.value) || 1;
            atualizarTabela();
        });
    });
    
    tbody.querySelectorAll('.btn-remover').forEach(btn => {
        btn.addEventListener('click', function() {
            const idx = parseInt(this.dataset.idx);
            produtosSelecionados.splice(idx, 1);
            atualizarTabela();
            sincronizarContextoLote();
        });
    });
}

// Busca
console.log('✅ JavaScript carregado - registrando eventos de busca');

const campoBusca = document.getElementById('busca-produto');
const btnBuscar = document.getElementById('btn-buscar');

console.log('Campo busca:', campoBusca);
console.log('Botão buscar:', btnBuscar);

if (campoBusca) {
    campoBusca.addEventListener('keyup', async function(e) {
        console.log('⌨️ Tecla pressionada:', e.key, 'Valor:', this.value);
        if (e.key === 'Enter' || this.value.length >= 2) {
            console.log('🔎 Iniciando busca...');
            const produtos = await buscarProdutos(this.value);
            exibirResultados(produtos);
        }
    });
}

if (btnBuscar) {
    btnBuscar.addEventListener('click', async function() {
        console.log('🖱️ Botão buscar clicado');
        const termo = document.getElementById('busca-produto').value;
        const produtos = await buscarProdutos(termo);
        exibirResultados(produtos);
    });
}

// Fechar resultados ao clicar fora
document.addEventListener('click', function(e) {
    const container = document.getElementById('resultados-busca');
    const busca = document.getElementById('busca-produto');
    if (!container.contains(e.target) && e.target !== busca) {
        container.style.display = 'none';
    }
});

// Modelo selecionado
document.getElementById('select-modelo').addEventListener('change', function() {
    atualizarOpcaoPosicaoInicial();
    sincronizarContextoLote();
    atualizarTabela();
});

document.getElementById('select-formato').addEventListener('change', function() {
    atualizarOpcaoPosicaoInicial();
});

// Limpar lista
document.getElementById('btn-limpar').addEventListener('click', function() {
    if (!confirm('Limpar todos os produtos da lista?')) return;
    produtosSelecionados.length = 0;
    atualizarTabela();
    sincronizarContextoLote();
});

document.getElementById('numero-lote')?.addEventListener('change', function() {
    const lote = lotesDisponiveisProduto.find(item => String(item.id) === String(this.value || '')) || null;
    aplicarLoteSelecionado(lote);
});

// Gerar etiquetas
document.getElementById('btn-imprimir').addEventListener('click', async function() {
    const modeloId = document.getElementById('select-modelo').value;
    const formato = document.getElementById('select-formato').value;
    const posicaoInicial = parseInt(document.getElementById('select-posicao-inicial')?.value || '1', 10) || 1;
    const cardLoteVisivel = document.getElementById('card-lote')?.style.display !== 'none';
    const tipoModelo = obterTipoModeloSelecionado();
    
    if (!modeloId || produtosSelecionados.length === 0) {
        alert('Selecione um modelo e adicione produtos');
        return;
    }

    if (tipoModelo === 'lote' && produtosSelecionados.length !== 1) {
        alert('Para imprimir etiqueta de lote, selecione apenas um produto por vez.');
        return;
    }

    if (tipoModelo === 'lote' && !document.getElementById('numero-lote')?.value) {
        alert('Selecione um lote cadastrado para continuar.');
        return;
    }

    const totalEtiquetasSelecionadas = produtosSelecionados.reduce((sum, p) => sum + (parseInt(p.quantidade || 0, 10) || 0), 0);
    const expedicaoPayload = tipoModelo === 'expedicao' ? {
        numero_pedido: document.getElementById('numero-pedido')?.value?.trim() || '',
        destinatario: document.getElementById('destinatario')?.value?.trim() || '',
        endereco_entrega: document.getElementById('endereco-entrega')?.value?.trim() || '',
        transportadora: document.getElementById('transportadora-entrega')?.value?.trim() || '',
        servico: document.getElementById('servico-entrega')?.value?.trim() || '',
        resumo_frete: document.getElementById('resumo-frete')?.value?.trim() || '',
        valor_frete: parseFloat(expedicaoPreselecionada?.valor_frete || 0) || 0,
        prazo: expedicaoPreselecionada?.prazo || '',
        quantidade: parseInt(expedicaoPreselecionada?.quantidade || totalEtiquetasSelecionadas || 1, 10) || 1,
        data_pedido: expedicaoPreselecionada?.data_pedido || ''
    } : null;

    if (tipoModelo === 'expedicao' && (!expedicaoPayload?.numero_pedido || !expedicaoPayload?.destinatario || !expedicaoPayload?.endereco_entrega)) {
        alert('Preencha o número do pedido, o destinatário e o endereço de entrega para gerar a etiqueta de expedição.');
        return;
    }
    
    // Montar dados no formato que a API espera
    const produtosIds = produtosSelecionados.map(p => p.id);
    const quantidades = {};
    const tabelasPrecoSelecionadas = obterTabelasPrecoSelecionadas()
        .map(select => parseInt(select.value || '0', 10))
        .filter(valor => Number.isInteger(valor) && valor > 0)
        .filter((valor, idx, arr) => arr.indexOf(valor) === idx)
        .slice(0, 4);
    produtosSelecionados.forEach(p => {
        quantidades[p.id] = p.quantidade;
    });
    
    // Mostrar loading
    const modalLoading = new bootstrap.Modal(document.getElementById('modal-loading'));
    modalLoading.show();
    
    try {
        const lotePayload = cardLoteVisivel ? {
            id: parseInt(document.getElementById('numero-lote')?.value || loteSelecionadoAtual?.id || '0', 10) || null,
            numero: loteSelecionadoAtual?.numero || '',
            data_fabricacao: document.getElementById('data-fabricacao')?.value || loteSelecionadoAtual?.data_fabricacao || '',
            data_validade: document.getElementById('data-validade')?.value || loteSelecionadoAtual?.data_validade || '',
            codigo_barras_lote: loteSelecionadoAtual?.codigo_barras_lote || ''
        } : null;

        console.log('📤 Enviando requisição para gerar etiquetas...');
        const response = await fetch('/api/etiquetas/gerar', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                modelo_id: parseInt(modeloId),
                produtos: produtosIds,
                quantidades: quantidades,
                tabelas_preco: tabelasPrecoSelecionadas,
                formato: formato,
                posicao_inicial: posicaoInicial,
                lote_id: lotePayload?.id || null,
                lote: lotePayload || {},
                expedicao: expedicaoPayload || {}
            })
        });
        
        console.log('📡 Response recebido:', response.status);
        
        if (!response.ok) {
            const error = await response.json();
            throw new Error(error.message || 'Erro ao gerar etiquetas');
        }
        
        if (formato === 'pdf') {
            console.log('📄 Processando PDF...');
            // Baixar PDF
            const blob = await response.blob();
            const url = URL.createObjectURL(blob);
            console.log('✅ PDF criado:', url);
            
            // Verificar se é bobina 80mm para impressão direta
            const modeloOption = document.querySelector('#select-modelo option:checked');
            const modeloNome = modeloOption ? modeloOption.text.toLowerCase() : '';
            const isBobina80 = modeloNome.includes('80') || modeloNome.includes('bobina') || modeloNome.includes('térmica');
            
            console.log('🔍 Modelo:', modeloNome, '| É bobina 80?', isBobina80);
            
            // Fechar modal ANTES de tentar imprimir
            modalLoading.hide();
            
            if (isBobina80) {
                console.log('🖨️ Iniciando impressão automática...');
                // Criar iframe oculto para impressão automática
                const iframe = document.createElement('iframe');
                iframe.style.display = 'none';
                iframe.src = url;
                document.body.appendChild(iframe);
                
                iframe.onload = function() {
                    setTimeout(() => {
                        try {
                            iframe.contentWindow.focus();
                            iframe.contentWindow.print();
                            console.log('✅ Comando de impressão enviado');
                        } catch (e) {
                            console.error('❌ Erro ao imprimir:', e);
                            alert('Não foi possível iniciar impressão automática. Abrindo em nova aba...');
                            window.open(url, '_blank');
                        }
                        
                        // Remover iframe após 2 segundos
                        setTimeout(() => {
                            document.body.removeChild(iframe);
                            URL.revokeObjectURL(url);
                        }, 2000);
                    }, 500);
                };
            } else {
                console.log('💾 Baixando PDF normalmente...');
                // Baixar normalmente para outros formatos
                const a = document.createElement('a');
                a.href = url;
                a.download = `etiquetas_${Date.now()}.pdf`;
                a.click();
                setTimeout(() => URL.revokeObjectURL(url), 1000);
            }
        } else {
            // Fechar modal para outros formatos também
            modalLoading.hide();
            
            console.log('📟 Processando código térmico (ZPL/EPL)...');
            // Para ZPL/EPL, a resposta é texto puro, não JSON
            const codigo = await response.text();
            console.log('✅ Código gerado:', codigo.substring(0, 100) + '...');
            
            // Criar um blob de texto para download
            const blob = new Blob([codigo], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `etiquetas_${formato}_${Date.now()}.${formato}`;
            a.click();
            URL.revokeObjectURL(url);
            
            alert(`Código ${formato.toUpperCase()} gerado e baixado!\nEnvie o arquivo para a impressora térmica.`);
        }
    } catch (e) {
        console.error('❌ Erro completo:', e);
        alert('Erro: ' + e.message);
        modalLoading.hide();
    }
});

// Preview
document.getElementById('btn-preview').addEventListener('click', function() {
    const modeloId = document.getElementById('select-modelo').value;
    if (!modeloId) {
        alert('Selecione um modelo primeiro');
        return;
    }
    
    const container = document.getElementById('preview-container');
    const option = document.querySelector('#select-modelo option:checked');
    const largura = option.dataset.largura;
    const altura = option.dataset.altura;
    const colunas = inferirColunasModelo(option);
    const posicaoInicial = parseInt(document.getElementById('select-posicao-inicial')?.value || '1', 10) || 1;
    const nomesTabelas = obterTabelasPrecoSelecionadas()
        .map(select => select.selectedOptions[0]?.textContent || '')
        .filter(nome => nome && !nome.startsWith('--'));
    const precosExemplo = ['R$ 80,00', 'R$ 100,00', 'R$ 76,00', 'R$ 74,90'];
    const produtoPreview = produtosSelecionados.length > 0 ? produtosSelecionados[0] : null;
    const nomePreview = produtoPreview?.nome || 'Produto de Exemplo';
    const cotaPreview = String(produtoPreview?.cota || '').trim();
    const blocoCota = cotaPreview
        ? `<div class="mt-1"><span class="badge text-bg-secondary">Cota: ${escaparHtml(cotaPreview)}</span></div>`
        : '';
    const blocoTabelas = nomesTabelas.length
        ? nomesTabelas.map((nome, idx) => `<div><small>${nome}: <strong>${precosExemplo[idx] || 'R$ 0,00'}</strong></small></div>`).join('')
        : '<small class="text-muted">Sem tabelas de preço extras</small>';
    const legendaPosicao = colunas > 1
        ? `<div class="mt-2"><small class="text-muted">Início da impressão: posição <strong>${posicaoInicial}</strong> de ${colunas}</small></div>`
        : '';
    const blocoLote = obterTipoModeloSelecionado() === 'lote' && loteSelecionadoAtual
        ? `<div class="mt-2"><small>Lote: <strong>${escaparHtml(loteSelecionadoAtual.numero || '')}</strong></small><br><small>Validade: <strong>${escaparHtml(loteSelecionadoAtual.data_validade || '')}</strong></small></div>`
        : '';
    const blocoExpedicao = obterTipoModeloSelecionado() === 'expedicao'
        ? `<div class="mt-2"><small>Pedido: <strong>${escaparHtml(document.getElementById('numero-pedido')?.value || expedicaoPreselecionada?.numero_pedido || '')}</strong></small><br><small>Destinatário: <strong>${escaparHtml(document.getElementById('destinatario')?.value || expedicaoPreselecionada?.destinatario || '')}</strong></small><br><small>${escaparHtml(document.getElementById('resumo-frete')?.value || expedicaoPreselecionada?.resumo_frete || '')}</small></div>`
        : '';
    
    // Criar preview simples
    container.innerHTML = `
        <div style="
            width: ${largura * 2}px;
            height: ${altura * 2}px;
            border: 1px solid #000;
            background: #fff;
            margin: 10px auto;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        ">
            <div class="text-center">
                <small>${option.textContent}</small>
                <br>
                <strong>${escaparHtml(nomePreview)}</strong>
                ${blocoCota}
                ${blocoLote}
                ${blocoExpedicao}
                <div class="mt-2">${blocoTabelas}</div>
                ${legendaPosicao}
            </div>
        </div>
    `;
});

// Inicializar com modelo da URL
const urlParams = new URLSearchParams(window.location.search);
const modeloParam = urlParams.get('modelo');
const formatoParam = urlParams.get('formato');
const tabela1Param = urlParams.get('tabela1');
const tabela2Param = urlParams.get('tabela2');
if (modeloParam) {
    document.getElementById('select-modelo').value = modeloParam;
    document.getElementById('select-modelo').dispatchEvent(new Event('change'));
}
if (formatoParam) {
    const selectFormato = document.getElementById('select-formato');
    if (selectFormato) {
        selectFormato.value = formatoParam;
    }
}

atualizarOpcaoPosicaoInicial();

const selectsTabela = document.querySelectorAll('.select-tabela-preco');
if (selectsTabela.length) {
    if (tabela1Param && selectsTabela[0]) {
        selectsTabela[0].value = tabela1Param;
    }
    if (tabela2Param && selectsTabela[1]) {
        selectsTabela[1].value = tabela2Param;
    }
}

const etiquetasImportacaoRaw = sessionStorage.getItem('importadorEtiquetasPendentes');
if (etiquetasImportacaoRaw) {
    try {
        const etiquetasImportacao = JSON.parse(etiquetasImportacaoRaw);
        if (etiquetasImportacao?.modelo_id && !modeloParam) {
            document.getElementById('select-modelo').value = String(etiquetasImportacao.modelo_id);
            document.getElementById('select-modelo').dispatchEvent(new Event('change'));
        }

        if (etiquetasImportacao?.tabela_preco_id && selectsTabela[0] && !tabela1Param) {
            selectsTabela[0].value = String(etiquetasImportacao.tabela_preco_id);
        }

        if (Array.isArray(etiquetasImportacao?.produtos)) {
            etiquetasImportacao.produtos.forEach(produto => {
                if (!produto?.id) return;
                adicionarProdutoPreselecionado({
                    id: produto.id,
                    codigo: produto.codigo || '',
                    nome: produto.nome || 'Produto importado',
                    cota: produto.cota || '',
                    gtin: produto.gtin || '',
                    preco: parseFloat(produto.preco || 0),
                    quantidade: parseInt(produto.quantidade || 1, 10) || 1
                });
            });
            atualizarTabela();
        }
    } catch (error) {
        console.error('Erro ao recuperar etiquetas pendentes da importação:', error);
    } finally {
        sessionStorage.removeItem('importadorEtiquetasPendentes');
    }
}

if (produtoPreselecionado?.id) {
    adicionarProdutoPreselecionado(produtoPreselecionado);
}

if (Array.isArray(produtosPreselecionados) && produtosPreselecionados.length) {
    produtosPreselecionados.forEach(adicionarProdutoPreselecionado);
}

if (produtoPreselecionado?.id || (Array.isArray(produtosPreselecionados) && produtosPreselecionados.length)) {
    atualizarTabela();
}

if (lotePreselecionado) {
    const inputFabricacao = document.getElementById('data-fabricacao');
    const inputValidade = document.getElementById('data-validade');

    if (inputFabricacao) inputFabricacao.value = lotePreselecionado.data_fabricacao || '';
    if (inputValidade) inputValidade.value = lotePreselecionado.data_validade || '';
}

preencherExpedicaoPreselecionada();

sincronizarContextoLote();
</script>
{% endblock %}