{% extends "shared/frontend/base.html" %}

{% block title %}Login - BMC Hub{% endblock %}

{% block content %}
<div class="container">
    <div class="row justify-content-center align-items-center" style="min-height: 80vh;">
        <div class="col-md-5 col-lg-4">
            <div class="card shadow-sm">
                <div class="card-body p-4">
                    <div class="text-center mb-4">
                        <h2 class="fw-bold" style="color: var(--primary-color);">BMC Hub</h2>
                        <p class="text-muted">Log ind for at fortsætte</p>
                    </div>
                    
                    <form id="loginForm">
                        <div class="mb-3">
                            <label for="username" class="form-label">Brugernavn</label>
                            <input 
                                type="text" 
                                class="form-control" 
                                id="username" 
                                name="username" 
                                placeholder="Indtast brugernavn"
                                required
                                autofocus
                            >
                        </div>
                        
                        <div class="mb-3">
                            <label for="password" class="form-label">Adgangskode</label>
                            <input 
                                type="password" 
                                class="form-control" 
                                id="password" 
                                name="password" 
                                placeholder="Indtast adgangskode"
                                required
                            >
                        </div>
                        
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="rememberMe">
                            <label class="form-check-label" for="rememberMe">
                                Husk mig
                            </label>
                        </div>
                        
                        <div id="errorMessage" class="alert alert-danger d-none" role="alert">
                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
                            <span id="errorText"></span>
                        </div>
                        
                        <button type="submit" class="btn btn-primary w-100 mb-3">
                            <i class="bi bi-box-arrow-in-right me-2"></i>
                            Log ind
                        </button>
                    </form>
                    
                    <div class="text-center">
                        <small class="text-muted">
                            <a href="#" class="text-decoration-none">Glemt adgangskode?</a>
                        </small>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-3">
                <small class="text-muted">
                    BMC Networks &copy; 2024
                </small>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('loginForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    const errorMessage = document.getElementById('errorMessage');
    const errorText = document.getElementById('errorText');
    const submitBtn = e.target.querySelector('button[type="submit"]');
    
    // Disable submit button
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>Logger ind...';
    
    // Hide previous errors
    errorMessage.classList.add('d-none');
    
    try {
        const response = await fetch('/api/v1/auth/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ username, password })
        });
        
        const data = await response.json();
        
        if (response.ok) {
            // Store token in localStorage
            localStorage.setItem('access_token', data.access_token);
            localStorage.setItem('user', JSON.stringify(data.user));
            
            // Redirect to dashboard
            window.location.href = '/';
        } else {
            // Show error
            errorText.textContent = data.detail || 'Login fejlede. Tjek brugernavn og adgangskode.';
            errorMessage.classList.remove('d-none');
            
            // Re-enable submit button
            submitBtn.disabled = false;
            submitBtn.innerHTML = '<i class="bi bi-box-arrow-in-right me-2"></i>Log ind';
        }
    } catch (error) {
        console.error('Login error:', error);
        errorText.textContent = 'Kunne ikke forbinde til serveren. Prøv igen.';
        errorMessage.classList.remove('d-none');
        
        // Re-enable submit button
        submitBtn.disabled = false;
        submitBtn.innerHTML = '<i class="bi bi-box-arrow-in-right me-2"></i>Log ind';
    }
});

// Check if already logged in
const token = localStorage.getItem('access_token');
if (token) {
    // Verify token is still valid
    fetch('/api/v1/auth/me', {
        headers: {
            'Authorization': `Bearer ${token}`
        }
    })
    .then(response => {
        if (response.ok) {
            // Redirect to dashboard
            window.location.href = '/';
        } else {
            // Token invalid, clear storage
            localStorage.removeItem('access_token');
            localStorage.removeItem('user');
        }
    })
    .catch(() => {
        // Network error, clear storage
        localStorage.removeItem('access_token');
        localStorage.removeItem('user');
    });
}
</script>

<style>
/* Login page specific styles */
.card {
    border: none;
    border-radius: 12px;
}

.card-body {
    padding: 2.5rem 2rem;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(15, 76, 117, 0.15);
}

.btn-primary {
    padding: 0.75rem;
    font-weight: 500;
    border-radius: 8px;
}

/* Dark mode adjustments */
[data-theme="dark"] .card {
    background-color: var(--dark-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .form-control {
    background-color: var(--dark-surface);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--dark-text);
}

[data-theme="dark"] .form-control:focus {
    background-color: var(--dark-surface);
    border-color: var(--primary-color);
    color: var(--dark-text);
}
</style>
{% endblock %}