<!doctype html>
<html lang="zh-TW">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>管理者儀表板 - Learning Management System</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
      .sidebar {
        min-height: 100vh;
        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
      }
      .main-content {
        background-color: #f8f9fa;
      }
      .card {
        border: none;
        border-radius: 15px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s;
      }
      .card:hover {
        transform: translateY(-2px);
      }
      .stat-card {
        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
        color: white;
      }
      .nav-link {
        color: rgba(255, 255, 255, 0.8);
        border-radius: 10px;
        margin: 5px 0;
        transition: all 0.3s ease;
      }
      .nav-link:hover,
      .nav-link.active {
        color: white;
        background-color: rgba(255, 255, 255, 0.1);
        transform: translateX(5px);
      }
      .chart-container {
        position: relative;
        height: 300px;
        margin: 20px 0;
      }
      .section-content {
        display: none;
      }
      .section-content.active {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <!-- 側邊欄 -->
        <div class="col-md-3 col-lg-2 sidebar p-3">
          <div class="text-center mb-4">
            <h4 class="text-white">管理者儀表板</h4>
            <small class="text-white-50">健康數據管理系統</small>
          </div>
          <nav class="nav flex-column">
            <a
              class="nav-link active"
              href="#"
              onclick="showSection('overview', event)"
            >
              <i class="fas fa-tachometer-alt me-2"></i>系統概覽
            </a>
            <a class="nav-link" href="/user-management.html">
              <i class="fas fa-users me-2"></i>用戶管理
            </a>
            <a class="nav-link" href="/system-analytics.html">
              <i class="fas fa-chart-line me-2"></i>系統分析
            </a>
            <a class="nav-link" href="/system-logs.html">
              <i class="fas fa-list-alt me-2"></i>系統日誌
            </a>
            <a class="nav-link" href="/system-management.html">
              <i class="fas fa-cog me-2"></i>系統管理
            </a>
            <a class="nav-link" href="/achievement-management.html">
              <i class="fas fa-trophy me-2"></i>管理任務成就
            </a>
            <a class="nav-link" href="/task-management.html">
              <i class="fas fa-tasks me-2"></i>任務卡片管理
            </a>
            <a class="nav-link" href="/content-management.html">
              <i class="fas fa-book-open me-2"></i>內容管理
            </a>
            <a class="nav-link" href="/video-management.html">
              <i class="fas fa-video me-2"></i>影片管理
            </a>
            <a class="nav-link" href="/mall-management.html">
              <i class="fas fa-store me-2"></i>兌換商城
            </a>
            <a class="nav-link" href="/campaign-links.html">
              <i class="fas fa-gift me-2"></i>活動連結管理
            </a>
            <a class="nav-link" href="#" onclick="showSection('app-update', event)">
              <i class="fas fa-mobile-alt me-2"></i>App 更新管理
            </a>
            <a class="nav-link" href="#" onclick="switchToHealthSystem()">
              <i class="fas fa-heartbeat me-2"></i>切換健康管理系統
            </a>
            <a class="nav-link" href="#" onclick="logout()">
              <i class="fas fa-sign-out-alt me-2"></i>登出
            </a>
          </nav>
        </div>

        <!-- 主要內容區 -->
        <div class="col-md-9 col-lg-10 main-content p-4">
          <!-- 系統概覽 -->
          <div id="overview-section" class="section-content active">
            <div class="d-flex justify-content-between align-items-center mb-4">
              <h2>系統概覽</h2>
              <div class="text-muted">
                <i class="fas fa-clock me-1"></i>
                <span id="current-time"></span>
              </div>
            </div>

            <!-- 統計卡片 -->
            <div class="row mb-4">
              <div class="col-md-3">
                <div class="card stat-card">
                  <div class="card-body text-center">
                    <h5>總用戶數</h5>
                    <div class="h2" id="total-users">--</div>
                    <small>活躍: <span id="active-users">--</span></small>
                  </div>
                </div>
              </div>
              <div class="col-md-3">
                <div class="card stat-card">
                  <div class="card-body text-center">
                    <h5>管理者</h5>
                    <div class="h2" id="admin-users">--</div>
                    <small>一般用戶: <span id="regular-users">--</span></small>
                  </div>
                </div>
              </div>
              <div class="col-md-3">
                <div class="card stat-card">
                  <div class="card-body text-center">
                    <h5>健康數據</h5>
                    <div class="h2" id="total-data">--</div>
                    <small>平均: <span id="avg-data-per-user">--</span></small>
                  </div>
                </div>
              </div>
              <div class="col-md-3">
                <div class="card stat-card">
                  <div class="card-body text-center">
                    <h5>新用戶</h5>
                    <div class="h2" id="new-users">--</div>
                    <small>最近30天</small>
                  </div>
                </div>
              </div>
            </div>

            <!-- 用戶每日統計表格 -->
            <div class="row mb-4">
              <div class="col-12">
                <div class="card">
                  <div
                    class="card-header d-flex justify-content-between align-items-center"
                  >
                    <h5>用戶每日任務完成統計</h5>
                    <div class="d-flex gap-2">
                      <select
                        class="form-select form-select-sm"
                        id="date-filter"
                        style="width: 150px"
                      >
                        <option value="today">今天</option>
                        <option value="yesterday">昨天</option>
                        <option value="week">本週</option>
                        <option value="month">本月</option>
                      </select>
                      <button
                        class="btn btn-sm btn-primary"
                        onclick="loadUserDailyStats()"
                      >
                        <i class="fas fa-refresh"></i> 刷新
                      </button>
                    </div>
                  </div>
                  <div class="card-body">
                    <div class="table-responsive">
                      <table class="table table-hover table-sm">
                        <thead>
                          <tr>
                            <th>用戶名</th>
                            <th>姓名</th>
                            <th>完成任務數</th>
                            <th>總積分</th>
                            <th>最後登入時間</th>
                            <th>本日使用時間</th>
                          </tr>
                        </thead>
                        <tbody id="user-daily-stats-table">
                          <tr>
                            <td colspan="6" class="text-center text-muted">
                              <i class="fas fa-spinner fa-spin"></i> 載入中...
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 圖表區域 -->
            <div class="row">
              <div class="col-md-8">
                <div class="card">
                  <div class="card-header">
                    <h5 class="mb-0">用戶趨勢圖</h5>
                  </div>
                  <div class="card-body">
                    <div class="chart-container">
                      <canvas id="userTrendChart"></canvas>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-4">
                <div class="card">
                  <div class="card-header">
                    <h5 class="mb-0">用戶角色分布</h5>
                  </div>
                  <div class="card-body">
                    <div class="chart-container">
                      <canvas id="roleDistributionChart"></canvas>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 用戶使用時間圖表 -->
            <div class="row mt-4">
              <div class="col-12">
                <div class="card">
                  <div
                    class="card-header d-flex justify-content-between align-items-center"
                  >
                    <h5>用戶本日系統使用時間</h5>
                    <div class="d-flex gap-2">
                      <select
                        class="form-select form-select-sm"
                        id="usage-chart-filter"
                        style="width: 150px"
                      >
                        <option value="today">今天</option>
                        <option value="yesterday">昨天</option>
                        <option value="week">本週</option>
                      </select>
                      <button
                        class="btn btn-sm btn-primary"
                        onclick="loadUsageChart()"
                      >
                        <i class="fas fa-refresh"></i> 刷新
                      </button>
                    </div>
                  </div>
                  <div class="card-body">
                    <div class="chart-container">
                      <canvas id="usageTimeChart"></canvas>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- App 更新管理（嵌入現有管理頁） -->
          <div id="app-update-section" class="section-content">
            <div class="d-flex justify-content-between align-items-center mb-3">
              <h2>App 版本管理與更新日誌</h2>
              <small class="text-muted">來源：/app-update-admin.html</small>
            </div>
            <div class="card">
              <div class="card-body p-0">
                <iframe
                  id="appUpdateFrame"
                  src="/app-update-admin.html"
                  style="width: 100%; min-height: 1600px; border: 0; display: block;"
                ></iframe>
              </div>
            </div>
          </div>

          <!-- 其他區塊將在後續添加 -->
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/logger.js"></script>
    <script>
      // 基本功能
      document.addEventListener('DOMContentLoaded', function () {
        // 檢查認證狀態
        checkAuthentication();
        updateCurrentTime();
        setInterval(updateCurrentTime, 1000);
      });

      // 檢查認證狀態
      async function checkAuthentication() {
        const token = localStorage.getItem('authToken');

        if (!token) {
          alert('請先登入');
          window.location.href = '/login.html';
          return;
        }

        try {
          const response = await fetch('/api/users/verify-token', {
            headers: {
              'Authorization': `Bearer ${token}`
            }
          });

          const data = await response.json();

          if (!data.valid) {
            alert('認證已過期，請重新登入');
            localStorage.removeItem('authToken');
            window.location.href = '/login.html';
            return;
          }

          // 檢查是否為管理員
          if (data.user.role !== 'admin') {
            alert('您沒有管理員權限');
            window.location.href = '/dashboard.html';
            return;
          }

          // 認證成功，載入儀表板
          loadOverview();
        } catch (error) {
          console.error('認證檢查失敗:', error);
          alert('認證檢查失敗，請重新登入');
          localStorage.removeItem('authToken');
          window.location.href = '/login.html';
        }
      }

      function updateCurrentTime() {
        document.getElementById('current-time').textContent =
          new Date().toLocaleString('zh-TW');
      }

      function showSection(section, event) {
        // 隱藏所有區塊
        document.querySelectorAll('.section-content').forEach(el => {
          el.classList.remove('active');
        });

        // 移除所有導航連結的 active 類
        document.querySelectorAll('.nav-link').forEach(link => {
          link.classList.remove('active');
        });

        // 顯示選中的區塊
        document.getElementById(section + '-section').classList.add('active');

        // 添加 active 類到點擊的連結
        if (event && event.target) {
          event.target.classList.add('active');
        }
      }

      function loadOverview() {
        // 載入用戶統計數據
        loadUserStats();

        // 載入用戶每日統計和使用時間圖表
        loadUserDailyStats();
        loadUsageChart();

        // 創建圖表
        createCharts();
      }

      // 載入用戶統計數據
      async function loadUserStats() {
        try {
          const response = await fetch('/api/users/stats', {
            headers: {
              'Authorization': `Bearer ${localStorage.getItem('authToken')}`
            }
          });

          if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
          }

          const data = await response.json();

          if (data.success && data.data) {
            document.getElementById('total-users').textContent = data.data.total_users || 0;
            document.getElementById('active-users').textContent = data.data.active_users || 0;
            document.getElementById('admin-users').textContent = data.data.admin_users || 0;
            document.getElementById('regular-users').textContent = data.data.regular_users || 0;
            document.getElementById('total-data').textContent = data.data.users_with_data || 0;
            document.getElementById('avg-data-per-user').textContent = (data.data.avg_data_per_user || 0).toFixed(1);
            document.getElementById('new-users').textContent = data.data.new_users || 0;
          } else {
            throw new Error(data.error || 'Failed to load user stats');
          }
        } catch (error) {
          console.error('Error loading user stats:', error);
          // 使用模擬數據作為備用
          document.getElementById('total-users').textContent = '156';
          document.getElementById('active-users').textContent = '89';
          document.getElementById('admin-users').textContent = '3';
          document.getElementById('regular-users').textContent = '153';
          document.getElementById('total-data').textContent = '2,847';
          document.getElementById('avg-data-per-user').textContent = '18.2';
          document.getElementById('new-users').textContent = '12';
        }
      }

      // 載入用戶每日統計
      async function loadUserDailyStats() {
        try {
          const dateFilter = document.getElementById('date-filter').value;
          const response = await fetch(
            `/api/admin/user-daily-stats?period=${dateFilter}`,
            {
              headers: {
                Authorization: `Bearer ${localStorage.getItem('authToken')}`,
              },
            }
          );

          if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
          }

          const data = await response.json();

          if (data.success) {
            console.log('用戶每日統計API響應:', data);
            displayUserDailyStats(data.data || []);
          } else {
            throw new Error(data.error || 'Failed to load user daily stats');
          }
        } catch (error) {
          console.error('Error loading user daily stats:', error);
          document.getElementById('user-daily-stats-table').innerHTML =
            '<tr><td colspan="6" class="text-center text-danger">載入失敗: ' +
            error.message +
            '</td></tr>';
        }
      }

      // 顯示用戶每日統計
      function displayUserDailyStats(stats) {
        console.log('顯示用戶每日統計數據:', stats);
        const tbody = document.getElementById('user-daily-stats-table');

        if (stats.length === 0) {
          tbody.innerHTML =
            '<tr><td colspan="6" class="text-center text-muted">暫無數據</td></tr>';
          return;
        }

        tbody.innerHTML = stats
          .map(
            user => `
                <tr>
                    <td>${user.username}</td>
                    <td>${user.full_name || '--'}</td>
                    <td>
                        <span class="badge bg-success">${user.completed_tasks || 0}</span>
                    </td>
                    <td>
                        <span class="badge bg-primary">${user.total_points || 0}</span>
                    </td>
                    <td>
                        <small class="text-muted">
                            ${user.last_login ? new Date(user.last_login).toLocaleString('zh-TW') : '從未登入'}
                        </small>
                    </td>
                    <td>
                        <span class="badge bg-info">${formatUsageTime(user.daily_usage_time || 0)}</span>
                    </td>
                </tr>
            `
          )
          .join('');
      }

      // 載入使用時間圖表
      async function loadUsageChart() {
        try {
          const period = document.getElementById('usage-chart-filter').value;
          const response = await fetch(
            `/api/admin/usage-time-chart?period=${period}`,
            {
              headers: {
                Authorization: `Bearer ${localStorage.getItem('authToken')}`,
              },
            }
          );

          if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
          }

          const data = await response.json();

          if (data.success) {
            createUsageTimeChart(data.data || { labels: [], usageData: [] });
          } else {
            throw new Error(data.error || 'Failed to load usage chart');
          }
        } catch (error) {
          console.error('Error loading usage chart:', error);
          // 顯示空圖表
          createUsageTimeChart({ labels: [], usageData: [] });
        }
      }

      // 創建使用時間圖表
      function createUsageTimeChart(data) {
        const ctx = document.getElementById('usageTimeChart').getContext('2d');

        // 銷毀現有圖表
        if (window.usageTimeChartInstance) {
          window.usageTimeChartInstance.destroy();
        }

        // 使用API返回的labels和usageData
        const labels = data.labels || [];
        const usageData = data.usageData || [];

        window.usageTimeChartInstance = new Chart(ctx, {
          type: 'bar',
          data: {
            labels: labels,
            datasets: [{
              label: '使用時間 (小時)',
              data: usageData,
              backgroundColor: 'rgba(54, 162, 235, 0.8)',
              borderColor: 'rgba(54, 162, 235, 1)',
              borderWidth: 1
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
              y: {
                beginAtZero: true,
                title: {
                  display: true,
                  text: '使用時間 (小時)'
                }
              },
              x: {
                title: {
                  display: true,
                  text: '用戶名'
                }
              }
            },
            plugins: {
              legend: {
                display: true
              }
            }
          }
        });
      }

      // 格式化使用時間
      function formatUsageTime(minutes) {
        if (minutes < 60) {
          return `${Math.round(minutes)}分鐘`;
        } else {
          const hours = Math.floor(minutes / 60);
          const remainingMinutes = Math.round(minutes % 60);
          return `${hours}小時${remainingMinutes}分鐘`;
        }
      }

      function createCharts() {
        // 用戶趨勢圖表
        const userTrendCtx = document.getElementById('userTrendChart').getContext('2d');
        new Chart(userTrendCtx, {
          type: 'line',
          data: {
            labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
            datasets: [{
              label: '用戶數量',
              data: [12, 19, 3, 5, 2, 3],
              borderColor: 'rgb(75, 192, 192)',
              tension: 0.1
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
              y: {
                beginAtZero: true
              }
            }
          }
        });

        // 角色分布圖表
        const roleDistributionCtx = document.getElementById('roleDistributionChart').getContext('2d');
        new Chart(roleDistributionCtx, {
          type: 'doughnut',
          data: {
            labels: ['管理者', '一般用戶'],
            datasets: [{
              data: [3, 153],
              backgroundColor: [
                'rgba(255, 99, 132, 0.8)',
                'rgba(54, 162, 235, 0.8)'
              ]
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false
          }
        });
      }

      function switchToHealthSystem() {
        window.location.href = '/dashboard.html';
      }

      function logout() {
        localStorage.removeItem('authToken');
        window.location.href = '/';
      }
    </script>
  </body>
</html>