<template>
  <div class="tenant-dashboard">
    <!-- #1 欢迎信息 + 机构标识 -->
    <div class="welcome-banner">
      <div class="welcome-left">
        <h1>{{ greetingText }}，{{ authStore.user?.nickname || '管理员' }}</h1>
        <p v-if="dashboard.tenant">
          <bank-outlined /> {{ dashboard.tenant.name }}
          <a-tag :color="tenantTypeColor(dashboard.tenant.tenantType)" style="margin-left: 8px">{{ tenantTypeLabel(dashboard.tenant.tenantType) }}</a-tag>
        </p>
      </div>
      <div class="welcome-right">
        <span class="date-text">{{ todayText }}</span>
      </div>
    </div>

    <!-- #6 待办提醒 -->
    <div v-if="dashboard.todos?.length > 0" class="todo-section">
      <div v-for="(todo, idx) in dashboard.todos" :key="idx" :class="['todo-item', todo.type]" @click="todo.link && goTo(todo.link)">
        <alert-outlined v-if="todo.type === 'warning'" />
        <info-circle-outlined v-else />
        <span>{{ todo.message }}</span>
        <right-outlined v-if="todo.link" class="todo-arrow" />
      </div>
    </div>

    <!-- #2 空数据引导 -->
    <div v-if="!loading && isEmpty" class="empty-guide">
      <a-result title="欢迎使用活动管理平台" sub-title="开始配置你的第一个活动吧">
        <template #icon>
          <trophy-outlined style="font-size: 48px; color: #6366f1" />
        </template>
        <template #extra>
          <div class="guide-steps">
            <div class="guide-step" @click="goTo('/contests/list')">
              <div class="step-num">1</div>
              <div class="step-content">
                <strong>创建活动</strong>
                <span>配置活动信息、报名规则和提交要求</span>
              </div>
              <right-outlined />
            </div>
            <div class="guide-step" @click="goTo('/system/users')">
              <div class="step-num">2</div>
              <div class="step-content">
                <strong>添加团队成员</strong>
                <span>创建管理员和工作人员账号</span>
              </div>
              <right-outlined />
            </div>
            <div class="guide-step" @click="goTo('/contests/judges')">
              <div class="step-num">3</div>
              <div class="step-content">
                <strong>邀请评委</strong>
                <span>添加评委并分配评审任务</span>
              </div>
              <right-outlined />
            </div>
          </div>
        </template>
      </a-result>
    </div>

    <!-- 有数据时的正常视图 -->
    <template v-if="!loading && !isEmpty">
      <!-- #5 统计卡片可点击 -->
      <div class="stats-row">
        <div
          v-for="item in statsItems"
          :key="item.key"
          class="stat-card"
          :class="{ clickable: !!item.link }"
          @click="item.link && goTo(item.link)"
        >
          <div class="stat-icon" :style="{ background: item.bgColor }">
            <component :is="item.icon" :style="{ color: item.color }" />
          </div>
          <div class="stat-info">
            <span class="stat-count">{{ item.value }}</span>
            <span class="stat-label">{{ item.label }}</span>
          </div>
        </div>
      </div>

      <!-- #3 快捷操作（按权限动态显示） -->
      <a-card title="快捷操作" :bordered="false" class="section-card">
        <div class="action-grid">
          <div v-for="act in visibleActions" :key="act.label" class="action-item" @click="goTo(act.path)">
            <div class="action-icon" :style="{ background: act.bgColor }">
              <component :is="act.icon" :style="{ color: act.color }" />
            </div>
            <span>{{ act.label }}</span>
          </div>
        </div>
      </a-card>

      <!-- #4 最近活动 + 查看全部 -->
      <a-card :bordered="false" class="section-card" style="margin-top: 16px">
        <template #title>最近活动</template>
        <template #extra>
          <a-button type="link" size="small" @click="goTo('/contests/list')">查看全部 <right-outlined /></a-button>
        </template>
        <div v-if="dashboard.recentContests?.length === 0" style="text-align: center; padding: 30px; color: #9ca3af">
          暂无活动数据
        </div>
        <div v-else class="contest-list">
          <div v-for="contest in dashboard.recentContests" :key="contest.id" class="contest-item" @click="goTo(`/contests/${contest.id}`)">
            <div class="contest-info">
              <span class="contest-name">{{ contest.contestName }}</span>
              <span class="contest-time">{{ formatDateRange(contest.startTime, contest.endTime) }}</span>
            </div>
            <div class="contest-stats">
              <a-tag>{{ contest._count?.registrations || 0 }} 报名</a-tag>
              <a-tag>{{ contest._count?.works || 0 }} 作品</a-tag>
              <a-badge :status="contest.status === 'ongoing' ? 'processing' : 'default'" :text="contest.status === 'ongoing' ? '进行中' : '已结束'" />
            </div>
          </div>
        </div>
      </a-card>
    </template>

    <!-- loading -->
    <div v-if="loading" style="text-align: center; padding: 80px"><a-spin size="large" /></div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import {
  TrophyOutlined, UserAddOutlined, FileTextOutlined,
  SolutionOutlined, TeamOutlined, BankOutlined,
  FundViewOutlined, FormOutlined, AuditOutlined, ClockCircleOutlined,
  RightOutlined, AlertOutlined, InfoCircleOutlined,
} from '@ant-design/icons-vue'
import request from '@/utils/request'
import { useAuthStore } from '@/stores/auth'
import dayjs from 'dayjs'

