<template>
  <div class="dashboard">
    <!-- 统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-content">
          <div class="stat-info">
            <div class="stat-label">总用户数</div>
            <div class="stat-value">{{ data.total_users }}</div>
            <div
              class="stat-trend"
              :class="{
                positive: data.total_users_mom_ratio?.includes('+'),
                negative:
                  data.total_users_mom_ratio?.includes('-') &&
                  data.total_users_mom_ratio.length > 1,
              }"
            >
              <el-icon v-if="data.total_users_mom_ratio?.includes('+')"><ArrowUp /></el-icon>
              <el-icon
                v-if="
                  data.total_users_mom_ratio?.includes('-') && data.total_users_mom_ratio.length > 1
                "
                ><ArrowDown
              /></el-icon>
              {{ data.total_users_mom_ratio }} 较上月
            </div>
          </div>
          <div class="stat-icon user">
            <el-icon><User /></el-icon>
          </div>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-content">
          <div class="stat-info">
            <div class="stat-label">今日活跃</div>
            <div class="stat-value">{{ data.active_today }}</div>
            <div
              class="stat-trend"
              :class="{
                positive: data.active_today_dod_ratio?.includes('+'),
                negative:
                  data.active_today_dod_ratio?.includes('-') &&
                  data.active_today_dod_ratio.length > 1,
              }"
            >
              <el-icon v-if="data.active_today_dod_ratio?.includes('+')"><ArrowUp /></el-icon>
              <el-icon
                v-if="
                  data.active_today_dod_ratio?.includes('-') &&
                  data.active_today_dod_ratio.length > 1
                "
                ><ArrowDown
              /></el-icon>
              {{ data.active_today_dod_ratio }} 较昨日
            </div>
          </div>
          <div class="stat-icon active">
            <el-icon><TrendCharts /></el-icon>
          </div>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-content">
          <div class="stat-info">
            <div class="stat-label">商品生成量</div>
            <div class="stat-value">{{ data.drawings_generated }}</div>
            <div
              class="stat-trend"
              :class="{
                positive: data.drawings_generated_mom_ratio?.includes('+'),
                negative:
                  data.drawings_generated_mom_ratio?.includes('-') &&
                  data.drawings_generated_mom_ratio?.length > 1,
              }"
            >
              <el-icon v-if="data.drawings_generated_mom_ratio?.includes('+')"><ArrowUp /></el-icon>
              <el-icon
                v-if="
                  data.drawings_generated_mom_ratio?.includes('-') &&
                  data.drawings_generated_mom_ratio?.length > 1
                "
                ><ArrowDown
              /></el-icon>
              {{ data.drawings_generated_mom_ratio }} 较上月
            </div>
          </div>
          <div class="stat-icon generate">
            <el-icon><Document /></el-icon>
          </div>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-content">
          <div class="stat-info">
            <div class="stat-label">本月收入</div>
            <div class="stat-value">¥{{ data.month_income_cents / 100 }}</div>
            <div
              class="stat-trend"
              :class="{
                positive: data.month_income_cents_mom_ratio?.includes('+'),
                negative:
                  data.month_income_cents_mom_ratio?.includes('-') &&
                  data.month_income_cents_mom_ratio?.length > 1,
              }"
            >
              <el-icon v-if="data.month_income_cents_mom_ratio?.includes('+')"><ArrowUp /></el-icon>
              <el-icon
                v-if="
                  data.month_income_cents_mom_ratio?.includes('-') &&
                  data.month_income_cents_mom_ratio?.length > 1
                "
                ><ArrowDown
              /></el-icon>
              {{ data.month_income_cents_mom_ratio }} 较上月
            </div>
          </div>
          <div class="stat-icon revenue">
            <el-icon><Money /></el-icon>
          </div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="charts-section">
      <div class="chart-container">
        <RevenueChart />
      </div>
      <div class="chart-container">
        <OrderTypeChart />
      </div>
    </div>

    <!-- 最近数据区域 -->
    <div class="recent-section">
      <div class="recent-container">
        <RecentOrders />
      </div>
      <div class="recent-container">
        <RecentDrawings />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ArrowUp, ArrowDown, User, TrendCharts, Document, Money } from '@element-plus/icons-vue'
import RevenueChart from './RevenueChart.vue'
import OrderTypeChart from './OrderTypeChart.vue'
import RecentOrders from './RecentOrders.vue'
import RecentDrawings from './RecentDrawings.vue'
import RPC from '@/utils/rpc'

const data = ref({})
const getData = () => {
  RPC.post('/dashboard/summary').then((res) => {
    data.value = res
  })
}
getData()
</script>

<style lang="scss" scoped>
.dashboard {
  padding: 20px;
  //   background-color: #f5f7fa;
  min-height: 100vh;

  .stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;

    .stat-card {
      background: white;
      border-radius: 8px;
      padding: 24px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      transition: transform 0.2s ease;

      &:hover {
        transform: translateY(-2px);
      }

      .stat-content {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .stat-info {
          .stat-label {
            font-size: 14px;
            color: #909399;
            margin-bottom: 8px;
          }

          .stat-value {
            font-size: 28px;
            font-weight: 600;
            color: #303133;
            margin-bottom: 8px;
          }

          .stat-trend {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;

            &.positive {
              color: #67c23a;
            }

            &.negative {
              color: #f56c6c;
            }

            .el-icon {
              font-size: 12px;
            }
          }
        }

        .stat-icon {
          width: 60px;
          height: 60px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;

          .el-icon {
            font-size: 24px;
            color: white;
          }

          &.user {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          }

          &.active {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
          }

          &.generate {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
          }

          &.revenue {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
          }
        }
      }
    }
  }

  .charts-section {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 30px;

    @media (max-width: 1200px) {
      grid-template-columns: 1fr;
    }

    .chart-container {
      min-height: 400px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }

  .recent-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;

    @media (max-width: 1200px) {
      grid-template-columns: 1fr;
    }

    .recent-container {
      height: 300px;
    }
  }
}
</style>
