<template>
  <view class="app-container">
    <!-- 顶部渐变区域 -->
    <view class="header-gradient px-4 pt-8 pb-6">
      <view class="flex items-center justify-between mb-4">
        <view class="flex items-center">
          <view class="w-12 h-12 bg-white rounded-full flex items-center justify-center mr-3">
            <text class="uni-icons uniui-person-filled text-primary text-lg"></text>
          </view>
          <view>
            <text class="text-blue-100 text-xs block">下午好，欢迎回来</text>
            <text class="text-white font-medium text-base">{{ userName }}</text>
          </view>
        </view>
        <view
          class="w-10 h-10 rounded-full flex items-center justify-center relative"
          style="background-color: rgba(255, 255, 255, 0.2);"
          @click="goToNotification"
        >
          <text class="uni-icons uniui-notification-filled text-white"></text>
          <view
            v-if="notificationCount > 0"
            class="absolute -top-1 -right-1 min-w-5 h-5 bg-danger rounded-full text-white text-xs flex items-center justify-center px-1"
          >
            {{ notificationCount }}
          </view>
        </view>
      </view>
    </view>

    <view class="px-4 -mt-4 pb-6">
      <!-- 统计卡片 -->
      <view class="card p-4">
        <view class="grid grid-cols-3 gap-3">
          <GradientStatCard
            :value="projectStore.totalCount"
            label="本月项目"
            gradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
            @click="goToProjectList"
          />
          <GradientStatCard
            :value="taskStore.pendingCount"
            label="待确认"
            gradient="linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"
            @click="goToTaskList"
          />
          <GradientStatCard
            :value="taskStore.todayCount"
            label="进行中"
            gradient="linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
            @click="goToTaskList"
          />
        </view>
      </view>

      <!-- 快捷入口 -->
      <view class="card p-4">
        <view class="grid grid-cols-3 gap-3">
          <QuickEntry
            label="项目库"
            icon="uniui-folder-add-filled"
            @click="goToProjectList"
          />
          <QuickEntry
            label="客户管理"
            icon="uniui-personadd-filled"
            @click="goToCustomer"
          />
          <QuickEntry
            label="合同管理"
            icon="uniui-file-text-filled"
            @click="goToContract"
          />
        </view>
      </view>

      <!-- 任务提醒入口 -->
      <view
        class="card p-4 flex items-center justify-center"
        @click="goToTaskReminder"
      >
        <text class="uni-icons uniui-notification-filled mr-2 text-gray-500"></text>
        <text class="text-sm text-gray-600 font-medium">任务提醒 ({{ taskStore.pendingCount }})</text>
      </view>

      <!-- 最新任务 -->
      <view class="card">
        <view class="flex items-center justify-between p-4 border-b border-gray-100">
          <text class="text-base font-semibold text-gray-800">最新任务</text>
          <text class="text-sm text-primary" @click="goToTaskList">查看全部</text>
        </view>
        <view v-if="taskStore.tasks.length === 0" class="py-6 text-center">
          <text class="text-desc">暂无任务</text>
        </view>
        <view v-else>
          <view
            v-for="task in latestTasks"
            :key="task.id"
            class="p-4 border-b border-gray-100 flex items-center justify-between active:bg-gray-50"
            @click="goToTaskDetail(task.id)"
          >
            <view class="flex items-center">
              <view class="icon-box mr-3">
                <text class="uni-icons uniui-flag"></text>
              </view>
              <view>
                <text class="text-sm font-medium text-gray-800">{{ task.projectName }}</text>
                <text class="text-xs text-gray-400 mt-1">{{ task.address || task.scheduleDate }}</text>
              </view>
            </view>
            <StatusTag :status="task.status" />
          </view>
        </view>
      </view>

      <!-- 通知公告 -->
      <view class="card">
        <view class="flex items-center justify-between p-4 border-b border-gray-100">
          <text class="text-base font-semibold text-gray-800">通知公告</text>
          <text class="text-sm text-primary" @click="goToNoticeList">更多</text>
        </view>
        <view
          v-for="(notice, index) in notices"
          :key="index"
          class="p-4 border-b border-gray-100 flex items-center active:bg-gray-50"
          @click="goToNoticeDetail"
        >
          <view class="w-2 h-2 rounded-full mr-3 flex-shrink-0" :class="index === 0 ? 'bg-danger' : 'bg-gray-300'"></view>
          <view class="flex-1">
            <text class="text-sm text-gray-700">{{ notice.title }}</text>
          </view>
          <text class="text-xs text-gray-400 ml-2">{{ notice.date }}</text>
        </view>
      </view>

      <!-- 行业知识 -->
      <view class="card">
        <view class="flex items-center justify-between p-4 border-b border-gray-100">
          <text class="text-base font-semibold text-gray-800">行业知识</text>
          <text class="text-sm text-primary" @click="goToKnowledgeList">更多</text>
        </view>
        <view
          v-for="(item, index) in knowledgeList"
          :key="index"
          class="p-4 border-b border-gray-100 flex items-center active:bg-gray-50"
          @click="goToKnowledgeDetail"
        >
          <view class="icon-box mr-3">
            <text class="uni-icons uniui-chart"></text>
          </view>
          <view class="flex-1">
            <text class="text-sm font-medium text-gray-700">{{ item.title }}</text>
            <text class="text-xs text-gray-400 mt-1 truncate">{{ item.summary }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useProjectStore } from '@/stores/project'
