{% extends "base.html" %}

{% block title %}Controle de Estoque{% endblock %}

{% block extra_css %}
<style>
    .stock-card {
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .stock-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .status-badge {
        padding: 0.25rem 0.75rem;
        border-radius: 12px;
        font-size: 0.85rem;
        font-weight: 600;
    }
    .status-ok { background-color: #d4edda; color: #155724; }
    .status-baixo { background-color: #fff3cd; color: #856404; }
    .status-critico { background-color: #f8d7da; color: #721c24; }
    .status-negativo { background-color: #e7d9ff; color: #4a148c; }
    
    .kpi-card {
        border-left: 4px solid;
        transition: all 0.3s;
    }
    .kpi-card:hover {
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    .kpi-card.primary { border-left-color: #0d6efd; }
    .kpi-card.warning { border-left-color: #ffc107; }
    .kpi-card.danger { border-left-color: #dc3545; }
    .kpi-card.success { border-left-color: #198754; }
    
    .action-btn-group .btn {
        padding: 0.25rem 0.75rem;
        font-size: 0.875rem;
        margin: 0 0.125rem;
    }
    
    .filter-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }
    .filter-card .form-label {
        color: white;
        font-weight: 500;
    }
    .filter-card .form-control,
    .filter-card .form-select {
        background: rgba(255,255,255,0.9);
    }
    
    .table-hover tbody tr:hover {
        background-color: #f8f9fa;
        cursor: pointer;
    }
    
    .empty-state {
        padding: 4rem 2rem;
        text-align: center;
        color: #6c757d;
    }
    .empty-state i {
        font-size: 4rem;
        margin-bottom: 1rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div id="estoqueControleRotas"
         data-produto-historico-template="{% if has_endpoint('produto_historico') %}{{ safe_url_for('produto_historico', fallback='#', id=999999999) }}{% else %}#{% endif %}"
         data-editar-produto-template="{% if has_endpoint('editar_produto') %}{{ safe_url_for('editar_produto', fallback='#', id=999999999) }}{% else %}#{% endif %}"
         data-estoque-auditoria-url="{{ url_for('estoque_auditoria') }}"></div>

    <!-- Header com ações rápidas -->
    <div class="row mb-4">
        <div class="col-md-6">
            <h2><i class="bi bi-boxes"></i> Controle de Estoque</h2>
            <p class="text-muted">Gerencie entrada, saída e movimentação de produtos</p>
        </div>
        <div class="col-md-6 text-end">
            <button type="button" class="btn btn-outline-dark" onclick="capeVoltarOu('{{ url_for('estoque_lista') }}')">
                <i class="bi bi-arrow-left"></i> Voltar
            </button>
            <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modalEntrada">
                <i class="bi bi-box-arrow-in-down"></i> Nova Entrada
            </button>
            <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#modalSaida">
                <i class="bi bi-box-arrow-up"></i> Nova Saída
            </button>
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalAjuste">
                <i class="bi bi-pencil-square"></i> Ajuste Manual
            </button>
            <button class="btn btn-info" data-bs-toggle="modal" data-bs-target="#modalTransferencia">
                <i class="bi bi-arrow-left-right"></i> Transferência
            </button>
        </div>
    </div>

    <!-- KPIs -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card kpi-card primary">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-1">Valor Total Estoque</h6>
                            <h3 class="mb-0" id="kpiValorTotal">R$ 0,00</h3>
                        </div>
                        <i class="bi bi-currency-dollar fs-1 text-primary"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card kpi-card warning">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-1">Estoque Baixo</h6>
                            <h3 class="mb-0" id="kpiEstoqueBaixo">0</h3>
                        </div>
                        <i class="bi bi-exclamation-triangle fs-1 text-warning"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card kpi-card danger">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-1">Rupturas</h6>
                            <h3 class="mb-0" id="kpiRupturas">0</h3>
                        </div>
                        <i class="bi bi-x-circle fs-1 text-danger"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card kpi-card success">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-1">Produtos Ativos</h6>
                            <h3 class="mb-0" id="kpiProdutosAtivos">0</h3>
                        </div>
                        <i class="bi bi-box-seam fs-1 text-success"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtros -->
    <div class="card filter-card mb-4">
        <div class="card-body">
            <form id="formFiltros" class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">Buscar</label>
                    <input type="text" class="form-control" name="search" id="searchInput" 
                           placeholder="Código ou nome do produto">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Depósito</label>
                    <select class="form-select" name="warehouse" id="warehouseFilter">
                        <option value="">Todos</option>
                        {% for deposito in depositos %}
                        <option value="{{ deposito.id }}">{{ deposito.nome }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Status</label>
                    <select class="form-select" name="status" id="statusFilter">
                        <option value="">Todos</option>
                        <option value="ok">OK</option>
                        <option value="baixo">Estoque Baixo</option>
                        <option value="zerado">Zerado</option>
                        <option value="negativo">Negativo</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Tipo Produto</label>
                    <select class="form-select" name="tipo" id="tipoFilter">
                        <option value="">Todos</option>
                        <option value="Produto">Produto</option>
                        <option value="Serviço">Serviço</option>
                        <option value="Equipamento">Equipamento</option>
                    </select>
                </div>
                <div class="col-md-3 d-flex align-items-end">
                    <button type="submit" class="btn btn-light me-2">
                        <i class="bi bi-search"></i> Buscar
                    </button>
                    <button type="button" class="btn btn-outline-light" id="btnLimparFiltros">
                        <i class="bi bi-x-circle"></i> Limpar
                    </button>
                    <button type="button" class="btn btn-outline-light ms-auto" id="btnExportar">
                        <i class="bi bi-file-earmark-excel"></i> Exportar
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Tabela de Estoque -->
    <div class="card">
        <div class="card-header bg-white">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-table"></i> Lista de Estoque</h5>
                <span class="badge bg-primary" id="totalItens">0 itens</span>
            </div>
        </div>
        <div class="card-body p-0">
            <div id="loadingSpinner" class="text-center py-5" style="display: none;">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Carregando...</span>
                </div>
                <p class="mt-2 text-muted">Carregando estoque...</p>
            </div>

            <div id="tableContainer">
                <table class="table table-hover mb-0">
                    <thead class="table-light sticky-top">
                        <tr>
                            <th style="width: 10%;">Código</th>
                            <th style="width: 25%;">Produto</th>
                            <th style="width: 15%;">Depósito</th>
                            <th style="width: 10%;" class="text-end">Estoque</th>
                            <th style="width: 10%;" class="text-end">Reservado</th>
                            <th style="width: 10%;" class="text-end">Disponível</th>
                            <th style="width: 10%;" class="text-center">Status</th>
                            <th style="width: 10%;" class="text-center">Ações</th>
                        </tr>
                    </thead>
                    <tbody id="tabelaEstoque">
                        <!-- Preenchido via JavaScript -->
                    </tbody>
                </table>
            </div>

            <div id="emptyState" class="empty-state" style="display: none;">
                <i class="bi bi-inbox"></i>
                <h4>Nenhum registro encontrado</h4>
                <p>Tente ajustar os filtros ou adicionar novos produtos ao estoque.</p>
            </div>
        </div>
        <div class="card-footer bg-white">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <select class="form-select form-select-sm d-inline-block w-auto" id="perPageSelect">
                        <option value="25">25 por página</option>
                        <option value="50" selected>50 por página</option>
                        <option value="100">100 por página</option>
                    </select>
                </div>
                <nav>
                    <ul class="pagination pagination-sm mb-0" id="pagination">
                        <!-- Preenchido via JavaScript -->
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>

<!-- Modal Entrada -->
{% include 'estoque_modal_entrada.html' %}

<!-- Modal Saída -->
{% include 'estoque_modal_saida.html' %}

<!-- Modal Ajuste -->
{% include 'estoque_modal_ajuste.html' %}

<!-- Modal Transferência -->
{% include 'estoque_modal_transferencia.html' %}

<!-- Modal Histórico -->
{% include 'estoque_modal_historico.html' %}

{% endblock %}

{% block extra_js %}
<script>
let currentPage = 1;
let perPage = 50;
let totalPages = 1;

// Carregar estoque ao iniciar
$(document).ready(function() {
    carregarEstoque();
    carregarKPIs();
    
    // Eventos
    $('#formFiltros').on('submit', function(e) {
        e.preventDefault();
        currentPage = 1;
        carregarEstoque();
    });
    
    $('#btnLimparFiltros').on('click', function() {
        $('#formFiltros')[0].reset();
        currentPage = 1;
        carregarEstoque();
    });
    
    $('#perPageSelect').on('change', function() {
        perPage = parseInt($(this).val());
        currentPage = 1;
        carregarEstoque();
    });
    
    $('#btnExportar').on('click', exportarExcel);
    
    // Busca em tempo real (debounce)
    let searchTimeout;
    $('#searchInput').on('input', function() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => {
            currentPage = 1;
            carregarEstoque();
        }, 500);
    });
});

function carregarEstoque() {
    $('#loadingSpinner').show();
    $('#tableContainer').hide();
    $('#emptyState').hide();
    
    const params = {
        page: currentPage,
        per_page: perPage,
        search: $('#searchInput').val(),
        warehouse: $('#warehouseFilter').val(),
        status: $('#statusFilter').val(),
        tipo: $('#tipoFilter').val()
    };
    
    console.log('Carregando estoque com params:', params);
    
    $.get('/api/stocks', params)
        .done(function(response) {
            console.log('Resposta da API:', response);
            renderizarTabela(response.data);
            renderizarPaginacao(response.data);
            $('#totalItens').text(`${response.data.total} itens`);
        })
        .fail(function(xhr) {
            console.error('Erro na API:', xhr);
            mostrarErro('Erro ao carregar estoque: ' + (xhr.responseJSON?.message || 'Erro desconhecido'));
        })
        .always(function() {
            $('#loadingSpinner').hide();
        });
}

function renderizarTabela(data) {
    const tbody = $('#tabelaEstoque');
    tbody.empty();
    
    if (!data.items || data.items.length === 0) {
        $('#emptyState').show();
        return;
    }
    
    $('#tableContainer').show();

    const rotasEl = document.getElementById('estoqueControleRotas');
    const templateHistoricoCadastro = rotasEl?.dataset?.produtoHistoricoTemplate || '#';
    const templateEditarProduto = rotasEl?.dataset?.editarProdutoTemplate || '#';
    const urlAuditoriaBase = rotasEl?.dataset?.estoqueAuditoriaUrl || '#';
    
    data.items.forEach(item => {
        const statusClass = {
            'ok': 'status-ok',
            'baixo': 'status-baixo',
            'zerado': 'status-critico',
            'negativo': 'status-negativo'
        }[item.status] || 'status-ok';
        
        const statusText = {
            'ok': 'OK',
            'baixo': 'Baixo',
            'zerado': 'Zerado',
            'negativo': 'Negativo'
        }[item.status] || 'OK';

        const produtoId = item.produto.id;
        const urlHistoricoCadastro = templateHistoricoCadastro && templateHistoricoCadastro !== '#'
            ? templateHistoricoCadastro.replace('999999999', String(produtoId))
            : '#';
        const urlEditarProduto = templateEditarProduto && templateEditarProduto !== '#'
            ? templateEditarProduto.replace('999999999', String(produtoId))
            : '#';
        const urlAuditoriaProduto = urlAuditoriaBase && urlAuditoriaBase !== '#'
            ? `${urlAuditoriaBase}?produto_id=${encodeURIComponent(produtoId)}`
            : '#';
        const historicoCadastroDesabilitado = !urlHistoricoCadastro || urlHistoricoCadastro === '#';
        const editarCadastroDesabilitado = !urlEditarProduto || urlEditarProduto === '#';
        
        const tr = `
            <tr data-produto-id="${item.produto.id}" data-deposito-id="${item.deposito.id}">
                <td><strong>${item.produto.codigo}</strong></td>
                <td>
                    <div>${item.produto.nome}</div>
                    <small class="text-muted">${item.produto.tipo || 'N/A'}</small>
                </td>
                <td>
                    <span class="badge bg-secondary">${item.deposito.codigo}</span>
                    ${item.deposito.nome}
                </td>
                <td class="text-end"><strong>${formatarNumero(item.quantidade)}</strong></td>
                <td class="text-end">${formatarNumero(item.reservado)}</td>
                <td class="text-end text-success"><strong>${formatarNumero(item.disponivel)}</strong></td>
                <td class="text-center">
                    <span class="status-badge ${statusClass}">${statusText}</span>
                </td>
                <td class="text-center">
                    <div class="dropdown action-menu">
                        <button class="action-menu-btn" type="button" data-bs-toggle="dropdown">
                            <i class="bi bi-three-dots-vertical"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li>
                                <a class="dropdown-item ${editarCadastroDesabilitado ? 'disabled' : ''}" href="${editarCadastroDesabilitado ? '#' : urlEditarProduto}" ${editarCadastroDesabilitado ? 'onclick="return false;" aria-disabled="true"' : ''}>
                                    <i class="bi bi-pencil-square text-primary"></i> Abrir cadastro
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="#" onclick="abrirHistorico(${item.produto.id})">
                                    <i class="bi bi-clock-history text-info"></i> Histórico
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item ${historicoCadastroDesabilitado ? 'disabled' : ''}" href="${historicoCadastroDesabilitado ? '#' : urlHistoricoCadastro}" ${historicoCadastroDesabilitado ? 'onclick="return false;" aria-disabled="true"' : ''}>
                                    <i class="bi bi-journal-text text-secondary"></i> Histórico do cadastro
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="${urlAuditoriaProduto}">
                                    <i class="bi bi-shield-check text-dark"></i> Auditoria geral
                                </a>
                            </li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <a class="dropdown-item" href="#" onclick="abrirEntradaRapida(${item.produto.id}, ${item.deposito.id})">
                                    <i class="bi bi-plus-circle text-success"></i> Entrada Rápida
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="#" onclick="abrirSaidaRapida(${item.produto.id}, ${item.deposito.id})">
                                    <i class="bi bi-dash-circle text-danger"></i> Saída Rápida
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="#" onclick="abrirAjusteRapido(${item.produto.id}, ${item.deposito.id})">
                                    <i class="bi bi-pencil text-warning"></i> Ajustar
                                </a>
                            </li>
                        </ul>
                    </div>
                </td>
            </tr>
        `;
        tbody.append(tr);
    });
}

function renderizarPaginacao(data) {
    const pagination = $('#pagination');
    pagination.empty();
    
    totalPages = data.pages;
    currentPage = data.page;
    
    if (totalPages <= 1) return;
    
    // Anterior
    pagination.append(`
        <li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
            <a class="page-link" href="#" onclick="mudarPagina(${currentPage - 1}); return false;">Anterior</a>
        </li>
    `);
    
    // Páginas
    for (let i = 1; i <= totalPages; i++) {
        if (i === 1 || i === totalPages || (i >= currentPage - 2 && i <= currentPage + 2)) {
            pagination.append(`
                <li class="page-item ${i === currentPage ? 'active' : ''}">
                    <a class="page-link" href="#" onclick="mudarPagina(${i}); return false;">${i}</a>
                </li>
            `);
        } else if (i === currentPage - 3 || i === currentPage + 3) {
            pagination.append('<li class="page-item disabled"><span class="page-link">...</span></li>');
        }
    }
    
    // Próximo
    pagination.append(`
        <li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
            <a class="page-link" href="#" onclick="mudarPagina(${currentPage + 1}); return false;">Próximo</a>
        </li>
    `);
}

function mudarPagina(pagina) {
    if (pagina < 1 || pagina > totalPages) return;
    currentPage = pagina;
    carregarEstoque();
}

function carregarKPIs() {
    $.get('/api/stocks/alerts')
        .done(function(response) {
            $('#kpiEstoqueBaixo').text(response.data.alertas.filter(a => a.status === 'baixo').length);
            $('#kpiRupturas').text(response.data.alertas.filter(a => a.status === 'critico').length);
        });
    
    // Simular outros KPIs (implementar depois)
    $('#kpiValorTotal').text('R$ 0,00');
    $('#kpiProdutosAtivos').text('0');
}

function formatarNumero(valor) {
    return parseFloat(valor || 0).toFixed(2).replace('.', ',');
}

function formatarMoeda(valor) {
    return 'R$ ' + parseFloat(valor || 0).toFixed(2).replace('.', ',').replace(/\B(?=(\d{3})+(?!\d))/g, '.');
}

function mostrarErro(mensagem) {
    alert(mensagem); // Substituir por toast notification
}

function mostrarSucesso(mensagem) {
    alert(mensagem); // Substituir por toast notification
}

// Funções de ação rápida
function abrirEntradaRapida(produtoId, depositoId) {
    $('#modalEntrada').modal('show');
    // Preencher campos
}

function abrirSaidaRapida(produtoId, depositoId) {
    $('#modalSaida').modal('show');
    // Preencher campos
}

function abrirAjusteRapido(produtoId, depositoId) {
    $('#modalAjuste').modal('show');
    // Preencher campos
}

function exportarExcel() {
    const params = new URLSearchParams({
        search: $('#searchInput').val(),
        warehouse: $('#warehouseFilter').val(),
        status: $('#statusFilter').val(),
        tipo: $('#tipoFilter').val(),
        export: 'excel'
    });
    
    window.location.href = `/estoque/exportar?${params.toString()}`;
}
</script>
{% endblock %}