<template>
  <div class="container">
    <section class="hero fade-up">
      <div class="hero-badge">CONTROL CENTER</div>
      <h1 class="hero-title">{{ user ? '欢迎，' + (user.nickname || user.username) : '社区内容风控工作台' }}</h1>
      <p class="hero-sub">发布内容将实时进入朴素贝叶斯识别流程，疑似垃圾信息自动拦截并支持申诉。</p>
      <div class="hero-meta" v-if="modelInfo">
        <span class="hero-metric">版本 {{ modelInfo.version || '未训练' }}</span>
        <span class="hero-metric">阈值 {{ thresholdText }}</span>
        <span class="hero-metric">样本 {{ modelInfo.sample_count || 0 }}</span>
      </div>
    </section>

    <section class="card fade-up fade-up-delay-1" v-if="modelInfo">
      <div class="card-title">检测引擎状态</div>
      <div class="grid-4">
        <div class="kpi">
          <div class="kpi-label">模型版本</div>
          <div class="kpi-value">{{ modelInfo.version || '未训练' }}</div>
        </div>
        <div class="kpi">
          <div class="kpi-label">训练样本</div>
          <div class="kpi-value">{{ modelInfo.sample_count || 0 }}</div>
        </div>
        <div class="kpi">
          <div class="kpi-label">垃圾阈值</div>
          <div class="kpi-value">{{ thresholdText }}</div>
        </div>
        <div class="kpi">
          <div class="kpi-label">最近训练</div>
          <div class="kpi-value small">{{ modelInfo.trained_at || '--' }}</div>
        </div>
      </div>
    </section>

    <section class="card fade-up fade-up-delay-2">
      <div class="card-title">常用功能</div>
      <div class="card-desc">日常使用的发布、检测与管理入口。</div>
      <div class="grid-3">
        <div
          v-for="item in userModules"
          :key="item.path"
          class="module-card"
          @click="goto(item.path)"
        >
          <div class="module-name">{{ item.name }}</div>
          <div class="module-desc">{{ item.desc }}</div>
          <div class="module-tag">{{ item.tag }}</div>
        </div>
      </div>
    </section>

    <section class="card fade-up fade-up-delay-3" v-if="isAdminUser">
      <div class="card-title">管理员功能</div>
      <div class="card-desc">支持阈值调节、复核处理、样本维护和用户管理。</div>
      <div class="grid-2">
        <div
          v-for="item in adminModules"
          :key="item.path"
          class="module-card"
          @click="goto(item.path)"
        >
          <div class="module-name">{{ item.name }}</div>
          <div class="module-desc">{{ item.desc }}</div>
          <div class="module-tag">{{ item.tag }}</div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { request } from '@/utils/request'
import { store, isAdmin, refreshUser } from '@/store'

const USER_MODULES = [
  { name: '信息发布', desc: '公开/私有/私信内容发布与实时检测', tag: '内容发布', path: '/detect' },
  { name: '发布历史', desc: '查看历史发布并发起申诉', tag: '历史追溯', path: '/history' },
  { name: '私信收件', desc: '查看通过检测的私信内容', tag: '收件箱', path: '/inbox' },
  { name: '批量识别', desc: '多条文本批量检测并给出风险汇总', tag: '批量筛查', path: '/batch' },
  { name: '个人中心', desc: '维护身份资料，修改密码', tag: '账号设置', path: '/profile' }
]

const ADMIN_MODULES = [
  { name: '运营看板', desc: '监控发布、拦截、样本和模型状态', tag: '数据概览', path: '/admin/dashboard' },
  { name: '复核与申诉', desc: '处理拦截复核和用户申诉', tag: '审核处理', path: '/admin/review' },
  { name: '样本管理', desc: '维护训练样本并触发模型重训', tag: '模型迭代', path: '/admin/samples' },
  { name: '用户管理', desc: '编辑用户信息和权限', tag: '权限管理', path: '/admin/users' }
]

export default {
  name: 'HomeView',
  data() {
    return {
      loading: true,
      modelInfo: null,
      userModules: USER_MODULES,
      adminModules: ADMIN_MODULES
    }
  },
  computed: {
    user() {
      return store.user
    },
    isAdminUser() {
      return isAdmin()
    },
    thresholdText() {
      const t = this.modelInfo && this.modelInfo.threshold
      if (t === null || t === undefined) return '--'
      return `${(Number(t) * 100).toFixed(1)}%`
    }
  },
  mounted() {
    this.bootstrap()
  },
  methods: {
    async bootstrap() {
      this.loading = true
      try {
        const [, modelInfo] = await Promise.all([
          refreshUser(),
          request({ url: '/spam/model/info' })
        ])
        this.modelInfo = modelInfo
      } finally {
        this.loading = false
      }
    },
    goto(path) {
      this.$router.push(path)
    }
  }
}
</script>
