// Mission Critical Client Portal System
const MASTER_CREDENTIALS = {
  username: 'HelloMC',
  password: 'MissionCritical25'
};

let loginFormHandler;
let logoutHandler;

function handleLogin(event) {
  event.preventDefault();
  
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  const errorDiv = document.getElementById('login-error');
  
  // Clear previous errors
  errorDiv.classList.add('hidden');
  
  // Validate credentials
  if (username === MASTER_CREDENTIALS.username && password === MASTER_CREDENTIALS.password) {
    // Success - show dashboard
    localStorage.setItem('clientPortalLoggedIn', 'true');
    localStorage.setItem('clientPortalUsername', username);
    localStorage.setItem('clientPortalLoginTime', Date.now().toString());
    
    // Add success animation
    const loginContainer = document.getElementById('login-container');
    loginContainer.style.animation = 'fadeOut 0.5s ease-out';
    setTimeout(() => {
      showDashboard();
    }, 500);
  } else {
    // Error - show error message
    errorDiv.classList.remove('hidden');
    
    // Add shake animation to form
    const form = document.getElementById('portal-login-form');
    form.style.animation = 'shake 0.5s ease-in-out';
    setTimeout(() => {
      form.style.animation = '';
    }, 500);
    
    // Clear form fields
    document.getElementById('username').value = '';
    document.getElementById('password').value = '';
  }
}

function handleLogout() {
  // Clear session
  localStorage.removeItem('clientPortalLoggedIn');
  localStorage.removeItem('clientPortalUsername');
  localStorage.removeItem('clientPortalLoginTime');
  
  // Add logout animation
  const dashboardContainer = document.getElementById('dashboard-container');
  dashboardContainer.style.animation = 'fadeOut 0.5s ease-out';
  
  setTimeout(() => {
    showLogin();
  }, 500);
}

function showDashboard() {
  document.getElementById('login-container').classList.add('hidden');
  document.getElementById('dashboard-container').classList.remove('hidden');
  
  // Update welcome message with username
  const username = localStorage.getItem('clientPortalUsername') || 'HelloMC';
  document.getElementById('welcome-username').textContent = username;
  
  // Update page title
  document.title = 'Client Portal Dashboard - Mission Critical';
  
  // Smooth scroll to top
  window.scrollTo({ top: 0, behavior: 'smooth' });
  
  // Add fade-in animation
  const dashboardContainer = document.getElementById('dashboard-container');
  dashboardContainer.style.animation = 'fadeIn 0.5s ease-out';
}

function showLogin() {
  document.getElementById('dashboard-container').classList.add('hidden');
  document.getElementById('login-container').classList.remove('hidden');
  
  // Clear form
  document.getElementById('username').value = '';
  document.getElementById('password').value = '';
  document.getElementById('login-error').classList.add('hidden');
  
  // Update page title
  document.title = 'Client Portal Login - Mission Critical';
  
  // Smooth scroll to top
  window.scrollTo({ top: 0, behavior: 'smooth' });
  
  // Add fade-in animation
  const loginContainer = document.getElementById('login-container');
  loginContainer.style.animation = 'fadeIn 0.5s ease-out';
}

function checkExistingLogin() {
  const isLoggedIn = localStorage.getItem('clientPortalLoggedIn') === 'true';
  const loginTime = localStorage.getItem('clientPortalLoginTime');
  
  // Check if login is still valid (24 hours)
  if (isLoggedIn && loginTime) {
    const timeElapsed = Date.now() - parseInt(loginTime);
    const twentyFourHours = 24 * 60 * 60 * 1000; // 24 hours in milliseconds
    
    if (timeElapsed < twentyFourHours) {
      showDashboard();
    } else {
      // Session expired
      localStorage.removeItem('clientPortalLoggedIn');
      localStorage.removeItem('clientPortalUsername');
      localStorage.removeItem('clientPortalLoginTime');
      showLogin();
    }
  } else {
    showLogin();
  }
}

function addPortalStyles() {
  const style = document.createElement('style');
  style.textContent = `
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-5px); }
      75% { transform: translateX(5px); }
    }
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes fadeOut {
      from { opacity: 1; transform: translateY(0); }
      to { opacity: 0; transform: translateY(-20px); }
    }
    
    .fade-in {
      animation: fadeIn 0.5s ease-out;
    }
    
    .fade-out {
      animation: fadeOut 0.5s ease-out;
    }
    
    /* Custom scrollbar for better UX */
    ::-webkit-scrollbar {
      width: 8px;
    }
    
    ::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb {
      background: rgba(59, 130, 246, 0.5);
      border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: rgba(59, 130, 246, 0.7);
    }
  `;
  document.head.appendChild(style);
}

function handleKeyboard(event) {
  // ESC to logout when in dashboard
  if (event.key === 'Escape' && !document.getElementById('dashboard-container').classList.contains('hidden')) {
    handleLogout();
  }
}

function init() {
  console.log('Client Portal initializing...'); // Debug log
  
  // Set up event handlers
  loginFormHandler = handleLogin;
  logoutHandler = handleLogout;
  
  // Wait for DOM to be fully loaded
  const loginForm = document.getElementById('portal-login-form');
  const logoutBtn = document.getElementById('logout-btn');
  
  if (loginForm) {
    loginForm.addEventListener('submit', loginFormHandler);
    console.log('Login form event listener attached'); // Debug log
  } else {
    console.error('Login form not found!'); // Debug log
  }
  
  if (logoutBtn) {
    logoutBtn.addEventListener('click', logoutHandler);
    console.log('Logout button event listener attached'); // Debug log
  }
  
  // Add custom styles
  addPortalStyles();
  
  // Check if user is already logged in
  checkExistingLogin();
  
  // Add keyboard shortcuts
  document.addEventListener('keydown', handleKeyboard);
  
  console.log('Client Portal initialization complete'); // Debug log
}

function teardown() {
  console.log('Client Portal teardown...'); // Debug log
  
  // Remove event listeners
  const loginForm = document.getElementById('portal-login-form');
  const logoutBtn = document.getElementById('logout-btn');
  
  if (loginForm && loginFormHandler) {
    loginForm.removeEventListener('submit', loginFormHandler);
  }
  
  if (logoutBtn && logoutHandler) {
    logoutBtn.removeEventListener('click', logoutHandler);
  }
  
  // Clear handlers
  loginFormHandler = null;
  logoutHandler = null;
  
  // Remove keyboard event listeners
  document.removeEventListener('keydown', handleKeyboard);
}

// Make sure functions are available globally for debugging
window.clientPortal = {
  handleLogin,
  handleLogout,
  showDashboard,
  showLogin,
  checkExistingLogin,
  MASTER_CREDENTIALS
};

export { init, teardown };