<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">张师傅</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="completedCount"
            label="已完成"
            gradient="linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)"
            @click="goToHistoryTask"
          />
          <GradientStatCard
            :value="currentTaskCount"
            label="进行中"
            gradient="linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%)"
            @click="goToTaskList"
          />
          <GradientStatCard
            :value="tomorrowCount"
            label="明日任务"
            gradient="linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%)"
            @click="goToTomorrowTask"
          />
        </view>
      </view>

      <!-- 每日任务入口 -->
      <view class="card p-4 flex items-center justify-between active:bg-gray-50" @click="goToDailyTask">
        <view class="flex items-center">
          <view class="icon-box mr-4">
            <text class="uni-icons uniui-gear-filled"></text>
          </view>
          <view>
            <text class="text-base font-bold text-gray-800">每日任务</text>
            <text class="text-sm text-gray-400 mt-1">今日检查待完成</text>
          </view>
        </view>
        <view class="flex items-center">
          <view class="w-2 h-2 bg-danger rounded-full mr-2"></view>
          <text class="uni-icons uniui-arrowright text-gray-400"></text>
        </view>
      </view>

      <!-- 快捷功能 -->
      <view class="card p-4">
        <view class="grid grid-cols-3 gap-3">
          <QuickEntry
            label="我的任务"
            icon="uniui-flag-filled"
            @click="goToTaskList"
          />
          <QuickEntry
            label="车辆检查"
            icon="uniui-gear-filled"
            @click="goToDailyTask"
          />
          <QuickEntry
            label="帮助中心"
            icon="uniui-help-filled"
            @click="goToHelpCenter"
          />
        </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="goToTaskList">查看全部</text>
        </view>
        <view v-if="currentTasks.length === 0" class="py-6 text-center">
          <text class="text-desc">暂无进行中的任务</text>
        </view>
        <view v-else>
          <view
            v-for="task in currentTasks"
            :key="task.id"
            class="p-4 border-b border-gray-100 active:bg-gray-50"
            @click="goToTaskDetail(task.id)"
          >
            <view class="flex justify-between items-start mb-2">
              <text class="text-sm font-semibold text-gray-800">{{ task.projectName }}</text>
              <StatusTag :status="task.status" />
            </view>
            <view class="flex items-center text-xs text-gray-500 mb-1">
              <text class="uni-icons uniui-tools text-gray-400 mr-1"></text>
              <text>{{ task.serviceType || '施工服务' }}</text>
            </view>
            <view class="flex items-center text-xs text-gray-500">
              <text class="uni-icons uniui-clock-filled text-gray-400 mr-1"></text>
              <text>{{ task.scheduleDate }} {{ task.scheduleTime }}</text>
            </view>
          </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
            v-if="notice.important"
            class="px-2 py-1 bg-danger-light text-danger rounded-lg font-medium mr-2 flex-shrink-0"
            style="font-size: 10px"
          >
            重要
          </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>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
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 taskStore = useTaskStore()

const notificationCount = ref(1)
const tomorrowCount = ref(2)

const completedCount = computed(() => taskStore.tasks.filter(t => t.status === 'completed').length)
const currentTaskCount = computed(() =>
  taskStore.tasks.filter(t => ['scheduled', 'departed', 'arrived', 'constructing'].includes(t.status)).length
)
const currentTasks = computed(() =>
  taskStore.tasks.filter(t => ['scheduled', 'departed', 'arrived', 'constructing'].includes(t.status)).slice(0, 2)
)

const notices = [
  { title: '关于规范施工现场安全管理的通知', date: '2026-04-20', important: true },
  { title: '下周安全培训会议安排', date: '2026-04-18', important: false },
]

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

function goToDailyTask() {
  uni.navigateTo({ url: '/subPackages/pages-construction/dailyTask' })
}

function goToHistoryTask() {
  uni.navigateTo({ url: '/subPackages/pages-construction/historyTask' })
}

function goToTomorrowTask() {
  uni.navigateTo({ url: '/subPackages/pages-construction/tomorrowTask' })
}

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

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

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

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

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

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