<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>MAM Control - Sistema de Controle de Acesso</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="./favicon.png">
</head>

<body>
    <div id="login-screen" class="login-screen">
        <div class="login-container">
            <div class="login-image">
                <img src="./banner-login.png" alt="MAM Control - Sistema de Gestão" class="side-image">
            </div>

            <div class="login-form-container">
                <div class="form-wrapper">
                    <div class="login-header">
                        <div class="login-logo">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <h1>MAM Control</h1>
                        <p>Controle de acesso</p>
                    </div>

                    <form id="login-form" class="login-form">
                        <div class="form-group">
                            <div class="input-with-icon">
                                <i class="fas fa-building"></i>
                                <input type="text" id="login-tenant" required autocomplete="off"
                                    placeholder="Digite o nome da empresa">
                            </div>
                            <label for="login-tenant">Empresa</label>
                        </div>

                        <div class="form-group">
                            <div class="input-with-icon">
                                <i class="fas fa-envelope"></i>
                                <input type="email" id="login-email" required autocomplete="email"
                                    placeholder="seu@email.com">
                            </div>
                            <label for="login-email">E-mail</label>
                        </div>

                        <div class="form-group">
                            <div class="input-with-icon">
                                <i class="fas fa-lock"></i>
                                <input type="password" id="login-password" required autocomplete="current-password"
                                    placeholder="Digite sua senha">
                            </div>
                            <label for="login-password">Senha</label>
                        </div>

                        <div id="login-error" class="login-error hidden">
                            <i class="fas fa-exclamation-circle"></i>
                            <span>Erro de login</span>
                        </div>

                        <button type="submit" class="btn-login">
                            <i class="fas fa-sign-in-alt"></i>
                            <span>Entrar no sistema</span>
                        </button>

                        <div class="login-help">
                            <a href="#" class="forgot-password">
                                <i class="fas fa-key"></i>
                                Esqueceu sua senha?
                            </a>
                            <a href="#" class="support-link">
                                <i class="fas fa-headset"></i>
                                Suporte técnico
                            </a>
                        </div>
                    </form>

                    <div class="login-footer">
                        <div class="version-info">
                            <i class="fas fa-code"></i>
                            <span>Versão 1.0.0</span>
                        </div>
                        <div class="copyright">
                            © 2024 MAM Soluções. Todos os direitos reservados.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const API_BASE_URL = 'http://localhost:3000/api';

        document.getElementById('login-form').addEventListener('submit', async function (e) {
            e.preventDefault();

            const tenant = document.getElementById('login-tenant').value.trim();
            const email = document.getElementById('login-email').value.trim();
            const password = document.getElementById('login-password').value;
            const errorDiv = document.getElementById('login-error');

            errorDiv.classList.add('hidden');

            if (!tenant || !email || !password) {
                showError('Por favor, preencha todos os campos');
                return;
            }

            try {
                const response = await fetch(`${API_BASE_URL}/login`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ tenant, email, password })
                });

                const data = await response.json();

                if (response.ok && data.success) {
                    localStorage.setItem('auth_token', data.token);
                    localStorage.setItem('tenant_id', data.tenant_id);
                    localStorage.setItem('user_name', data.user_name);
                    localStorage.setItem('user_role', data.user_role);
                    
                    window.location.href = 'dashboard.html';
                } else {
                    showError(data.message || 'Credenciais inválidas');
                }
            } catch (error) {
                console.error('Erro ao fazer login:', error);
                showError('Erro ao conectar com o servidor');
            }
        });

        function showError(message) {
            const errorDiv = document.getElementById('login-error');
            errorDiv.querySelector('span').textContent = message;
            errorDiv.classList.remove('hidden');
        }

        if (localStorage.getItem('auth_token')) {
            window.location.href = 'dashboard.html';
        }
    </script>
</body>

</html>
