document.addEventListener('DOMContentLoaded', () => {
  const loginForm = document.getElementById('loginForm');
  const passwordInput = document.getElementById('password');
  const togglePasswordBtn = document.getElementById('togglePassword');
  const errorMessage = document.getElementById('errorMessage');
  const btnSubmit = document.getElementById('btnSubmit');

  // Alternar visualização da senha
  togglePasswordBtn.addEventListener('click', () => {
    const isPassword = passwordInput.getAttribute('type') === 'password';
    passwordInput.setAttribute('type', isPassword ? 'text' : 'password');
    
    // Altera o ícone do olho
    togglePasswordBtn.innerHTML = isPassword 
      ? `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.815 7.815 3 3m-3-3-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
        </svg>`
      : `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
          <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
        </svg>`;
  });

  // Submissão do formulário
  loginForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    
    // Resetar estado de erro
    errorMessage.classList.remove('visible');
    errorMessage.textContent = '';
    
    const password = passwordInput.value;
    if (!password) return;
    
    // Desabilitar botão e mostrar loading
    btnSubmit.disabled = true;
    btnSubmit.classList.add('loading');
    btnSubmit.querySelector('span').textContent = 'Conectando...';

    try {
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ password })
      });
      
      const data = await response.json();
      
      if (response.ok && data.success) {
        // Sucesso - redireciona para a página principal
        btnSubmit.querySelector('span').textContent = 'Autenticado!';
        setTimeout(() => {
          window.location.href = '/';
        }, 600);
      } else {
        // Mostrar erro
        throw new Error(data.error || 'Acesso negado');
      }
    } catch (error) {
      errorMessage.textContent = error.message;
      errorMessage.classList.add('visible');
      
      // Habilitar botão novamente
      btnSubmit.disabled = false;
      btnSubmit.classList.remove('loading');
      btnSubmit.querySelector('span').textContent = 'Entrar no Workspace';
      
      // Feedback vibratório (se houver API) e animação shake no card
      const card = document.querySelector('.login-card');
      card.classList.add('shake');
      setTimeout(() => card.classList.remove('shake'), 500);
    }
  });
});
