<template>
  <el-container class="register-container">
    <el-main>
      <el-card class="register-card">
        <el-header>
          <h2>Register</h2>
        </el-header>
        <el-form @submit.prevent="register" label-position="top" class="register-form">
          <el-form-item label="Username" required>
            <el-input type="text" v-model="username"></el-input>
          </el-form-item>
          <el-form-item label="Password" required>
            <el-input type="password" v-model="password"></el-input>
          </el-form-item>
          <el-form-item label="Email" required>
            <el-input type="email" v-model="email"></el-input>
          </el-form-item>
          <el-form-item label="Phone Number" required>
            <el-input type="text" v-model="phoneNumber"></el-input>
          </el-form-item>
          <el-form-item label="Company" required>
            <el-input type="text" v-model="company"></el-input>
          </el-form-item>
          <el-form-item label="Role">
            <el-select v-model="role" placeholder="Select role">
              <el-option label="User" value="USER"></el-option>
              <el-option label="Admin" value="ADMIN"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Verification Code" required>
            <el-input type="text" v-model="verificationCode"></el-input>
            <el-button class="verification-button" type="primary" @click="getVerificationCode">Get Verification Code</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" native-type="submit">Register</el-button>
            <el-button type="default" @click="goToLogin">Back</el-button>
          </el-form-item>
        </el-form>
        <el-alert v-if="message" type="info" :closable="false">{{ message }}</el-alert>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import authenticationService from '../../services/authenticationService';

const username = ref('');
const password = ref('');
const email = ref('');
const phoneNumber = ref('');
const company = ref('');
const role = ref('USER');
const verificationCode = ref('');
const message = ref('');
const router = useRouter();

const getVerificationCode = async () => {
  // 模拟获取验证码
  message.value = 'Verification code sent. Please check your phone/email.';
};

const register = async () => {
  if (!verificationCode.value) {
    message.value = 'Please enter the verification code.';
    return;
  }
  try {
    const response = await authenticationService.register({
      username: username.value,
      password: password.value,
      email: email.value,
      phoneNumber: phoneNumber.value,
      company: company.value,
      role: role.value
    });
    message.value = response.data.message;
    router.push('/login');
  } catch (error) {
    console.error("Registration failed:", error.response.data.message);
    message.value = error.response.data.message;
  }
};

const goToLogin = () => {
  router.push('/login');
};
</script>

<style scoped>
.register-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-image: url('@public/background1.jpg');
  background-size: cover;
  background-position: center;
  padding: 20px;
  overflow: hidden;
  width: 100%;
}

.register-card {
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: white;
  width: 100%;
  max-width: 400px;
}

.register-form {
  width: 100%;
}

.el-header h2 {
  text-align: center;
  margin: 0 0 20px;
}

.verification-button {
  margin-top: 20px;
}

.el-alert {
  margin-top: 20px;
}
</style>