/**
 * OxiCloud Authentication JavaScript
 * Handles login, registration, and admin setup
 */

import { getCsrfHeaders } from '../../core/csrf.js';
import { i18n } from '../../core/i18n.js';

/**
 * @import {AuthResponse, RoleEnum, User} from '../../core/types.js'
 */

// API endpoints
const API_URL = '/api/auth';
const LOGIN_ENDPOINT = `${API_URL}/login`;
const REGISTER_ENDPOINT = `${API_URL}/register`;
const ME_ENDPOINT = `${API_URL}/me`;
const REFRESH_ENDPOINT = `${API_URL}/refresh`;

// Storage keys — tokens are now in HttpOnly cookies (set by server).
// Only non-sensitive display data is kept in localStorage.
const USER_DATA_KEY = 'oxicloud_user';
const LOCALE_KEY = 'oxicloud-locale';
const FIRST_RUN_KEY = 'oxicloud_first_run_completed';

/**
 * Narrow a thrown value (TS unknown) to a displayable message string.
 * Returns '' for non-Error throws so callers can fall back via `errMessage(e) || fallback`.
 * @param {unknown} e
 * @returns {string}
 */
function errMessage(e) {
    return e instanceof Error ? e.message : '';
}

/**
 * Read the value of an <input>/<textarea> by ID. Returns '' if missing.
 * Centralises the HTMLInputElement cast we'd otherwise repeat at every callsite.
 * @param {string} id
 * @returns {string}
 */
function inputVal(id) {
    const el = /** @type {HTMLInputElement | HTMLTextAreaElement | null} */ (document.getElementById(id));
    return el?.value ?? '';
}

// Language selector texts (used before i18n is loaded)
/**
 * @typedef {Object} PreTranslatedText
 * @property {string} title
 * @property {string} subtitle
 * @property {string} continue
 * @property {string} autodetected
 * @property {string} moreLanguages
 * @property {string} modalTitle
 * @property {string} searchPlaceholder
 */

/** @type {Record<String,PreTranslatedText>} */
const LANGUAGE_TEXTS = {
    en: {
        title: 'Welcome!',
        subtitle: 'Select your language to continue',
        continue: 'Continue',
        autodetected: 'We detected your language',
        moreLanguages: 'More languages...',
        modalTitle: 'Select language',
        searchPlaceholder: 'Search language...'
    },
    es: {
        title: '¡Bienvenido!',
        subtitle: 'Selecciona tu idioma para continuar',
        continue: 'Continuar',
        autodetected: 'Hemos detectado tu idioma',
        moreLanguages: 'More languages...',
        modalTitle: 'Seleccionar idioma',
        searchPlaceholder: 'Buscar idioma...'
    },
    zh: {
        title: '欢迎！',
        subtitle: '选择您的语言以继续',
        continue: '继续',
        autodetected: '我们检测到了您的语言',
        moreLanguages: '更多语言...',
        modalTitle: '选择语言',
        searchPlaceholder: '搜索语言...'
    },
    'zh-TW': {
        title: '歡迎！',
        subtitle: '選擇您的語言以繼續',
        continue: '繼續',
        autodetected: '我們偵測到您的語言',
        moreLanguages: '更多語言...',
        modalTitle: '選擇語言',
        searchPlaceholder: '搜尋語言...'
    },
    fa: {
        title: '!خوش آمدید',
        subtitle: 'زبان خود را برای ادامه انتخاب کنید',
        continue: 'ادامه',
        autodetected: 'زبان شما شناسایی شد',
        moreLanguages: 'زبان‌های بیشتر...',
        modalTitle: 'انتخاب زبان',
        searchPlaceholder: 'جستجوی زبان...'
    },
    nl: {
        title: 'Welkom!',
        subtitle: 'Selecteer uw taal om door te gaan',
        continue: 'Doorgaan',
        autodetected: 'We hebben uw taal gedetecteerd',
        moreLanguages: 'Meer talen...',
        modalTitle: 'Taal selecteren',
        searchPlaceholder: 'Zoek taal...'
    },
    hi: {
        title: 'स्वागत है!',
        subtitle: 'जारी रखने के लिए अपनी भाषा चुनें',
        continue: 'जारी रखें',
        autodetected: 'हमने आपकी भाषा पहचान ली',
        moreLanguages: 'और भाषाएँ...',
        modalTitle: 'भाषा चुनें',
        searchPlaceholder: 'भाषा खोजें...'
    },
    ar: {
        title: '!مرحباً',
        subtitle: 'اختر لغتك للمتابعة',
        continue: 'متابعة',
        autodetected: 'تم اكتشاف لغتك',
        moreLanguages: 'المزيد من اللغات...',
        modalTitle: 'اختر اللغة',
        searchPlaceholder: 'ابحث عن لغة...'
    },
    ru: {
        title: 'Добро пожаловать!',
        subtitle: 'Выберите язык для продолжения',
        continue: 'Продолжить',
        autodetected: 'Мы определили ваш язык',
        moreLanguages: 'Больше языков...',
        modalTitle: 'Выберите язык',
        searchPlaceholder: 'Поиск языка...'
    },
    ja: {
        title: 'ようこそ！',
        subtitle: '続行するには言語を選択してください',
        continue: '続行',
        autodetected: '言語を検出しました',
        moreLanguages: 'その他の言語...',
        modalTitle: '言語を選択',
        searchPlaceholder: '言語を検索...'
    },
    ko: {
        title: '환영합니다!',
        subtitle: '계속하려면 언어를 선택하세요',
        continue: '계속',
        autodetected: '언어가 감지되었습니다',
        moreLanguages: '더 많은 언어...',
        modalTitle: '언어 선택',
        searchPlaceholder: '언어 검색...'
    }
};

// Complete language registry — add new languages here, they'll appear automatically
// `popular: true` languages show as cards on the main screen, the rest in the modal
/**
 * @typedef {Object} Lang
 * @property {string} code
 * @property {string} name
 * @property {string} nativeName
 * @property {string} flag
 * @property {boolean} popular
 */