const router = useRouter()
const authStore = useAuthStore()
const loading = ref(true)
const dashboard = ref<any>({})

// #1 问候语
const greetingText = computed(() => {
  const h = new Date().getHours()
  if (h < 6) return '夜深了'
  if (h < 12) return '上午好'
  if (h < 14) return '中午好'
  if (h < 18) return '下午好'
  return '晚上好'
})

const todayText = computed(() => dayjs().format('YYYY年MM月DD日 dddd'))

const tenantTypeLabel = (type: string) => {
  const map: Record<string, string> = { library: '图书馆', kindergarten: '幼儿园', school: '学校', institution: '社会机构', other: '其他' }
  return map[type] || type
}
const tenantTypeColor = (type: string) => {
  const map: Record<string, string> = { library: 'purple', kindergarten: 'green', school: 'blue', institution: 'orange', other: 'default' }
  return map[type] || 'default'
}

// #2 空数据判断
const isEmpty = computed(() =>
  dashboard.value.totalContests === 0 &&
  dashboard.value.totalRegistrations === 0 &&
  dashboard.value.totalWorks === 0
)

// #5 统计卡片可点击
const statsItems = computed(() => [
  { key: 'contests', label: '可见活动', value: dashboard.value.totalContests || 0, icon: TrophyOutlined, color: '#6366f1', bgColor: 'rgba(99,102,241,0.1)', link: '/contests/list' },
  { key: 'ongoing', label: '进行中', value: dashboard.value.ongoingContests || 0, icon: ClockCircleOutlined, color: '#f59e0b', bgColor: 'rgba(245,158,11,0.1)', link: '/contests/list' },
  { key: 'registrations', label: '总报名数', value: dashboard.value.totalRegistrations || 0, icon: FormOutlined, color: '#10b981', bgColor: 'rgba(16,185,129,0.1)', link: '/contests/registrations' },
  { key: 'pending', label: '待审核报名', value: dashboard.value.pendingRegistrations || 0, icon: AuditOutlined, color: '#ef4444', bgColor: 'rgba(239,68,68,0.1)', link: '/contests/registrations' },
  { key: 'works', label: '总作品数', value: dashboard.value.totalWorks || 0, icon: FileTextOutlined, color: '#3b82f6', bgColor: 'rgba(59,130,246,0.1)', link: '/contests/works' },
  { key: 'today', label: '今日报名', value: dashboard.value.todayRegistrations || 0, icon: FundViewOutlined, color: '#8b5cf6', bgColor: 'rgba(139,92,246,0.1)', link: '/contests/registrations' },
])

// #3 快捷操作（按权限过滤）
const allActions = [
  { label: '活动列表', path: '/contests/list', permission: 'contest:read', icon: TrophyOutlined, color: '#6366f1', bgColor: 'rgba(99,102,241,0.1)' },
  { label: '报名管理', path: '/contests/registrations', permission: 'contest:registration:read', icon: UserAddOutlined, color: '#10b981', bgColor: 'rgba(16,185,129,0.1)' },
  { label: '作品管理', path: '/contests/works', permission: 'contest:work:read', icon: FileTextOutlined, color: '#f59e0b', bgColor: 'rgba(245,158,11,0.1)' },
  { label: '评委管理', path: '/contests/judges', permission: 'judge:read', icon: SolutionOutlined, color: '#ec4899', bgColor: 'rgba(236,72,153,0.1)' },
  { label: '用户管理', path: '/system/users', permission: 'user:read', icon: TeamOutlined, color: '#3b82f6', bgColor: 'rgba(59,130,246,0.1)' },
]

