<template>
  <div class="page-login">
    <div class="login-container">
      <div class="login-header">
        <h1>用户登录</h1>
        <p class="login-subtitle">请输入您的邮箱和密码进行登录</p>
      </div>

      <div class="login-form">
        <Message
          v-if="errorMessage"
          severity="error"
          :closable="false"
          class="error-message"
        >
          {{ errorMessage }}
        </Message>

        <div class="form-group">
          <label class="form-label">邮箱</label>
          <InputText
            v-model="email"
            type="email"
            placeholder="请输入邮箱地址"
            autocomplete="email"
            class="form-input"
            @keyup.enter="handleLogin"
          />
        </div>

        <div class="form-group">
          <label class="form-label">密码</label>
          <InputText
            v-model="password"
            type="password"
            placeholder="请输入密码"
            autocomplete="current-password"
            class="form-input"
            @keyup.enter="handleLogin"
          />
        </div>

        <div class="form-options">
          <div class="remember-me">
            <Checkbox v-model="rememberMe" inputId="remember" binary />
            <label for="remember" class="remember-label">记住登录信息</label>
          </div>
        </div>

        <div class="form-actions">
          <Button
            label="登录"
            @click="handleLogin"
            :disabled="isLoading || !email || !password"
            :loading="isLoading"
            class="btn-block"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { InputText, Password, Button, Checkbox, Message } from '../components/PrimeVue';

export default {
  name: 'LoginPage',
  components: {
    InputText,
    Password,
    Button,
    Checkbox,
    Message
  },
  data() {
    return {
      email: '',
      password: '',
      rememberMe: true,
      isLoading: false,
      errorMessage: ''
    };
  },
  mounted() {
    // 从 store 加载保存的邮箱
    if (this.$store) {
      const savedEmail = this.$store.state.config.email || this.$store.state.auth.email;
      if (savedEmail) {
        this.email = savedEmail;
      }
      const rememberMe = this.$store.state.config.rememberMe;
      if (rememberMe !== undefined) {
        this.rememberMe = rememberMe;
      }
    }
  },
  methods: {
    /**
     * 生成设备ID（基于浏览器特征）
     * @returns {string} 设备ID
     */
    generateDeviceId() {
      // 尝试从 store 获取已保存的设备ID
      if (this.$store) {
        let deviceId = this.$store.state.config.deviceId || this.$store.state.auth.deviceId;
        if (deviceId) {
          return deviceId;
        }
      }

      // 基于浏览器特征生成设备ID
      try {
        const navigatorInfo = [
          navigator.userAgent,
          navigator.language,
          navigator.platform,
          screen.width,
          screen.height,
          screen.colorDepth,
          new Date().getTimezoneOffset()
        ].join('|');

        // 使用简单的哈希算法生成ID
        let hash = 0;
        for (let i = 0; i < navigatorInfo.length; i++) {
          const char = navigatorInfo.charCodeAt(i);
          hash = ((hash << 5) - hash) + char;
          hash = hash & hash; // Convert to 32bit integer
        }

        const deviceId = 'web_' + Math.abs(hash).toString(16).substring(0, 32);

        // 保存生成的 device_id 到 store
        if (this.$store) {
          this.$store.dispatch('config/setDeviceId', deviceId);
          this.$store.commit('auth/SET_DEVICE_ID', deviceId);
        }

        return deviceId;
      } catch (error) {
        console.error('生成设备ID失败:', error);
        // 如果生成失败，使用随机字符串作为后备方案
        const fallbackId = 'web_' + Date.now().toString(36) + Math.random().toString(36).substring(2, 15);
        if (this.$store) {
          this.$store.dispatch('config/setDeviceId', fallbackId);
          this.$store.commit('auth/SET_DEVICE_ID', fallbackId);
        }
        return fallbackId;
      }
    },

    async handleLogin() {
      if (!this.email) {
        this.errorMessage = '请输入邮箱地址';
        return;
      }
      if (!this.password) {
        this.errorMessage = '请输入密码';
        return;
      }

      // 验证邮箱格式
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(this.email)) {
        this.errorMessage = '邮箱格式不正确，请输入有效的邮箱地址';
        return;
      }

      this.isLoading = true;
      this.errorMessage = '';

      try {
        // 生成或获取设备ID
        const deviceId = this.generateDeviceId();

        // 调用 Vuex store 的 login action（会自动调用 HTTP 接口）
        const result = await this.$store.dispatch('auth/login', {
          email: this.email,
          password: this.password,
          deviceId: deviceId
        });

        if (result.success) {
          // 保存记住登录选项到 store
          if (this.$store) {
            this.$store.dispatch('config/setRememberMe', this.rememberMe);
            if (this.rememberMe) {
              this.$store.dispatch('config/setEmail', this.email);
            }
          }

          // 等待 store 状态更新完成后再跳转
          await this.$nextTick();

          // 跳转到控制台（App.vue 的 watch 会自动连接 MQTT）
          this.$router.push('/console');
        } else {
          this.errorMessage = result.error || '登录失败，请检查邮箱和密码';
          this.isLoading = false;
        }
      } catch (error) {
        this.errorMessage = `登录失败: ${error.message}`;
        this.isLoading = false;
      }
    },

    setError(message) {
      this.errorMessage = message;
      this.isLoading = false;
    },

    reset() {
      this.password = '';
      this.errorMessage = '';
      this.isLoading = false;
    }
  }
};
</script>

<style lang="less" scoped>
.page-login {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  overflow: auto;
}

.login-container {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 420px;
  padding: 40px;
  box-sizing: border-box;
}

.login-header {
  text-align: center;
  margin-bottom: 30px;

  h1 {
    font-size: 28px;
    font-weight: 600;
    color: #333;
    margin: 0 0 10px 0;
  }

  .login-subtitle {
    font-size: 14px;
    color: #666;
    margin: 0;
  }
}

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

    .form-label {
      display: block;
      margin-bottom: 8px;
      font-size: 14px;
      color: #333;
      font-weight: 500;
    }

    // PrimeVue InputText 样式覆盖
    :deep(.p-inputtext) {
      width: 100%;
      padding: 12px 16px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 14px;
      transition: border-color 0.3s, box-shadow 0.3s;

      &:enabled:hover {
        border-color: #667eea;
      }

      &:enabled:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
      }

      &::placeholder {
        color: #999;
      }
    }
  }

  .form-options {
    margin-bottom: 24px;

    .remember-me {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: #666;

      .remember-label {
        cursor: pointer;
        user-select: none;
      }
    }
  }

  .form-actions {
    :deep(.p-button) {
      width: 100%;
      padding: 12px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;
      border-radius: 6px;
      font-size: 15px;
      font-weight: 500;
      transition: transform 0.2s, box-shadow 0.3s;

      &:enabled:hover {
        background: linear-gradient(135deg, #5568d3 0%, #653a8b 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
      }

      &:enabled:active {
        transform: translateY(0);
      }
    }
  }

  .error-message {
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .page-login {
    padding: 15px;
  }

  .login-container {
    padding: 30px 20px;
  }

  .login-header h1 {
    font-size: 24px;
  }
}
</style>