/** @type {Lang[]} */
export const ALL_LANGUAGES = [
    {
        code: 'en',
        name: 'English',
        nativeName: 'English',
        flag: '🇬🇧',
        popular: true
    },
    {
        code: 'es',
        name: 'Spanish',
        nativeName: 'Español',
        flag: '🇪🇸',
        popular: true
    },
    {
        code: 'zh',
        name: 'Simplified Chinese',
        nativeName: '简体中文',
        flag: '🇨🇳',
        popular: true
    },
    {
        code: 'zh-TW',
        name: 'Traditional Chinese',
        nativeName: '繁體中文',
        flag: '🇹🇼',
        popular: true
    },
    {
        code: 'fa',
        name: 'Persian',
        nativeName: 'فارسی',
        flag: '🇮🇷',
        popular: true
    },
    {
        code: 'fr',
        name: 'French',
        nativeName: 'Français',
        flag: '🇫🇷',
        popular: true
    },
    {
        code: 'de',
        name: 'German',
        nativeName: 'Deutsch',
        flag: '🇩🇪',
        popular: true
    },
    {
        code: 'pt',
        name: 'Portuguese',
        nativeName: 'Português',
        flag: '🇧🇷',
        popular: true
    },
    {
        code: 'it',
        name: 'Italian',
        nativeName: 'Italiano',
        flag: '🇮🇹',
        popular: true
    },
    {
        code: 'ru',
        name: 'Russian',
        nativeName: 'Русский',
        flag: '🇷🇺',
        popular: true
    },
    {
        code: 'ja',
        name: 'Japanese',
        nativeName: '日本語',
        flag: '🇯🇵',
        popular: true
    },
    {
        code: 'ko',
        name: 'Korean',
        nativeName: '한국어',
        flag: '🇰🇷',
        popular: true
    },
    {
        code: 'ar',
        name: 'Arabic',
        nativeName: 'العربية',
        flag: '🇸🇦',
        popular: true
    },
    { code: 'hi', name: 'Hindi', nativeName: 'हिन्दी', flag: '🇮🇳', popular: true },
    {
        code: 'tr',
        name: 'Turkish',
        nativeName: 'Türkçe',
        flag: '🇹🇷',
        popular: false
    },
    {
        code: 'nl',
        name: 'Dutch',
        nativeName: 'Nederlands',
        flag: '🇳🇱',
        popular: false
    },
    {
        code: 'pl',
        name: 'Polish',
        nativeName: 'Polski',
        flag: '🇵🇱',
        popular: false
    },
    {
        code: 'sv',
        name: 'Swedish',
        nativeName: 'Svenska',
        flag: '🇸🇪',
        popular: false
    },
    {
        code: 'da',
        name: 'Danish',
        nativeName: 'Dansk',
        flag: '🇩🇰',
        popular: false
    },
    {
        code: 'fi',
        name: 'Finnish',
        nativeName: 'Suomi',
        flag: '🇫🇮',
        popular: false
    },
    {
        code: 'no',
        name: 'Norwegian',
        nativeName: 'Norsk',
        flag: '🇳🇴',
        popular: false
    },
    {
        code: 'uk',
        name: 'Ukrainian',
        nativeName: 'Українська',
        flag: '🇺🇦',
        popular: false
    },
    {
        code: 'cs',
        name: 'Czech',
        nativeName: 'Čeština',
        flag: '🇨🇿',
        popular: false
    },
    {
        code: 'el',
        name: 'Greek',
        nativeName: 'Ελληνικά',
        flag: '🇬🇷',
        popular: false
    },
    {
        code: 'he',
        name: 'Hebrew',
        nativeName: 'עברית',
        flag: '🇮🇱',
        popular: false
    },
    { code: 'th', name: 'Thai', nativeName: 'ไทย', flag: '🇹🇭', popular: false },
    {
        code: 'vi',
        name: 'Vietnamese',
        nativeName: 'Tiếng Việt',
        flag: '🇻🇳',
        popular: false
    },
    {
        code: 'id',
        name: 'Indonesian',
        nativeName: 'Bahasa Indonesia',
        flag: '🇮🇩',
        popular: false
    },
    {
        code: 'ms',
        name: 'Malay',
        nativeName: 'Bahasa Melayu',
        flag: '🇲🇾',
        popular: false
    },
    {
        code: 'ro',
        name: 'Romanian',
        nativeName: 'Română',
        flag: '🇷🇴',
        popular: false
    },
    {
        code: 'hu',
        name: 'Hungarian',
        nativeName: 'Magyar',
        flag: '🇭🇺',
        popular: false
    },
    {
        code: 'ca',
        name: 'Catalan',
        nativeName: 'Català',
        flag: '🏴',
        popular: false
    },
    {
        code: 'eu',
        name: 'Basque',
        nativeName: 'Euskara',
        flag: '🏴',
        popular: false
    },
    {
        code: 'gl',
        name: 'Galician',
        nativeName: 'Galego',
        flag: '🏴',
        popular: false
    }
];

// --- Panel visibility helpers ---
// The `.hidden` CSS class uses `display: none !important`, so inline
// `style.display` can never override it.  Always toggle the class instead.
/**
 *
 * @param {HTMLElement} el
 */
function showPanel(el) {
    if (el) el.classList.remove('hidden');
}

/**
 *
 * @param {HTMLElement} el
 */
function hidePanel(el) {
    if (el) el.classList.add('hidden');
}

// Check if this is a first run (no locale saved)
function isFirstRun() {
    return !localStorage.getItem(LOCALE_KEY);
}

// Check system status from the server
async function checkSystemStatus() {
    try {
        const response = await fetch('/api/auth/status');
        if (!response.ok) {
            console.warn('Could not check system status, assuming initialized');
            return { initialized: true, admin_count: 1, registration_allowed: true };
        }
        return await response.json();
    } catch (error) {
        console.error('Error checking system status:', error);
        return { initialized: true, admin_count: 1, registration_allowed: true };
    }
}

