<script setup lang="ts">
import { reactive, shallowRef } from 'vue'
import { ElMessage } from 'element-plus'
import { runInstall } from '@/api/auth'

const loading = shallowRef(false)
const form = reactive({
  admin_email: 'admin@quickquiz.local',
  admin_password: 'password',
  fresh: false,
})

async function submit() {
  loading.value = true
  try {
    await runInstall(form)
    ElMessage.success('安装完成')
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <main class="install-page">
    <section class="install-panel">
      <h1>QuickQuiz 安装向导</h1>
      <p>配置首个管理员并执行迁移与种子数据。数据库连接使用当前 `.env`。</p>
      <ElForm :model="form" label-position="top">
        <ElFormItem label="管理员邮箱">
          <ElInput v-model="form.admin_email" />
        </ElFormItem>
        <ElFormItem label="管理员密码">
          <ElInput v-model="form.admin_password" type="password" show-password />
        </ElFormItem>
        <ElCheckbox v-model="form.fresh">重建数据库</ElCheckbox>
        <ElButton class="w-full mt-4" type="primary" :loading="loading" @click="submit">开始安装</ElButton>
      </ElForm>
    </section>
  </main>
</template>

<style scoped>
.install-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}

.install-panel {
  width: min(520px, 100%);
  padding: 28px;
  border: 1px solid var(--qq-line);
  border-radius: 8px;
  background: white;
}

.install-panel h1 {
  margin: 0 0 8px;
}

.install-panel p {
  margin: 0 0 20px;
  color: var(--qq-muted);
}
</style>
