{% extends "base.html" %}

{% block title %}Atualização Rápida de Produto - CapeSystem{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url_for('index') }}">Início</a></li>
                    <li class="breadcrumb-item"><a href="{{ url_for('produtos') }}">Produtos</a></li>
                    <li class="breadcrumb-item active">Atualização Rápida</li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-12">
            <h2><i class="bi bi-lightning-charge-fill"></i> Atualização Rápida de Produto</h2>
            <p class="text-muted">
                Atualize preço, custo e/ou estoque rapidamente usando leitor de código de barras.
            </p>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
            <!-- Card de Opções -->
            <div class="card shadow-sm mb-3">
                <div class="card-header bg-secondary text-white">
                    <h6 class="mb-0"><i class="bi bi-toggles"></i> Campos a Atualizar</h6>
                </div>
                <div class="card-body py-2">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="flagPreco" checked>
                                <label class="form-check-label fw-bold text-success" for="flagPreco">
                                    <i class="bi bi-currency-dollar"></i> Preço de Venda
                                </label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="flagCusto">
                                <label class="form-check-label fw-bold text-warning" for="flagCusto">
                                    <i class="bi bi-tag"></i> Custo
                                </label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="flagEstoque">
                                <label class="form-check-label fw-bold text-info" for="flagEstoque">
                                    <i class="bi bi-box-seam"></i> Estoque
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="bi bi-upc-scan"></i> Consultar Produto</h5>
                </div>
                <div class="card-body">
                    <!-- Campo de Código de Barras -->
                    <div class="mb-4">
                        <label for="codigo_barras" class="form-label fw-bold">Código de Barras</label>
                        <div class="input-group input-group-lg">
                            <span class="input-group-text"><i class="bi bi-upc"></i></span>
                            <input type="text" 
                                   class="form-control form-control-lg" 
                                   id="codigo_barras" 
                                   placeholder="Leia ou digite o código de barras..."
                                   autofocus
                                   autocomplete="off">
                            <button class="btn btn-primary" type="button" onclick="buscarProduto()">
                                <i class="bi bi-search"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Área de Resultado (inicialmente oculta) -->
                    <div id="resultadoProduto" style="display: none;">
                        <hr>
                        
                        <!-- Dados do Produto -->
                        <div class="mb-3">
                            <label class="form-label text-muted small">Produto</label>
                            <div class="form-control-plaintext fw-bold fs-5" id="nomeProduto">-</div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-4">
                                <label class="form-label text-muted small">Código</label>
                                <div class="form-control-plaintext" id="codigoProduto">-</div>
                            </div>
                            <div class="col-4">
                                <label class="form-label text-muted small">Unidade</label>
                                <div class="form-control-plaintext" id="unidadeProduto">-</div>
                            </div>
                            <div class="col-4">
                                <label class="form-label text-muted small">Estoque Atual</label>
                                <div class="form-control-plaintext fw-bold text-info" id="estoqueAtualDisplay">0</div>
                            </div>
                        </div>

                        <!-- Valores Atuais -->
                        <div class="row mb-4">
                            <div class="col-6">
                                <label class="form-label text-muted small">Preço Atual (Tabela 1)</label>
                                <div class="form-control-plaintext fs-5 text-primary fw-bold" id="precoAtual">R$ 0,00</div>
                            </div>
                            <div class="col-6">
                                <label class="form-label text-muted small">Custo Atual</label>
                                <div class="form-control-plaintext fs-5 text-warning fw-bold" id="custoAtual">R$ 0,00</div>
                            </div>
                        </div>

                        <hr>

                        <!-- Campos de Atualização -->
                        <div class="row">
                            <!-- Novo Preço -->
                            <div class="col-md-4 mb-3" id="campoPreco">
                                <label for="novo_preco" class="form-label fw-bold text-success">
                                    <i class="bi bi-currency-dollar"></i> Novo Preço
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">R$</span>
                                    <input type="text" 
                                           class="form-control text-end campo-valor" 
                                           id="novo_preco" 
                                           placeholder="0,00"
                                           autocomplete="off">
                                </div>
                            </div>

                            <!-- Novo Custo -->
                            <div class="col-md-4 mb-3" id="campoCusto" style="display: none;">
                                <label for="novo_custo" class="form-label fw-bold text-warning">
                                    <i class="bi bi-tag"></i> Novo Custo
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">R$</span>
                                    <input type="text" 
                                           class="form-control text-end campo-valor" 
                                           id="novo_custo" 
                                           placeholder="0,00"
                                           autocomplete="off">
                                </div>
                            </div>

                            <!-- Novo Estoque -->
                            <div class="col-md-4 mb-3" id="campoEstoque" style="display: none;">
                                <label for="novo_estoque" class="form-label fw-bold text-info">
                                    <i class="bi bi-box-seam"></i> Qtd Estoque
                                </label>
                                <div class="input-group">
                                    <input type="number" 
                                           class="form-control text-end" 
                                           id="novo_estoque" 
                                           placeholder="0"
                                           step="0.001"
                                           autocomplete="off">
                                    <span class="input-group-text" id="unidadeEstoque">UN</span>
                                </div>
                                <small class="text-muted">
                                    <i class="bi bi-info-circle"></i> Define estoque absoluto (não soma)
                                </small>
                            </div>
                        </div>

                        <!-- Botões -->
                        <div class="d-grid gap-2 mt-3">
                            <button type="button" class="btn btn-success btn-lg" onclick="salvarAlteracoes()" id="btnSalvar">
                                <i class="bi bi-check-lg"></i> Confirmar Alterações
                            </button>
                            <button type="button" class="btn btn-outline-secondary" onclick="limparTela()">
                                <i class="bi bi-x-lg"></i> Limpar / Novo Produto
                            </button>
                        </div>

                        <input type="hidden" id="produto_id" value="">
                        <input type="hidden" id="codigo_barras_atual" value="">
                        <input type="hidden" id="estoque_atual" value="">
                    </div>

                    <!-- Mensagem de Erro -->
                    <div id="mensagemErro" class="alert alert-warning d-none mt-3" role="alert">
                        <i class="bi bi-exclamation-triangle-fill"></i>
                        <span id="textoErro"></span>
                    </div>

                    <!-- Mensagem de Sucesso -->
                    <div id="mensagemSucesso" class="alert alert-success d-none mt-3" role="alert">
                        <i class="bi bi-check-circle-fill"></i>
                        <span id="textoSucesso"></span>
                    </div>
                </div>
            </div>

            <!-- Dicas de Uso -->
            <div class="card mt-4 border-info">
                <div class="card-header bg-info bg-opacity-10 text-info">
                    <i class="bi bi-lightbulb"></i> Dicas de Uso
                </div>
                <div class="card-body small">
                    <ul class="mb-0">
                        <li>Use os <strong>switches</strong> acima para escolher quais campos atualizar</li>
                        <li>Use <kbd>Enter</kbd> após ler/digitar o código de barras para buscar</li>
                        <li>Use <kbd>Tab</kbd> para navegar entre os campos</li>
                        <li><strong>Preço:</strong> Atualiza a Tabela 1 (Dinheiro) e valor_venda do produto</li>
                        <li><strong>Custo:</strong> Atualiza o custo unitário do produto</li>
                        <li><strong>Estoque:</strong> Define o estoque absoluto (substitui, não soma)</li>
                        <li>Todas as alterações são registradas no log de auditoria</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Foco no campo de código de barras
    document.getElementById('codigo_barras').focus();
    
    // Controle de visibilidade dos campos
    document.getElementById('flagPreco').addEventListener('change', atualizarCamposVisiveis);
    document.getElementById('flagCusto').addEventListener('change', atualizarCamposVisiveis);
    document.getElementById('flagEstoque').addEventListener('change', atualizarCamposVisiveis);
    
    atualizarCamposVisiveis();
    
    // Enter no código de barras busca produto
    document.getElementById('codigo_barras').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            buscarProduto();
        }
    });
    
    // Máscara de moeda nos campos de valor
    document.querySelectorAll('.campo-valor').forEach(function(campo) {
        campo.addEventListener('input', function(e) {
            let value = e.target.value.replace(/\D/g, '');
            value = (parseInt(value) / 100).toFixed(2);
            value = value.replace('.', ',');
            value = value.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
            if (value !== 'NaN') {
                e.target.value = value;
            } else {
                e.target.value = '';
            }
        });
        
        // Enter no campo vai pro próximo ou salva
        campo.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                const proximoCampo = encontrarProximoCampoVisivel(e.target);
                if (proximoCampo) {
                    proximoCampo.focus();
                } else {
                    salvarAlteracoes();
                }
            }
        });
    });
    
    // Enter no estoque salva
    document.getElementById('novo_estoque').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            salvarAlteracoes();
        }
    });
});

