@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
  @include('layouts.navbars.auth.topnav', ['title' => ''])
  <div class="container-fluid py-4">
    <div class="row">
      <div class="col-xl-4 col-sm-6 mb-4">
        <div class="card text-white h-100" style="background-color: #fff">
          <div class="card-body d-flex align-items-center justify-content-between">
            <div>
              <p class="text-sm mb-1 text-uppercase font-weight-bold" style="color: #344767">Total Downloads</p>
              <h5 class="font-weight-bolder mb-0" id="totalDownloadsCount" style="color: #028284">
                {{ number_format($stats['total_downloads']) }}</h5>
              <small
                style="color: #67748E">{{ $stats['downloads_change'] >= 0 ? '+' : '' }}{{ $stats['downloads_change'] }}%
                since last week</small>
            </div>
            <div class="ms-3 rounded-circle d-flex align-items-center justify-content-center"
              style="width:48px;height:48px; background-color: #1de5bc">
              <i class="ni ni-cloud-download-95 text-white"></i>
            </div>
          </div>
        </div>
      </div>

      <div class="col-xl-4 col-sm-6 mb-4">
        <div class="card text-white h-100" style="background-color: #fff">
          <div class="card-body d-flex align-items-center justify-content-between">
            <div>
              <p class="text-sm mb-1 text-uppercase font-weight-bold" style="color: #344767">Total Assets</p>
              <h5 class="font-weight-bolder mb-0" id="totalAssetsCount" style="color: #028284">
                {{ number_format($stats['total_assets']) }}</h5>
              <small style="color: #67748E">Active in system</small>
            </div>
            <div class="ms-3 rounded-circle d-flex align-items-center justify-content-center"
              style="width:48px;height:48px; background-color: #1ac9e6">
              <i class="ni ni-folder-17 text-white"></i>
            </div>
          </div>
        </div>
      </div>

      <div class="col-xl-4 col-sm-6 mb-4">
        <div class="card text-white h-100" style="background-color: #fff">
          <div class="card-body d-flex align-items-center justify-content-between">
            <div>
              <p class="text-sm mb-1 text-uppercase font-weight-bold" style="color: #344767">Total Users</p>
              <h5 class="font-weight-bolder mb-0" id="totalUsersCount" style="color: #028284">
                {{ number_format($stats['total_users'] ?? 0) }}</h5>
              <small style="color: #67748E">All registered accounts</small>
            </div>
            <div class="ms-3 rounded-circle d-flex align-items-center justify-content-center"
              style="width:48px;height:48px; background-color: #176ca1">
              <i class="ni ni-circle-08 text-white"></i>
            </div>
          </div>
        </div>
      </div>


      <!-- Second Row removed: User Activity Over Time chart was removed per request -->
      <!-- Third Row: Downloads by Menu Type Chart + Top Downloaders Leaderboard -->
      <div class="row mt-4">
        <div class="col-lg-8 mb-lg-0 mb-4">
          <div class="card z-index-2 h-100 shadow-lg">
            <div class="card-header pb-0 p-3 d-flex justify-content-between align-items-center">
              <div>
                <h6 class="mb-1">Downloads by Menu Type</h6>
                <p class="text-sm mb-0 text-muted">Asset download distribution</p>
              </div>
              <div class="d-flex gap-2 align-items-center">
                <input id="downloadsStartDate" type="date" class="form-control form-control-sm" aria-label="Start date"
                  value="{{ \Carbon\Carbon::now()->startOfMonth()->toDateString() }}">
                <input id="downloadsEndDate" type="date" class="form-control form-control-sm" aria-label="End date"
                  value="{{ \Carbon\Carbon::now()->toDateString() }}">
              </div>
            </div>
            <div class="card-body p-3 position-relative">
              <div class="loading-overlay d-none" id="downloadsChartLoading">
                <div class="d-flex align-items-center justify-content-center h-100">
                  <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                  </div>
                </div>
              </div>
              <div class="chart">
                <canvas id="downloadsChart" class="chart-canvas" height="300"></canvas>
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-4 mb-lg-0 mb-4">
          <div class="card z-index-2 h-100 shadow-lg">
            <div class="card-header pb-0 p-3 d-flex justify-content-between align-items-center">
              <div>
                <h6 class="mb-1">Top Downloaders</h6>
                <p class="text-sm mb-0 text-muted">Leaderboard — top 5 users by downloads</p>
              </div>
              <div>
                <button id="refreshTopDownloadersBtn" class="btn btn-sm btn-outline-primary">Refresh</button>
              </div>
            </div>
            <div class="card-body p-3 position-relative">
              <div class="loading-overlay d-none" id="topDownloadersLoading">
                <div class="d-flex align-items-center justify-content-center h-100">
                  <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                  </div>
                </div>
              </div>

              <div id="topDownloadersList" class="mb-3">
                {{-- populated by JS --}}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Fourth Row: Recent Activity Table -->
      <div class="row mt-4">
        <div class="mb-lg-0 mb-4">
          <div class="card z-index-2 h-100 shadow-lg">
            <div class="card-header pb-0 p-3">
              <div class="d-flex justify-content-between align-items-center">
                <div>
                  <h6 class="mb-1">Activity Log</h6>
                  <p class="text-sm mb-0 text-muted">System Activities Log</p>
                </div>
                <div class="d-flex gap-2">
                  <select id="activityActionFilter" class="form-select form-select-sm"
                    style="width: auto; min-width: 100px;">
                    <option value="all">All Actions</option>
                    <option value="L">Login</option>
                    <option value="D">Download</option>
                    <option value="V">View</option>
                    <option value="C">Create</option>
                    <option value="U">Update</option>
                    <option value="X">Delete</option>
                  </select>
                  <input id="activityStartDate" type="date" class="form-control form-control-sm"
                    style="width:auto; min-width:120px;"
                    value="{{ \Carbon\Carbon::now()->startOfMonth()->toDateString() }}">
                  <input id="activityEndDate" type="date" class="form-control form-control-sm ms-2"
                    style="width:auto; min-width:120px;" value="{{ \Carbon\Carbon::now()->toDateString() }}">
                </div>
              </div>
            </div>
            <div class="card-body p-3 position-relative">
              <div class="loading-overlay d-none" id="activityTableLoading">
                <div class="d-flex align-items-center justify-content-center h-100">
                  <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                  </div>
                </div>
              </div>
              <div class="table-responsive">
                <table class="table align-items-center mb-0" id="activityTable">
                  <thead>
                    <tr>
                      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">User</th>
                      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Action</th>
                      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Time</th>
                    </tr>
                  </thead>
                  <tbody id="activityTableBody">
                    @foreach ($recentActivity as $activity)
                      <tr>
                        <td>
                          <div class="d-flex px-2 py-1">
                            {{-- <div>
                          <img
                            src="{{ $activity->username === '-' ? asset('/assets/img/guest-avatar.png') : asset('/storage/' . ($activity->image ?? 'default-avatar.png')) }}"
                            class="avatar avatar-sm me-3" alt="user">
                        </div> --}}
                            <div class="d-flex flex-column justify-content-center">
                              <h6 class="mb-0 text-sm">{{ $activity->firstname }} {{ $activity->lastname }}</h6>
                              <p class="text-xs text-secondary mb-0">{{ $activity->role_name }}</p>
                            </div>
                          </div>
                        </td>
                        <td>
                          <p class="text-xs font-weight-bold mb-0">{{ $activity->action }}</p>
                          <p class="text-xs text-secondary mb-0">{{ $activity->dmenu ?? 'System' }}</p>
                        </td>
                        <td class="align-left text-center text-sm">
                          <span
                            class="badge badge-sm bg-gradient-secondary">{{ $activity->created_at->diffForHumans() }}</span>
                        </td>
                      </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    @endsection

    @push('js')
      <script>
        // Initialize charts variables
        const baseUrl = '{{ URL::to('/') }}';
        let downloadsChart;

        // Initialize dashboard on page load
        document.addEventListener('DOMContentLoaded', function() {
          initializeDashboard();
        });

        function initializeDashboard() {
          // Initialize charts with initial data
          initializeDownloadsChart();
          initializeTopDownloaders();

          // Setup event listeners
          setupEventListeners();
          // Apply default date filters (first day of current month -> today)
          const dlStart = document.getElementById('downloadsStartDate');
          const dlEnd = document.getElementById('downloadsEndDate');
          if (dlStart && dlEnd) {
            // update downloads chart to reflect default range
            updateDownloadsChart(dlStart.value, dlEnd.value);
          }
          const actStart = document.getElementById('activityStartDate');
          const actEnd = document.getElementById('activityEndDate');
          if (actStart && actEnd) {
            // update activity table + stats to reflect default range
            updateActivityTable();
            updateStatsCards();
          }
        }


        function initializeDownloadsChart() {
          const downloadsCtx = document.getElementById("downloadsChart").getContext("2d");
          const downloadsData = @json($downloadsData);
          const downloadsLabels = downloadsData.map(item => item.dmenu);
          const downloadsCounts = downloadsData.map(item => item.count);

          // Define gradient pairs (top → bottom) using your existing colors
          const gradientPairs = [
            ['#1de5bc', '#6ef0d2'],
            ['#1cd4d4', '#1de5bc'],
            ['#1ac9e7', '#1cd4d4'],
            ['#18abdd', '#1ac9e7'],
            ['#176ca1', '#18abdd'],
          ];

          // Helper to create a gradient for a given index
          function makeGradient(ctx, index) {
            const [top, bottom] = gradientPairs[index % gradientPairs.length];
            const g = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height);
            g.addColorStop(0, top);
            g.addColorStop(1, bottom);
            return g;
          }

          downloadsChart = new Chart(downloadsCtx, {
            type: "bar",
            data: {
              labels: downloadsLabels,
              datasets: [{
                label: "Downloads",
                data: downloadsCounts,
                // Gradient background per bar
                backgroundColor: function(context) {
                  const idx = context.dataIndex;
                  return makeGradient(downloadsCtx, idx);
                },
                // Use darker bottom color as border
                borderColor: function(context) {
                  const idx = context.dataIndex;
                  const pair = gradientPairs[idx % gradientPairs.length];
                  return pair[1]; // bottom color
                },
                borderWidth: 0,
                barThickness: 24
              }]
            },
            options: {
              responsive: true,
              maintainAspectRatio: false,
              scales: {
                y: {
                  beginAtZero: true,
                  display: false
                },
                x: {
                  grid: {
                    display: false
                  },
                  ticks: {
                    maxRotation: 0
                  },
                  categoryPercentage: 0.6,
                  barPercentage: 0.5
                }
              },
              plugins: {
                legend: {
                  display: false
                }
              }
            }
          });
        }

        // Doughnut chart removed — distribution shown via Downloads bar chart only

        // Top downloaders leaderboard
        const initialTopDownloaders = @json($topDownloaders ?? []);

        function initializeTopDownloaders() {
          renderTopDownloaders(initialTopDownloaders);
          const btn = document.getElementById('refreshTopDownloadersBtn');
          if (btn) btn.addEventListener('click', updateTopDownloaders);
        }

        function renderTopDownloaders(data) {
          const container = document.getElementById('topDownloadersList');
          container.innerHTML = '';
          if (!data || data.length === 0) {
            container.innerHTML = '<p class="text-sm text-muted">No data available.</p>';
            return;
          }

          const max = Math.max(...data.map(d => d.count, 0), 1);
          data.forEach((row, idx) => {
            const percent = Math.round((row.count / max) * 100);
            const item = document.createElement('div');
            item.className = 'mb-2';
            item.innerHTML = `
            <div class="d-flex justify-content-between align-items-center">
              <div class="d-flex align-items-center gap-2"><span class="badge bg-gradient-primary">#${idx+1}</span><strong class="text-sm">${row.name}</strong></div>
              <div class="text-sm text-muted">${row.count}</div>
            </div>
            <div class="progress mt-1" style="height:8px;">
              <div class="progress-bar bg-primary" role="progressbar" style="width:${percent}%" aria-valuenow="${percent}" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          `;
            container.appendChild(item);
          });
        }

        function updateTopDownloaders() {
          const loading = document.getElementById('topDownloadersLoading');
          loading.classList.remove('d-none');
          fetch(baseUrl + '/dashboard/top-downloaders-data')
            .then(response => {
              if (!response.ok) throw new Error('Network response was not ok');
              return response.json();
            })
            .then(data => {
              renderTopDownloaders(data);
            })
            .catch(error => {
              console.error('Error updating top downloaders:', error);
            })
            .finally(() => loading.classList.add('d-none'));
        }

        function setupEventListeners() {
          // Filter event listeners
          // visitors/period filter removed
          const dlStart = document.getElementById('downloadsStartDate');
          const dlEnd = document.getElementById('downloadsEndDate');
          if (dlStart) dlStart.addEventListener('change', function() {
            updateDownloadsChart(dlStart.value, dlEnd ? dlEnd.value : '');
          });
          if (dlEnd) dlEnd.addEventListener('change', function() {
            updateDownloadsChart(dlStart ? dlStart.value : '', dlEnd.value);
          });
          const activityActionEl = document.getElementById('activityActionFilter');
          if (activityActionEl) activityActionEl.addEventListener('change', handleActivityFilterChange);
          const actStart = document.getElementById('activityStartDate');
          const actEnd = document.getElementById('activityEndDate');
          if (actStart) actStart.addEventListener('change', handleActivityFilterChange);
          if (actEnd) actEnd.addEventListener('change', handleActivityFilterChange);
        }



        function handleActivityFilterChange() {
          updateActivityTable();
          updateStatsCards();
        }

        /* Visitors chart update removed */

        function updateDownloadsChart(startDate = '', endDate = '') {
          const loadingOverlay = document.getElementById('downloadsChartLoading');
          loadingOverlay.classList.remove('d-none');

          const params = new URLSearchParams();
          if (startDate) params.set('start_date', startDate);
          if (endDate) params.set('end_date', endDate);
          const url = baseUrl + '/dashboard/downloads-data' + (params.toString() ? ('?' + params.toString()) : '');
          fetch(url)
            .then(response => {
              if (!response.ok) {
                throw new Error('Network response was not ok');
              }
              return response.json();
            })
            .then(data => {
              downloadsChart.data.labels = data.map(item => item.dmenu);
              downloadsChart.data.datasets[0].data = data.map(item => item.count);
              downloadsChart.update();
              // update leaderboard
              updateTopDownloaders();
            })
            .catch(error => {
              console.error('Error updating downloads chart:', error);
            })
            .finally(() => {
              loadingOverlay.classList.add('d-none');
            });
        }

        function updateActivityTable() {
          const action = document.getElementById('activityActionFilter').value;
          const start = document.getElementById('activityStartDate') ? document.getElementById('activityStartDate').value :
            '';
          const end = document.getElementById('activityEndDate') ? document.getElementById('activityEndDate').value : '';

          const loadingOverlay = document.getElementById('activityTableLoading');
          loadingOverlay.classList.remove('d-none');

          const params = new URLSearchParams();
          params.set('activity_action', action);
          if (start) params.set('start_date', start);
          if (end) params.set('end_date', end);
          fetch(baseUrl + '/dashboard/activity-data?' + params.toString())
            .then(response => {
              if (!response.ok) {
                throw new Error('Network response was not ok');
              }
              return response.json();
            })
            .then(data => {
              const tbody = document.getElementById('activityTableBody');
              tbody.innerHTML = '';

              data.forEach(activity => {
                const row = document.createElement('tr');
                const imageSrc = activity.username === '-' ? baseUrl + '/assets/img/guest-avatar.png' : baseUrl +
                  '/storage/' + (activity
                    .image || 'default-avatar.png');
                const timeAgo = moment(activity.created_at).fromNow();

                row.innerHTML = `
                        <td>
                            <div class="d-flex px-2 py-1">
                                <div>
                                    <img src="${imageSrc}" class="avatar avatar-sm me-3" alt="user">
                                </div>
                                <div class="d-flex flex-column justify-content-center">
                                    <h6 class="mb-0 text-sm">${activity.firstname} ${activity.lastname}</h6>
                                    <p class="text-xs text-secondary mb-0">${activity.role_name}</p>
                                </div>
                            </div>
                        </td>
                        <td>
                            <p class="text-xs font-weight-bold mb-0">${activity.action}</p>
                            <p class="text-xs text-secondary mb-0">${activity.dmenu || 'System'}</p>
                        </td>
                        <td class="align-middle text-center text-sm">
                            <span class="badge badge-sm bg-gradient-secondary">${timeAgo}</span>
                        </td>
                    `;
                tbody.appendChild(row);
              });
            })
            .catch(error => {
              console.error('Error updating activity table:', error);
              const tbody = document.getElementById('activityTableBody');
              tbody.innerHTML =
                '<tr><td colspan="3" class="text-center text-danger">Error loading activity data. Please try again.</td></tr>';
            })
            .finally(() => {
              loadingOverlay.classList.add('d-none');
            });
        }

        function updateStatsCards() {
          fetch(baseUrl + '/dashboard/stats-data')
            .then(response => {
              if (!response.ok) {
                throw new Error('Network response was not ok');
              }
              return response.json();
            })
            .then(data => {
              // Update the stats cards with new data
              const totalDownloadsEl = document.getElementById('totalDownloadsCount');
              if (totalDownloadsEl) totalDownloadsEl.textContent = number_format(data.total_downloads);
              const totalAssetsEl = document.getElementById('totalAssetsCount');
              if (totalAssetsEl) totalAssetsEl.textContent = number_format(data.total_assets);
              // New stats
              const usersEl = document.getElementById('totalUsersCount');
              if (usersEl) usersEl.textContent = number_format(data.total_users || 0);

              // Update downloads change percentage
              const downloadsChangeElement = document.querySelector('#totalDownloadsCount').closest('.card-body')
                .querySelector('.text-success, .text-danger');
              if (downloadsChangeElement) {
                downloadsChangeElement.className = data.downloads_change >= 0 ? 'text-success text-sm font-weight-bolder' :
                  'text-danger text-sm font-weight-bolder';
              }

              // Add animation to show update
              const cards = ['totalDownloadsCount', 'totalAssetsCount', 'totalUsersCount'];
              cards.forEach(cardId => {
                const element = document.getElementById(cardId);
                if (element) {
                  element.style.animation = 'pulse 0.5s ease-in-out';
                  setTimeout(() => {
                    element.style.animation = '';
                  }, 500);
                }
              });
            })
            .catch(error => {
              console.error('Error updating stats cards:', error);
            });
        }

        function refreshDashboard() {
          const btn = document.getElementById('refreshDashboardBtn');
          let originalText = '';
          if (btn) {
            originalText = btn.innerHTML;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Refreshing...';
            btn.disabled = true;
          }

          // Refresh all data
          Promise.all([
            updateDownloadsChart(),
            updateActivityTable(),
            updateStatsCards(),
            updateTopDownloaders()
          ]).finally(() => {
            if (btn) {
              btn.innerHTML = originalText;
              btn.disabled = false;
            }
          });
        }

        function number_format(number) {
          return new Intl.NumberFormat().format(number);
        }
      </script>
    @endpush