// Detect user's browser language and return the best matching language from ALL_LANGUAGES
// Priority: exact full-tag (zh-TW) > Chinese script/region heuristics > primary subtag (zh)
function detectBrowserLanguage() {
    const browserLangs = navigator.languages || [navigator.language || 'en'];

    for (const bl of browserLangs) {
        const tag = bl.toLowerCase();
        const exact = ALL_LANGUAGES.find((l) => l.code.toLowerCase() === tag);
        if (exact) return exact;
    }

    // Chrome on macOS/Linux may report "zh-Hant", "zh-Hant-TW", "zh-Hans" without a plain region tag
    for (const bl of browserLangs) {
        const tag = bl.toLowerCase();
        if (!tag.startsWith('zh')) continue;
        const isTraditional = tag.includes('hant') || /\b(tw|hk|mo)\b/.test(tag);
        const target = isTraditional ? 'zh-TW' : 'zh';
        const match = ALL_LANGUAGES.find((l) => l.code === target);
        if (match) return match;
    }

    for (const bl of browserLangs) {
        const primary = bl.substring(0, 2).toLowerCase();
        const match = ALL_LANGUAGES.find((l) => l.code === primary);
        if (match) return match;
    }

    return ALL_LANGUAGES[0]; // fallback to English
}

/**
 * Build a language option element (card style)
 * @param {Lang} lang
 * @param {boolean} isSelected
 * @returns
 */
function buildLanguageCard(lang, isSelected) {
    const item = document.createElement('div');
    item.className = `lang-picker-item${isSelected ? ' selected' : ''}`;
    item.setAttribute('data-lang', lang.code);
    item.setAttribute('role', 'option');
    item.setAttribute('aria-selected', String(isSelected));
    item.innerHTML = `
        <span class="lang-picker-item-flag">${lang.flag}</span>
        <span class="lang-picker-item-name">${lang.nativeName}</span>
        <span class="lang-picker-item-english">${lang.name}</span>
        ${isSelected ? '<i class="fas fa-check lang-picker-item-check"></i>' : ''}
    `;
    return item;
}

// Initialize language selector panel with compact dropdown approach
function initLanguageSelector() {
    const languagePanel = document.getElementById('language-panel');
    const continueBtn = document.getElementById('language-continue');
    const picker = document.getElementById('lang-picker');
    const pickerSelected = document.getElementById('lang-picker-selected');
    const pickerList = document.getElementById('lang-picker-list');
    const pickerFlag = document.getElementById('lang-picker-flag');
    const pickerName = document.getElementById('lang-picker-name');
    const searchInput = /** @type {HTMLInputElement | null} */ (document.getElementById('lang-picker-search-input'));

    if (!languagePanel || !picker || !pickerFlag || !pickerName || !pickerList) return;

    // --- Auto-detect browser language ---
    const detected = detectBrowserLanguage();
    let selectedLanguage = detected.code;

    // Update the selected box with detected language
    pickerFlag.textContent = detected.flag;
    pickerName.textContent = detected.nativeName;
    updateLanguagePanelTexts(selectedLanguage);

    // Render dropdown list
    function renderDropdownList(filter = '') {
        pickerList.innerHTML = '';
        const filterLower = filter.toLowerCase();

        const filtered = ALL_LANGUAGES.filter((lang) => {
            if (!filter) return true;
            return (
                lang.name.toLowerCase().includes(filterLower) ||
                lang.nativeName.toLowerCase().includes(filterLower) ||
                lang.code.toLowerCase().includes(filterLower)
            );
        });

        if (filtered.length === 0) {
            pickerList.innerHTML = '<div class="lang-picker-empty">—</div>';
            return;
        }

        filtered.forEach((lang) => {
            const item = buildLanguageCard(lang, lang.code === selectedLanguage);
            item.addEventListener('click', (e) => {
                e.stopPropagation();
                selectedLanguage = lang.code;
                pickerFlag.textContent = lang.flag;
                pickerName.textContent = lang.nativeName;
                updateLanguagePanelTexts(lang.code);
                closePicker();
                renderDropdownList('');
            });
            pickerList.appendChild(item);
        });
    }

    function openPicker() {
        picker.classList.add('open');
        pickerSelected.setAttribute('aria-expanded', 'true');
        renderDropdownList('');
        if (searchInput) {
            searchInput.value = '';
            setTimeout(() => searchInput.focus(), 50);
        }
        // Scroll active item into view
        setTimeout(() => {
            const active = pickerList.querySelector('.lang-picker-item.selected');
            if (active) active.scrollIntoView({ block: 'nearest' });
        }, 60);
    }

    function closePicker() {
        picker.classList.remove('open');
        pickerSelected.setAttribute('aria-expanded', 'false');
        if (searchInput) searchInput.value = '';
    }

    // Toggle dropdown
    pickerSelected.addEventListener('click', (e) => {
        e.stopPropagation();
        if (picker.classList.contains('open')) {
            closePicker();
        } else {
            openPicker();
        }
    });

    // Keyboard support
    pickerSelected.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            if (picker.classList.contains('open')) closePicker();
            else openPicker();
        } else if (e.key === 'Escape') {
            closePicker();
        }
    });

    // Search input
    if (searchInput) {
        searchInput.addEventListener('input', () => renderDropdownList(searchInput.value));
        searchInput.addEventListener('click', (e) => e.stopPropagation());
    }

    // Close when clicking outside
    document.addEventListener('click', (e) => {
        if (e.target instanceof Node && !picker.contains(e.target)) closePicker();
    });

    // --- Continue button ---
    continueBtn.addEventListener('click', async () => {
        if (!selectedLanguage) return;

        // Save locale preference
        localStorage.setItem(LOCALE_KEY, selectedLanguage);
        localStorage.setItem(FIRST_RUN_KEY, 'true');

        await i18n.setLocale(selectedLanguage);

        // Hide language panel
        hidePanel(languagePanel);

        // Check system status to determine which panel to show
        const systemStatus = await checkSystemStatus();
        console.log('System status after language selection:', systemStatus);

        if (!systemStatus.initialized) {
            console.log('No admin exists, showing admin setup panel');
            hidePanel(document.getElementById('login-panel'));
            hidePanel(document.getElementById('register-panel'));
            showPanel(document.getElementById('admin-setup-panel'));

            const backToLoginLink = document.getElementById('back-to-login');
            if (backToLoginLink) {
                backToLoginLink.parentElement.style.display = 'none';
            }
        } else {
            showPanel(document.getElementById('login-panel'));
            // Hide "Set up administrator" link since an admin already exists
            const setupLink = document.getElementById('show-admin-setup');
            if (setupLink && systemStatus.admin_count > 0) {
                setupLink.parentElement.style.display = 'none';
            }
            // Configure OIDC login UI if SSO is enabled
            await configureOidcLoginUI();
        }

        // setLocale() already calls translatePage() internally
    });
}

