<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="Dashboard">
  <title>{{ $t('nav.dashboard') }}</title>
  <style>
    .dashboard-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
    }

    .stat-card {
      background: #fff;
      padding: 20px;
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .stat-title {
      font-size: 14px;
      color: var(--text-color-secondary);
    }

    .stat-value {
      font-size: 24px;
      font-weight: bold;
      color: var(--color-primary);
    }

    .chart-container {
      background: #fff;
      padding: 20px;
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
      height: 400px;
    }
  </style>
</head>

<body>
  <div class="dashboard-container">
    <h1>{{ $t('nav.dashboard') }}</h1>

    <div class="stats-grid">
      <div class="stat-card" v-for="stat in stats">
        <div class="stat-title">{{ stat.title }}</div>
        <div class="stat-value">{{ stat.value }}</div>
      </div>
    </div>

    <div class="chart-container" id="main-chart"></div>
  </div>
</body>
<script setup>
  stats = [
    {title: "Total Users", value: "1,234"},
    {title: "Active Sessions", value: "56"},
    {title: "API Calls", value: "89.2k"},
    {title: "Revenue", value: "$12,340"}
  ];

  // Mock data fetch
  fetchStats = async () => {
    // In real app, call API
    // const res = await $axios.get('/api/stats/dashboard');
    // stats = res;
  };

  initChart = () => {
    const chartDom = $node.querySelector('#main-chart');
    if (!chartDom) return;

    const myChart = echarts.init(chartDom);
    const option = {
      title: {
        text: 'Activity Trend'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true,
          itemStyle: {
            color: getComputedStyle(document.documentElement).getPropertyValue('--color-primary').trim()
          }
        }
      ]
    };
    myChart.setOption(option);

    // Resize chart on window resize
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  };
</script>
<script>
  // Run after mount
  $data.initChart();
</script>

</html>
