<!--
Copyright (C) 2026 Stefy Lanza <stefy@nexlab.net>

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.
-->
{% extends "base.html" %}

{% block title %}Login - AISBF Dashboard{% endblock %}

{% block content %}
<div style="max-width: 400px; margin: 50px auto;">
    <h2 style="margin-bottom: 30px; text-align: center;" data-i18n="login_page.title">Dashboard Login</h2>
    
    {% if error %}
    <div class="alert alert-error">{{ error }}</div>
    {% endif %}

    {% if success %}
    <div class="alert alert-success">{{ success }}</div>
    {% endif %}

    {% if show_verify_email %}
    <div class="alert alert-info">Please check your email and verify your account before logging in.</div>
    {% endif %}
    
    <form method="POST" action="{{ url_for(request, '/dashboard/login') }}">
        <div class="form-group">
            <label for="username" data-i18n="login_page.username">Username</label>
            <input type="text" id="username" name="username" required autofocus>
        </div>
        
        <div class="form-group">
            <label for="password" data-i18n="login_page.password">Password</label>
            <input type="password" id="password" name="password" required>
        </div>
        
        <div class="form-group">
            <label style="display: flex; align-items: center; cursor: pointer;">
                <input type="checkbox" id="remember_me" name="remember_me" style="width: auto; margin-right: 10px;">
                <span data-i18n="login_page.remember_me">Remember me</span>
            </label>
        </div>
        
        <button type="submit" class="btn" style="width: 100%;" data-i18n="login_page.submit">Login</button>
        
        {% if smtp_enabled %}
        <div style="text-align: center; margin-top: 20px;">
            <p><a href="{{ url_for(request, '/dashboard/forgot-password') }}" style="color: var(--color-link); text-decoration: none;" data-i18n="login_page.forgot_password">Forgot your password?</a></p>
        </div>
        {% endif %}
        
        {% if signup_enabled %}
        <div style="text-align: center; margin-top: 10px;">
            <p><span data-i18n="login_page.no_account">Don't have an account?</span> <a href="{{ url_for(request, '/dashboard/signup') }}" style="color: var(--color-link);" data-i18n="login_page.sign_up">Sign up here</a></p>
        </div>
        {% endif %}
    </form>

{% if config.oauth2 and ((config.oauth2.google and config.oauth2.google.enabled) or (config.oauth2.github and config.oauth2.github.enabled)) %}
    <div style="margin: 25px 0; text-align: center; position: relative;">
        <hr style="border: none; border-top: 1px solid #0f3460; margin: 0;">
        <span style="background: var(--bg-panel); padding: 0 15px; position: relative; top: -13px; color: var(--color-muted);">or continue with</span>
    </div>
    
    <div style="display: flex; flex-direction: column; gap: 12px;">
        {% if config.oauth2.google and config.oauth2.google.enabled %}
        <button onclick="openOAuthPopup('/auth/oauth2/google')" style="display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--bg-page); color: var(--color-text); font-weight: 500; text-decoration: none; transition: background 0.2s; cursor: pointer; width: 100%;">
            <svg viewBox="0 0 24 24" width="20" height="20">
                <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
            </svg>
            Continue with Google
        </button>
        {% endif %}
        
        {% if config.oauth2.github and config.oauth2.github.enabled %}
        <button onclick="openOAuthPopup('/auth/oauth2/github')" style="display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border: 1px solid var(--color-border); border-radius: 4px; background: #24292e; color: #ffffff; font-weight: 500; text-decoration: none; transition: background 0.2s; cursor: pointer; width: 100%;">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
            </svg>
            Continue with GitHub
        </button>
        {% endif %}
    </div>
{% endif %}
</div>

<script>
// OAuth2 Popup Handling
function openOAuthPopup(url) {
    const separator = url.includes('?') ? '&' : '?';
    const popupUrl = url + separator + 'popup=1';

    const width = 500, height = 650;
    const left = (window.innerWidth / 2) - (width / 2);
    const top = (window.innerHeight / 2) - (height / 2);

    const popup = window.open(
        popupUrl,
        'OAuth2 Authentication',
        `width=${width},height=${height},top=${top},left=${left},resizable=no,scrollbars=yes,status=no`
    );

    let done = false;
    function onSuccess() {
        if (done) return;
        done = true;
        cleanup();
        window.location.replace('/dashboard');
    }
    function onError(msg) {
        if (done) return;
        done = true;
        cleanup();
        showAlert(msg || 'Authentication failed', 'Authentication Error', '❌', 'danger');
    }

    // BroadcastChannel: works even when COOP severs window.opener
    let bc = null;
    try {
        bc = new BroadcastChannel('oauth2_result');
        bc.onmessage = function(e) {
            if (e.data && e.data.type === 'oauth2_complete') onSuccess();
            else if (e.data && e.data.type === 'oauth2_error') onError(e.data.error);
        };
    } catch(e) {}

    // postMessage fallback (same-origin popups where opener is available)
    const messageListener = function(event) {
        if (!event.data) return;
        if (event.data.type === 'oauth2_complete') onSuccess();
        else if (event.data.type === 'oauth2_error') onError(event.data.error);
    };
    window.addEventListener('message', messageListener);

    // Popup-closed fallback: poll auth status via API (not just any 200)
    const popupCheck = setInterval(function() {
        let closed = false;
        try { closed = popup.closed; } catch(e) { /* COOP blocks access */ }
        if (!closed) return;
        clearInterval(popupCheck);
        if (done) return;
        fetch('/dashboard/api/auth-check', { credentials: 'same-origin' })
            .then(r => r.json())
            .then(data => { if (data.authenticated) onSuccess(); })
            .catch(() => {});
    }, 600);

    function cleanup() {
        clearInterval(popupCheck);
        window.removeEventListener('message', messageListener);
        if (bc) { bc.close(); bc = null; }
        try { popup.close(); } catch(e) {}
    }
}
</script>
</div>
{% endblock %}
