login.js

import {
  initI18n,
  bindLanguageSelector,
  t,
  onLanguageChange,
  setLanguage,
  getCurrentLanguage,
} from './i18n.js';
import {
  findAccount,
  getAuthUser,
  getFakeAccounts,
  saveAuthUser,
} from './auth.js';

const form = document.getElementById('login-form');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const errorElement = document.getElementById('login-error');

initI18n();
bindLanguageSelector('#language-select');

const languageLabelMap = {
  en: () => t('languageEnglish') || 'English',
  ja: () => t('languageJapanese') || 'Japanese',
  vi: () => t('languageVietnamese') || 'Vietnamese',
};

const languageDropdown = document.getElementById('language-dropdown');
const languageToggle = document.getElementById('language-toggle');
const languageOptions = document.querySelectorAll('.language-option');
const languageSelectedLabel = document.getElementById(
  'language-selected-label'
);
const hiddenLanguageSelect = document.getElementById('language-select');

function setLanguageUI(lang) {
  const labelFn = languageLabelMap[lang];
  if (languageSelectedLabel && labelFn) {
    languageSelectedLabel.textContent = labelFn();
  }
  languageOptions.forEach((option) => {
    const isActive = option.dataset.lang === lang;
    option.classList.toggle('active', isActive);
    option.setAttribute('aria-selected', isActive.toString());
  });
  if (hiddenLanguageSelect) {
    hiddenLanguageSelect.value = lang;
  }
  if (languageToggle) {
    languageToggle.setAttribute('aria-expanded', 'false');
  }
  if (languageDropdown) {
    languageDropdown.classList.remove('open');
  }
}

function setupLanguageDropdown() {
  if (!languageDropdown || !languageToggle) return;

  languageToggle.addEventListener('click', (event) => {
    event.stopPropagation();
    const isOpen = languageDropdown.classList.toggle('open');
    languageToggle.setAttribute('aria-expanded', isOpen.toString());
  });

  languageOptions.forEach((option) => {
    option.addEventListener('click', (event) => {
      event.stopPropagation();
      const lang = option.dataset.lang;
      if (lang) {
        setLanguage(lang);
      }
    });
  });

  document.addEventListener('click', (event) => {
    if (!languageDropdown.classList.contains('open')) return;
    if (!languageDropdown.contains(event.target)) {
      languageDropdown.classList.remove('open');
      languageToggle.setAttribute('aria-expanded', 'false');
    }
  });

  setLanguageUI(getCurrentLanguage());
}

setupLanguageDropdown();

function redirectToApp() {
  window.location.href = 'index.html';
}

function setError(message) {
  errorElement.textContent = message || '';
}

function applyLoginTitle() {
  document.title = t('loginTitle');
}

const existingUser = getAuthUser();
if (existingUser) {
  redirectToApp();
}

applyLoginTitle();

onLanguageChange((lang) => {
  setLanguageUI(lang);
  applyLoginTitle();
  if (errorElement.textContent) {
    setError(t('loginError'));
  }
});

form?.addEventListener('submit', (event) => {
  event.preventDefault();
  const username = usernameInput?.value;
  const password = passwordInput?.value;
  const account = findAccount(username, password);

  if (!account) {
    setError(t('loginError'));
    return;
  }

  saveAuthUser(account);
  setError('');
  redirectToApp();
});