{% extends "base.html" %}

{% block title %}Imprimir Etiqueta - {{ produto.nome }}{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2><i class="bi bi-printer me-2"></i>Imprimir Etiqueta</h2>
                <a href="{{ url_for('editar_produto', id=produto.id) }}" class="btn btn-secondary">
                    <i class="bi bi-arrow-left me-1"></i>Voltar ao Produto
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Informações do Produto -->
        <div class="col-lg-4">
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="bi bi-box me-2"></i>Produto</h5>
                </div>
                <div class="card-body">
                    <div class="text-center mb-3">
                        {% if produto.codigo_barras %}
                        <div class="mb-2" id="barcodePreview">
                            <svg id="barcodeSvg"></svg>
                        </div>
                        <small class="text-muted">{{ produto.codigo_barras }}</small>
                        {% else %}
                        <div class="alert alert-warning mb-0">
                            <i class="bi bi-exclamation-triangle me-1"></i>
                            Produto sem código de barras
                        </div>
                        {% endif %}
                    </div>
                    
                    <hr>
                    
                    <table class="table table-sm table-borderless mb-0">
                        <tr>
                            <td class="text-muted">Código:</td>
                            <td><strong>#{{ produto.id }}</strong></td>
                        </tr>
                        <tr>
                            <td class="text-muted">Nome:</td>
                            <td><strong>{{ produto.nome }}</strong></td>
                        </tr>
                        <tr>
                            <td class="text-muted">Cota:</td>
                            <td>{{ produto.cota or '-' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Preço:</td>
                            <td><strong class="text-success">R$ {{ '%.2f'|format(produto.preco_venda or 0) }}</strong></td>
                        </tr>
                        <tr>
                            <td class="text-muted">Unidade:</td>
                            <td>{{ produto.unidade_medida or 'UN' }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <!-- Opções de Impressão -->
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0"><i class="bi bi-gear me-2"></i>Opções de Impressão</h5>
                </div>
                <div class="card-body">
                    <form id="formEtiqueta">
                        <!-- Modelo de Etiqueta -->
                        <div class="mb-4">
                            <label class="form-label fw-bold">
                                <i class="bi bi-grid-3x3-gap me-1"></i>Modelo de Etiqueta
                            </label>
                            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
                                {% for modelo in modelos %}
                                <div class="col">
                                    <div class="form-check card h-100">
                                        <label class="card-body d-flex align-items-center" style="cursor: pointer;">
                                            <input class="form-check-input me-3" type="radio" 
                                                       name="modelo" value="{{ modelo.id }}"
                                                  data-formato="{{ modelo.formato or 'pdf' }}"
                                                  data-papel="{{ modelo.papel or 'a4' }}"
                                                  data-largura="{{ modelo.largura or '' }}"
                                                  data-altura="{{ modelo.altura or '' }}"
                                                   {% if loop.first %}checked{% endif %}>
                                            <div>
                                                <strong>{{ modelo.nome }}</strong>
                                                <br>
                                                    {% if modelo.tamanho %}
                                                    <small class="text-muted">{{ modelo.tamanho }}</small>
                                                    {% else %}
                                                    <small class="text-muted">Modelo padrão</small>
                                                    {% endif %}
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>

                            {% if usa_modelos_custom %}
                            <div class="alert alert-info mt-3 mb-0">
                                <i class="bi bi-info-circle me-1"></i>
                                Usando modelos do editor de etiquetas. A visualização sempre será em PDF.
                            </div>
                            {% endif %}

                        <!-- Quantidade -->
                        <div class="row mb-4">
                            <div class="col-md-4">
                                <label class="form-label fw-bold">
                                    <i class="bi bi-hash me-1"></i>Quantidade de Etiquetas
                                </label>
                                <div class="input-group">
                                    <button type="button" class="btn btn-outline-secondary" onclick="alterarQtd(-1)">
                                        <i class="bi bi-dash"></i>
                                    </button>
                                    <input type="number" class="form-control text-center" 
                                           id="quantidade" name="quantidade" value="1" min="1" max="500">
                                    <button type="button" class="btn btn-outline-secondary" onclick="alterarQtd(1)">
                                        <i class="bi bi-plus"></i>
                                    </button>
                                </div>
                            </div>
                            {% if tabelas_preco %}
                            <div class="col-md-4">
                                <label class="form-label fw-bold">
                                    <i class="bi bi-tags me-1"></i>Tabela 1
                                </label>
                                <select class="form-select" id="tabela1" name="tabela1">
                                    <option value="">Preço padrão</option>
                                    {% for tabela in tabelas_preco %}
                                    <option value="{{ tabela.id }}">{{ tabela.nome }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">
                                    <i class="bi bi-tags me-1"></i>Tabela 2
                                </label>
                                <select class="form-select" id="tabela2" name="tabela2">
                                    <option value="">Não usar</option>
                                    {% for tabela in tabelas_preco %}
                                    <option value="{{ tabela.id }}">{{ tabela.nome }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            {% endif %}
                            {% if not usa_modelos_custom %}
                            <div class="col-md-4">
                                <label class="form-label fw-bold">
                                    <i class="bi bi-arrows-angle-contract me-1"></i>Pular Posições
                                </label>
                                <input type="number" class="form-control" 
                                       id="pular" name="pular" value="0" min="0" max="50"
                                       placeholder="Etiquetas já usadas na folha">
                                <small class="text-muted">Posições a pular no início</small>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold">
                                    <i class="bi bi-text-paragraph me-1"></i>Linhas do Nome
                                </label>
                                <select class="form-select" id="linhasNome" name="linhas_nome">
                                    <option value="1">1 linha</option>
                                    <option value="2" selected>2 linhas</option>
                                    <option value="3">3 linhas</option>
                                </select>
                            </div>
                            {% endif %}
                        </div>

                        <!-- Opções de Exibição -->
                        {% if not usa_modelos_custom %}
                        <div class="mb-4">
                            <label class="form-label fw-bold">
                                <i class="bi bi-eye me-1"></i>Exibir na Etiqueta
                            </label>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="exibirPreco" name="exibir_preco" checked>
                                        <label class="form-check-label" for="exibirPreco">Preço</label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="exibirCodigo" name="exibir_codigo" checked>
                                        <label class="form-check-label" for="exibirCodigo">Código de Barras</label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="exibirUnidade" name="exibir_unidade">
                                        <label class="form-check-label" for="exibirUnidade">Unidade</label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="exibirLogo" name="exibir_logo">
                                        <label class="form-check-label" for="exibirLogo">Logo da Empresa</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endif %}

                        <!-- Botões de Ação -->
                        <div class="d-flex justify-content-between pt-3 border-top">
                            <div>
                                <button type="button" class="btn btn-outline-secondary" onclick="visualizarEtiqueta()">
                                    <i class="bi bi-eye me-1"></i>Visualizar
                                </button>
                            </div>
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-primary btn-lg" onclick="imprimirEtiqueta()">
                                    <i class="bi bi-printer me-1"></i>Imprimir
                                </button>
                                <button type="button" class="btn btn-success btn-lg" onclick="baixarPDF()">
                                    <i class="bi bi-download me-1"></i>Baixar PDF
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Biblioteca JsBarcode para preview -->
<script src="{{ url_for('static', filename='vendor/jsbarcode/JsBarcode.all.min.js') }}"></script>

<script>
function resolverEspecificacaoBarcodeProduto(valor) {
    const valorBruto = String(valor || '').trim();
    if (!valorBruto) return null;

    const valorLimpo = valorBruto.replace(/[^0-9A-Za-z\-\./\+\ %$]/g, '');
    if (!valorLimpo) return null;

    const apenasDigitos = valorBruto.replace(/\D/g, '');
    if (valorLimpo === apenasDigitos) {
        if (apenasDigitos.length === 14) {
            return { format: 'ITF14', value: apenasDigitos, displayValue: true };
        }
        if (apenasDigitos.length === 13) {
            return { format: 'EAN13', value: apenasDigitos, displayValue: true };
        }
        if (apenasDigitos.length === 12) {
            return { format: 'UPC', value: apenasDigitos, displayValue: true };
        }
        if (apenasDigitos.length === 8) {
            return { format: 'EAN8', value: apenasDigitos, displayValue: true };
        }
    }

    return { format: 'CODE128', value: valorLimpo, displayValue: false };
}

// Gerar preview do código de barras
document.addEventListener('DOMContentLoaded', function() {
    {% if produto.codigo_barras %}
    try {
        const spec = resolverEspecificacaoBarcodeProduto("{{ produto.codigo_barras }}");
        if (!spec) {
            throw new Error('Código vazio');
        }

        JsBarcode("#barcodeSvg", spec.value, {
            format: spec.format,
            width: spec.format === 'ITF14' ? 1.6 : 2,
            height: spec.displayValue ? 46 : 50,
            displayValue: spec.displayValue,
            fontSize: 12,
            margin: 0,
            textMargin: spec.displayValue ? 2 : 0
        });
    } catch(e) {
        // Tentar formato genérico se EAN13 falhar
        try {
            JsBarcode("#barcodeSvg", "{{ produto.codigo_barras }}", {
                format: "CODE128",
                width: 2,
                height: 50,
                displayValue: false
            });
        } catch(e2) {
            document.getElementById('barcodePreview').innerHTML = 
                '<div class="text-muted small">Código inválido para preview</div>';
        }
    }
    {% endif %}
});

function alterarQtd(delta) {
    const input = document.getElementById('quantidade');
    let valor = parseInt(input.value) + delta;
    if (valor < 1) valor = 1;
    if (valor > 500) valor = 500;
    input.value = valor;
}

const usaModelosCustom = {{ 'true' if usa_modelos_custom else 'false' }};

function deveUsarHtmlParaImpressao(modeloEl) {
    if (!usaModelosCustom || !modeloEl) {
        return false;
    }

    const papel = String(modeloEl.dataset.papel || '').toLowerCase();
    const textoModelo = String(
        modeloEl.closest('label')?.textContent || ''
    ).toLowerCase();

    return papel.startsWith('bobina')
        || textoModelo.includes('bobina')
        || textoModelo.includes('térmica')
        || textoModelo.includes('termica')
        || textoModelo.includes('gôndola')
        || textoModelo.includes('gondola');
}

function validarCompatibilidadeModeloSelecionado(modeloEl) {
    if (!modeloEl) {
        return { ok: false, mensagem: 'Selecione um modelo de etiqueta.' };
    }

    const papel = String(modeloEl.dataset.papel || '').toLowerCase();
    const largura = parseFloat(modeloEl.dataset.largura || '0');
    const altura = parseFloat(modeloEl.dataset.altura || '0');
    const limites = {
        bobina60: 60,
        bobina80: 80,
        bobina100: 100
    };

    if (papel in limites && largura > limites[papel]) {
        return {
            ok: false,
            mensagem: `Este modelo mede ${largura}x${altura} mm, mas o papel ${papel.replace('bobina', 'bobina ')} suporta no máximo ${limites[papel]} mm de largura. Edite o modelo antes de imprimir.`
        };
    }

    return { ok: true, mensagem: '' };
}

function getParams(acao) {
    const modeloEl = document.querySelector('input[name="modelo"]:checked');
    const quantidade = document.getElementById('quantidade').value;
    const tabela1 = document.getElementById('tabela1')?.value || '';
    const tabela2 = document.getElementById('tabela2')?.value || '';

    if (usaModelosCustom) {
        const modeloId = modeloEl.value;
        let formatoBase = modeloEl.dataset.formato || 'pdf';

        if (acao === 'imprimir' && deveUsarHtmlParaImpressao(modeloEl)) {
            formatoBase = 'html';
        }

        let params = `modelo_id=${modeloId}&quantidade=${quantidade}&formato=${formatoBase}`;
        if (tabela1) {
            params += `&tabela1=${encodeURIComponent(tabela1)}`;
        }
        if (tabela2) {
            params += `&tabela2=${encodeURIComponent(tabela2)}`;
        }
        if (acao === 'download') {
            params += '&download=1';
        }
        return params;
    }

    const modelo = modeloEl.value;
    const pular = document.getElementById('pular').value;
    const linhasNome = document.getElementById('linhasNome').value;
    const exibirPreco = document.getElementById('exibirPreco').checked;
    const exibirCodigo = document.getElementById('exibirCodigo').checked;
    const exibirUnidade = document.getElementById('exibirUnidade').checked;
    const exibirLogo = document.getElementById('exibirLogo').checked;

    return `formato=${modelo}&quantidade=${quantidade}&pular=${pular}&linhas_nome=${linhasNome}` +
           `&exibir_preco=${exibirPreco}&exibir_codigo=${exibirCodigo}` +
            `&exibir_unidade=${exibirUnidade}&exibir_logo=${exibirLogo}` +
            `&tabela1=${encodeURIComponent(tabela1)}&tabela2=${encodeURIComponent(tabela2)}`;
}

function visualizarEtiqueta() {
    const modeloEl = document.querySelector('input[name="modelo"]:checked');
    const validacao = validarCompatibilidadeModeloSelecionado(modeloEl);
    if (!validacao.ok) {
        alert(validacao.mensagem);
        return;
    }

    const url = `/etiquetas/produto/{{ produto.id }}?${getParams('visualizar')}`;
    window.open(url, '_blank');
}

function imprimirEtiqueta() {
    const modeloEl = document.querySelector('input[name="modelo"]:checked');
    const validacao = validarCompatibilidadeModeloSelecionado(modeloEl);
    if (!validacao.ok) {
        alert(validacao.mensagem);
        return;
    }

    let url = `/etiquetas/produto/{{ produto.id }}?${getParams('imprimir')}`;
    if (usaModelosCustom && deveUsarHtmlParaImpressao(modeloEl)) {
        url += '&autoprint=1';
    }

    const win = window.open(url, '_blank');
    if (!win) {
        alert('O navegador bloqueou a janela de impressão. Libere pop-ups para continuar.');
        return;
    }

    if (!(usaModelosCustom && deveUsarHtmlParaImpressao(modeloEl))) {
        win.onload = function() {
            setTimeout(() => {
                try {
                    win.focus();
                    win.print();
                } catch (e) {
                    console.error('Erro ao iniciar impressão da etiqueta:', e);
                }
            }, 350);
        };
    }
}

function baixarPDF() {
    const modeloEl = document.querySelector('input[name="modelo"]:checked');
    const validacao = validarCompatibilidadeModeloSelecionado(modeloEl);
    if (!validacao.ok) {
        alert(validacao.mensagem);
        return;
    }

    const url = `/etiquetas/produto/{{ produto.id }}?${getParams('download')}`;
    window.location.href = url;
}
</script>

<style>
.form-check.card {
    border: 2px solid #dee2e6;
    transition: all 0.2s;
}
.form-check.card:hover {
    border-color: #0d6efd;
    background-color: #f8f9fa;
}
.form-check.card:has(input:checked) {
    border-color: #0d6efd;
    background-color: #e7f1ff;
}
</style>
{% endblock %}