/**
 * Update language panel texts based on selected language
 * @param {string} lang
 */
function updateLanguagePanelTexts(lang) {
    const texts = LANGUAGE_TEXTS[lang] || LANGUAGE_TEXTS.en;
    const titleEl = document.getElementById('language-title');
    const subtitleEl = document.getElementById('language-subtitle');
    const continueBtn = document.getElementById('language-continue');
    const searchInput = /** @type {HTMLInputElement | null} */ (document.getElementById('lang-picker-search-input'));

    if (titleEl) titleEl.textContent = texts.title;
    if (subtitleEl) subtitleEl.textContent = texts.subtitle;
    if (continueBtn) continueBtn.textContent = texts.continue;
    if (searchInput) searchInput.placeholder = texts.searchPlaceholder;
}

// Show appropriate panel based on system status and first run
async function showInitialPanel() {
    const languagePanel = document.getElementById('language-panel');
    const loginPanel = document.getElementById('login-panel');
    const adminSetupPanel = document.getElementById('admin-setup-panel');
    const registerPanel = document.getElementById('register-panel');

    if (!languagePanel || !loginPanel) return;

    // ALWAYS check if this is user's first run (language selection) FIRST
    // Language selection should happen before anything else
    if (isFirstRun()) {
        // First run - show language selector first
        // After language is selected, the continue button handler will check system status
        console.log('First run - showing language selector');
        showPanel(languagePanel);
        hidePanel(loginPanel);
        hidePanel(registerPanel);
        hidePanel(adminSetupPanel);
        return;
    }

    // Language already selected - now check system status
    const systemStatus = await checkSystemStatus();
    console.log('System status:', systemStatus);

    if (!systemStatus.initialized) {
        // No admin exists - this is a fresh install, show admin setup
        console.log('Fresh install detected - showing admin setup');
        hidePanel(languagePanel);
        hidePanel(loginPanel);
        hidePanel(registerPanel);
        showPanel(adminSetupPanel);

        // Hide the "Already set up? Sign in" link since there's no admin yet
        const backToLoginLink = document.getElementById('back-to-login');
        if (backToLoginLink) {
            backToLoginLink.parentElement.style.display = 'none';
        }
        return;
    }

    // System is initialized - show login panel
    hidePanel(languagePanel);
    showPanel(loginPanel);
    hidePanel(registerPanel);
    hidePanel(adminSetupPanel);
    // Cursor ready on the identifier field (panels start hidden, so a static
    // `autofocus` attribute wouldn't fire — focus once the panel is shown).
    /** @type {HTMLInputElement | null} */ (document.getElementById('login-username'))?.focus();

    // Hide the admin setup link if admin already exists
    const showAdminSetupLink = document.getElementById('show-admin-setup');
    if (showAdminSetupLink && systemStatus.admin_count > 0) {
        showAdminSetupLink.parentElement.style.display = 'none';
    }

    // Check for OIDC/SSO configuration and update login panel accordingly
    await configureOidcLoginUI();
}

// Fetch OIDC provider info and configure the login UI
async function configureOidcLoginUI() {
    try {
        const response = await fetch('/api/auth/oidc/providers');
        if (!response.ok) return;

        const oidcInfo = await response.json();
        if (!oidcInfo.enabled) return;

        const oidcSection = document.getElementById('oidc-login-section');
        const oidcBtn = document.getElementById('oidc-login-btn');
        const loginForm = document.getElementById('login-form');
        const authDivider = document.getElementById('auth-divider');
        const showRegisterToggle = document.getElementById('show-register');

        if (!oidcSection || !oidcBtn) return;

        // Update button text with provider name
        const btnTextEl = oidcBtn.querySelector('span');
        if (btnTextEl && oidcInfo.provider_name) {
            const template = i18n.t('auth.sso_login_provider');
            btnTextEl.textContent = template.replace('{{provider}}', oidcInfo.provider_name);
        }

        // Redirect to OIDC authorize endpoint on click
        oidcBtn.addEventListener('click', () => {
            window.location.href = oidcInfo.authorize_endpoint;
        });

        if (!oidcInfo.password_login_enabled) {
            // OIDC-only mode: hide password form and divider, show only SSO button
            if (loginForm) loginForm.style.display = 'none';
            if (authDivider) authDivider.style.display = 'none';
            if (showRegisterToggle) showRegisterToggle.parentElement.style.display = 'none';
            showPanel(oidcSection);
        } else {
            // Both password and OIDC enabled: show divider + SSO button
            showPanel(oidcSection);
        }
    } catch (err) {
        console.error('Failed to fetch OIDC provider info:', err);
    }
}

// DOM elements
/** @type {HTMLElement | null} */ let loginPanel = null;
/** @type {HTMLElement | null} */ let registerPanel = null;
/** @type {HTMLElement | null} */ let adminSetupPanel = null;
/** @type {HTMLFormElement | null} */ let loginForm = null;
/** @type {HTMLFormElement | null} */ let registerForm = null;
/** @type {HTMLFormElement | null} */ let adminSetupForm = null;
/** @type {HTMLElement | null} */ let loginError = null;
/** @type {HTMLElement | null} */ let registerError = null;
/** @type {HTMLElement | null} */ let registerSuccess = null;
/** @type {HTMLElement | null} */ let adminSetupError = null;

