<template>
  <div class="code-type-form-container">
    <h1 class="page-title">{{ isEdit ? '编辑代码类型' : '新建代码类型' }}</h1>

    <div class="form-card">
      <form @submit.prevent="submitForm">
        <div class="form-group">
          <label class="form-label">名称</label>
          <input v-model="form.name" type="text" class="form-input" placeholder="如 html、javascript" required />
        </div>
        <div class="form-group">
          <label class="form-label">分类</label>
          <CustomSelect v-model.number="form.category" :options="categoryOptions" />
        </div>
        <div class="form-actions">
          <button type="button" class="btn-secondary" @click="router.back()">取消</button>
          <button type="submit" class="btn-primary">{{ isEdit ? '保存修改' : '创建类型' }}</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import CustomSelect from '../../components/CustomSelect.vue'
import { useToast } from '../../composables/useToast'
import { getAdminCodeTypes, createCodeType, updateCodeType } from '../../services/api'

const router = useRouter()
const route = useRoute()
const toast = useToast()
const isEdit = computed(() => !!route.params.id)

const form = ref({ name: '', category: 0 })

const categoryOptions = [
  { value: 0, label: '前端' },
  { value: 1, label: '后端' },
  { value: 2, label: '其他' }
]

const loadDetail = async () => {
  if (!isEdit.value) return
  const id = parseInt(route.params.id as string, 10)
  const list = await getAdminCodeTypes()
  const item = list.find(ct => ct.id === id)
  if (item) {
    form.value = { name: item.name, category: item.category }
  }
}

const submitForm = async () => {
  try {
    if (isEdit.value) {
      await updateCodeType(parseInt(route.params.id as string, 10), form.value)
      toast.success('更新成功')
    } else {
      await createCodeType(form.value)
      toast.success('创建成功')
    }
    router.push('/admin/code-types')
  } catch (error: any) {
    toast.error(error.message || '提交失败')
  }
}

onMounted(loadDetail)
</script>

<style scoped>
.code-type-form-container { width: 100%; max-width: 560px; }
.page-title { font-size: 1.75rem; font-weight: 600; color: #d4b383; margin-bottom: 1.5rem; }
.form-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 0.5rem; padding: 1.5rem; }
.form-group { margin-bottom: 1.25rem; }
.form-label { display: block; margin-bottom: 0.5rem; color: rgba(255,255,255,0.8); font-size: 0.875rem; }
.form-input { width: 100%; padding: 0.625rem 0.75rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2); border-radius: 0.375rem; color: white; }
.form-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.5rem; }
.btn-primary { background: #d4b383; color: #050505; border: none; padding: 0.5rem 1rem; border-radius: 0.375rem; cursor: pointer; }
.btn-secondary { background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.2); padding: 0.5rem 1rem; border-radius: 0.375rem; cursor: pointer; }
</style>
