import { navigate } from '../router.js';
import { isLoggedIn, showToast } from '../app.js';
import { apiGet, invalidateSessionCheck, apiUrl } from '../api.js';

const WEBSITE_ROLES = ['admin', 'supervisor'];

function setFormBusy(formId, busy, busyLabel) {
    const form = document.getElementById(formId);
    if (!form) return;
    const btn = form.querySelector('button[type="submit"]');
    if (!btn) return;
    if (!btn.dataset.defaultLabel) {
        btn.dataset.defaultLabel = btn.textContent.trim();
    }
    btn.disabled = busy;
    btn.textContent = busy ? busyLabel : btn.dataset.defaultLabel;
    form.querySelectorAll('input').forEach((el) => { el.disabled = busy; });
}

export async function loginPage() {
    if (isLoggedIn()) {
        try {
            const data = await apiGet('session');
            if (data.success && data.valid && !data.mustChangePassword && WEBSITE_ROLES.includes(data.role)) {
                if (data.user) localStorage.setItem('qdb_user', data.user);
                if (data.role) localStorage.setItem('qdb_role', data.role);
                navigate('#/');
                return;
            }
        } catch {
            invalidateSessionCheck();
        }
        localStorage.removeItem('qdb_token');
        localStorage.removeItem('qdb_user');
        localStorage.removeItem('qdb_role');
        invalidateSessionCheck();
    }

    const app = document.getElementById('app');
    app.innerHTML = `
        <div class="login-screen" role="main">
            <div class="login-screen__backdrop" aria-hidden="true">
                <div class="login-orb login-orb--a"></div>
                <div class="login-orb login-orb--b"></div>
                <div class="login-grid"></div>
            </div>

            <div class="login-screen__content">
                <header class="login-brand">
                    <h1 class="login-brand__title">BW Sch&uuml;tzt - NAT-AS</h1>
                    <p class="login-brand__subtitle">Questionnaire Management</p>
                </header>

                <div class="login-card card">
                    <h2 id="login-panel-title" class="login-card__heading">Sign in</h2>
                    <p id="loginPanelSubtitle" class="login-card__lead">Admin or supervisor account.</p>

                    <form id="loginForm" class="login-form" autocomplete="on">
                        <div class="form-group">
                            <label for="username">Username</label>
                            <input type="text" id="username" name="username" autocomplete="username" required>
                        </div>
                        <div class="form-group">
                            <label for="password">Password</label>
                            <input type="password" id="password" name="password" autocomplete="current-password" required>
                        </div>
                        <button type="submit" class="btn btn-primary btn-block">Log in</button>
                        <p id="loginError" class="login-alert login-alert--error" role="alert" hidden></p>
                    </form>

                    <div id="changePwSection" class="login-change" hidden>
                        <hr>
                        <p>You must change your password before continuing.</p>
                        <form id="changePwForm" class="login-form">
                            <div class="form-group">
                                <label for="newPw">New password</label>
                                <input type="password" id="newPw" autocomplete="new-password" required minlength="6">
                            </div>
                            <div class="form-group">
                                <label for="newPwConfirm">Confirm password</label>
                                <input type="password" id="newPwConfirm" autocomplete="new-password" required minlength="6">
                            </div>
                            <button type="submit" class="btn btn-primary btn-block">Change and continue</button>
                            <p id="changePwError" class="login-alert login-alert--error" role="alert" hidden></p>
                        </form>
                    </div>

                    <p class="login-card__footnote">Counselors use the mobile app.</p>
                </div>
            </div>
        </div>
    `;

    let pendingUsername = '';
    let pendingTempToken = '';

    document.getElementById('loginForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        const errEl = document.getElementById('loginError');
        errEl.hidden = true;
        const username = document.getElementById('username').value.trim();
        const password = document.getElementById('password').value;

        setFormBusy('loginForm', true, 'Signing in…');
        try {
            const res = await fetch(apiUrl('auth/login'), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-QDB-Client': 'web',
                },
                body: JSON.stringify({ username, password }),
            });
            const json = await res.json();
            if (!json.ok) {
                const code = json.error?.code || '';
                let msg = json.error?.message || 'Login failed';
                if (res.status === 429 || code === 'RATE_LIMITED') {
                    const retry = res.headers.get('Retry-After');
                    if (retry) {
                        msg += ` Try again in about ${retry} seconds.`;
                    }
                }
                errEl.textContent = msg;
                errEl.hidden = false;
                return;
            }
            const d = json.data;
            if (d.role === 'coach') {
                errEl.textContent = 'Counselor accounts can only sign in through the mobile app.';
                errEl.hidden = false;
                return;
            }
            if (d.mustChangePassword) {
                pendingUsername = username;
                pendingTempToken = d.token;
                document.getElementById('loginForm').hidden = true;
                document.getElementById('changePwSection').hidden = false;
                document.getElementById('login-panel-title').textContent = 'New password';
                document.getElementById('loginPanelSubtitle').textContent = pendingUsername;
                document.getElementById('newPw').focus();
                return;
            }
            localStorage.setItem('qdb_token', d.token);
            localStorage.setItem('qdb_user', d.user);
            localStorage.setItem('qdb_role', d.role);
            invalidateSessionCheck();
            navigate('#/');
        } catch (err) {
            errEl.textContent = err.message;
            errEl.hidden = false;
        } finally {
            setFormBusy('loginForm', false, 'Signing in…');
        }
    });

    document.getElementById('changePwForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        const errEl = document.getElementById('changePwError');
        errEl.hidden = true;
        const newPw = document.getElementById('newPw').value;
        const confirm = document.getElementById('newPwConfirm').value;
        if (newPw !== confirm) {
            errEl.textContent = 'Passwords do not match';
            errEl.hidden = false;
            return;
        }
        const oldPw = document.getElementById('password').value;

        setFormBusy('changePwForm', true, 'Saving…');
        try {
            const headers = {
                'Content-Type': 'application/json',
                'X-QDB-Client': 'web',
            };
            if (pendingTempToken) {
                headers['Authorization'] = `Bearer ${pendingTempToken}`;
            }
            const res = await fetch(apiUrl('auth/change-password'), {
                method: 'POST',
                headers,
                body: JSON.stringify({ username: pendingUsername, old_password: oldPw, new_password: newPw }),
            });
            const json = await res.json();
            if (!json.ok) {
                errEl.textContent = json.error?.message || 'Password change failed';
                errEl.hidden = false;
                return;
            }
            const d = json.data;
            if (d.role === 'coach') {
                errEl.textContent = 'Counselor accounts can only sign in through the mobile app.';
                errEl.hidden = false;
                return;
            }
            localStorage.setItem('qdb_token', d.token);
            localStorage.setItem('qdb_user', d.user);
            localStorage.setItem('qdb_role', d.role);
            invalidateSessionCheck();
            showToast('Password changed successfully', 'success');
            navigate('#/');
        } catch (err) {
            errEl.textContent = err.message;
            errEl.hidden = false;
        } finally {
            setFormBusy('changePwForm', false, 'Saving…');
        }
    });
}