// ================================================================
// gerenciar.js - VERSÃO FINAL COM ESTRUTURA CORRIGIDA
// ================================================================

import { DataService } from './api.js';

// --- FUNÇÕES AUXILIARES GLOBAIS ---
// Estas funções ficam aqui fora para serem acessíveis, se necessário.
function showGlobalLoading(message = 'Processando...') {
    const overlay = document.getElementById('global-loading-overlay');
    const msgElement = document.getElementById('loading-message');
    if (msgElement) msgElement.textContent = message;
    if (overlay) overlay.classList.remove('hidden');
}

function hideGlobalLoading() {
    const overlay = document.getElementById('global-loading-overlay');
    if (overlay) overlay.classList.add('hidden');
}


document.addEventListener('DOMContentLoaded', () => {

    // --- BLOCO DE INICIALIZAÇÃO CORRIGIDO E SIMPLIFICADO ---
    const storedUser = sessionStorage.getItem('currentUser');

    if (!storedUser) {
        // Se NÃO houver usuário, interrompe tudo e redireciona.
        alert('Sua sessão expirou. Por favor, faça o login novamente.');
        window.location.href = 'login.html';
        throw new Error("Sessão do usuário não encontrada, execução interrompida.");
    }

    // Se o usuário existe, definimos a constante UMA ÚNICA VEZ.
    const currentUser = JSON.parse(storedUser);

    // E agora, as outras variáveis de estado com 'let'
    // =========================================================
// COLE ESTE BLOCO DE CÓDIGO DE PERMISSÕES AQUI
// =========================================================

    let mainInventory = [];
    let towersData = [];
    
    let consumableItems = [];
    let fuelLog = [];
    let users = [];
    let itensParaAlocar = [];
    let itensParaRetirar = [];
    let newTowerSectors = [];

    // --- FUNÇÕES GLOBAIS E HELPERS DO MÓDULO ---
    function showToast(message, type = 'success') {
        const container = document.getElementById('toast-container'); if (!container) return;
        const icon = type === 'success' ? 'fa-check-circle' : 'fa-times-circle';
        const color = type === 'success' ? 'bg-green-500' : 'bg-red-500';
        const toast = document.createElement('div');
        toast.className = `toast flex items-center gap-3 text-white font-bold ${color} px-6 py-3 rounded-lg shadow-xl`;
        toast.innerHTML = `<i class="fas ${icon}"></i> <p>${message}</p>`;
        container.appendChild(toast);
        setTimeout(() => { toast.remove(); }, 3500);
    }
    const emptyStateHTML = (message, iconClass) => `<div class="text-center p-8 text-slate-500"><i class="${iconClass} fa-2x text-slate-300 mb-4"></i><p class="text-sm">${message}</p></div>`;
    // =========================================================
// COLE ESTE BLOCO INTEIRO DE NOVAS FUNÇÕES
// =========================================================

function applyCardPermissions() {
    const userRole = currentUser.role;
    const cardsConfig = {
        'card-consumo': ['Estoquista', 'Desenvolvedor'],
        'card-combustivel': ['Estoquista', 'Desenvolvedor'],
        'card-notificacoes': ['Estoquista', 'Desenvolvedor'],
        'card-seguranca': ['Estoquista', 'Desenvolvedor']
    };
    for (const cardId in cardsConfig) {
        const card = document.getElementById(cardId);
        if (card && !cardsConfig[cardId].includes(userRole)) {
            card.style.display = 'none';
        }
    }
}

// Versão Definitiva e à Prova de Falhas
function configureModalPermissions() {
    const userRole = currentUser.role;
    const allTabs = document.querySelectorAll('.torres-tab');

    // Regra para Administrador e cargos com acesso total
    if (userRole === 'Administrador' || userRole === 'Desenvolvedor' || userRole === 'Estoquista') {
        // Garante que todas as abas são visíveis
        allTabs.forEach(tab => tab.style.display = 'flex'); 
        
        // Aplica a lógica de desabilitar/habilitar campos específicos para o Admin
        if (userRole === 'Administrador') {
            document.querySelectorAll('#section-torres-alocar button, #section-torres-alocar select, #section-torres-alocar input').forEach(el => el.disabled = false);
            document.querySelectorAll('#section-torres-retirar button, #section-torres-retirar select').forEach(el => el.disabled = true);
            document.querySelectorAll('#section-torres-geral button, #section-torres-geral input').forEach(el => el.disabled = true);
        } else {
            // Garante que para Dev/Estoquista tudo esteja habilitado
             document.querySelectorAll('#modal-torres button, #modal-torres input, #modal-torres select').forEach(el => el.disabled = false);
        }

    } else if (userRole === 'Operador' || userRole === 'Suporte') {
        // --- NOVA LÓGICA ROBUSTA PARA OPERADOR E SUPORTE ---
        
        // Percorre todas as abas e decide qual mostrar
        allTabs.forEach(tab => {
            // Se a aba NÃO for 'alocar', ela será escondida.
            if (tab.dataset.tab !== 'alocar') {
                tab.style.display = 'none';
            } else {
                // Garante que a aba 'alocar' esteja visível
                tab.style.display = 'flex';
            }
        });

        // Garante que a seção "Alocar Itens" esteja funcional para eles
        document.querySelectorAll('#section-torres-alocar button, #section-torres-alocar select, #section-torres-alocar input').forEach(el => el.disabled = false);
    
    } else {
         // Para qualquer outro cargo (como Financeiro), esconde todas as abas de torres por segurança
         allTabs.forEach(tab => {
            tab.style.display = 'none';
        });
    }
}

async function renderSafetyStockEditor() {
    const container = document.getElementById('safety-stock-content');
    if (!container) return;
    container.innerHTML = emptyStateHTML('Carregando produtos...', 'fas fa-spinner fa-spin');
    try {
        const result = await DataService.getProductsInfo(currentUser.role);
        const products = result.data;
        if (products.length === 0) {
            container.innerHTML = emptyStateHTML('Nenhum produto cadastrado.', 'fas fa-box-open');
            return;
        }
        container.innerHTML = `
            <div class="space-y-4">
                ${products.map(product => `
                    <div class="grid grid-cols-1 md:grid-cols-3 items-center gap-4 p-3 bg-slate-50 rounded-lg border">
                        <span class="font-semibold text-slate-700 col-span-1">${product.nome || 'Sem nome'}</span>
                        <div class="md:col-span-1">
                            <input type="number" value="${product.safetyStock || 0}" min="0" 
                                   class="form-input w-full text-center p-2" 
                                   id="stock-input-${product.id}">
                        </div>
                        <div class="md:col-span-1 text-right">
                            <button data-product-id="${product.id}" class="save-safety-stock-btn btn-primary py-2 px-4 text-sm w-full md:w-auto">
                                Salvar
                            </button>
                        </div>
                    </div>
                `).join('')}
            </div>
        `;
    } catch (error) {
        container.innerHTML = emptyStateHTML(`Erro ao carregar produtos: ${error.message}`, 'fas fa-exclamation-triangle');
    }
}
    const userRole = currentUser.role;
/**
 * Esconde os cards principais da página com base na função do usuário.
 */
function applyCardPermissions() {
    // Regras de quem pode VER cada card
    const cardsConfig = {
    // 'Administrador' foi removido desta linha
    'card-consumo': ['Estoquista', 'Desenvolvedor'], 
    // 'Administrador' foi removido desta linha
    'card-combustivel': ['Estoquista', 'Desenvolvedor'], 
    'card-notificacoes': ['Estoquista', 'Desenvolvedor']
};
    // Percorre a configuração e esconde os cards para quem não tem permissão
    for (const cardId in cardsConfig) {
        const card = document.getElementById(cardId);
        if (card && !cardsConfig[cardId].includes(userRole)) {
            card.style.display = 'none';
        }
    }
}
/**
 * Configura as permissões DENTRO de cada modal (habilita/desabilita campos e botões).
 */
// Versão Final com a Permissão Corrigida
function configureModalPermissions() {
    const userRole = currentUser.role;
    const allTabs = document.querySelectorAll('.torres-tab');
    const alocarSectionElements = document.querySelectorAll('#section-torres-alocar button, #section-torres-alocar select, #section-torres-alocar input');
    const retirarSectionElements = document.querySelectorAll('#section-torres-retirar button, #section-torres-retirar select');
    const geralSectionElements = document.querySelectorAll('#section-torres-geral button, #section-torres-geral input');

    // Primeiro, reseta tudo para o estado padrão (tudo visível e habilitado)
    allTabs.forEach(tab => tab.style.display = 'flex');
    document.querySelectorAll('#modal-torres button, #modal-torres input, #modal-torres select').forEach(el => el.disabled = false);

    // Agora, aplica as restrições por cargo
    
    if (userRole === 'Operador' || userRole === 'Suporte') {
        // --- REGRA PARA OPERADOR E SUPORTE ---
        
        // 1. Esconde as abas que eles não podem ver
        allTabs.forEach(tab => {
            if (tab.dataset.tab !== 'alocar') {
                tab.style.display = 'none';
            }
        });
        
        // 2. GARANTE que a interação na aba 'Alocar Itens' esteja HABILITADA
        alocarSectionElements.forEach(el => {
            el.disabled = false; // <-- AQUI ESTAVA O ERRO, AGORA ESTÁ CORRIGIDO
        });

    } else if (userRole === 'Administrador') {
        // --- REGRA PARA ADMINISTRADOR ---
        retirarSectionElements.forEach(el => el.disabled = true);
        geralSectionElements.forEach(el => el.disabled = true);
    }
    
    // Para Estoquista e Desenvolvedor, nenhuma regra é aplicada, então eles mantêm acesso total.
}
    // --- ESTADO E LÓGICA DO MODAL DE TORRES ---
    async function fetchAllTorresData() {
    try {
        // CORREÇÃO 1: O nome da função correta é 'getTowers'
        // CORREÇÃO 2: O resultado das torres será salvo em 'towersData'
        const [torresResult, inventarioResult] = await Promise.all([
            DataService.getTowers(currentUser.role), 
            DataService.getInventory(currentUser.role)
        ]);
        
        towersData = torresResult.data; // Usando a variável correta
        mainInventory = inventarioResult.data;
        return true;
    } catch (error) {
        showToast(`Erro ao carregar dados das torres: ${error.message}`, 'error');
        return false;
    }
}
    // A partir daqui, seu código continua normalmente...
    // (O restante das suas funções e event listeners viriam aqui)

    function switchTorresTab(activeTabName) {
        document.querySelectorAll('.torres-tab').forEach(tab => {
            tab.className = `torres-tab flex items-center gap-2 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-all duration-200 ${tab.dataset.tab === activeTabName ? 'text-indigo-600 border-indigo-500' : 'text-slate-500 border-transparent hover:text-slate-700 hover:border-slate-300'}`;
        });
        ['alocar', 'retirar', 'total', 'geral'].forEach(tab => document.getElementById(`section-torres-${tab}`)?.classList.toggle('hidden', tab !== activeTabName));
        if (activeTabName === 'alocar') { itensParaAlocar = []; renderMateriaisDisponiveis(''); renderCarrinhoAlocar(); }
        if (activeTabName === 'retirar') { itensParaRetirar = []; populateTorresSelect(); renderItensNaTorre(document.getElementById('torre-retirar-selecionar')?.value); renderCarrinhoRetirar(); }
        if (activeTabName === 'total') { renderTotalTorres(''); }
        if (activeTabName === 'geral') { newTowerSectors = []; const torreNomeInput = document.getElementById('geral-torre-nome'); if(torreNomeInput) torreNomeInput.value = ''; const setorInput = document.getElementById('geral-setor-input'); if(setorInput) setorInput.value = ''; renderSectorsTags(); renderGeralSearchResults(''); }
        configureModalPermissions(); // <-- ADICIONE ESTA LINHA NO FINAL

    }
    const createItemCardHTML = (item, type, isSelected) => {
        const selectedClasses = isSelected ? 'border-indigo-400 bg-indigo-50/70 shadow-sm' : 'border-slate-200 bg-white';
        return `<div data-patrimonio="${item.patrimonio}" data-type="${type}" class="item-card flex items-center justify-between p-3 rounded-lg border-2 ${selectedClasses} hover:border-indigo-300 cursor-pointer transition-all duration-200"><div class="flex items-center gap-4"><i class="fas fa-box-open text-slate-400 fa-lg"></i><div><span class="font-semibold text-slate-800">${item.nome}</span><span class="block text-xs text-slate-500">Patrimônio: ${item.patrimonio}</span></div></div><div class="w-6 h-6 rounded-full flex items-center justify-center border-2 ${isSelected ? 'border-indigo-600 bg-indigo-600' : 'border-slate-300'} transition-all duration-200">${isSelected ? '<i class="fas fa-check text-white text-xs"></i>' : ''}</div></div>`;
    };
    function renderMateriaisDisponiveis(searchTerm = '') {
    const container = document.getElementById('torres-materiais-disponiveis');
    if (!container) return;

    const term = searchTerm.toLowerCase();
    
    // CORREÇÃO: Usando a variável 'mainInventory' que vem da API, em vez da variável de exemplo.
    const filtered = mainInventory.filter(item => 
        (item.produto && item.produto.toLowerCase().includes(term)) || 
        (item.patrimonio && item.patrimonio.toLowerCase().includes(term))
    );

    if (filtered.length === 0) {
        container.innerHTML = emptyStateHTML('Nenhum material encontrado no estoque principal.', 'fas fa-box-open');
        return;
    }

    container.innerHTML = filtered.map(item => {
        const isSelected = itensParaAlocar.some(i => i.patrimonio === item.patrimonio);
        const selectedClasses = isSelected ? 'border-indigo-400 bg-indigo-50/70 shadow-sm' : 'border-slate-200 bg-white';
        // Adicionando mais atributos de dados para facilitar a manipulação posterior
        return `<div data-patrimonio="${item.patrimonio}" data-produto-id="${item.id}" data-produto-nome="${item.produto}" data-type="alocar" class="item-card flex items-center justify-between p-3 rounded-lg border-2 ${selectedClasses} hover:border-indigo-300 cursor-pointer transition-all duration-200">
                    <div class="flex items-center gap-4">
                        <i class="fas fa-box-open text-slate-400 fa-lg"></i>
                        <div>
                            <span class="font-semibold text-slate-800">${item.produto}</span>
                            <span class="block text-xs text-slate-500">Patrimônio: ${item.patrimonio}</span>
                        </div>
                    </div>
                    <div class="w-6 h-6 rounded-full flex items-center justify-center border-2 ${isSelected ? 'border-indigo-600 bg-indigo-600' : 'border-slate-300'} transition-all duration-200">
                        ${isSelected ? '<i class="fas fa-check text-white text-xs"></i>' : ''}
                    </div>
                </div>`;
    }).join('');
}
    function renderItensNaTorre(torreId) {
    const container = document.getElementById('torres-itens-na-torre');
    if (!container) return;

    // CORREÇÃO: Busca a torre na variável 'towersData' que vem da API
    const torre = towersData.find(t => String(t.id) === String(torreId));

    // A lógica para exibir os itens da torre encontrada
    if (!torre || !torre.itens || torre.itens.length === 0) {
        container.innerHTML = emptyStateHTML('Selecione uma torre com itens ou esta torre está vazia.', 'fas fa-satellite-dish');
        return;
    }

    // O seu código já deve ter a função createItemCardHTML, que será usada aqui.
    // Ela irá percorrer os itens da torre real e exibi-los.
    container.innerHTML = torre.itens.map(item => 
        createItemCardHTML(item, 'retirar', itensParaRetirar.some(i => i.patrimonio === item.patrimonio))
    ).join('');
}
    const renderCarrinho = (containerId, items) => { const container = document.getElementById(containerId); if (!container) return; if (items.length === 0) { container.innerHTML = `<p class="text-center text-sm text-slate-500 py-4">Nenhum item selecionado.</p>`; return; } container.innerHTML = items.map(item => `<div class="flex items-center justify-between text-sm bg-white p-2 rounded-md border"><span>${item.nome}</span><span class="font-mono text-xs text-slate-600">${item.patrimonio}</span></div>`).join(''); };
    const renderCarrinhoAlocar = () => renderCarrinho('carrinho-alocar', itensParaAlocar);
    const renderCarrinhoRetirar = () => renderCarrinho('carrinho-retirar', itensParaRetirar);
    function populateTorresSelect() {
    const select = document.getElementById('torre-retirar-selecionar');
    if (!select) return;

    select.innerHTML = '<option value="">-- Escolha uma torre --</option>';
    
    // CORREÇÃO: Usando a variável 'towersData' que vem da API
    if (towersData && towersData.length > 0) {
        towersData.forEach(torre => {
            // Garanta que os nomes das colunas (torre.id, torre.nome)
            // correspondem exatamente ao que vem do seu banco de dados.
            select.innerHTML += `<option value="${torre.id}">${torre.nome}</option>`;
        });
    }
    
    select.value = ""; // Garante que nenhuma torre esteja pré-selecionada
}
    async function renderTotalTorres(searchTerm = '') {
    const container = document.getElementById('torres-resultado-total');
    if (!container) return;

    const term = searchTerm.trim().toLowerCase();
    
    // 1. Filtra as torres com base no termo de busca
    const filteredTowers = towersData.filter(torre => 
        torre.nome.toLowerCase().includes(term)
    );

    if (filteredTowers.length === 0) {
        container.innerHTML = emptyStateHTML('Nenhuma torre encontrada para o termo buscado.', 'fas fa-broadcast-tower');
        return;
    }

    // 2. Monta o HTML para cada torre encontrada
    container.innerHTML = filteredTowers.map(torre => {
        const totalSetores = torre.setores ? torre.setores.length : 0;
        const totalItens = torre.itens ? torre.itens.length : 0;

        // 3. Agrupa os itens por nome de produto para contar as quantidades
        const groupedItems = (torre.itens || []).reduce((acc, item) => {
            const productName = item.nomeProduto || item.nome; // Compatível com ambos os nomes de campo
            if (!acc[productName]) {
                acc[productName] = {
                    count: 0,
                    patrimonios: []
                };
            }
            acc[productName].count++;
            acc[productName].patrimonios.push(item.patrimonio);
            return acc;
        }, {});

        // 4. Cria o HTML para a lista de setores e de itens
        const setoresHtml = totalSetores > 0 
            ? `<ul>${torre.setores.map(setor => `<li class="text-sm text-slate-600 pl-4">- ${setor}</li>`).join('')}</ul>`
            : '<p class="text-sm text-slate-500 italic pl-4">Nenhum setor cadastrado.</p>';

        const itensHtml = totalItens > 0
            ? `<ul>${Object.entries(groupedItems).map(([productName, data]) => `
                <li class="text-sm text-slate-600 pl-4">
                    <strong>${productName}</strong> - ${data.count} und(s) = 
                    <span class="font-mono text-xs text-indigo-700">(${data.patrimonios.join(', ')})</span>
                </li>
            `).join('')}</ul>`
            : '<p class="text-sm text-slate-500 italic pl-4">Nenhum item alocado.</p>';

        // 5. Retorna o card completo da torre
        return `
            <div class="bg-white border border-slate-200 rounded-lg shadow-md p-6 mb-4 transition-all hover:shadow-lg">
                <h3 class="text-xl font-bold text-slate-800 border-b pb-3 mb-3">
                    ${torre.nome}
                    <span class="text-sm font-medium text-indigo-600 ml-2">(${totalSetores} setores e ${totalItens} itens)</span>
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <h4 class="font-semibold text-slate-700 mb-2">Setores:</h4>
                        ${setoresHtml}
                    </div>
                    <div>
                        <h4 class="font-semibold text-slate-700 mb-2">Itens Alocados:</h4>
                        ${itensHtml}
                    </div>
                </div>
            </div>
        `;
    }).join('');

    }
    function renderSectorsTags() { const container = document.getElementById('setores-tag-container'); if (!container) return; const input = document.getElementById('geral-setor-input'); container.querySelectorAll('span').forEach(tag => tag.remove()); newTowerSectors.forEach(sector => { const tagElement = document.createElement('span'); tagElement.className = 'flex items-center gap-2 bg-indigo-100 text-indigo-800 text-sm font-semibold pl-3 pr-2 py-1.5 rounded-full'; tagElement.innerHTML = `${sector} <button data-sector="${sector}" class="remove-sector-btn font-bold text-indigo-500 hover:text-indigo-800">&times;</button>`; container.insertBefore(tagElement, input); }); }
    function renderGeralSearchResults(searchTerm = '') {
    const container = document.getElementById('geral-pesquisa-resultados');
    if (!container) return;

    const term = searchTerm.trim().toLowerCase();
    if (!term) {
        container.innerHTML = emptyStateHTML('Digite para iniciar a busca por torres ou setores.', 'fas fa-search');
        return;
    }
    let resultsHTML = '';
    
    // CORREÇÃO: Usando a variável 'towersData' que vem da API
    towersData.filter(t => t.nome.toLowerCase().includes(term)).forEach(torre => {
        resultsHTML += `<div class="p-4 border rounded-lg bg-white shadow-sm"><h5 class="font-bold text-indigo-700 flex items-center gap-2"><i class="fas fa-broadcast-tower"></i>${torre.nome}</h5><div class="pl-6 mt-2 text-sm text-slate-600">${(torre.setores && torre.setores.length > 0) ? torre.setores.map(s => `<div>- ${s}</div>`).join('') : 'Nenhum setor cadastrado.'}</div></div>`;
    });

    // CORREÇÃO: Usando 'towersData' também para a busca de setores
    towersData.flatMap(t => (t.setores || []).map(s => ({ torre: t.nome, setor: s })))
        .filter(item => item.setor.toLowerCase().includes(term))
        .forEach(item => {
            resultsHTML += `<div class="p-4 border rounded-lg bg-white shadow-sm"><h5 class="font-bold text-green-700 flex items-center gap-2"><i class="fas fa-sitemap"></i>${item.setor}</h5><div class="pl-6 mt-2 text-sm text-slate-600">Pertence à torre: <strong>${item.torre}</strong></div></div>`;
        });
        
    container.innerHTML = resultsHTML || emptyStateHTML('Nenhum resultado encontrado para o termo buscado.', 'fas fa-question-circle');
}
    function handleAddSector(e) { if (e.key === 'Enter') { e.preventDefault(); const input = e.target; const sectorName = input.value.trim().toUpperCase(); if (sectorName && !newTowerSectors.includes(sectorName)) { newTowerSectors.push(sectorName); renderSectorsTags(); } input.value = ''; } }
    function handleRemoveSector(e) { const removeBtn = e.target.closest('.remove-sector-btn'); if (removeBtn) { const sectorToRemove = removeBtn.dataset.sector; newTowerSectors = newTowerSectors.filter(s => s !== sectorToRemove); renderSectorsTags(); } }
    function handleRegisterTower() {
        const torreNomeInput = document.getElementById('geral-torre-nome');
        const torreNome = torreNomeInput.value.trim().toUpperCase();
        
        if (!torreNome) {
            showToast('Por favor, insira um nome para a torre.', 'error');
            return;
        }

        const payload = {
            nome: torreNome,
            setores: JSON.stringify(newTowerSectors) // Envia os setores como uma string JSON
        };

        DataService.addTorre(payload, currentUser.role)
            .then(result => {
                showToast(result.message);
                renderGeralSearchResults(torreNome);
                document.getElementById('geral-pesquisa-input').value = torreNome;
                newTowerSectors = [];
                torreNomeInput.value = '';
                renderSectorsTags();
                renderTotalTorres(''); // Atualiza a lista na outra aba
            })
            .catch(error => {
                showToast(error.message, 'error');
            });
    }
    function handleTorresItemClick(e) {
    const card = e.target.closest('.item-card');
    if (!card) return;

    const patrimonio = card.dataset.patrimonio;
    const type = card.dataset.type;
    
    // CORREÇÃO: Busca os dados das fontes reais, não dos placeholders
    let sourceArray = [];
    if (type === 'alocar') {
        sourceArray = mainInventory;
    } else {
        const selectedTowerId = document.getElementById('torre-retirar-selecionar')?.value;
        const selectedTower = towersData.find(t => t.id == selectedTowerId);
        sourceArray = selectedTower ? selectedTower.itens : [];
    }

    const itemData = sourceArray.find(i => i.patrimonio === patrimonio);
    if (!itemData) {
        console.error("Item não encontrado nas fontes de dados reais:", patrimonio);
        return;
    }

    let targetCarrinho = type === 'alocar' ? itensParaAlocar : itensParaRetirar;
    const itemIndex = targetCarrinho.findIndex(i => i.patrimonio === patrimonio);

    if (itemIndex > -1) {
        targetCarrinho.splice(itemIndex, 1);
    } else {
        // Adiciona um objeto consistente ao carrinho
        targetCarrinho.push({
            nome: itemData.nomeProduto || itemData.produto, // Pega o nome correto
            patrimonio: itemData.patrimonio,
            id: itemData.id
        });
    }
    
    // Atualiza a UI
    if (type === 'alocar') {
        renderMateriaisDisponiveis(document.getElementById('torres-pesquisa-materiais')?.value);
        renderCarrinhoAlocar();
    } else {
        renderItensNaTorre(document.getElementById('torre-retirar-selecionar')?.value);
        renderCarrinhoRetirar();
    }
}

    // Substitua todo este bloco no seu gerenciar.js

    // =========================================================
    // ESTADO E LÓGICA DO MODAL DE CONSUMO (COM API)
    // =========================================================
    let usuarios = []; // Armazenará os usuários da API
    let itensConsumiveis = []; // Armazenará os itens da API
    let historicoConsumo = []; // Armazenará o histórico da API

    async function switchConsumoTab(activeTabName) {
        document.querySelectorAll('.consumo-tab').forEach(tab => {
            tab.className = `consumo-tab flex items-center gap-2 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-all duration-200 ${tab.dataset.tab === activeTabName ? 'text-teal-500 border-teal-500' : 'text-slate-500 border-transparent hover:text-slate-700 hover:border-slate-300'}`;
        });
        ['registrar', 'relatorio', 'cadastrar'].forEach(tab => document.getElementById(`section-consumo-${tab}`)?.classList.toggle('hidden', tab !== activeTabName));
        
        // Carrega os dados necessários para cada aba ao abri-la
        if (activeTabName === 'cadastrar') { await renderItensConsumiveis(''); }
        if (activeTabName === 'registrar') { await populateConsumoUsuarioSelect(); await populateConsumoMaterialSelect(); }
        if (activeTabName === 'relatorio') { await renderRelatorioConsumo(''); }
    }

    async function renderItensConsumiveis(searchTerm = '') {
        const container = document.getElementById('item-consumivel-lista');
        if (!container) return;
        container.innerHTML = emptyStateHTML('Carregando itens...', 'fas fa-spinner fa-spin');
        try {
            const result = await DataService.getItensConsumiveis(currentUser.role);
            itensConsumiveis = result.data;
            
            const term = searchTerm.toLowerCase();
            const filtered = itensConsumiveis.filter(item => item.nome.toLowerCase().includes(term));
            
            if (filtered.length === 0) { container.innerHTML = emptyStateHTML('Nenhum item consumível cadastrado.', 'fas fa-box'); return; }
            
            container.innerHTML = filtered.map(item => `<div class="p-3 border rounded-md bg-white flex justify-between items-center"><div><p class="font-semibold text-slate-700">${item.nome}</p><p class="text-xs text-slate-500">Unidade: ${item.unidade}</p></div><div class="text-right"><p class="text-lg font-bold text-teal-600">${item.quantidadeEstoque}</p><p class="text-xs text-slate-500">em estoque</p></div></div>`).join('');
        } catch (error) {
            container.innerHTML = emptyStateHTML(`Erro ao carregar: ${error.message}`, 'fas fa-exclamation-triangle');
        }
    }
    
    async function handleCadastrarItemConsumivel() {
        const nomeInput = document.getElementById('item-consumivel-nome');
        const unidadeInput = document.getElementById('item-consumivel-unidade');
        const quantidadeInput = document.getElementById('item-consumivel-quantidade');

        const nome = nomeInput.value.trim();
        const unidade = unidadeInput.value.trim();
        const quantidadeEstoque = parseInt(quantidadeInput.value, 10);

        if (!nome || !unidade || isNaN(quantidadeEstoque) || quantidadeEstoque < 0) {
            showToast('Por favor, preencha todos os campos corretamente.', 'error');
            return;
        }

        const newItem = { nome, unidade, quantidadeEstoque };

        try {
            const result = await DataService.addItemConsumivel(newItem, currentUser.role);
            showToast(result.message || 'Item cadastrado com sucesso!');
            await renderItensConsumiveis(''); // Atualiza a lista
            
            nomeInput.value = '';
            unidadeInput.value = '';
            quantidadeInput.value = '';
        } catch(error) {
            showToast(error.message, 'error');
        }
    }

    async function populateConsumoUsuarioSelect() {
        const select = document.getElementById('consumo-usuario-select');
        if (!select) return;
        select.innerHTML = '<option value="">Carregando...</option>';
        try {
            const result = await DataService.getUsers(currentUser.role); // Reutiliza a busca de usuários
            usuarios = result.data;
            select.innerHTML = '<option value="">Selecione o Usuário</option>';
            usuarios.forEach(user => {
                const option = document.createElement('option');
                option.value = user.id;
                option.textContent = user.name;
                select.appendChild(option);
            });
        } catch(error) {
            select.innerHTML = '<option value="">Erro ao carregar usuários</option>';
        }
    }

    async function populateConsumoMaterialSelect() {
        const select = document.getElementById('consumo-material-select');
        if (!select) return;
        select.innerHTML = '<option value="">Carregando...</option>';
        try {
            const result = await DataService.getItensConsumiveis(currentUser.role);
            itensConsumiveis = result.data;
            select.innerHTML = '<option value="">Selecione o Material</option>';
            itensConsumiveis.forEach(item => {
                if (item.quantidadeEstoque > 0) {
                    const option = document.createElement('option');
                    option.value = item.id;
                    option.textContent = `${item.nome} (Estoque: ${item.quantidadeEstoque})`;
                    select.appendChild(option);
                }
            });
        } catch(error) {
             select.innerHTML = '<option value="">Erro ao carregar materiais</option>';
        }
    }

    async function handleRegistrarConsumo() {
        const usuarioSelect = document.getElementById('consumo-usuario-select');
        const materialSelect = document.getElementById('consumo-material-select');
        const quantidadeInput = document.getElementById('consumo-quantidade-input');

        const usuarioId = parseInt(usuarioSelect.value, 10);
        const itemId = parseInt(materialSelect.value, 10);
        const quantidadeConsumida = parseInt(quantidadeInput.value, 10);
        
        const item = itensConsumiveis.find(i => i.id == itemId);

        if (!usuarioId || !itemId || isNaN(quantidadeConsumida) || quantidadeConsumida <= 0) {
            showToast('Por favor, preencha todos os campos.', 'error');
            return;
        }
        if (quantidadeConsumida > item.quantidadeEstoque) {
            showToast(`Quantidade insuficiente em estoque. Disponível: ${item.quantidadeEstoque}`, 'error');
            return;
        }

        const consumoData = {
            itemId,
            quantidadeConsumida,
            usuarioId
        };

        try {
            const result = await DataService.registrarConsumo(consumoData, currentUser.role);
            showToast(result.message || 'Consumo registrado com sucesso!');
            
            quantidadeInput.value = '';
            materialSelect.value = '';
            await populateConsumoMaterialSelect(); // Recarrega a lista com a nova quantidade
            await renderItensConsumiveis(''); // Atualiza a lista na outra aba também
        } catch(error) {
            showToast(error.message, 'error');
        }
    }
    function handleAlocarItens() {
        const torreId = document.getElementById('torre-alocar-select').value; // Supondo que você adicione um <select> para escolher a torre
        if (!torreId) {
            showToast('Por favor, selecione uma torre para alocar os itens.', 'error');
            return;
        }
        if (itensParaAlocar.length === 0) {
            showToast('Nenhum item selecionado para alocar.', 'error');
            return;
        }

        const promises = itensParaAlocar.map(item => {
            const payload = { patrimonio: item.patrimonio, torreId: torreId };
            return DataService.alocarItemTorre(payload, currentUser.role);
        });

        Promise.all(promises)
            .then(() => {
                showToast('Itens alocados com sucesso!');
                itensParaAlocar = [];
                renderCarrinhoAlocar();
                renderTotalTorres('');
            })
            .catch(error => {
                showToast(`Erro ao alocar itens: ${error.message}`, 'error');
            });
    }

    function handleRetirarItens() {
        if (itensParaRetirar.length === 0) {
            showToast('Nenhum item selecionado para retirar.', 'error');
            return;
        }
        
        const promises = itensParaRetirar.map(item => {
            const payload = { patrimonio: item.patrimonio };
            return DataService.retirarItemTorre(payload, currentUser.role);
        });

        Promise.all(promises)
            .then(() => {
                showToast('Itens retirados e enviados para redirecionamento!');
                itensParaRetirar = [];
                renderCarrinhoRetirar();
                // Recarregar os dados para atualizar todas as visões
                loadRedirectInventory(); 
                renderTotalTorres('');
            })
            .catch(error => {
                showToast(`Erro ao retirar itens: ${error.message}`, 'error');
            });
    }

    // SUBSTITUA SUA FUNÇÃO ATUAL POR ESTA VERSÃO COMPLETA E CORRIGIDA:
async function renderRelatorioConsumo(searchTerm = '') {
    const tbody = document.getElementById('consumo-relatorio-tbody');
    if (!tbody) return;

    tbody.innerHTML = `<tr><td colspan="4">${emptyStateHTML('Carregando histórico...', 'fas fa-spinner fa-spin')}</td></tr>`;

    try {
        const result = await DataService.getHistoricoConsumo(currentUser.role);
        historicoConsumo = result.data; // Armazena os dados na variável do escopo

        const term = searchTerm.toLowerCase();
        const filtered = historicoConsumo.filter(log =>
            (log.usuario_nome && log.usuario_nome.toLowerCase().includes(term)) ||
            (log.item_nome && log.item_nome.toLowerCase().includes(term)) ||
            (log.data_consumo_formatada && log.data_consumo_formatada.includes(term))
        );

        if (filtered.length === 0) {
            tbody.innerHTML = `<tr><td colspan="4">${emptyStateHTML('Nenhum registro encontrado.', 'fas fa-file-alt')}</td></tr>`;
            return;
        }

        // O backend já envia os dados ordenados, então apenas exibimos.
        tbody.innerHTML = filtered.map(log =>
            `<tr class="hover:bg-slate-50">
                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-500">${log.data_consumo_formatada || 'N/A'}</td>
                
                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-800 font-medium">${log.usuario_nome || 'N/A'}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-800">${log.item_nome || 'N/A'}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-800 font-bold">${log.quantidade_consumida || '0'}</td>
            </tr>`
        ).join('');

    } catch (error) {
         tbody.innerHTML = `<tr><td colspan="4">${emptyStateHTML(`Erro ao carregar: ${error.message}`, 'fas fa-exclamation-triangle')}</td></tr>`;
    }
}
    // =========================================================
    // ESTADO E LÓGICA DO MODAL DE COMBUSTÍVEL
    // =========================================================
    let placeholderVeiculos = [{ id: 1, nome: 'Montana' }, { id: 2, nome: 'Uno' }, { id: 3, nome: 'Pajero' }];
    let placeholderAbastecimentos = [{ id: 1, veiculoId: 1, veiculoNome: 'Montana', data: '2025-06-10', hodometro: 150250, litros: 45.50, valor: 250.00 }, { id: 2, veiculoId: 1, veiculoNome: 'Montana', data: '2025-06-20', hodometro: 150800, litros: 48.00, valor: 265.00 }, { id: 3, veiculoId: 2, veiculoNome: 'Uno', data: '2025-06-15', hodometro: 80100, litros: 35.00, valor: 190.00 }];
    
    function switchCombustivelTab(activeTabName) {
        document.querySelectorAll('.combustivel-tab').forEach(tab => {
            tab.className = `combustivel-tab flex items-center gap-2 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-all duration-200 ${tab.dataset.tab === activeTabName ? 'text-zinc-600 border-zinc-600' : 'text-slate-500 border-transparent hover:text-slate-700 hover:border-slate-300'}`;
        });
        ['registrar', 'historico'].forEach(tab => document.getElementById(`section-combustivel-${tab}`)?.classList.toggle('hidden', tab !== activeTabName));
        if (activeTabName === 'registrar') {
            populateCombustivelVeiculoSelect();
            document.getElementById('combustivel-form-container')?.classList.add('hidden');
            document.getElementById('combustivel-prompt-selecao')?.classList.remove('hidden');
            document.getElementById('combustivel-alerta-primeiro-registro')?.classList.add('hidden');
        }
        if (activeTabName === 'historico') { renderHistoricoCombustivel(''); }
    }
    function populateCombustivelVeiculoSelect() {
        const select = document.getElementById('combustivel-veiculo-select'); if (!select) return;
        select.innerHTML = '<option value="">-- Escolha um veículo --</option>';
        placeholderVeiculos.forEach(v => { select.innerHTML += `<option value="${v.id}">${v.nome}</option>`; });
        select.value = "";
    }
    function calcularConsumo(veiculoId, abastecimentoAtual) {
        const abastecimentosAnteriores = placeholderAbastecimentos.filter(a => a.veiculoId == veiculoId && a.id != abastecimentoAtual.id && a.hodometro < abastecimentoAtual.hodometro).sort((a, b) => b.hodometro - a.hodometro);
        if (abastecimentosAnteriores.length > 0) { const ultimoAbastecimento = abastecimentosAnteriores[0]; const distancia = abastecimentoAtual.hodometro - ultimoAbastecimento.hodometro; if (distancia > 0 && abastecimentoAtual.litros > 0) { return (distancia / abastecimentoAtual.litros).toFixed(2); } }
        return null;
    }
    function handleVeiculoSelectionChange(e) {
        const veiculoId = parseInt(e.target.value, 10);
        const formContainer = document.getElementById('combustivel-form-container');
        const prompt = document.getElementById('combustivel-prompt-selecao');
        const alerta = document.getElementById('combustivel-alerta-primeiro-registro');
        document.getElementById('combustivel-calculado').value = '-- Km/L';
        if (veiculoId) {
            const veiculo = placeholderVeiculos.find(v => v.id === veiculoId);
            const temRegistro = placeholderAbastecimentos.some(a => a.veiculoId === veiculoId);
            if (!temRegistro) { alerta.innerHTML = `Primeiro registro para <strong>${veiculo.nome}</strong>. Preencha os dados abaixo.`; alerta.classList.remove('hidden'); }
            else { alerta.classList.add('hidden'); }
            formContainer.classList.remove('hidden');
            prompt.classList.add('hidden');
            document.getElementById('combustivel-data').valueAsDate = new Date();
        } else {
            formContainer.classList.add('hidden');
            prompt.classList.remove('hidden');
            alerta.classList.add('hidden');
        }
    }
    function handleRegistrarAbastecimento() {
        const veiculoId = parseInt(document.getElementById('combustivel-veiculo-select').value, 10);
        const data = document.getElementById('combustivel-data').value;
        const hodometro = parseInt(document.getElementById('combustivel-hodometro').value, 10);
        const litros = parseFloat(document.getElementById('combustivel-litros').value.replace(',', '.'));
        const valor = parseFloat(document.getElementById('combustivel-valor').value.replace(',', '.'));
        
        const veiculo = placeholderVeiculos.find(v => v.id === veiculoId); // Usaremos placeholderVeiculos por enquanto
        
        if (!veiculo || !data || isNaN(hodometro) || isNaN(litros) || isNaN(valor) || hodometro <= 0 || litros <= 0 || valor <= 0) {
            showToast('Por favor, preencha todos os campos com valores válidos.', 'error');
            return;
        }

        const payload = { 
            veiculoId: veiculo.id,
            veiculoNome: veiculo.nome, 
            data, 
            hodometro, 
            litros, 
            valor 
        };

        DataService.addAbastecimento(payload, currentUser.role)
            .then(result => {
                showToast(result.message);
                document.getElementById('combustivel-form')?.reset();
                document.getElementById('combustivel-calculado').value = '-- Km/L';
                // Atualiza o histórico se o usuário estiver na aba
                if (!document.getElementById('section-combustivel-historico').classList.contains('hidden')) {
                    renderHistoricoCombustivel();
                }
            })
            .catch(error => {
                showToast(error.message, 'error');
            });
    }
    async function renderHistoricoCombustivel(searchTerm = '') {
        const tbody = document.getElementById('combustivel-historico-tbody');
        if (!tbody) return;
        tbody.innerHTML = `<tr><td colspan="6">${emptyStateHTML('Carregando histórico...', 'fas fa-spinner fa-spin')}</td></tr>`;
        
        try {
            const result = await DataService.getHistoricoCombustivel(currentUser.role);
            const historicoAbastecimentos = result.data;

            // Cria um mapa para armazenar o consumo calculado para cada registro de forma eficiente.
            const consumoMap = new Map();

            // Agrupa todos os abastecimentos por veículo para calcular corretamente "veículo A com veículo A".
            const historicoPorVeiculo = historicoAbastecimentos.reduce((acc, log) => {
                const veiculoId = log.veiculo_id || log.veiculo_nome; // Usa ID ou nome como chave
                if (!acc[veiculoId]) {
                    acc[veiculoId] = [];
                }
                acc[veiculoId].push(log);
                return acc;
            }, {});

            // Para cada veículo, calcula o consumo baseado na sua lógica
            for (const veiculoId in historicoPorVeiculo) {
                // Ordena os abastecimentos do mais antigo para o mais novo (pelo hodômetro)
                const logsDoVeiculo = historicoPorVeiculo[veiculoId].sort((a, b) => parseInt(a.hodometro) - parseInt(b.hodometro));

                // Itera sobre os abastecimentos para calcular o consumo de cada trecho
                for (let i = 0; i < logsDoVeiculo.length - 1; i++) {
                    const atual = logsDoVeiculo[i];
                    const proximo = logsDoVeiculo[i + 1];

                    const distancia = proximo.hodometro - atual.hodometro;
                    const litrosGastos = parseFloat(atual.litros); // Litros deste abastecimento (o de 07/01 no seu exemplo)
                    
                    if (distancia > 0 && litrosGastos > 0) {
                       const consumo = (distancia / litrosGastos).toFixed(2);
                       // Armazena o consumo calculado usando o ID do registro como chave.
                       consumoMap.set(atual.id, consumo);
                    }
                }
            }

            const term = searchTerm.toLowerCase();
            const filtered = historicoAbastecimentos.filter(log =>
                log.veiculo_nome.toLowerCase().includes(term) ||
                log.data_formatada.includes(term)
            );
            
            // Ordena para exibição (do mais novo para o mais antigo)
            const displayList = filtered.sort((a, b) => new Date(b.data_abastecimento) - new Date(a.data_abastecimento) || b.hodometro - a.hodometro);

            if (displayList.length === 0) {
                tbody.innerHTML = `<tr><td colspan="6">${emptyStateHTML('Nenhum histórico encontrado.', 'fas fa-file-invoice-dollar')}</td></tr>`;
                return;
            }

            tbody.innerHTML = displayList.map(log => {
                // Pega o consumo calculado do mapa. Se não existir (último abastecimento), mostra 'N/A'.
                const consumoKm_L = consumoMap.get(log.id) || 'N/A';
                
                return `<tr class="hover:bg-slate-50">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-500">${log.data_formatada}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-slate-800">${log.veiculo_nome}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-800">${parseInt(log.hodometro).toLocaleString('pt-BR')} Km</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-800">${parseFloat(log.litros).toFixed(2)} L</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-800 font-medium">R$ ${parseFloat(log.valor_total).toFixed(2)}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-800 font-bold">${consumoKm_L}</td>
                        </tr>`;
            }).join('');

        } catch (error) {
            tbody.innerHTML = `<tr><td colspan="6">${emptyStateHTML(`Erro ao carregar: ${error.message}`, 'fas fa-times-circle')}</td></tr>`;
        }
    }
    // =========================================================
    // CONTROLE GERAL DOS MODAIS E EVENTOS
    // =========================================================
    applyCardPermissions(); // <-- ADICIONE ESTA LINHA AQUI
    const modalMap = { 'card-torres': 'modal-torres', 'card-consumo': 'modal-consumo', 'card-combustivel': 'modal-combustivel', 'card-notificacoes': 'modal-notificacoes','card-seguranca': 'modal-seguranca' };
    // --- LÓGICA PARA ABRIR MODAL VIA URL ---
function checkUrlForModal() {
    const urlParams = new URLSearchParams(window.location.search);
    const modalToOpen = urlParams.get('open_modal');
    if (modalToOpen && modalMap[modalToOpen]) {
        openModal(modalMap[modalToOpen]);
    }
}
    async function openModal(modalId) {
        const modal = document.getElementById(modalId);
        if (modal) {
            showGlobalLoading('Carregando dados...'); // Agora esta função existe
            try {
                if (modalId === 'modal-torres') {
                    const [invResult, towersResult] = await Promise.all([
                        DataService.getInventory(currentUser.role),
                        DataService.getTowers(currentUser.role) // Supondo que você criará esta função na API
                    ]);
                    mainInventory = invResult.data;
                    towersData = towersResult.data;
                    switchTorresTab('alocar');
                }
                if (modalId === 'modal-consumo') { /* ... */ } // ADICIONE ESSAS LINHAS SE ELAS NÃO EXISTIREM
                if (modalId === 'modal-combustivel') { /* ... */ } // ADICIONE ESSAS LINHAS SE ELAS NÃO EXISTIREM
                if (modalId === 'modal-seguranca') { await renderSafetyStockEditor(); } // <-- LINHA 3 ADICIONADA
                // Adicionar lógica para outros modais aqui quando formos implementá-los
                
                modal.classList.remove('hidden');
                configureModalPermissions(); // <-- ADICIONE ESTA LINHA
            } 
            catch (error) {
                const toastContainer = document.getElementById('toast-container');
                if (toastContainer) { // Se o toast existir, use-o
                    showToast(`Erro ao carregar dados: ${error.message}`, 'error');
                } else { // Senão, use alert
                    alert(`Erro ao carregar dados: ${error.message}`);
                }
            } finally {
                hideGlobalLoading();
            }
        }
    }
    function closeModal(modalElement) { if (modalElement) modalElement.classList.add('hidden'); }
    for (const cardId in modalMap) {
        const card = document.getElementById(cardId);
        if(card) card.addEventListener('click', () => openModal(modalMap[cardId]));
    }
    document.querySelectorAll('.modal-close-button').forEach(button => button.addEventListener('click', () => closeModal(button.closest('.modal-overlay'))));
    
    // BINDING - TORRES
    document.querySelectorAll('.torres-tab').forEach(tab => tab.addEventListener('click', () => switchTorresTab(tab.dataset.tab)));
    document.getElementById('torres-materiais-disponiveis')?.addEventListener('click', handleTorresItemClick);
    document.getElementById('torres-itens-na-torre')?.addEventListener('click', handleTorresItemClick);
    document.getElementById('torres-resultado-total')?.addEventListener('click', e => { const header = e.target.closest('.accordion-header'); if (header) { const content = header.nextElementSibling; header.querySelector('.fa-chevron-down').classList.toggle('rotate-180'); content.style.maxHeight = content.style.maxHeight ? null : content.scrollHeight + "px"; } });
    document.getElementById('geral-setor-input')?.addEventListener('keyup', handleAddSector);
    document.getElementById('setores-tag-container')?.addEventListener('click', e => { handleRemoveSector(e); document.getElementById('geral-setor-input')?.focus(); });
    document.getElementById('geral-cadastrar-btn')?.addEventListener('click', handleRegisterTower);
    document.getElementById('geral-pesquisa-input')?.addEventListener('keyup', e => renderGeralSearchResults(e.target.value));
    document.getElementById('torres-pesquisa-materiais')?.addEventListener('keyup', e => renderMateriaisDisponiveis(e.target.value));


    // BINDING - CONSUMO
    document.querySelectorAll('.consumo-tab').forEach(tab => tab.addEventListener('click', () => switchConsumoTab(tab.dataset.tab)));
    document.getElementById('item-consumivel-adicionar-btn')?.addEventListener('click', handleCadastrarItemConsumivel);
    document.getElementById('item-consumivel-pesquisa')?.addEventListener('keyup', (e) => renderItensConsumiveis(e.target.value));
    document.getElementById('consumo-registrar-btn')?.addEventListener('click', handleRegistrarConsumo);
    document.getElementById('consumo-relatorio-pesquisa')?.addEventListener('keyup', (e) => renderRelatorioConsumo(e.target.value));
    
    // BINDING - COMBUSTÍVEL
    document.querySelectorAll('.combustivel-tab').forEach(tab => tab.addEventListener('click', () => switchCombustivelTab(tab.dataset.tab)));
    document.getElementById('combustivel-veiculo-select')?.addEventListener('change', handleVeiculoSelectionChange);
    document.getElementById('combustivel-registrar-btn')?.addEventListener('click', handleRegistrarAbastecimento);
    document.getElementById('combustivel-historico-pesquisa')?.addEventListener('keyup', e => renderHistoricoCombustivel(e.target.value));
    // [NOVO] Listener para os botões "Salvar" do Estoque de Segurança
document.getElementById('safety-stock-content')?.addEventListener('click', async (e) => {
    if (e.target.classList.contains('save-safety-stock-btn')) {
        const button = e.target;
        const productId = button.dataset.productId;
        const input = document.getElementById(`stock-input-${productId}`);
        const newStockLevel = parseInt(input.value, 10);
        if (isNaN(newStockLevel) || newStockLevel < 0) {
            showToast('Por favor, insira um valor numérico válido.', 'error');
            return;
        }
        button.textContent = 'Salvando...';
        button.disabled = true;
        try {
            const result = await DataService.updateSafetyStock({ productId, newStockLevel }, currentUser.role);
            showToast(result.message);
        } catch (error) {
            showToast(error.message, 'error');
        } finally {
            button.textContent = 'Salvar';
            button.disabled = false;
        }
    }
});
    
});