<template>
  <div class="login-container">
    <!-- Header -->
    <header class="header">
      <div class="logo">
        <h1>公司名称</h1>
        <span>Logo</span>
      </div>
      <div class="language-selector">
        <Globe class="globe-icon" size="16" />
        <select v-model="language" class="language-select">
          <option value="en">English</option>
          <option value="es">Español</option>
          <option value="zh">中文</option>
        </select>
      </div>
    </header>

    <!-- Main Content -->
    <main class="main-content">
      <div class="login-card">
        <h2 class="greeting">欢迎回来</h2>
        <p class="subtitle">请登录公司管理系统</p>

        <form @submit.prevent="handleLogin">
          <div class="form-group">
            <label for="username">用户名</label>
            <input 
              type="text" 
              id="username" 
              v-model="username" 
              placeholder="请输入用户名"
              class="form-input"
            />
          </div>

          <div class="form-group">
            <label for="password">密码</label>
            <input 
              type="password" 
              id="password" 
              v-model="password" 
              placeholder="请输入密码"
              class="form-input"
            />
          </div>

          <div class="form-options">
            <div class="remember-me">
              <input type="checkbox" id="remember" v-model="rememberMe" />
              <label for="remember">记住我</label>
            </div>
            <a href="#" class="forgot-password">忘记密码?</a>
          </div>

          <button type="submit" class="login-button">登录</button>
        </form>

        <div class="alternative-login">
          <p>其他登录方式</p>
          <a href="#" class="sms-login">使用短信验证码登录</a>
        </div>
      </div>
    </main>

    <!-- Footer - hidden on mobile -->
    <footer class="footer">
      <p>© 2025 公司名称 All Rights Reserved.</p>
    </footer>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { Globe } from 'lucide-vue-next';

// State Variables
const username = ref('');
const password = ref('');
const rememberMe = ref(false);
const language = ref('zh');

// Methods
const router = useRouter();

const handleLogin = () => {
  console.log('Login attempt:', { 
    username: username.value, 
    password: password.value,
    rememberMe: rememberMe.value,
    language: language.value
  });

  // Simple authentication check
  if (username.value === 'admin' && password.value === 'admin') {
    router.push({ name: 'Chatbot' });
  } else {
    alert('Invalid credentials');
  }
};
</script>

<style scoped>
/* Base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.login-container {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #e6f0ff 0%, #f0f8ff 100%);
  position: relative;
  overflow: hidden;
}

/* Header styles */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  width: 100%;
}

.logo {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #4a90e2;
}

.logo h1 {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 1px;
}

.logo span {
  font-size: 14px;
  margin-left: 5px;
}

.language-selector {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: #4a90e2;
  font-size: 14px;
}

.globe-icon, .language-select {
  color: #4a90e2;
}

.language-select {
  background: none;
  border: none;
  outline: none;
  font-size: 14px;
  cursor: pointer;
}

/* Main content styles */
.main-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 20px;
  height: 100%; /* Ensure it takes up the full height */
}

.login-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 40px;
  width: 100%;
  max-width: 420px;
  text-align: left;
  margin-bottom: 20px; /* Add margin to ensure spacing from the bottom */
}

.greeting {
  color: #2c3e50;
  font-size: 24px;
  margin-bottom: 10px;
  font-weight: 600;
}

.subtitle {
  color: #7f8c8d;
  font-size: 16px;
  margin-bottom: 30px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #2c3e50;
}

.form-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: #4a90e2;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #606266;
}

.forgot-password {
  font-size: 14px;
  color: #4a90e2;
  text-decoration: none;
}

.login-button {
  width: 100%;
  padding: 12px;
  background-color: #1976d2;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.login-button:hover {
  background-color: #1565c0;
}

.alternative-login {
  margin-top: 30px;
  text-align: center;
}

.alternative-login p {
  font-size: 14px;
  color: #909399;
  margin-bottom: 10px;
}

.sms-login {
  color: #4a90e2;
  text-decoration: none;
  font-size: 14px;
}

/* Footer styles */
.footer {
  padding: 15px;
  text-align: center;
  color: #909399;
  font-size: 12px;
}

/* Responsive styles */
@media (max-width: 475px) {
  .header {
    padding: 15px 20px;
  }
  
  .login-card {
    padding: 25px;
    box-shadow: none;
    max-width: 100%;
  }
  
  .greeting {
    font-size: 20px;
  }
  
  .subtitle {
    font-size: 14px;
    margin-bottom: 20px;
  }
  
  /* Hide footer on mobile as requested */
  .footer {
    display: none;
  }
}
</style>
