<template>
  <a-card>
    <div class="hi">👋 欢迎，{{ auth.org?.name || '一品健康空间' }}</div>
    <a-divider />
    <div class="group-title">预测</div>
    <a-row :gutter="16">
      <a-col :span="6" v-for="c in predictCards" :key="c.title">
        <a-card hoverable class="entry" @click="c.action">
          <div class="entry-title">{{ c.title }} ›</div>
          <div class="entry-desc">{{ c.desc }}</div>
        </a-card>
      </a-col>
    </a-row>
    <div class="group-title">更多</div>
    <a-row :gutter="16">
      <a-col :span="8" v-for="c in moreCards" :key="c.title">
        <a-card hoverable class="entry" @click="c.action">
          <div class="entry-title">{{ c.title }} ›</div>
          <div class="entry-desc">{{ c.desc }}</div>
        </a-card>
      </a-col>
    </a-row>

    <NewProjectModal :open="createOpen" @ok="onCreated" @cancel="createOpen = false" />
  </a-card>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import { useAuthStore } from '../stores/auth';
import NewProjectModal from '../components/NewProjectModal.vue';
import type { ProjectDetail } from '../api/projects';

const router = useRouter();
const auth = useAuthStore();
const todo = () => message.info('该功能将在后续阶段实现');

const createOpen = ref(false);

const predictCards = [
  { title: '新建项目预测', desc: '从头配置项目、空间、材料进行预测', action: () => (createOpen.value = true) },
  { title: '快速导入项目', desc: '根据模板或文件导入后调整配置预测', action: () => router.push({ name: 'template' }) },
  { title: '继续配置预测', desc: '继续已保存、未提交的配置', action: () => router.push({ name: 'drafts' }) },
  { title: '污染源识别 · 快速溯源', desc: '单空间快速预测,溯源主要污染材料', action: () => router.push('/source') },
];
const moreCards = [
  { title: '项目模板库', desc: '查看管理公共、自建的项目模板', action: () => router.push({ name: 'template' }) },
  { title: '材料数据库', desc: '查看管理公共、自建的材料数据', action: () => router.push({ name: 'material' }) },
  { title: '历史预测记录', desc: '查看、复用过往预测记录', action: () => router.push({ name: 'history' }) },
];

function onCreated(p: ProjectDetail) {
  createOpen.value = false;
  router.push({ name: 'predict', params: { id: p.id } });
}
</script>

<style scoped>
.hi { font-size: 18px; font-weight: 600; }
.group-title { font-weight: 600; margin: 20px 0 12px; color: #b4232a; }
.entry { height: 96px; }
.entry-title { font-weight: 600; }
.entry-desc { color: #999; margin-top: 8px; font-size: 13px; }
</style>
