<div class="page-header d-print-none">
  <div class="row align-items-center">
    <div class="col">
      <h2 class="page-title"><%= title %></h2>
      <div class="text-secondary mt-1">Platform insights, deal performance, and content reports</div>
    </div>
  </div>
</div>

<div class="row row-deck row-cards mb-4">
  <div class="col-sm-6 col-lg-2">
    <div class="card stat-card-primary"><div class="card-body"><div class="subheader">Companies</div><div class="h2 mb-0"><%= analytics.overview.companies %></div></div></div>
  </div>
  <div class="col-sm-6 col-lg-2">
    <div class="card stat-card-warning"><div class="card-body"><div class="subheader">Total Deals</div><div class="h2 mb-0"><%= analytics.overview.deals %></div></div></div>
  </div>
  <div class="col-sm-6 col-lg-2">
    <div class="card stat-card-success"><div class="card-body"><div class="subheader">Live Deals</div><div class="h2 mb-0"><%= analytics.overview.activeDeals %></div></div></div>
  </div>
  <div class="col-sm-6 col-lg-2">
    <div class="card stat-card-info"><div class="card-body"><div class="subheader">Flyers</div><div class="h2 mb-0"><%= analytics.overview.flyers %></div></div></div>
  </div>
  <div class="col-sm-6 col-lg-2">
    <div class="card"><div class="card-body"><div class="subheader">Jobs</div><div class="h2 mb-0"><%= analytics.overview.jobs %></div></div></div>
  </div>
  <div class="col-sm-6 col-lg-2">
    <div class="card"><div class="card-body"><div class="subheader">Classifieds</div><div class="h2 mb-0"><%= analytics.overview.classifieds %></div></div></div>
  </div>
</div>

<div class="row row-cards mb-4">
  <div class="col-lg-8">
    <div class="card">
      <div class="card-header"><h3 class="card-title">Deals by Category</h3></div>
      <div class="card-body"><canvas id="dealsByCategoryChart" height="120"></canvas></div>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="card">
      <div class="card-header"><h3 class="card-title">Deal Status</h3></div>
      <div class="card-body d-flex justify-content-center"><canvas id="dealStatusChart" height="200"></canvas></div>
    </div>
  </div>
</div>

<div class="row row-cards mb-4">
  <div class="col-lg-6">
    <div class="card">
      <div class="card-header"><h3 class="card-title">Companies by Category</h3></div>
      <div class="card-body"><canvas id="companiesByCategoryChart" height="140"></canvas></div>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="card">
      <div class="card-header"><h3 class="card-title">Monthly Activity (Last 6 Months)</h3></div>
      <div class="card-body"><canvas id="monthlyActivityChart" height="140"></canvas></div>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Reports Listing</h3>
  </div>
  <div class="table-responsive">
    <table class="table table-vcenter card-table">
      <thead>
        <tr>
          <th>Report</th>
          <th>Metric</th>
          <th>Value</th>
          <th>Detail</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <% analytics.reports.forEach(function(report) { %>
        <tr>
          <td><%= report.name %></td>
          <td><%= report.metric %></td>
          <td><strong><%= report.value %></strong></td>
          <td class="text-secondary"><%= report.detail %></td>
          <td>
            <% const trendMap = { up: 'success', down: 'danger', warning: 'warning', info: 'info', neutral: 'secondary' }; %>
            <span class="badge bg-<%= trendMap[report.trend] || 'secondary' %>"><%= report.trend %></span>
          </td>
        </tr>
        <% }); %>
      </tbody>
    </table>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
  const data = <%- chartData %>;
  const colors = {
    brand: '#9126C1',
    success: '#0E9955',
    info: '#4181ED',
    danger: '#D44235',
    warning: '#ECAD00',
    gray: '#F0F0F0',
  };

  const palette = [colors.brand, colors.info, colors.success, colors.warning, colors.danger, '#9b59b6', '#34495e', '#1abc9c'];

  Chart.defaults.font.family = 'inherit';
  Chart.defaults.color = '#000000';

  new Chart(document.getElementById('dealsByCategoryChart'), {
    type: 'bar',
    data: {
      labels: data.dealsByCategory.labels,
      datasets: [{
        label: 'Deals',
        data: data.dealsByCategory.values,
        backgroundColor: colors.brand,
        borderRadius: 6,
      }],
    },
    options: {
      responsive: true,
      plugins: { legend: { display: false } },
      scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } },
    },
  });

  new Chart(document.getElementById('dealStatusChart'), {
    type: 'doughnut',
    data: {
      labels: data.dealStatus.labels,
      datasets: [{
        data: data.dealStatus.values,
        backgroundColor: [colors.success, colors.info, colors.danger, '#6c757d'],
      }],
    },
    options: {
      responsive: true,
      plugins: { legend: { position: 'bottom' } },
    },
  });

  new Chart(document.getElementById('companiesByCategoryChart'), {
    type: 'bar',
    data: {
      labels: data.companiesByCategory.labels,
      datasets: [{
        label: 'Companies',
        data: data.companiesByCategory.values,
        backgroundColor: palette,
        borderRadius: 6,
      }],
    },
    options: {
      responsive: true,
      indexAxis: 'y',
      plugins: { legend: { display: false } },
      scales: { x: { beginAtZero: true, ticks: { stepSize: 1 } } },
    },
  });

  new Chart(document.getElementById('monthlyActivityChart'), {
    type: 'line',
    data: {
      labels: data.monthlyActivity.labels,
      datasets: [
        { label: 'Deals', data: data.monthlyActivity.deals, borderColor: colors.brand, backgroundColor: 'rgba(145,38,193,0.1)', fill: true, tension: 0.3 },
        { label: 'Companies', data: data.monthlyActivity.companies, borderColor: colors.info, backgroundColor: 'rgba(65,129,237,0.1)', fill: true, tension: 0.3 },
        { label: 'Classifieds', data: data.monthlyActivity.classifieds, borderColor: colors.success, backgroundColor: 'rgba(14,153,85,0.1)', fill: true, tension: 0.3 },
      ],
    },
    options: {
      responsive: true,
      plugins: { legend: { position: 'bottom' } },
      scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } },
    },
  });
</script>
