<template>
  <div class="container">
    <section class="hero fade-up">
      <div class="hero-badge">PROFILE</div>
      <h1 class="hero-title">个人中心</h1>
      <p class="hero-sub">完善你的身份信息，便于审计追踪和团队协同。</p>
    </section>

    <section class="card fade-up fade-up-delay-1">
      <div class="card-title">账号资料</div>

      <div class="grid-2">
        <div class="field">
          <label class="field-label">昵称</label>
          <input class="input" v-model.trim="form.nickname" placeholder="请输入昵称" />
        </div>
        <div class="field">
          <label class="field-label">手机号</label>
          <input class="input" v-model.trim="form.phone" placeholder="请输入手机号" />
        </div>
        <div class="field">
          <label class="field-label">公司</label>
          <input class="input" v-model.trim="form.company" placeholder="请输入公司名称" />
        </div>
        <div class="field">
          <label class="field-label">岗位</label>
          <input class="input" v-model.trim="form.title" placeholder="请输入岗位" />
        </div>
      </div>

      <div class="field">
        <label class="field-label">新密码</label>
        <input class="input" type="password" v-model.trim="form.password" placeholder="留空表示不修改" />
        <div class="field-help">密码长度需不少于 6 位。</div>
      </div>

      <button class="btn btn-primary" :disabled="loading" @click="save">
        {{ loading ? '保存中...' : '保存资料' }}
      </button>
    </section>

    <section class="card fade-up fade-up-delay-2" v-if="isAdminUser">
      <div class="card-title">管理员入口</div>
      <div class="card-desc">管理后台功能快速访问。</div>
      <div class="grid-2">
        <div class="module-card" @click="$router.push('/admin/dashboard')">
          <div class="module-name">运营看板</div>
          <div class="module-desc">监控发布、拦截、样本和模型状态</div>
          <div class="module-tag">数据概览</div>
        </div>
        <div class="module-card" @click="$router.push('/admin/review')">
          <div class="module-name">复核与申诉</div>
          <div class="module-desc">处理拦截复核和用户申诉</div>
          <div class="module-tag">审核处理</div>
        </div>
        <div class="module-card" @click="$router.push('/admin/samples')">
          <div class="module-name">样本管理</div>
          <div class="module-desc">维护训练样本并触发模型重训</div>
          <div class="module-tag">模型迭代</div>
        </div>
        <div class="module-card" @click="$router.push('/admin/users')">
          <div class="module-name">用户管理</div>
          <div class="module-desc">编辑用户信息和权限</div>
          <div class="module-tag">权限管理</div>
        </div>
      </div>
    </section>

    <section class="card fade-up fade-up-delay-3">
      <button class="btn btn-ghost" style="width: 100%;" @click="handleLogout">退出登录</button>
    </section>
  </div>
</template>

<script>
import { request } from '@/utils/request'
import { store, isAdmin, logout, refreshUser, setAuth } from '@/store'
import { toast, confirm } from '@/utils/feedback'

export default {
  name: 'ProfileView',
  data() {
    return {
      loading: false,
      form: {
        nickname: '',
        company: '',
        title: '',
        phone: '',
        password: ''
      }
    }
  },
  computed: {
    user() {
      return store.user
    },
    isAdminUser() {
      return isAdmin()
    }
  },
  mounted() {
    this.loadProfile()
  },
  methods: {
    async loadProfile() {
      await refreshUser()
      const profile = await request({ url: '/user/profile' })
      this.form = {
        nickname: profile.nickname || '',
        company: profile.company || '',
        title: profile.title || '',
        phone: profile.phone || '',
        password: ''
      }
    },
    async save() {
      if (this.loading) return
      const payload = { ...this.form }
      if (!payload.password) delete payload.password
      this.loading = true
      try {
        const user = await request({ url: '/user/profile', method: 'PUT', data: payload })
        setAuth(store.token, user)
        toast('保存成功', 'success')
        this.form.password = ''
      } finally {
        this.loading = false
      }
    },
    async handleLogout() {
      const { confirm: ok } = await confirm({
        title: '退出登录',
        content: '确定要退出当前账号吗？',
        confirmText: '退出',
        cancelText: '取消'
      })
      if (!ok) return
      logout()
      toast('已退出登录', 'success')
      this.$router.replace('/login')
    }
  }
}
</script>