function atualizarCamposVisiveis() {
    const flagPreco = document.getElementById('flagPreco').checked;
    const flagCusto = document.getElementById('flagCusto').checked;
    const flagEstoque = document.getElementById('flagEstoque').checked;
    
    document.getElementById('campoPreco').style.display = flagPreco ? 'block' : 'none';
    document.getElementById('campoCusto').style.display = flagCusto ? 'block' : 'none';
    document.getElementById('campoEstoque').style.display = flagEstoque ? 'block' : 'none';
    
    // Ajustar colunas dinamicamente
    const visiveisCount = [flagPreco, flagCusto, flagEstoque].filter(Boolean).length;
    const colClass = visiveisCount === 1 ? 'col-md-6' : visiveisCount === 2 ? 'col-md-4' : 'col-md-4';
    
    ['campoPreco', 'campoCusto', 'campoEstoque'].forEach(id => {
        const el = document.getElementById(id);
        el.className = el.className.replace(/col-md-\d+/g, '').trim() + ' ' + colClass + ' mb-3';
    });
}

function encontrarProximoCampoVisivel(atual) {
    const campos = ['novo_preco', 'novo_custo', 'novo_estoque'];
    const flags = ['flagPreco', 'flagCusto', 'flagEstoque'];
    
    const atualIndex = campos.indexOf(atual.id);
    
    for (let i = atualIndex + 1; i < campos.length; i++) {
        if (document.getElementById(flags[i]).checked) {
            return document.getElementById(campos[i]);
        }
    }
    return null;
}

