💎 Guia Didático Definitivo: Gestão de Estoques com Spring Boot

// Este objeto encapsula toda a lógica de autenticação
const auth = {
    // Salva o token no localStorage
    saveToken: (token) => {
        localStorage.setItem('jwt_token', token);
    },
    // Pega o token do localStorage
    getToken: () => {
        return localStorage.getItem('jwt_token');
    },
    // Remove o token para fazer logout
    removeToken: () => {
        localStorage.removeItem('jwt_token');
    },
    // Verifica se existe um token
    isLoggedIn: () => {
        const token = auth.getToken();
        return !!token; // Retorna true se o token existir, false caso contrário
    },
    // Lida com o processo de login
    handleLogin: async (username, password) => {
        try {
            const response = await fetch('/api/auth/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ login: username, password: password })
            });

            if (!response.ok) {
                throw new Error('Usuário ou senha inválidos.');
            }

            const data = await response.json();
            auth.saveToken(data.token); // Salva o token recebido
            window.location.href = '/index.html'; // Redireciona para a página principal
        } catch (error) {
            const errorDiv = document.getElementById('error-message');
            errorDiv.textContent = error.message;
            errorDiv.classList.remove('d-none');
        }
    },
    // Lida com o processo de logout
    handleLogout: () => {
        auth.removeToken();
        window.location.href = '/login.html'; // Redireciona para a página de login
    }
};

// Adiciona o listener de evento APENAS se estivermos na página de login
if (window.location.pathname.endsWith('login.html')) {
    document.getElementById('login-form').addEventListener('submit', (event) => {
        event.preventDefault(); // Impede o envio padrão do formulário
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        auth.handleLogin(username, password);
    });
}

// Adiciona o listener de evento APENAS se estivermos na página principal
if (window.location.pathname.endsWith('index.html')) {
    document.getElementById('logout-button').addEventListener('click', auth.handleLogout);
}

// Módulo para centralizar todas as chamadas à API
const api = {
    // Função auxiliar genérica para requisições
    fetch: async (endpoint, method = 'GET', body = null) => {
        const token = auth.getToken();
        const headers = {
            'Content-Type': 'application/json'
        };

        if (token) {
            headers['Authorization'] = `Bearer ${token}`;
        }

        const config = {
            method: method,
            headers: headers
        };

        if (body) {
            config.body = JSON.stringify(body);
        }

        const response = await fetch(`/api${endpoint}`, config);

        // Se o token for inválido/expirado, o servidor retornará 403.
        // Devemos deslogar o usuário.
        if (response.status === 403 || response.status === 401) {
            auth.handleLogout();
            return;
        }

        if (!response.ok) {
            throw new Error(`Erro na API: ${response.statusText}`);
        }
        
        // Retorna um JSON vazio para respostas 204 No Content
        if (response.status === 204) {
            return {};
        }

        return response.json();
    },

    // Funções específicas para cada recurso
    getProdutos: () => api.fetch('/produtos'),
    deleteProduto: (id) => api.fetch(`/produtos/${id}`, 'DELETE'),
    
    getCategorias: () => api.fetch('/categorias'),
    // ... adicione outras funções conforme necessário (getFornecedores, createProduto, etc.)
};

const appContent = document.getElementById('app-content');

// Templates HTML para cada "página"
const renderProdutos = async () => {
    try {
        const produtos = await api.getProdutos();
        const tableRows = produtos.map(p => `
            <tr>
                <td>${p.id}</td> <td>${p.nome}</td>
                <td>${p.quantidade}</td> <td>R$ ${p.preco.toFixed(2)}</td> <td><span class="badge badge-primary rounded-pill d-inline">${p.nomeCategoria}</span></td>
                <td>
                    <button class="btn btn-sm btn-danger btn-floating" data-id="${p.id}" data-action="delete">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
            </tr>
        `).join('');

        return `
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h2">Produtos em Estoque</h1>
                <a href="#/produtos/novo" class="btn btn-primary btn-rounded"><i class="fas fa-plus me-2"></i>Adicionar Produto</a>
            </div>
            <div class="card"><div class="card-body">
                <table class="table align-middle mb-0 bg-white table-hover">
                    <thead class="bg-light">
                        <tr><th>ID</th><th>Nome</th><th>Qtd.</th><th>Preço</th><th>Categoria</th><th>Ações</th></tr>
                    </thead>
                    <tbody>${tableRows}</tbody>
                </table>
            </div></div>
        `;
    } catch (error) {
        return `<div class="alert alert-danger">Erro ao carregar produtos.</div>`;
    }
};

const renderCategorias = async () => {
    // Lógica similar para buscar e renderizar categorias
    return '<h1>Página de Categorias (a implementar)</h1>';
};

// Mapa de rotas
const routes = {
    '/produtos': renderProdutos,
    '/categorias': renderCategorias,
    // Adicione outras rotas aqui
};

// Função principal do roteador
const router = async () => {
    // Proteção de rota: se não estiver logado, manda para o login.
    if (!auth.isLoggedIn()) {
        window.location.pathname = '/login.html';
        return;
    }

    // Pega o caminho do hash ou vai para a página padrão
    const path = window.location.hash.substring(1) || '/produtos';
    const renderFunction = routes[path] || (() => '<h2>Página não encontrada</h2>');
    
    appContent.innerHTML = await renderFunction();
};

// O roteador é acionado quando a página carrega ou o hash da URL muda
window.addEventListener('load', router);
window.addEventListener('hashchange', router);

// Delegação de eventos para botões de ação (ex: deletar)
appContent.addEventListener('click', async (event) => {
    const target = event.target.closest('[data-action="delete"]');
    if (target) {
        const id = target.dataset.id;
        if (confirm(`Tem certeza que deseja deletar o produto ID ${id}?`)) {
            try {
                await api.deleteProduto(id);
                alert('Produto deletado com sucesso!');
                router(); // Recarrega a view atual
            } catch (error) {
                alert('Erro ao deletar produto. Você tem permissão de ADMIN?');
            }
        }
    }
});