<script setup>
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/stores/user.js'
import { useRouter } from 'vue-router'
import { Icon } from '@iconify/vue'

const userStore = useUserStore()
const router = useRouter()
const username = computed(() => userStore.userInfo?.name || userStore.userInfo?.username || '用户')

const today = computed(() => {
  const d = new Date()
  const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日 ${days[d.getDay()]}`
})

const statCards = ref([
  { title: '今日预约客户', value: '--', trend: '+12% 较昨日', trendUp: true, icon: 'solar:users-group-rounded-bold-duotone', iconBg: 'bg-rose-50', iconColor: 'text-rose-500' },
  { title: '当前入驻率',   value: '--', trend: '良好运营状态',  trendUp: true, icon: 'solar:home-bold-duotone',  iconBg: 'bg-blue-50', iconColor: 'text-blue-500' },
  { title: '今日护理评分', value: '--', trend: '历史最高纪录',  trendUp: true, icon: 'solar:heart-pulse-bold-duotone', iconBg: 'bg-amber-50', iconColor: 'text-amber-500' },
  { title: '本月营收(预计)', value: '--', trend: '+8.4% 较上月', trendUp: true, icon: 'solar:wad-of-money-bold-duotone', iconBg: 'bg-teal-50', iconColor: 'text-teal-500' },
])

const shortcuts = [
  { label: '新增客户', icon: 'solar:user-plus-bold-duotone', path: '/crm/customers' },
  { label: '办理入住', icon: 'solar:home-bold-duotone', path: '/room/reservations' },
  { label: '办理退住', icon: 'solar:door-open-bold-duotone', path: '/room/rooms' },
  { label: '新建工单', icon: 'solar:document-add-bold-duotone', path: '/service/orders' },
  { label: '今日月子餐', icon: 'solar:cup-bold', path: '/meal/daily-plans' },
  { label: '护理记录', icon: 'solar:heart-pulse-bold-duotone', path: '/care/records' },
]

onMounted(() => {
  // Future: fetchDashboardStats()
})
</script>

<template>
  <div class="p-6 space-y-5">
    <!-- Welcome Banner -->
    <div class="bg-gradient-to-r from-rose-50 to-orange-50 rounded-3xl p-8 flex items-center justify-between border border-rose-100">
      <div>
        <h2 class="text-2xl font-bold text-gray-800 mb-1">你好，{{ username }} 👋</h2>
        <p class="text-gray-400 text-sm">{{ today }}，祝您工作愉快！</p>
      </div>
      <Icon icon="solar:heart-bold" class="text-8xl text-rose-200" />
    </div>

    <!-- KPI Cards -->
    <div class="grid grid-cols-4 gap-5">
      <div
        v-for="stat in statCards"
        :key="stat.title"
        class="bg-white rounded-3xl border border-gray-100 shadow-sm p-6"
      >
        <div class="flex items-center gap-4 mb-4">
          <div class="w-12 h-12 rounded-2xl flex items-center justify-center text-2xl" :class="[stat.iconBg, stat.iconColor]">
            <Icon :icon="stat.icon" />
          </div>
          <div>
            <p class="text-gray-400 text-xs">{{ stat.title }}</p>
            <p class="text-2xl font-bold text-gray-800">{{ stat.value }}</p>
          </div>
        </div>
        <div class="text-xs font-bold flex items-center gap-1" :class="stat.trendUp ? 'text-green-500' : 'text-red-400'">
          <Icon :icon="stat.trendUp ? 'solar:double-alt-arrow-up-bold-duotone' : 'solar:double-alt-arrow-down-bold-duotone'" />
          {{ stat.trend }}
        </div>
      </div>
    </div>

    <!-- Quick Access -->
    <div class="bg-white rounded-3xl border border-gray-100 shadow-sm p-6">
      <h3 class="font-bold text-gray-800 mb-5 flex items-center gap-2">
        <span class="w-1 h-5 bg-rose-500 rounded-full inline-block"></span>
        快捷入口
      </h3>
      <div class="grid grid-cols-6 gap-4">
        <button
          v-for="item in shortcuts"
          :key="item.label"
          class="flex flex-col items-center justify-center gap-3 p-5 rounded-2xl bg-gray-50 hover:bg-rose-50 hover:text-rose-500 transition-all duration-150 group"
          @click="router.push(item.path)"
        >
          <Icon :icon="item.icon" class="text-3xl text-gray-400 group-hover:text-rose-500 transition-colors" />
          <span class="text-xs font-medium text-gray-600 group-hover:text-rose-500">{{ item.label }}</span>
        </button>
      </div>
    </div>

    <!-- System Info -->
    <div class="bg-white rounded-3xl border border-gray-100 shadow-sm p-6">
      <h3 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
        <span class="w-1 h-5 bg-rose-500 rounded-full inline-block"></span>
        系统信息
      </h3>
      <div class="grid grid-cols-3 gap-4">
        <div class="flex gap-3 text-sm">
          <span class="text-gray-400 w-20 flex-shrink-0">系统名称</span>
          <span class="text-gray-700 font-medium">宫中有喜月子会所综合管理系统</span>
        </div>
        <div class="flex gap-3 text-sm">
          <span class="text-gray-400 w-20 flex-shrink-0">当前版本</span>
          <span class="text-gray-700 font-medium">v1.0.0</span>
        </div>
        <div class="flex gap-3 text-sm">
          <span class="text-gray-400 w-20 flex-shrink-0">技术支持</span>
          <span class="text-gray-700 font-medium">宫中有喜运营团队</span>
        </div>
      </div>
    </div>
  </div>
</template>