// Initialize DOM elements only if we're on the login page
function initLoginElements() {
    // Check if we're on the login page
    if (!document.getElementById('login-form')) {
        console.log('Not on login page, skipping element initialization');
        return false;
    }

    loginPanel = document.getElementById('login-panel');
    registerPanel = document.getElementById('register-panel');
    adminSetupPanel = document.getElementById('admin-setup-panel');

    loginForm = /** @type {HTMLFormElement | null} */ (document.getElementById('login-form'));
    registerForm = /** @type {HTMLFormElement | null} */ (document.getElementById('register-form'));
    adminSetupForm = /** @type {HTMLFormElement | null} */ (document.getElementById('admin-setup-form'));

    loginError = document.getElementById('login-error');
    registerError = document.getElementById('register-error');
    registerSuccess = document.getElementById('register-success');
    adminSetupError = document.getElementById('admin-setup-error');

    // Initialize language selector
    initLanguageSelector();

    // Panel toggles
    document.getElementById('show-register').addEventListener('click', () => {
        hidePanel(loginPanel);
        showPanel(registerPanel);
        hidePanel(adminSetupPanel);
    });

    document.getElementById('show-login').addEventListener('click', () => {
        showPanel(loginPanel);
        hidePanel(registerPanel);
        hidePanel(adminSetupPanel);
        /** @type {HTMLInputElement | null} */ (document.getElementById('login-username'))?.focus();
    });

    document.getElementById('show-admin-setup').addEventListener('click', () => {
        hidePanel(loginPanel);
        hidePanel(registerPanel);
        showPanel(adminSetupPanel);
    });

    document.getElementById('back-to-login').addEventListener('click', () => {
        showPanel(loginPanel);
        hidePanel(registerPanel);
        hidePanel(adminSetupPanel);
    });

    // UX affordances: password reveal, magic-link disclosure, live match feedback,
    // Caps-Lock warning on password fields.
    initPasswordToggles();
    initMagicLinkDisclosure();
    initPasswordMatch('register-password', 'register-password-confirm', 'register-match');
    initPasswordMatch('admin-password', 'admin-password-confirm', 'admin-match');
    ['login-password', 'register-password', 'admin-password'].forEach((id) => {
        initCapsLockWarning(/** @type {HTMLInputElement | null} */ (document.getElementById(id)));
    });

    return true;
}

/**
 * Wire every password show/hide toggle. Each button sits next to the
 * <input> it controls inside an `.auth-input-wrap`.
 */
function initPasswordToggles() {
    document.querySelectorAll('[data-pw-toggle]').forEach((btn) => {
        const wrap = btn.closest('.auth-input-wrap');
        const input = /** @type {HTMLInputElement | null} */ (wrap?.querySelector('input') ?? null);
        if (!input) return;
        const sync = () => {
            const shown = input.type === 'text';
            btn.setAttribute('aria-pressed', String(shown));
            btn.setAttribute('aria-label', shown ? i18n.t('auth.hidePassword', 'Hide password') : i18n.t('auth.showPassword', 'Show password'));
        };
        sync();
        btn.addEventListener('click', () => {
            input.type = input.type === 'password' ? 'text' : 'password';
            sync();
            input.focus();
        });
    });
}

/**
 * Show a "Caps Lock is on" hint under a password field while the key is active
 * and the field is focused — saves a failed-login round-trip.
 * @param {HTMLInputElement | null} input
 */
function initCapsLockWarning(input) {
    if (!input) return;
    const warn = document.createElement('div');
    warn.className = 'auth-caps-warning hidden';
    warn.setAttribute('role', 'status');
    const icon = document.createElement('i');
    icon.className = 'fas fa-arrow-up';
    icon.setAttribute('aria-hidden', 'true');
    const text = document.createElement('span');
    text.textContent = i18n.t('auth.capsLock', 'Caps Lock is on');
    warn.append(icon, text);
    input.closest('.auth-input-group')?.appendChild(warn);

    /** @param {KeyboardEvent} e */
    const sync = (e) => {
        const on = typeof e.getModifierState === 'function' && e.getModifierState('CapsLock');
        warn.classList.toggle('hidden', !(on && document.activeElement === input));
    };
    input.addEventListener('keydown', sync);
    input.addEventListener('keyup', sync);
    input.addEventListener('blur', () => warn.classList.add('hidden'));
}

/**
 * Progressive disclosure: keep the magic-link form collapsed behind a quiet
 * toggle so the login screen leads with a single primary path.
 */
function initMagicLinkDisclosure() {
    const toggle = document.getElementById('magic-link-toggle');
    const reveal = document.getElementById('magic-link-reveal');
    if (!toggle || !reveal) return;
    toggle.addEventListener('click', () => {
        // classList.toggle returns true when the class is now PRESENT (collapsed).
        const open = reveal.classList.toggle('hidden') === false;
        toggle.setAttribute('aria-expanded', String(open));
        if (open) {
            const email = /** @type {HTMLInputElement | null} */ (document.getElementById('magic-link-email'));
            email?.focus();
        }
    });
}

/**
 * Live "passwords match" feedback rendered under a confirm field.
 * @param {string} passId
 * @param {string} confirmId
 * @param {string} indicatorId
 */
function initPasswordMatch(passId, confirmId, indicatorId) {
    const pass = /** @type {HTMLInputElement | null} */ (document.getElementById(passId));
    const confirmEl = /** @type {HTMLInputElement | null} */ (document.getElementById(confirmId));
    const out = document.getElementById(indicatorId);
    if (!pass || !confirmEl || !out) return;
    const update = () => {
        if (!confirmEl.value) {
            out.className = 'auth-match';
            out.textContent = '';
            return;
        }
        const ok = pass.value === confirmEl.value;
        out.className = `auth-match show ${ok ? 'auth-match--ok' : 'auth-match--bad'}`;
        out.textContent = ok ? i18n.t('auth.passwordsMatch', 'Passwords match') : i18n.t('auth.passwords_mismatch', "Passwords don't match");
    };
    pass.addEventListener('input', update);
    confirmEl.addEventListener('input', update);
}