const visibleActions = computed(() =>
  allActions.filter(a => authStore.hasPermission(a.permission))
)

const formatDateRange = (start: string, end: string) => {
  if (!start || !end) return '-'
  return `${dayjs(start).format('MM/DD')} - ${dayjs(end).format('MM/DD')}`
}

const goTo = (path: string) => {
  const tenantCode = authStore.tenantCode
  router.push(`/${tenantCode}${path}`)
}

const fetchDashboard = async () => {
  loading.value = true
  try {
    dashboard.value = await request.get('/contests/dashboard')
  } catch {
    message.error('获取统计数据失败')
  } finally {
    loading.value = false
  }
}

onMounted(fetchDashboard)
</script>

<style scoped lang="scss">
$primary: #6366f1;

// #1 欢迎横幅
.welcome-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 28px;
  background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 100%);
  border-radius: 16px;
  margin-bottom: 16px;

  .welcome-left {
    h1 { font-size: 20px; font-weight: 700; color: #1e1b4b; margin: 0 0 6px; }
    p { font-size: 13px; color: #6b7280; margin: 0; display: flex; align-items: center; gap: 6px; }
  }
  .welcome-right {
    .date-text { font-size: 13px; color: #9ca3af; }
  }
}

// #6 待办提醒
.todo-section {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px;
}
.todo-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 10px; font-size: 13px; cursor: pointer; transition: all 0.2s;

  &.warning { background: #fef3c7; color: #92400e; border: 1px solid #fde68a;
    &:hover { background: #fde68a; }
  }
  &.info { background: #ede9fe; color: #5b21b6; border: 1px solid #ddd6fe;
    &:hover { background: #ddd6fe; }
  }
  .todo-arrow { margin-left: auto; font-size: 11px; opacity: 0.5; }
}

// #2 空数据引导
.empty-guide {
  background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); padding: 20px;
  :deep(.ant-result) { padding: 24px 0; }
  :deep(.ant-result-title) { font-size: 18px; font-weight: 700; color: #1e1b4b; }
  :deep(.ant-result-subtitle) { color: #6b7280; }
}
.guide-steps {
  display: flex; flex-direction: column; gap: 12px; max-width: 400px; margin: 0 auto; text-align: left;
}
.guide-step {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; background: #faf9fe; border-radius: 12px;
  cursor: pointer; transition: all 0.2s;
  &:hover { background: #eef2ff; transform: translateX(4px); }

  .step-num {
    width: 28px; height: 28px; border-radius: 50%; background: $primary; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0;
  }
  .step-content {
    flex: 1; display: flex; flex-direction: column;
    strong { font-size: 14px; color: #1e1b4b; }
    span { font-size: 12px; color: #9ca3af; }
  }
  :deep(.anticon) { color: #d1d5db; }
}

// #5 统计卡片
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px;
  @media (min-width: 1200px) { grid-template-columns: repeat(6, 1fr); }
}
.stat-card {
  display: flex; align-items: center; gap: 12px; padding: 16px; background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); transition: all 0.2s;
  &.clickable { cursor: pointer;
    &:hover { box-shadow: 0 4px 16px rgba($primary, 0.12); transform: translateY(-2px); }
  }
  .stat-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
  .stat-info { display: flex; flex-direction: column;
    .stat-count { font-size: 20px; font-weight: 700; color: #1e1b4b; line-height: 1.2; }
    .stat-label { font-size: 12px; color: #9ca3af; }
  }
}

// 区块卡片
.section-card {
  border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  :deep(.ant-card-head) { .ant-card-head-title { font-size: 15px; font-weight: 600; } }
}

// #3 快捷操作
.action-grid {
  display: flex; gap: 24px; flex-wrap: wrap;
  .action-item {
    display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: all 0.2s;
    &:hover { transform: translateY(-2px); }
    .action-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
    span { font-size: 12px; color: #374151; font-weight: 500; }
  }
}

// #4 最近活动
.contest-list { display: flex; flex-direction: column; gap: 8px; }
.contest-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 16px; border-radius: 10px; cursor: pointer; transition: background 0.2s;
  &:hover { background: rgba($primary, 0.03); }
  .contest-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1;
    .contest-name { font-size: 14px; font-weight: 600; color: #1e1b4b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .contest-time { font-size: 12px; color: #9ca3af; }
  }
  .contest-stats { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
}
</style>
