<template>
  <div class="pc-register-container">
    <img src="@/assets/image/logo.png" class="top-left-logo" alt="logo" />

    <div class="lang-selector-wrapper">
      <selectLang />
    </div>

    <div class="bg-glow glow-top-left"></div>
    <div class="bg-glow glow-bottom-right"></div>

    <div class="register-card">
      <div class="mclaren-header">
        <img src="@/assets/image/login/mclaren.png" class="mclaren-img-logo" alt="mclaren logo" />
        <div class="main-title">迈凯伦</div>
        <div class="sub-partner">官方合作伙伴</div>
      </div>

      <div class="form-wrapper">
        <el-input v-model="formData.account" :placeholder="t('请输入账号')" clearable size="large" class="custom-input">
          <template #prefix>
            <img src="@/assets/image/login/account.png" class="input-icon" alt="icon"/>
          </template>
        </el-input>

        <el-input v-model="formData.password" :placeholder="t('请输入6-20位密码')" type="password" show-password clearable size="large" class="custom-input">
          <template #prefix>
            <img src="@/assets/image/login/lock.png" class="input-icon" alt="icon"/>
          </template>
        </el-input>

        <el-input v-model="formData.confirmPassword" :placeholder="t('请再次确认密码')" type="password" show-password clearable size="large" class="custom-input">
          <template #prefix>
            <img src="@/assets/image/login/lock.png" class="input-icon" alt="icon"/>
          </template>
        </el-input>

        <el-input v-model="formData.user_code" :placeholder="t('请输入邀请码')" clearable size="large" class="custom-input">
          <template #prefix>
            <img src="@/assets/image/login/user.png" class="input-icon" alt="icon"/>
          </template>
        </el-input>
      </div>

      <div class="submit-action-group">
        <el-button class="back-btn" size="large" @click="router.back()">
          {{ t('返回') }}
        </el-button>
        <el-button type="primary" class="submit-btn" size="large" @click="onRegisterClick">
          {{ t('提交') }}
        </el-button>
      </div>

    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { ElMessage } from 'element-plus';

import { appName } from '@/settings/index.mjs';
import selectLang from '@/components/selectLang/index.vue';
import { setAccount } from "@/request/api";

const router = useRouter();
const { t } = useI18n();

const formData = reactive({ account: '', password: '', confirmPassword: '', user_code: '' });

// === 业务逻辑 ===
function validateForm() {
  if (!formData.account) { ElMessage.warning(t('请输入账号')); return false; }
  if (!formData.password) { ElMessage.warning(t('请输入密码')); return false; }
  if (formData.password.length < 6 || formData.password.length > 20) { ElMessage.warning(t('密码长度需在6-20个字符之间')); return false; }
  if (formData.password !== formData.confirmPassword) { ElMessage.warning(t('两次输入的密码不一致')); return false; }
  if (!formData.user_code) { ElMessage.warning(t('请输入邀请码')); return false; }
  return true;
}

function onRegisterClick() {
  if (!validateForm()) return;
  doRegister();
}

// 实际发送注册请求的逻辑
function doRegister() {
  setAccount({
    account: formData.account,
    password: formData.password,
    user_code: formData.user_code
  }).then((res) => {
    if (res && res.data && res.data.token) {
      localStorage.setItem('token', res.data.token);
    }
    setTimeout(() => {
      // 提交成功后跳转至首页
      router.push('/');
    }, 500);
  }).catch((err) => {
    console.error(err);
  });
}
</script>

<style scoped lang="scss">
$mclaren-orange: #f8b932; 
$btn-orange: #f8b932;     
$text-light: rgba(255, 255, 255, 0.8);

.pc-register-container {
  position: relative; min-height: 100vh; width: 100vw; 
  background-image: url('@/assets/image/login/bg-login-pc.png');
  background-size: cover;
  background-position: center;
  display: flex; justify-content: center; align-items: center; overflow: hidden;

  .top-left-logo { position: absolute; top: 30px; left: 40px; height: 32px; z-index: 10; }
  .lang-selector-wrapper { position: absolute; top: 24px; right: 32px; z-index: 10; }

  .bg-glow { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.1; z-index: 1; }
  .glow-top-left { top: -10%; left: 10%; width: 400px; height: 400px; background-color: $mclaren-orange; }
  .glow-bottom-right { bottom: -10%; right: 10%; width: 300px; height: 300px; background-color: #fff; }

  .register-card {
    min-width: 480px; width: 30%;
    position: relative; z-index: 2; padding: 30px;
    background-color: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6); 
    border: 1px solid rgba(255, 255, 255, 0.2);

    .mclaren-header {
      border-radius: 12px;
      padding: 22px 10px;
      text-align: center;
      margin-bottom: 25px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .mclaren-img-logo { height: 34px; margin-bottom: 2px; }
      .racing-text {
        color: #fff; font-size: 12px; letter-spacing: 7px;
        margin-left: 7px; font-weight: bold; transform: scale(0.8);
      }
      .main-title {
        color: #fff; font-size: 20px; font-weight: 800; letter-spacing: 5px; line-height: 1;
        margin-top: 15px;
      }
      .sub-partner {
        color: rgba(255, 255, 255, 0.85); font-size: 12px;
        letter-spacing: 1px; margin-top: 4px;
      }
    }

    .form-wrapper { display: flex; flex-direction: column; gap: 12px; }

    .custom-input {
      :deep(.el-input__wrapper) {
        background-color: rgba(255, 255, 255, 0.2); 
        box-shadow: none; height: 48px; border-radius: 10px;
        &:hover, &.is-focus { box-shadow: 0 0 0 1px $mclaren-orange inset; }
      }
      :deep(.el-input__inner) { color: #fff; &::placeholder { color: #bbb; } }
      .input-icon { width: 20px; height: 20px; opacity: 0.8; margin-right: 5px; }
    }

    .submit-action-group {
      display: flex;
      gap: 15px;
      margin-top: 30px;
      margin-bottom: 10px;

      .back-btn {
        flex: 1;
        height: 50px;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        background-color: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 10px;
        letter-spacing: 4px;
        margin: 0;
        
        &:hover, &:focus {
          background-color: rgba(255, 255, 255, 0.25);
          color: #fff;
          border-color: rgba(255, 255, 255, 0.6);
        }
      }

      .submit-btn { 
        flex: 1; 
        height: 50px; font-size: 18px; font-weight: bold; color: #fff; 
        background-color: $btn-orange; border-color: $btn-orange; border-radius: 10px;
        letter-spacing: 4px; 
        margin: 0;
      }
    }
  }

  :deep(.el-popper) {
    background-color: rgba(40, 40, 40, 0.95) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    .el-select-dropdown__item {
      color: #eee;
      &.is-hovering, &:hover { background-color: rgba(255, 255, 255, 0.1); }
      &.is-selected { color: $mclaren-orange; font-weight: bold; }
    }
  }
}
</style>