/**
 * TalkingQ Platform - Login Page
 */

registerPage('login', function(container) {
  container.innerHTML = `
    <div class="login-wrapper">
      <div class="login-container">
        <div class="login-header">
          <div class="login-logo">
            <span class="logo-text">TalkingQ</span>
          </div>
          <h1 class="login-title">欢迎回来</h1>
          <p class="login-subtitle">AI 玩具智能运营平台</p>
        </div>

        <form class="login-form" id="loginForm">
          <div class="form-group">
            <label class="form-label">用户名 / 邮箱</label>
            <div class="input-wrapper">
              <i data-lucide="user" class="input-icon"></i>
              <input type="text" class="form-control with-icon" id="loginUsername" placeholder="请输入用户名或邮箱" autocomplete="username">
            </div>
          </div>

          <div class="form-group">
            <label class="form-label">密码</label>
            <div class="input-wrapper">
              <i data-lucide="lock" class="input-icon"></i>
              <input type="password" class="form-control with-icon" id="loginPassword" placeholder="请输入密码" autocomplete="current-password">
              <button type="button" class="password-toggle" id="passwordToggle">
                <i data-lucide="eye" class="eye-icon"></i>
              </button>
            </div>
          </div>

          <div class="form-row" style="align-items:center;margin-bottom:24px">
            <label class="checkbox-label">
              <input type="checkbox" id="rememberMe">
              <span class="checkmark"></span>
              <span>记住登录状态</span>
            </label>
            <a href="#" class="link" onclick="Toast.info('请联系管理员重置密码')">忘记密码？</a>
          </div>

          <button type="submit" class="btn btn-primary btn-lg" id="loginBtn" style="width:100%">
            <span class="btn-text">登 录</span>
            <span class="btn-loading" style="display:none">
              <i data-lucide="loader-2" class="spin"></i> 登录中...
            </span>
          </button>
        </form>

        <div class="login-footer">
          <p>还没有账号？<a href="#" class="link" onclick="Toast.info('请联系管理员创建账号')">申请试用</a></p>
        </div>
      </div>

      <div class="login-bg">
        <div class="login-bg-content">
          <h2>智能运营，尽在掌控</h2>
          <p>实时监控 AI 玩具运营数据，优化用户体验</p>
          <div class="login-features">
            <div class="feature-item">
              <i data-lucide="bar-chart-3"></i>
              <span>数据洞察</span>
            </div>
            <div class="feature-item">
              <i data-lucide="bot"></i>
              <span>应用配置</span>
            </div>
            <div class="feature-item">
              <i data-lucide="tablet-smartphone"></i>
              <span>设备管理</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  `;

  lucide.createIcons({ elements: [container] });
  initLoginHandlers();
});

function initLoginHandlers() {
  const form = document.getElementById('loginForm');
  const loginBtn = document.getElementById('loginBtn');
  const passwordInput = document.getElementById('loginPassword');
  const passwordToggle = document.getElementById('passwordToggle');
  const eyeIcon = passwordToggle?.querySelector('.eye-icon');

  // Password visibility toggle
  passwordToggle?.addEventListener('click', () => {
    const isPassword = passwordInput.type === 'password';
    passwordInput.type = isPassword ? 'text' : 'password';
    if (eyeIcon) {
      eyeIcon.setAttribute('data-lucide', isPassword ? 'eye-off' : 'eye');
      lucide.createIcons({ elements: [passwordToggle] });
    }
  });

  // Form submission
  form?.addEventListener('submit', async (e) => {
    e.preventDefault();

    const username = document.getElementById('loginUsername')?.value.trim();
    const password = document.getElementById('loginPassword')?.value;
    const rememberMe = document.getElementById('rememberMe')?.checked;

    // Validation
    if (!username) {
      Toast.warning('请输入用户名或邮箱');
      return;
    }
    if (!password) {
      Toast.warning('请输入密码');
      return;
    }

    // Show loading
    loginBtn.querySelector('.btn-text').style.display = 'none';
    loginBtn.querySelector('.btn-loading').style.display = 'flex';
    loginBtn.disabled = true;

    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1500));

      // Mock successful login
      if (username && password) {
        // Save to localStorage if remember me is checked
        if (rememberMe) {
          localStorage.setItem('talkingq_remember', username);
        }

        // Trigger login success
        onLoginSuccess({
          username: username,
          displayName: username.split('@')[0] || username,
          token: 'mock_token_' + Date.now()
        });
      } else {
        throw new Error('登录失败');
      }
    } catch (error) {
      Toast.error('登录失败，请检查用户名和密码');
    } finally {
      loginBtn.querySelector('.btn-text').style.display = 'flex';
      loginBtn.querySelector('.btn-loading').style.display = 'none';
      loginBtn.disabled = false;
    }
  });

  // Check for remembered username
  const remembered = localStorage.getItem('talkingq_remember');
  if (remembered) {
    const usernameInput = document.getElementById('loginUsername');
    if (usernameInput) usernameInput.value = remembered;
    const rememberCheckbox = document.getElementById('rememberMe');
    if (rememberCheckbox) rememberCheckbox.checked = true;
  }
}

function onLoginSuccess(user) {
  // Save auth state
  sessionStorage.setItem('talkingq_user', JSON.stringify(user));
  sessionStorage.setItem('talkingq_logged_in', 'true');

  Toast.success('登录成功！');

  // Small delay to ensure toast shows before navigation
  setTimeout(() => {
    navigateTo('dashboard');
  }, 300);
}

function logout() {
  sessionStorage.removeItem('talkingq_user');
  sessionStorage.removeItem('talkingq_logged_in');
  Toast.info('已退出登录');
  setTimeout(() => {
    navigateTo('login');
  }, 300);
}

// Check if already logged in
// Note: checkAuth is now defined in app.js