<template>
  <div class="setup-container">
    <el-card class="setup-card">
      <template #header>
        <div class="card-header">
          <img src="/logo.png" alt="Logo" class="logo-img" />
          <h2>初始化系统管理员</h2>
          <el-tag type="danger">系统未初始化</el-tag>
        </div>
      </template>

      <el-steps :active="activeStep" finish-status="success" simple style="margin-bottom: 20px">
        <el-step title="验证手机" />
        <el-step title="设置密码" />
      </el-steps>

      <!-- Step 1: Send SMS -->
      <el-form v-if="activeStep === 0" :model="form" label-width="0">
        <el-form-item>
          <el-input v-model="form.mobile" placeholder="管理员手机号" prefix-icon="Iphone" />
        </el-form-item>
        <el-form-item class="captcha-item">
          <el-input v-model="form.captcha_code" placeholder="图形验证码" style="width: 60%" />
          <div class="captcha-img" @click="fetchCaptcha" v-if="captchaImage">
            <img :src="captchaImage" alt="captcha" />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%" @click="handleSendSms" :loading="loading">
            发送验证码
          </el-button>
        </el-form-item>
      </el-form>

      <!-- Step 2: Set Password -->
      <el-form v-if="activeStep === 1" :model="form" label-width="0">
        <el-form-item>
           <el-input v-model="form.mobile" disabled prefix-icon="Iphone" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.sms_code" placeholder="收到的短信验证码" prefix-icon="Message" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.password" type="password" placeholder="管理员密码" prefix-icon="Lock" show-password />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%" @click="handleSetup" :loading="loading">
            创建管理员
          </el-button>
        </el-form-item>
         <div class="links">
          <el-button link @click="activeStep = 0">上一步</el-button>
        </div>
      </el-form>

    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getCaptcha, sendSms, setupAdmin } from '../api/public'
import { ElMessage } from 'element-plus'

const router = useRouter()
const activeStep = ref(0)
const loading = ref(false)
const captchaImage = ref('')

const form = reactive({
  mobile: '',
  captcha_id: '',
  captcha_code: '',
  sms_code: '',
  password: ''
})

const fetchCaptcha = async () => {
  try {
    const res = await getCaptcha()
    captchaImage.value = res.data.image
    form.captcha_id = res.data.captcha_id
    form.captcha_code = ''
  } catch (e) {
    console.error(e)
  }
}

const handleSendSms = async () => {
  if (!form.mobile || !form.captcha_code) {
    ElMessage.warning('请输入手机号和图形验证码')
    return
  }
  loading.value = true
  try {
    await sendSms({
      mobile: form.mobile,
      captcha_id: form.captcha_id,
      captcha_code: form.captcha_code
    })
    ElMessage.success('验证码已发送 (模拟环境: 请检查后端日志)')
    activeStep.value = 1
  } catch (e) {
    fetchCaptcha()
  } finally {
    loading.value = false
  }
}

const handleSetup = async () => {
  if (!form.sms_code || !form.password) {
     ElMessage.warning('请输入验证码和密码')
     return
  }
  loading.value = true
  try {
    await setupAdmin({
      mobile: form.mobile,
      sms_code: form.sms_code,
      password: form.password
    })
    ElMessage.success('管理员创建成功！请登录。')
    router.push('/login')
  } catch (e) {
    // handled
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchCaptcha()
})
</script>

<style scoped>
.setup-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #2d3a4b; /* Darker background to distinguish from login */
}
.setup-card {
  width: 450px;
}
.card-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.logo-img {
  height: 50px;
  object-fit: contain;
}
.captcha-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.captcha-img {
  cursor: pointer;
  height: 32px;
  display: flex;
  align-items: center;
}
.captcha-img img {
  height: 100%;
  border-radius: 4px;
}
.links {
  text-align: center;
  margin-top: 10px;
}
</style>
