<template>
  <view class="home-page">
    <!-- 数据统计卡片行 -->
    <view class="stats-row">
      <!-- 销售额卡片 -->
      <view class="stat-card">
        <view class="card-header">
          <text class="card-title">销售额</text>
          <view class="tag today">今日</view>
        </view>
        <view class="card-value">91.1</view>
        <view class="card-meta">
          <text class="meta-text">昨日 2740</text>
          <text class="meta-trend down">日环比 -96.67% ▼</text>
        </view>
        <view class="card-footer">
          <text class="footer-label">本月销售额</text>
          <text class="footer-value">2831.1元</text>
        </view>
      </view>

      <!-- 用户访问量卡片 -->
      <view class="stat-card">
        <view class="card-header">
          <text class="card-title">用户访问量</text>
          <view class="tag today">今日</view>
        </view>
        <view class="card-value">224</view>
        <view class="card-meta">
          <text class="meta-text">昨日 136</text>
          <text class="meta-trend up">日环比 64.7% ▲</text>
        </view>
        <view class="card-footer">
          <text class="footer-label">本月访问量</text>
          <text class="footer-value">360Pv</text>
        </view>
      </view>

      <!-- 订单量卡片 -->
      <view class="stat-card">
        <view class="card-header">
          <text class="card-title">订单量</text>
          <view class="tag today">今日</view>
        </view>
        <view class="card-value">4</view>
        <view class="card-meta">
          <text class="meta-text">昨日 8</text>
          <text class="meta-trend down">日环比 -50% ▼</text>
        </view>
        <view class="card-footer">
          <text class="footer-label">本月订单量</text>
          <text class="footer-value">12单</text>
        </view>
      </view>

      <!-- 新增用户卡片 -->
      <view class="stat-card">
        <view class="card-header">
          <text class="card-title">新增用户</text>
          <view class="tag today">今日</view>
        </view>
        <view class="card-value">21</view>
        <view class="card-meta">
          <text class="meta-text">昨日 6</text>
          <text class="meta-trend up">日环比 250% ▲</text>
        </view>
        <view class="card-footer">
          <text class="footer-label">本月新增用户</text>
          <text class="footer-value">27人</text>
        </view>
      </view>
    </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'

// 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: 16px;
  background-color: #f0f2f5;
  min-height: 100vh;
}

.stats-row {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-wrap: wrap;
}

/* 统计卡片 */
.stat-card {
  flex: 1;
  min-width: 280px;
  background-color: #ffffff;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s;
}

.stat-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* 卡片头部 */
.card-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-title {
  font-size: 14px;
  color: #666666;
  font-weight: 400;
}

.tag {
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 12px;
}

.tag.today {
  background-color: #e8f4ff;
  color: #1890ff;
}

/* 卡片主值 */
.card-value {
  font-size: 32px;
  font-weight: 500;
  color: #262626;
  margin-bottom: 12px;
  line-height: 1.2;
}

/* 卡片元数据 */
.card-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.meta-text {
  font-size: 13px;
  color: #8c8c8c;
}

.meta-trend {
  font-size: 13px;
  font-weight: 500;
}

.meta-trend.up {
  color: #ff4d4f;
}

.meta-trend.down {
  color: #52c41a;
}

/* 图表区样式 */
.chart-section {
  margin-top: 16px;
  background-color: #ffffff;
  border-radius: 4px;
  padding: 20px;
  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: 24px;
}

.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: 16px;
  display: flex;
  flex-direction: row;
  gap: 16px;
}

.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: 1400px) {
  .stat-card {
    min-width: calc(50% - 8px);
  }
}

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

@media screen and (max-width: 768px) {
  .home-page {
    padding: 12px;
  }
  
  .stats-row {
    gap: 12px;
  }
  
  .stat-card {
    min-width: 100%;
    padding: 16px;
  }
  
  .card-value {
    font-size: 28px;
  }
}
</style>
