<script setup lang="ts">
/**
 * 添加/编辑分组
 *
 * 使用 van-form + van-field 收集分组名称，
 * 支持添加和编辑两种模式。
 * Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px.
 */
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast, showConfirmDialog } from 'vant'

const route = useRoute()
const router = useRouter()

/** 页面标题（添加/编辑） */
const title = computed(() => (route.params.title as string) || '添加')
const pageTitle = computed(() => `${title.value}分组`)

/** 分组 ID（编辑模式时存在） */
const groupId = ref<string>((route.query.groupId as string) || '')

/** 分组名称 */
const menuTitle = ref<string>((route.query.name as string) || '')

/** 是否正在提交 */
const isSubmitting = ref(false)

/**
 * 提交表单
 */
function onSubmit() {
  const trimmedTitle = menuTitle.value.trim()
  if (!trimmedTitle) {
    showToast('分组名称不能为空')
    return
  }
  if (trimmedTitle.length > 10) {
    showToast('分组名称最多10个字符')
    return
  }
  if (isSubmitting.value) return
  isSubmitting.value = true

  setTimeout(() => {
    isSubmitting.value = false
    if (groupId.value) {
      showToast('编辑成功')
    } else {
      showToast('添加成功')
    }
    router.back()
  }, 300)
}

/**
 * 删除分组（仅编辑模式）
 */
function onDelete() {
  showConfirmDialog({
    title: '确认删除',
    message: `确定要删除分组「${menuTitle.value}」吗？删除后不可恢复。`,
  })
    .then(() => {
      showToast('删除成功')
      router.back()
    })
    .catch(() => {
      // cancelled
    })
}
</script>

<template>
  <div class="add-group-page">
    <!-- NavBar — brand blue -->
    <van-nav-bar
      :title="pageTitle"
      left-text="返回"
      left-arrow
      fixed
      placeholder
      @click-left="router.back()"
    />

    <div class="add-group-content">
      <!-- 分组名称输入 Card -->
      <div class="form-card">
        <div class="card-header">
          <span class="card-header__accent"></span>
          <h5 class="card-header__title">分组信息</h5>
        </div>
        <div class="card-body">
          <van-field
            v-model="menuTitle"
            maxlength="10"
            placeholder="请输入分组名称"
            label="分组名称"
            :border="false"
            input-align="right"
          />
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="action-section">
        <div class="action-section__edit" v-if="title === '编辑'">
          <van-button
            round
            block
            type="danger"
            plain
            @click="onDelete"
          >
            删除分组
          </van-button>
          <van-button
            round
            block
            type="primary"
            :loading="isSubmitting"
            loading-text="保存中..."
            @click="onSubmit"
          >
            保存修改
          </van-button>
        </div>
        <div class="action-section__add" v-else>
          <van-button
            round
            block
            type="primary"
            size="large"
            :loading="isSubmitting"
            loading-text="保存中..."
            @click="onSubmit"
          >
            保存
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.add-group-page {
  min-height: 100vh;
  background: #F4F7F8;

  :deep(.van-nav-bar) { background: #1E74FF; }
  :deep(.van-nav-bar__title) { color: #fff; font-size: 18px; font-weight: 600; }
  :deep(.van-nav-bar__text),
  :deep(.van-nav-bar__arrow) { color: #fff; }
  :deep(.van-nav-bar .van-icon) { color: #fff; }
}

.add-group-content {
  width: 100%;
}

// Form Card
.form-card {
  background: #fff;
  border-radius: 10px;
  margin: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 10px;

  &__accent {
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: #1E74FF;
    flex-shrink: 0;
  }

  &__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
  }
}

.card-body {
  padding: 0 0 8px;

  :deep(.van-field) {
    padding: 8px 16px 12px;
  }

  :deep(.van-field__label) {
    width: 72px;
    font-size: 13px;
    color: var(--color-text-secondary);
  }
}

// Action Section
.action-section {
  padding: 16px;

  &__add {
    padding: 0;
  }

  &__edit {
    display: flex;
    gap: 12px;
    align-items: center;

    .van-button--danger {
      flex: 0 0 auto;
      min-width: 100px;
    }

    .van-button--primary {
      flex: 1;
    }
  }
}
</style>
