<script lang="ts" setup>
import type { AnalysisOverviewItem } from '@vben/common-ui';
import type { TabOption } from '@vben/types';

import {
  AnalysisChartCard,
  AnalysisChartsTabs,
  AnalysisOverview,
} from '@vben/common-ui';
import {
  SvgBellIcon,
  SvgCakeIcon,
  SvgCardIcon,
  SvgDownloadIcon,
} from '@vben/icons';

import AnalyticsConsumption from './analytics-consumption.vue';
import AnalyticsChatActivity from './analytics-chat-activity.vue';
import AnalyticsLiveRoom from './analytics-live-room.vue';

import { homePage } from '#/api';
import { ref, onMounted } from 'vue';

const overviewItems = ref<AnalysisOverviewItem[]>([
  {
    icon: SvgCardIcon,
    title: '机器人总数',
    totalTitle: '总机器人',
    totalValue: 0,
    value: 0,
  },
  {
    icon: SvgCakeIcon,
    title: '在线机器人',
    totalTitle: '在线数量',
    totalValue: 0,
    value: 0,
  },
  {
    icon: SvgDownloadIcon,
    title: '离线机器人',
    totalTitle: '离线数量',
    totalValue: 0,
    value: 0,
  },
  {
    icon: SvgBellIcon,
    title: '在直播间',
    totalTitle: '在直播间数量',
    totalValue: 0,
    value: 0,
  },
]);

// 消费统计维度选项
const consumptionTabs: TabOption[] = [
  {
    label: '消费统计',
    value: 'day',
  },
  {
    label: '按周',
    value: 'week',
  },
  {
    label: '按月',
    value: 'month',
  },
];

// 聊天活跃度统计维度选项
const activityTabs: TabOption[] = [
  {
    label: '聊天活跃度统计',
    value: 'day',
  },
  {
    label: '按周',
    value: 'week',
  },
  {
    label: '按月',
    value: 'month',
  },
];

// 直播间活跃统计维度选项
const liveTabs: TabOption[] = [
  {
    label: '直播间活跃统计',
    value: 'day',
  },
];



// 当前选中的维度
const activeConsumptionTab = ref('day');
const activeActivityTab = ref('day');
const activeLiveTab = ref('day');

onMounted(() => {
  getRobotStatistics();
});

async function getRobotStatistics() {
  try {
    const res = await homePage.getRobotStatistics();
    if (!res.error && res.data) {
      const data = res.data;
      overviewItems.value = [
        {
          icon: SvgCardIcon,
          title: '机器人总数',
          totalTitle: '总机器人',
          totalValue: data.totalCount || 0,
          value: data.totalCount || 0,
        },
        {
          icon: SvgCakeIcon,
          title: '在线机器人',
          totalTitle: '在线数量',
          totalValue: data.onlineCount || 0,
          value: data.onlineCount || 0,
        },
        {
          icon: SvgDownloadIcon,
          title: '离线机器人',
          totalTitle: '离线数量',
          totalValue: data.offlineCount || 0,
          value: data.offlineCount || 0,
        },
        {
          icon: SvgBellIcon,
          title: '在直播间',
          totalTitle: '在直播间数量',
          totalValue: data.inLiveRoomCount || 0,
          value: data.inLiveRoomCount || 0,
        },
      ];
    }
  } catch (error) {
    console.error('获取机器人统计信息失败:', error);
  }
}
</script>

<template>
  <div class="p-5">
    <AnalysisOverview :items="overviewItems" />
    
    <!-- 消费统计 -->
    <div class="mt-5">
      <AnalysisChartsTabs :tabs="consumptionTabs" v-model="activeConsumptionTab" class="mt-3">
        <template #day>
          <AnalyticsConsumption :dimension="'day'" />
        </template>
        <template #week>
          <AnalyticsConsumption :dimension="'week'" />
        </template>
        <template #month>
          <AnalyticsConsumption :dimension="'month'" />
        </template>
      </AnalysisChartsTabs>
    </div>
    
    <!-- 聊天活跃度统计 -->
    <div class="mt-5">
      <AnalysisChartsTabs :tabs="activityTabs" v-model="activeActivityTab" class="mt-3">
        <template #day>
          <AnalyticsChatActivity :dimension="'day'" />
        </template>
        <template #week>
          <AnalyticsChatActivity :dimension="'week'" />
        </template>
        <template #month>
          <AnalyticsChatActivity :dimension="'month'" />
        </template>
      </AnalysisChartsTabs>
    </div>
    
    <!-- 直播间活跃统计 -->
    <div class="mt-5">
      <AnalysisChartsTabs :tabs="liveTabs" v-model="activeLiveTab" class="mt-3">
        <template #day>
          <AnalyticsLiveRoom :dimension="'day'" />
        </template>
      </AnalysisChartsTabs>
    </div>
  </div>
</template>