function buscarProduto() {
    const codigo = document.getElementById('codigo_barras').value.trim();
    
    if (!codigo) {
        mostrarErro('Digite ou leia o código de barras do produto.');
        document.getElementById('codigo_barras').focus();
        return;
    }
    
    esconderMensagens();
    
    fetch(`/produtos/atualizar-preco-rapido/consultar?codigo_barras=${encodeURIComponent(codigo)}`)
        .then(response => {
            // Verificar se sessão expirou (redirecionamento para login)
            if (response.redirected || response.url.includes('/login')) {
                throw new Error('SESSAO_EXPIRADA');
            }
            // Verificar se é HTML (página de login) ao invés de JSON
            const contentType = response.headers.get('content-type');
            if (!contentType || !contentType.includes('application/json')) {
                throw new Error('SESSAO_EXPIRADA');
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                exibirProduto(data.produto);
            } else {
                mostrarErro(data.message || 'Produto não encontrado.');
                document.getElementById('resultadoProduto').style.display = 'none';
                setTimeout(() => {
                    limparTela();
                }, 2000);
            }
        })
        .catch(error => {
            if (error.message === 'SESSAO_EXPIRADA') {
                mostrarErro('Sua sessão expirou! Faça login novamente. (F5 para atualizar)');
                setTimeout(() => {
                    window.location.href = '/login';
                }, 3000);
            } else {
                mostrarErro('Erro ao consultar produto. Tente novamente.');
                console.error('Erro:', error);
            }
        });
}

function exibirProduto(produto) {
    document.getElementById('nomeProduto').textContent = produto.nome;
    document.getElementById('codigoProduto').textContent = produto.codigo_produto || produto.referencia || produto.codigo_barras || 'Sem código';
    document.getElementById('unidadeProduto').textContent = produto.unidade;
    document.getElementById('precoAtual').textContent = formatarMoeda(produto.preco_atual);
    document.getElementById('custoAtual').textContent = formatarMoeda(produto.custo_atual || 0);
    document.getElementById('estoqueAtualDisplay').textContent = formatarQuantidade(produto.estoque_atual || 0) + ' ' + produto.unidade;
    document.getElementById('unidadeEstoque').textContent = produto.unidade;
    
    document.getElementById('produto_id').value = produto.id;
    document.getElementById('codigo_barras_atual').value = produto.codigo_barras || document.getElementById('codigo_barras').value;
    document.getElementById('estoque_atual').value = produto.estoque_atual || 0;
    
    document.getElementById('resultadoProduto').style.display = 'block';
    document.getElementById('novo_preco').value = '';
    document.getElementById('novo_custo').value = '';
    document.getElementById('novo_estoque').value = '';
    
    // Foco no primeiro campo visível
    if (document.getElementById('flagPreco').checked) {
        document.getElementById('novo_preco').focus();
    } else if (document.getElementById('flagCusto').checked) {
        document.getElementById('novo_custo').focus();
    } else if (document.getElementById('flagEstoque').checked) {
        document.getElementById('novo_estoque').focus();
    }
}