// Initialize login elements if on login page
const isLoginPage = initLoginElements();

// Check if we already have a valid token
let authInitialized = false;

// EMERGENCY HANDLER: Detect if page is being loaded from a redirect loop
// and clear auth data to break the loop
(() => {
    // Check if we're being redirected in a loop
    const refreshAttempts = parseInt(localStorage.getItem('refresh_attempts') || '0', 10);
    const redirectSource = new URLSearchParams(window.location.search).get('source');

    // Case 1: High refresh attempts
    if (refreshAttempts > 3) {
        console.error('EMERGENCY: Detected severe token refresh loop. Cleaning all auth data.');
        localStorage.removeItem(USER_DATA_KEY);
        sessionStorage.clear();
        localStorage.setItem('emergency_clean', 'true');

        // Store timestamp of the cleanup for stability
        localStorage.setItem('last_emergency_clean', Date.now().toString());
    }

    // Case 2: We were redirected from app due to auth issues
    if (redirectSource === 'app') {
        console.log('Detected redirect from app, ensuring clean auth state');
        localStorage.removeItem(USER_DATA_KEY);
        // Reset counters
        sessionStorage.removeItem('redirect_count');
        localStorage.setItem('refresh_attempts', '0');
    }

    // Case 3: Multiple redirects in short time
    const lastCleanup = parseInt(localStorage.getItem('last_emergency_clean') || '0', 10);
    const timeSinceCleanup = Date.now() - lastCleanup;

    if (lastCleanup > 0 && timeSinceCleanup < 10000) {
        // Less than 10 seconds
        console.warn('Multiple auth problems in short time, clearing auth data');
        localStorage.removeItem(USER_DATA_KEY);
    }
})();

document.addEventListener('DOMContentLoaded', () => {
    // CRITICAL: Stop any potential redirect loops by handling browser throttling
    if (document.visibilityState === 'hidden') {
        console.warn('Page hidden, avoiding potential navigation loop');
        return;
    }

    // Check if we're on the login page
    if (!document.getElementById('login-form')) {
        console.log('Not on login page, skipping auth check');
        return;
    }

    // --- OIDC exchange code handling (fallback if landing on login page) ---
    const urlParams = new URLSearchParams(window.location.search);
    const oidcCode = urlParams.get('oidc_code');

    if (oidcCode) {
        console.log('OIDC exchange code detected on login page, exchanging...');
        (async () => {
            try {
                const resp = await fetch('/api/auth/oidc/exchange', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', ...getCsrfHeaders() },
                    body: JSON.stringify({ code: oidcCode })
                });

                if (!resp.ok) {
                    console.error('OIDC exchange failed:', resp.status);
                    return; // Fall through to normal login page
                }

                const data = await resp.json();
                // Tokens are now set as HttpOnly cookies by the server.
                // Just store user display data and redirect.
                if (data.user) {
                    localStorage.setItem(USER_DATA_KEY, JSON.stringify(data.user));
                }

                // Redirect to main app
                window.location.href = '/';
                return;
            } catch (err) {
                console.error('OIDC exchange error:', err);
            }
        })();
        return; // Don't initialize login page while exchanging
    }

    if (authInitialized) {
        console.log('Auth already initialized, skipping');
        return;
    }
    authInitialized = true;

    // Show appropriate panel (language selector on first run, login otherwise, or admin setup if no admin)
    // This is async so we call it and let it run
    showInitialPanel()
        .then(() => {
            console.log('Initial panel shown based on system status');
        })
        .catch((err) => {
            console.error('Error showing initial panel:', err);
        });

    // Always clear counters when loading the login page
    // to ensure we don't get trapped in a loop
    console.log('Login page loaded, clearing all counters');
    sessionStorage.removeItem('redirect_count');
    localStorage.removeItem('refresh_attempts');

    (async () => {
        try {
            // Check if we already have a valid session (cookie-based).
            // The HttpOnly cookie is sent automatically — just probe /api/auth/me.
            try {
                const meResp = await fetch(ME_ENDPOINT, {
                    method: 'GET',
                    credentials: 'same-origin'
                });
                if (meResp.ok) {
                    console.log('Session still valid, redirecting to app');
                    const userData = await meResp.json();
                    localStorage.setItem(USER_DATA_KEY, JSON.stringify(userData));
                    redirectToMainApp();
                    return;
                }
                // 401 / other → try a silent refresh
                console.log('Session check returned', meResp.status, '— trying refresh');
                const refreshOk = await refreshAuthToken();
                if (refreshOk) {
                    console.log('Token refresh successful, redirecting to app');
                    redirectToMainApp();
                    return;
                }
            } catch (err) {
                console.log('Session probe failed, showing login page:', errMessage(err));
            }
            // No valid session — stay on login page
            localStorage.removeItem(USER_DATA_KEY);

            // Check if admin account exists (customize this as needed)
            const isFirstRun = await checkFirstRun();
            if (isFirstRun) {
                hidePanel(loginPanel);
                hidePanel(registerPanel);
                showPanel(adminSetupPanel);
            }
        } catch (error) {
            console.error('Authentication check failed:', error);
        }
    })();
});