import { useTaskStore } from '@/stores/task'
import GradientStatCard from '@/components/common/GradientStatCard.vue'
import QuickEntry from '@/components/common/QuickEntry.vue'
import StatusTag from '@/components/common/StatusTag.vue'

const authStore = useAuthStore()
const projectStore = useProjectStore()
const taskStore = useTaskStore()

const userName = ref(authStore.user?.name || '张销售')
const notificationCount = ref(3)

const latestTasks = computed(() => taskStore.tasks.slice(0, 3))

const notices = [
  { title: '关于2024年第一季度销售激励方案的通知', date: '2024-01-15' },
  { title: '春节期间服务安排调整公告', date: '2024-01-10' },
]

const knowledgeList = [
  { title: '2024年清洁行业市场分析报告', summary: '全面解读清洁行业发展趋势、市场规模及竞争格局...' },
  { title: '客户开发技巧与话术指南', summary: '提升销售业绩的实战技巧，有效沟通方法汇总...' },
]

function goToProjectList() {
  uni.navigateTo({ url: '/subPackages/pages-common/projectList' })
}

function goToTaskList() {
  uni.switchTab({ url: '/pages/task/task' })
}

function goToTaskDetail(taskId: string) {
  taskStore.setCurrentTask(taskId)
  uni.navigateTo({ url: '/subPackages/pages-common/taskDetail' })
}

function goToTaskReminder() {
  uni.navigateTo({ url: '/subPackages/pages-sales/taskReminder' })
}

function goToNotification() {
  uni.navigateTo({ url: '/subPackages/pages-sales/notification' })
}

function goToNoticeList() {
  uni.navigateTo({ url: '/subPackages/pages-common/noticeList' })
}

function goToNoticeDetail() {
  uni.navigateTo({ url: '/subPackages/pages-common/noticeDetail' })
}

function goToKnowledgeList() {
  uni.navigateTo({ url: '/subPackages/pages-common/knowledgeList' })
}

function goToKnowledgeDetail() {
  uni.navigateTo({ url: '/subPackages/pages-common/knowledgeDetail' })
}

function goToCustomer() {
  uni.navigateTo({ url: '/pages/customer/customer' })
}

function goToContract() {
  uni.navigateTo({ url: '/pages/contract/contract' })
}

onMounted(() => {
  projectStore.fetchProjects()
  taskStore.fetchTasks()
})
</script>
