import { clearAuthState, storeAuthState } from './auth-session.js';
import { initializeTelemetry } from './telemetry.js';

void initializeTelemetry();

(() => {
  'use strict';

  const form = document.getElementById('login-form');
  const usernameInput = document.getElementById('username');
  const passwordInput = document.getElementById('password');
  const usernameError = document.getElementById('username-error');
  const passwordError = document.getElementById('password-error');
  const formAlert = document.getElementById('form-alert');
  const btnSubmit = document.getElementById('btn-submit');
  const btnText = btnSubmit.querySelector('.btn-text');
  const btnLoader = btnSubmit.querySelector('.btn-loader');
  const togglePassword = document.getElementById('toggle-password');

  // Ripple effect
  btnSubmit.addEventListener('click', function(e) {
    const ripple = document.createElement('span');
    ripple.classList.add('ripple');
    
    this.appendChild(ripple);
    
    setTimeout(() => {
      ripple.remove();
    }, 600);
  });

  togglePassword.addEventListener('click', () => {
    const isPassword = passwordInput.type === 'password';
    passwordInput.type = isPassword ? 'text' : 'password';
    togglePassword.setAttribute('aria-label', isPassword ? 'Скрыть пароль' : 'Показать пароль');
  });

  usernameInput.addEventListener('input', () => clearFieldError(usernameInput, usernameError));
  passwordInput.addEventListener('input', () => clearFieldError(passwordInput, passwordError));

  function clearFieldError(input, errorEl) {
    input.closest('.form-group').classList.remove('has-error');
    errorEl.textContent = '';
  }

  function setFieldError(input, errorEl, message) {
    const group = input.closest('.form-group');
    group.classList.add('has-error');
    errorEl.textContent = message;
    
    // Shake animation
    group.classList.remove('shake');
    void group.offsetWidth; // trigger reflow
    group.classList.add('shake');
  }

  function showAlert(message, type) {
    formAlert.className = 'form-alert ' + type;
    formAlert.textContent = message;
  }

  function hideAlert() {
    formAlert.className = 'form-alert';
    formAlert.textContent = '';
  }

  function setLoading(loading) {
    btnSubmit.disabled = loading;
    btnText.hidden = loading;
    btnLoader.hidden = !loading;
  }

  function validate() {
    let valid = true;
    hideAlert();

    if (!usernameInput.value.trim()) {
      setFieldError(usernameInput, usernameError, 'Введите имя пользователя');
      valid = false;
    }

    if (!passwordInput.value) {
      setFieldError(passwordInput, passwordError, 'Введите пароль');
      valid = false;
    } else if (passwordInput.value.length < 4) {
      setFieldError(passwordInput, passwordError, 'Минимум 4 символа');
      valid = false;
    }

    return valid;
  }

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    if (!validate()) return;

    setLoading(true);
    hideAlert();

    try {
	      const response = await fetch('/api/auth/login', {
	        method: 'POST',
	        headers: { 'Content-Type': 'application/json' },
	        credentials: 'same-origin',
	        body: JSON.stringify({
	          username: usernameInput.value.trim(),
	          password: passwordInput.value,
	        }),
      });

      const data = await response.json();

	      if (response.ok) {
	        showAlert('Вход выполнен успешно!', 'success');
        clearAuthState();
        storeAuthState(data);

        const redirect = data.redirect || '/';
        setTimeout(() => { window.location.href = redirect; }, 400);
      } else {
        showAlert(data.message || 'Неверное имя пользователя или пароль', 'error');
      }
    } catch (err) {
      showAlert('Ошибка соединения с сервером', 'error');
    } finally {
      setLoading(false);
    }
  });
})();
document.addEventListener('DOMContentLoaded', () => {
  document
    .querySelector('#login-form button[type="submit"]')
    ?.classList.add('btn', 'btn-lg', 'btn-primary');
});