// Login form submission
if (isLoginPage && loginForm) {
    loginForm.addEventListener('submit', async (e) => {
        e.preventDefault();

        // Clear previous errors
        loginError.style.display = 'none';

        const username = inputVal('login-username');
        const password = inputVal('login-password');

        const loginSubmit = /** @type {HTMLButtonElement | null} */ (document.getElementById('login-submit'));
        loginSubmit?.classList.add('is-loading');
        loginSubmit?.setAttribute('aria-busy', 'true');
        if (loginSubmit) loginSubmit.disabled = true;

        try {
            const data = await login(username, password);

            // Tokens are now set as HttpOnly cookies by the server.
            // Just store non-sensitive user data for display.
            console.log('Login succeeded');

            // Reset redirect counter on successful login
            sessionStorage.removeItem('redirect_count');
            localStorage.setItem('refresh_attempts', '0');

            if (data.user) {
                localStorage.setItem(USER_DATA_KEY, JSON.stringify(data.user));
            }

            // Redirect to main app — but first verify the browser accepted
            // the auth cookies.  The CSRF cookie (oxicloud_csrf) is non-HttpOnly
            // so JS can read it.  If it's missing the browser rejected the
            // Set-Cookie (usually because of Secure flag over plain HTTP).
            const csrfStored = document.cookie.split('; ').some((c) => c.startsWith('oxicloud_csrf='));
            if (!csrfStored) {
                console.error(
                    'Auth cookies were NOT stored by the browser. ' +
                        'This usually means OXICLOUD_COOKIE_SECURE=true (or OXICLOUD_BASE_URL=https://...) ' +
                        'is set but you are accessing via plain HTTP.'
                );
                loginError.textContent =
                    'Login succeeded but the browser rejected the session cookie. ' +
                    'If you are accessing via HTTP, set OXICLOUD_COOKIE_SECURE=false in your .env file ' +
                    'or access via HTTPS through a reverse proxy.';
                loginError.style.display = 'block';
                return;
            }
            redirectToMainApp();
        } catch (error) {
            loginError.textContent = errMessage(error) || 'Error logging in';
            loginError.style.display = 'block';
        } finally {
            loginSubmit?.classList.remove('is-loading');
            loginSubmit?.removeAttribute('aria-busy');
            if (loginSubmit) loginSubmit.disabled = false;
        }
    });
}

// Register form submission
if (isLoginPage && registerForm) {
    registerForm.addEventListener('submit', async (e) => {
        e.preventDefault();

        // Clear previous messages
        registerError.style.display = 'none';
        registerSuccess.style.display = 'none';

        const username = inputVal('register-username');
        const email = inputVal('register-email');
        const password = inputVal('register-password');
        const confirmPassword = inputVal('register-password-confirm');

        // Validate passwords match
        if (password !== confirmPassword) {
            registerError.textContent = i18n.t('auth.passwords_mismatch');
            registerError.style.display = 'block';
            return;
        }

        try {
            await register(username, email, password);

            registerSuccess.textContent = i18n.t('auth.account_success');
            registerSuccess.style.display = 'block';

            // Clear form
            registerForm.reset();

            // Switch to login panel after 2 seconds
            setTimeout(() => {
                showPanel(loginPanel);
                hidePanel(registerPanel);
            }, 2000);
        } catch (error) {
            registerError.textContent = errMessage(error) || i18n.t('auth.admin_create_error');
            registerError.style.display = 'block';
        }
    });
}

// Admin setup form submission
// Magic-link form: anti-enumeration sign-in by email.
// The server always responds 200 with a uniform message when SMTP is
// configured, regardless of whether the email maps to an account or
// whether that account is eligible for magic-link sign-in. The UI
// mirrors that — same success state for every successful 2xx — so
// the page can't be used as an oracle. 503 is the one exception
// (SMTP not configured); operators need to see it.
const magicLinkForm = /** @type {HTMLFormElement | null} */ (document.getElementById('magic-link-form'));
const magicLinkStatus = document.getElementById('magic-link-status');
const magicLinkSubmit = /** @type {HTMLButtonElement | null} */ (document.getElementById('magic-link-submit'));
if (isLoginPage && magicLinkForm && magicLinkStatus) {
    magicLinkForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        const email = inputVal('magic-link-email');
        if (!email) return;

        magicLinkStatus.className = 'auth-status hidden';
        magicLinkStatus.textContent = '';
        if (magicLinkSubmit) magicLinkSubmit.disabled = true;

        try {
            const resp = await fetch('/api/auth/magic-link/send', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', ...getCsrfHeaders() },
                body: JSON.stringify({ email })
            });
            if (resp.status === 503) {
                magicLinkStatus.className = 'auth-status auth-status-error';
                magicLinkStatus.textContent = i18n.t('auth.magicLinkUnavailable', 'Sign-in by email is not available on this server.');
                return;
            }
            // Any 2xx → uniform success message regardless of whether
            // the server actually queued a mail. Anti-enumeration.
            magicLinkStatus.className = 'auth-status auth-status-success';
            magicLinkStatus.textContent = i18n.t('auth.magicLinkSent', 'If an account exists for that email, a sign-in link has been sent. Check your inbox.');
            magicLinkForm.reset();
        } catch (err) {
            magicLinkStatus.className = 'auth-status auth-status-error';
            magicLinkStatus.textContent = i18n.t('auth.magicLinkNetworkError', {
                message: /** @type {Error} */ (err).message
            });
        } finally {
            if (magicLinkSubmit) magicLinkSubmit.disabled = false;
            magicLinkStatus.classList.remove('hidden');
        }
    });
}

if (isLoginPage && adminSetupForm) {
    adminSetupForm.addEventListener('submit', async (e) => {
        e.preventDefault();

        // Clear previous errors/success messages
        adminSetupError.style.display = 'none';
        const adminSetupSuccess = document.getElementById('admin-setup-success');
        if (adminSetupSuccess) adminSetupSuccess.style.display = 'none';

        const email = inputVal('admin-email');
        const password = inputVal('admin-password');
        const confirmPassword = inputVal('admin-password-confirm');

        // Validate passwords match
        if (password !== confirmPassword) {
            adminSetupError.textContent = i18n.t('auth.passwords_mismatch');
            adminSetupError.style.display = 'block';
            return;
        }

        try {
            // Use the /api/setup endpoint which creates an admin and marks the system as initialized
            const response = await fetch('/api/setup', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', ...getCsrfHeaders() },
                credentials: 'same-origin',
                body: JSON.stringify({
                    username: 'admin',
                    email,
                    password
                })
            });
            if (!response.ok) {
                const err = await response.json().catch(() => ({}));
                throw new Error(err.message || 'Setup failed');
            }
            await response.json();

            if (adminSetupSuccess) {
                adminSetupSuccess.textContent = i18n.t('auth.admin_success');
                adminSetupSuccess.style.display = 'block';
            }

            // Wait 2 seconds then switch to login panel
            setTimeout(() => {
                showPanel(loginPanel);
                hidePanel(adminSetupPanel);
                if (adminSetupSuccess) adminSetupSuccess.style.display = 'none';
            }, 2000);
        } catch (error) {
            adminSetupError.textContent = errMessage(error) || i18n.t('auth.admin_create_error');
            adminSetupError.style.display = 'block';
        }
    });
}