function salvarAlteracoes() {
    const produtoId = document.getElementById('produto_id').value;
    const codigoBarras = document.getElementById('codigo_barras_atual').value;
    
    if (!produtoId) {
        mostrarErro('Nenhum produto selecionado.');
        return;
    }
    
    const flagPreco = document.getElementById('flagPreco').checked;
    const flagCusto = document.getElementById('flagCusto').checked;
    const flagEstoque = document.getElementById('flagEstoque').checked;
    
    // Validar se pelo menos um campo está habilitado
    if (!flagPreco && !flagCusto && !flagEstoque) {
        mostrarErro('Selecione pelo menos um campo para atualizar.');
        return;
    }
    
    // Coletar dados
    const dados = {
        produto_id: produtoId,
        codigo_barras: codigoBarras,
        atualizar_preco: flagPreco,
        atualizar_custo: flagCusto,
        atualizar_estoque: flagEstoque
    };
    
    if (flagPreco) {
        const novoPreco = document.getElementById('novo_preco').value;
        if (!novoPreco) {
            mostrarErro('Informe o novo preço.');
            document.getElementById('novo_preco').focus();
            return;
        }
        dados.novo_preco = novoPreco;
    }
    
    if (flagCusto) {
        const novoCusto = document.getElementById('novo_custo').value;
        if (!novoCusto) {
            mostrarErro('Informe o novo custo.');
            document.getElementById('novo_custo').focus();
            return;
        }
        dados.novo_custo = novoCusto;
    }
    
    if (flagEstoque) {
        const novoEstoque = document.getElementById('novo_estoque').value;
        if (novoEstoque === '' || novoEstoque === null) {
            mostrarErro('Informe a quantidade de estoque.');
            document.getElementById('novo_estoque').focus();
            return;
        }
        dados.novo_estoque = parseFloat(novoEstoque);
    }
    
    const btnSalvar = document.getElementById('btnSalvar');
    btnSalvar.disabled = true;
    btnSalvar.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Salvando...';
    
    fetch('/produtos/atualizar-preco-rapido/salvar', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(dados)
    })
    .then(response => response.json())
    .then(data => {
        btnSalvar.disabled = false;
        btnSalvar.innerHTML = '<i class="bi bi-check-lg"></i> Confirmar Alterações';
        
        if (data.success) {
            mostrarSucesso(data.message);
            setTimeout(() => {
                limparTela();
            }, 1500);
        } else {
            mostrarErro(data.message || 'Erro ao salvar.');
        }
    })
    .catch(error => {
        btnSalvar.disabled = false;
        btnSalvar.innerHTML = '<i class="bi bi-check-lg"></i> Confirmar Alterações';
        mostrarErro('Erro ao salvar. Tente novamente.');
        console.error('Erro:', error);
    });
}

function limparTela() {
    document.getElementById('codigo_barras').value = '';
    document.getElementById('novo_preco').value = '';
    document.getElementById('novo_custo').value = '';
    document.getElementById('novo_estoque').value = '';
    document.getElementById('produto_id').value = '';
    document.getElementById('codigo_barras_atual').value = '';
    document.getElementById('estoque_atual').value = '';
    document.getElementById('resultadoProduto').style.display = 'none';
    esconderMensagens();
    document.getElementById('codigo_barras').focus();
}

function formatarMoeda(valor) {
    return new Intl.NumberFormat('pt-BR', {
        style: 'currency',
        currency: 'BRL'
    }).format(valor || 0);
}

function formatarQuantidade(valor) {
    return new Intl.NumberFormat('pt-BR', {
        minimumFractionDigits: 0,
        maximumFractionDigits: 3
    }).format(valor || 0);
}

function mostrarErro(mensagem) {
    esconderMensagens();
    document.getElementById('textoErro').textContent = mensagem;
    document.getElementById('mensagemErro').classList.remove('d-none');
}

function mostrarSucesso(mensagem) {
    esconderMensagens();
    document.getElementById('textoSucesso').textContent = mensagem;
    document.getElementById('mensagemSucesso').classList.remove('d-none');
}

function esconderMensagens() {
    document.getElementById('mensagemErro').classList.add('d-none');
    document.getElementById('mensagemSucesso').classList.add('d-none');
}
</script>
{% endblock %}