{% extends "base.html" %}

{% block title %}Masuk | D'Tector.AI{% endblock %}

{% block extra_css %}
<style>
    .login-container {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem;
        background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
    }
    .login-card {
        background: #1e293b;
        border-radius: 2rem;
        padding: 2.5rem;
        max-width: 450px;
        width: 100%;
        border: 1px solid #334155;
        animation: fadeInUp 0.6s ease-out;
    }
    .login-header { text-align: center; margin-bottom: 2rem; }
    .login-logo {
        width: 70px;
        height: 70px;
        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        border-radius: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
    }
    .login-logo i { font-size: 2rem; color: white; }
    .login-header h2 { font-size: 1.75rem; margin-bottom: 0.5rem; color: #e2e8f0; }
    .btn-login {
        width: 100%;
        padding: 0.875rem;
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        border: none;
        border-radius: 0.75rem;
        color: white;
        font-weight: 600;
        cursor: pointer;
    }
    .btn-login:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -5px #3b82f6; }
    .register-link { text-align: center; margin-top: 1.5rem; color: #94a3b8; font-size: 0.875rem; }
    .register-link a { color: #3b82f6; text-decoration: none; }
</style>
{% endblock %}

{% block content %}
<div class="login-container">
    <div class="login-card">
        <div class="login-header">
            <div class="login-logo"><i class="fas fa-shield-alt"></i></div>
            <h2>Selamat Datang Kembali</h2>
            <p>Masuk ke akun D'Tector.AI Anda</p>
        </div>

        <form id="loginForm">
            <div class="form-group">
                <label>Email / Username</label>
                <input type="text" id="identifier" placeholder="email@example.com atau username" required>
            </div>
            <div class="form-group">
                <label>Kata Sandi</label>
                <input type="password" id="password" placeholder="••••••••" required>
            </div>
            <button type="submit" class="btn-login"><i class="fas fa-arrow-right"></i> Masuk</button>
        </form>

        <div class="register-link">
            Belum punya akun? <a href="/register">Daftar sekarang</a>
        </div>
    </div>
</div>

<script>
    document.getElementById('loginForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const identifier = document.getElementById('identifier').value;
        const password = document.getElementById('password').value;
        
        if (!identifier || !password) {
            alert('Isi semua field');
            return;
        }
        
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Memproses...';
        
        try {
            console.log('Mengirim request login...');
            
            const response = await fetch('/api/auth/login', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ identifier, password })
            });
            
            const result = await response.json();
            console.log('Response:', result);
            
            if (result.success) {
                alert('Login berhasil! Mengarahkan ke dashboard...');
                window.location.href = '/dashboard';
            } else {
                alert('Login gagal: ' + (result.error || 'Periksa kembali email/username dan password Anda'));
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalText;
            }
        } catch (error) {
            console.error('Error:', error);
            alert('Terjadi kesalahan: ' + error.message);
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
        }
    });
</script>
{% endblock %}