// API Functions

/**
 * Login with username and password
 * @param {string} username
 * @param {string} password
 * @returns {Promise<AuthResponse>}
 */
async function login(username, password) {
    try {
        console.log(`Attempting to login with username: ${username}`);

        // Add better error handling with timeout
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout

        const response = await fetch(LOGIN_ENDPOINT, {
            method: 'POST',
            credentials: 'same-origin',
            headers: {
                'Content-Type': 'application/json',
                ...getCsrfHeaders()
            },
            body: JSON.stringify({ username, password }),
            signal: controller.signal
        });

        clearTimeout(timeoutId);

        console.log(`Login response status: ${response.status}`);

        // Handle both successful and error responses
        if (!response.ok) {
            try {
                const errorData = await response.json();
                throw new Error(errorData.error || 'Authentication failed');
            } catch (_jsonError) {
                // If the error response is not valid JSON
                throw new Error(`Authentication error (${response.status}): ${response.statusText}`);
            }
        }

        // Parse the JSON response
        try {
            /** @type {AuthResponse} */
            const data = await response.json();
            console.log(`Login successful for user id ${data.user.id}, received data`);
            return data;
        } catch (jsonError) {
            console.error('Error parsing login response:', jsonError);
            throw new Error('Error processing server response');
        }
    } catch (error) {
        console.error('Login error:', error);
        throw error;
    }
}

/**
 * Register a new user
 * @param {string} username
 * @param {string} email
 * @param {string} password
 * @param {RoleEnum} [role]
 * @returns {Promise<User>}
 */
async function register(username, email, password, role = 'user') {
    try {
        console.log(`Attempting to register user: ${username}`);

        const response = await fetch(REGISTER_ENDPOINT, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                ...getCsrfHeaders()
            },
            body: JSON.stringify({ username, email, password, role })
        });

        console.log(`Registration response status: ${response.status}`);

        // Handle both successful and error responses
        if (!response.ok) {
            try {
                const errorData = await response.json();
                throw new Error(errorData.error || 'Registration error');
            } catch (_jsonError) {
                // If the error response is not valid JSON
                throw new Error(`Registration error (${response.status}): ${response.statusText}`);
            }
        }

        // Parse the JSON response
        try {
            /** @type {User} */
            const data = await response.json();
            console.log(`Registration successful, user created: ${data.id}, received data`);
            return data;
        } catch (jsonError) {
            console.error('Error parsing registration response:', jsonError);
            throw new Error('Error processing server response');
        }
    } catch (error) {
        console.error('Registration error:', error);
        throw error;
    }
}

/**
 * Refresh authentication token via the server's refresh endpoint.
 * The refresh-token cookie is sent automatically (HttpOnly, Path=/api/auth).
 * Returns true on success, false on failure.
 */
async function refreshAuthToken() {
    try {
        // Loop-breaker
        const refreshAttempts = parseInt(localStorage.getItem('refresh_attempts') || '0', 10);
        localStorage.setItem('refresh_attempts', (refreshAttempts + 1).toString());

        if (refreshAttempts > 3) {
            console.error('Refresh token loop detected, giving up');
            localStorage.removeItem(USER_DATA_KEY);
            localStorage.removeItem('refresh_attempts');
            sessionStorage.removeItem('redirect_count');
            return false;
        }

        console.log('Attempting to refresh token (cookie-based)');

        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 5000);

        const response = await fetch(REFRESH_ENDPOINT, {
            method: 'POST',
            credentials: 'same-origin',
            headers: { 'Content-Type': 'application/json', ...getCsrfHeaders() },
            body: '{}',
            signal: controller.signal
        });

        clearTimeout(timeoutId);

        if (!response.ok) {
            console.warn('Refresh failed with status:', response.status);
            return false;
        }

        const data = await response.json();

        // Store user display data if provided
        if (data.user) {
            localStorage.setItem(USER_DATA_KEY, JSON.stringify(data.user));
        }

        // Reset counters on success
        localStorage.setItem('refresh_attempts', '0');
        sessionStorage.removeItem('redirect_count');

        return true;
    } catch (error) {
        console.error('Token refresh error:', error);
        localStorage.removeItem(USER_DATA_KEY);
        localStorage.removeItem('refresh_attempts');
        sessionStorage.removeItem('redirect_count');
        return false;
    }
}

/**
 * Check if this is the first run (no admin exists)
 */
async function checkFirstRun() {
    try {
        console.log('Checking if this is first run');

        // Skip the actual check - we'll assume it's not the first run
        // This avoids making the test request that's getting 403 Forbidden

        // For development/testing we can return false to show login screen
        // or true to show admin setup screen
        return false;
    } catch (error) {
        console.error('Error checking first run:', error);
        // If there's an error, default to regular login
        return false;
    }
}

/**
 * Redirect to main application — no token check needed (cookies are opaque).
 */
function redirectToMainApp() {
    console.log('Redirecting to main application');
    try {
        localStorage.setItem('refresh_attempts', '0');
        sessionStorage.removeItem('redirect_count');
        window.location.replace('/');
    } catch (error) {
        console.error('Error during redirect:', error);
        window.location.href = '/login?error=redirect_failed';
    }
}