<template>
    <HeaderPublic />
    <div class="login-container d-flex align-items-center justify-content-center min-vh-100 p-3">
        
        <div class="login-card p-5 shadow-lg rounded-4 bg-white">
           
            <div class="text-center mb-4">
                <img src="@/assets/CtrlCash-blue.png" alt="CtrlCash Logo" width="150" class="mb-3">
                <h2 class="fw-bold text-primary-dark">Login</h2>
                <p class="text-secondary-dark">Insira seus dados para continuar o controle.</p>
            </div>

            <form @submit.prevent="handleLogin">
                <div class="mb-3">
                    <label for="email" class="form-label fw-medium text-primary-dark">E-mail</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="bi bi-envelope-fill"></i></span>
                        <input type="email" class="form-control" id="email" v-model="loginForm.email" required placeholder="seu.email@exemplo.com">
                    </div>
                </div>
               
                <div class="mb-4">
                    <label for="password" class="form-label fw-medium text-primary-dark">Senha</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
                        <input type="password" class="form-control" id="password" v-model="loginForm.password" required placeholder="********">
                    </div>
                    <div class="text-end mt-2">
    
                    </div>
                </div>

                <!-- Mensagem de erro -->
                <div v-if="error" class="alert alert-danger">
                    {{ error }}
                </div>

                <button type="submit" class="btn btn-primary-feature w-100 fw-bold py-2 shadow-sm" :disabled="loading">
                    <span v-if="loading" class="spinner-border spinner-border-sm me-2"></span>
                    {{ loading ? 'Entrando...' : 'Acessar Minha Conta' }}
                </button>
            </form>
        </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue';
    import { useRouter } from 'vue-router';
    import HeaderPublic from '@/components/HeaderPublic.vue';

    const router = useRouter();
    const loading = ref(false);
    const error = ref('');

    const loginForm = ref({
        email: '',
        password: ''
    });

    const handleLogin = async () => {
        loading.value = true;
        error.value = '';

        try {
            const response = await fetch('/api/auth/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(loginForm.value)
            });

            const data = await response.json();

            if (response.ok) {
                // Salvar usuário no localStorage
                localStorage.setItem('user', JSON.stringify(data.user));
                localStorage.setItem('isAuthenticated', 'true');
                
                // Redirecionar para dashboard
                router.push('/dashboard');
            } else {
                error.value = data.error || 'Erro ao fazer login';
            }
        } catch (err) {
            console.error('Erro:', err);
            error.value = 'Erro de conexão com o servidor';
        } finally {
            loading.value = false;
        }
    };
</script>

<style scoped>
    .text-primary-dark { color: #1A3B5E !important; }
    .text-secondary-dark { color: #6c757d !important; }
    
    .login-container { background-color: #F8F9FA; }
    .login-card { max-width: 420px; width: 100%; }
    
    .btn-primary-feature {
        background-color: #1A3B5E;
        border-color: #1A3B5E;
        color: white;
        transition: background-color 0.2s;
    }
    .btn-primary-feature:hover:not(:disabled) {
        background-color: #29517b;
        border-color: #29517b;
    }
    .btn-primary-feature:disabled {
        opacity: 0.6;
    }

    .form-control:focus {
        border-color: #1A3B5E;
        box-shadow: 0 0 0 0.25rem rgba(26, 59, 94, 0.25);
    }
    .input-group-text {
        background-color: #e9ecef;
        border-right: none;
        color: #1A3B5E;
    }

    .hover-link:hover { text-decoration: underline !important; }
</style>