<template>
  <view class="home-page">
    <!-- 数据统计卡片行 (使用统一响应式网格) -->
    <view class="kpi-grid">
      <KpiMiniCard
        class="stat-card"
        title="销售额"
        tagText="今日"
        :valueText="statsData.sales.today.toString()"
        :metaLeft="'昨日 ' + statsData.sales.yesterday"
        :metaRight="'日环比 ' + statsData.sales.trend + '%'"
        :trend="statsData.sales.trend > 0 ? 'up' : 'down'"
        footerLeftText="本月销售额"
        :footerRightText="statsData.sales.monthTotal + '元'"
      />

      <KpiMiniCard
        class="stat-card"
        title="用户访问量"
        tagText="今日"
        :valueText="statsData.visits.today.toString()"
        :metaLeft="'昨日 ' + statsData.visits.yesterday"
        :metaRight="'日环比 ' + statsData.visits.trend + '%'"
        :trend="statsData.visits.trend > 0 ? 'up' : 'down'"
        footerLeftText="本月访问量"
        :footerRightText="statsData.visits.monthTotal + 'Pv'"
      />

      <KpiMiniCard
        class="stat-card"
        title="订单量"
        tagText="今日"
        :valueText="statsData.orders.today.toString()"
        :metaLeft="'昨日 ' + statsData.orders.yesterday"
        :metaRight="'日环比 ' + statsData.orders.trend + '%'"
        :trend="statsData.orders.trend > 0 ? 'up' : 'down'"
        footerLeftText="本月订单量"
        :footerRightText="statsData.orders.monthTotal + '单'"
      />

      <KpiMiniCard
        class="stat-card"
        title="新增用户"
        tagText="今日"
        :valueText="statsData.users.today.toString()"
        :metaLeft="'昨日 ' + statsData.users.yesterday"
        :metaRight="'日环比 ' + statsData.users.trend + '%'"
        :trend="statsData.users.trend > 0 ? 'up' : 'down'"
        footerLeftText="本月新增用户"
        :footerRightText="statsData.users.monthTotal + '人'"
      />
    </view>

    <!-- 订单趋势图表区 -->
    <view class="chart-section">
      <view class="chart-header">
        <view class="header-left">
          <view class="chart-icon-box">
            <text class="chart-icon">📈</text>
          </view>
          <text class="chart-title">订单</text>
        </view>
        <view class="header-right">
          <view class="period-tabs">
            <view 
              v-for="p in periods" 
              :key="p.value"
              class="period-tab"
              :class="{ active: activePeriod === p.value }"
              @click="activePeriod = p.value"
            >
              <text class="tab-text">{{ p.label }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="chart-body">
        <AnalyticsComboChart
          :xLabels="chartData.x"
          :gmv="chartData.gmv"
          :orders="chartData.orders"
          :height="360"
        />
      </view>
    </view>

    <!-- 用户与购买统计行 -->
    <view class="stats-row bottom-charts">
      <!-- 用户趋势 -->
      <view class="chart-section half-width">
        <view class="chart-header">
          <view class="header-left">
            <view class="chart-icon-box user">
              <text class="chart-icon">👤</text>
            </view>
            <text class="chart-title">用户</text>
          </view>
        </view>
        <view class="chart-body">
          <AnalyticsAreaChart
            :xLabels="userData.x"
            :data="userData.data"
            :height="300"
          />
        </view>
      </view>

      <!-- 购买用户统计 -->
      <view class="chart-section half-width">
        <view class="chart-header">
          <view class="header-left">
            <view class="chart-icon-box buy">
              <text class="chart-icon">📈</text>
            </view>
            <text class="chart-title">购买用户统计</text>
          </view>
        </view>
        <view class="chart-body">
          <AnalyticsPieChart
            :items="buyUserData"
            :height="300"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
/**
 * 管理后台首页 - CRMEB 数据统计
 * 1:1 复刻 CRMEB 首页设计
 */
import { ref, computed, onMounted } from 'vue'
import AnalyticsComboChart from '@/components/analytics/AnalyticsComboChart.uvue'
import AnalyticsAreaChart from '@/components/analytics/AnalyticsAreaChart.uvue'
import AnalyticsPieChart from '@/components/analytics/AnalyticsPieChart.uvue'
import KpiMiniCard from '@/pages/mall/admin/homePage/components/KpiMiniCard.uvue'

// Filter periods
const periods = [
  { label: '30天', value: '30d' },
  { label: '周', value: 'week' },
  { label: '月', value: 'month' },
  { label: '年', value: 'year' }
]
const activePeriod = ref('30d')

// Mock data generator for different periods
function getMockChartData(period: string): any {
  if (period === '30d') {
    return {
      x: ['01-04', '01-06', '01-08', '01-10', '01-12', '01-14', '01-16', '01-18', '01-20', '01-22', '01-24', '01-26', '01-28', '01-30', '02-02'],
      gmv: [10000, 15000, 130000, 20000, 15000, 10000, 40000, 25000, 100000, 30000, 5000, 70000, 20000, 15000, 10000],
      orders: [15, 12, 18, 10, 8, 14, 12, 11, 15, 12, 35, 10, 11, 15, 8]
    }
  } else if (period === 'week') {
    return {
      x: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      gmv: [45000, 52000, 48000, 61000, 55000, 89000, 95000],
      orders: [42, 48, 45, 56, 51, 82, 88]
    }
  } else if (period === 'month') {
    return {
      x: ['1月', '2月', '3月', '4月', '5月', '6月'],
      gmv: [1200000, 1500000, 1350000, 1800000, 2100000, 1950000],
      orders: [1200, 1500, 1350, 1800, 2100, 1950]
    }
  } else { // year
    return {
      x: ['2021', '2022', '2023', '2024', '2025'],
      gmv: [12000000, 15000000, 18500000, 22000000, 28000000],
      orders: [12000, 15000, 18500, 22000, 28000]
    }
  }
}

// Chart data tied to activePeriod
const chartData = computed(() => {
  return getMockChartData(activePeriod.value)
})

// Mock data for User and Buying stats
const userData = ref({
  x: ['01-3', '01-4', '01-5', '01-6', '01-7', '01-8', '01-9', '01-10', '01-11', '01-12', '01-13', '01-14', '01-15', '01-16', '01-17', '01-18', '01-19', '01-20', '01-21', '01-22', '01-23', '01-24', '01-25', '01-26', '01-27', '01-28', '01-29', '01-30', '01-31', '02-1', '02-2'],
  data: [8, 32, 38, 28, 30, 33, 18, 26, 22, 18, 12, 6, 20, 32, 35, 30, 25, 23, 14, 12, 22, 30, 32, 29, 30, 22, 18, 22, 10, 8, 17]
})

const buyUserData = ref([
  { name: '未消费用户', value: 850, itemStyle: { color: '#3b82f6' } },
  { name: '消费一次用户', value: 120, itemStyle: { color: '#a78bfa' } },
  { name: '留存客户', value: 45, itemStyle: { color: '#10b981' } },
  { name: '回流客户', value: 15, itemStyle: { color: '#f59e0b' } }
])

// TODO: 后续接入真实数据接口
const statsData = ref({
  sales: {
    today: 91.1,
    yesterday: 2740,
    monthTotal: 2831.1,
    trend: -96.67
  },
  visits: {
    today: 224,
    yesterday: 136,
    monthTotal: 360,
    trend: 64.7
  },
  orders: {
    today: 4,
    yesterday: 8,
    monthTotal: 12,
    trend: -50
  },
  users: {
    today: 21,
    yesterday: 6,
    monthTotal: 27,
    trend: 250
  }
})
</script>

<style scoped>
.home-page {
  padding: 0;
  background-color: #f0f2f5;
  min-height: 100vh;
}

/* 兼容旧布局标识，样式逻辑已由 .kpi-grid 接管 */
.stat-card {
  margin-bottom: 0px; 
}

/* 图表区样式 */
.chart-section {
  margin-top: 12px;
  background-color: #ffffff;
  border-radius: 4px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.chart-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.header-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.chart-icon-box {
  width: 24px;
  height: 24px;
  background-color: #e6f7ff;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.chart-icon {
  font-size: 14px;
}

.chart-title {
  font-size: 16px;
  font-weight: 500;
  color: #262626;
}

.period-tabs {
  display: flex;
  flex-direction: row;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.period-tab {
  padding: 5px 16px;
  background-color: #fff;
  border-left: 1px solid #d9d9d9;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.period-tab:first-child {
  border-left: none;
}

.period-tab.active {
  background-color: #1890ff;
  border-color: #1890ff;
}

.period-tab.active .tab-text {
  color: #fff;
}

.tab-text {
  font-size: 14px;
  color: #595959;
}

.chart-body {
  width: 100%;
}

.bottom-charts {
  margin-top: 12px;
  display: flex;
  flex-direction: row;
  gap: 12px;
}

.half-width {
  flex: 1;
  min-width: 400px;
}

.chart-icon-box.user { background-color: #e6f7ff; }
.chart-icon-box.buy { background-color: #f0f5ff; }

/* 卡片底部 */
.card-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.footer-label {
  font-size: 13px;
  color: #8c8c8c;
}

.footer-value {
  font-size: 13px;
  color: #262626;
  font-weight: 500;
}

@media screen and (max-width: 768px) {
  .home-page {
    padding: 0;
  }
  
  .bottom-charts {
    flex-direction: column;
  }
  
  .half-width {
    min-width: 100%;
  }

  /* 调整图表头部在移动端的展示 */
  .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .header-right {
    width: 100%;
  }
  
  .period-tabs {
    width: 100%;
    justify-content: space-between;
  }
  
  .period-tab {
    flex: 1;
  }
}
</style>
