<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import {
  getMemberStatistics,
  getBookingStatistics,
  getSignInStatistics,
  type MemberStatistics,
  type BookingStatistics,
  type SignInStatistics,
} from '@/api/datacount'
import AppLayout from '@/components/AppLayout.vue'

const memberStats = ref<MemberStatistics | null>(null)
const bookingStats = ref<BookingStatistics | null>(null)
const signInStats = ref<SignInStatistics | null>(null)
const loading = ref(true)
const periodType = ref('DAY')
const showDatePicker = ref(false)

const startDate = ref('')
const endDate = ref('')

const periodOptions = [
  { label: '今日', value: 'DAY' },
  { label: '本周', value: 'WEEK' },
  { label: '本月', value: 'MONTH' },
  { label: '自定义', value: 'CUSTOM' },
]

const periodLabel = computed(() => {
  switch (periodType.value) {
    case 'WEEK': return '本周新增'
    case 'MONTH': return '本月新增'
    case 'CUSTOM': return '区间新增'
    default: return '今日新增'
  }
})

const statsValues = ref({
  totalMembers: 0,
  newMembers: 0,
  totalBookings: 0,
  totalSignIns: 0,
})

const statsCards = computed(() => [
  { label: '会员总数', value: statsValues.value.totalMembers, color: '#4f7cff', icon: 'fa-users' },
  { label: periodLabel.value, value: statsValues.value.newMembers, color: '#10b981', icon: 'fa-user-plus' },
  { label: '预约总数', value: statsValues.value.totalBookings, color: '#f59e0b', icon: 'fa-calendar-check' },
  { label: '签到总数', value: statsValues.value.totalSignIns, color: '#ec4899', icon: 'fa-clipboard-check' },
])

const recentActivities = ref([
  { title: '会员签到', time: '--', dot: '' },
  { title: '团课预约', time: '--', dot: 'green' },
  { title: '新会员注册', time: '--', dot: 'orange' },
  { title: '课程取消', time: '--', dot: 'pink' },
])

function formatDateTime(dateStr: string, isEnd: boolean): string {
  if (!dateStr) return ''
  return isEnd ? dateStr + 'T23:59:59' : dateStr + 'T00:00:00'
}

async function fetchData() {
  loading.value = true
  try {
    const params: Record<string, string> = {}
    if (periodType.value === 'CUSTOM') {
      if (startDate.value) params.startTime = formatDateTime(startDate.value, false)
      if (endDate.value) params.endTime = formatDateTime(endDate.value, true)
    } else {
      params.periodType = periodType.value
    }

    const [mem, book, sign] = await Promise.all([
      getMemberStatistics(params),
      getBookingStatistics(params),
      getSignInStatistics(params),
    ])
    memberStats.value = mem
    bookingStats.value = book
    signInStats.value = sign

    statsValues.value.totalMembers = Number(mem.totalMembers) || 0
    statsValues.value.newMembers = Number(mem.newMembers) || 0
    statsValues.value.totalBookings = Number(book.newBookings) || 0
    statsValues.value.totalSignIns = Number(sign.totalSignIns) || 0

    const now = new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
    recentActivities.value = [
      { title: '\u7b7e\u5230\u6210\u529f ' + (Number(sign.successSignIns) || 0) + ' \u6b21', time: now, dot: '' },
      { title: '\u9884\u7ea6 ' + (Number(book.newBookings) || 0) + ' \u5355', time: now, dot: 'green' },
      { title: '\u65b0\u589e\u4f1a\u5458 ' + (Number(mem.newMembers) || 0) + ' \u4eba', time: now, dot: 'orange' },
      { title: '\u53d6\u6d88\u9884\u7ea6 ' + (Number(book.cancelBookings) || 0) + ' \u5355', time: now, dot: 'pink' },
    ]
  } catch {
    memberStats.value = null
    bookingStats.value = null
    signInStats.value = null
  } finally {
    loading.value = false
  }
}

function changePeriod(value: string) {
  periodType.value = value
  showDatePicker.value = value === 'CUSTOM'
  if (value !== 'CUSTOM') {
    fetchData()
  }
}

function handleCustomQuery() {
  if (!startDate.value && !endDate.value) return
  fetchData()
}

function today(): string {
  return new Date().toISOString().slice(0, 10)
}

onMounted(fetchData)
</script>
