<%- include('partials/header') %>
<%- include('partials/sidebar') %>

<div class="dashboard-header">
  <h1 class="text-gradient">Dashboard Geral</h1>
  <p style="color: var(--text-muted); margin-bottom: 30px;">Bem-vindo ao painel de controle da sua rádio online.</p>
</div>

<div class="dashboard-grid">
  <!-- Ouvintes -->
  <div class="card stat-card">
    <div class="stat-icon" style="color: var(--neon-blue); box-shadow: 0 0 15px rgba(0,240,255,0.2);">
      <i class="fas fa-headphones"></i>
    </div>
    <div class="stat-info">
      <h3>124</h3>
      <p>Ouvintes Online</p>
    </div>
  </div>

  <!-- Músicas -->
  <div class="card stat-card">
    <div class="stat-icon" style="color: var(--neon-purple); background: rgba(189,0,255,0.1); box-shadow: 0 0 15px rgba(189,0,255,0.2);">
      <i class="fas fa-music"></i>
    </div>
    <div class="stat-info">
      <h3>1.450</h3>
      <p>Músicas</p>
    </div>
  </div>

  <!-- Pedidos -->
  <div class="card stat-card">
    <div class="stat-icon" style="color: var(--success); background: rgba(0,255,136,0.1); box-shadow: 0 0 15px rgba(0,255,136,0.2);">
      <i class="fas fa-envelope-open-text"></i>
    </div>
    <div class="stat-info">
      <h3>12</h3>
      <p>Pedidos Hoje</p>
    </div>
  </div>

  <!-- Faturamento -->
  <div class="card stat-card">
    <div class="stat-icon" style="color: var(--danger); background: rgba(255,51,102,0.1); box-shadow: 0 0 15px rgba(255,51,102,0.2);">
      <i class="fas fa-dollar-sign"></i>
    </div>
    <div class="stat-info">
      <h3>R$ 4.200</h3>
      <p>Faturamento Mês</p>
    </div>
  </div>
</div>

<div class="dashboard-grid" style="grid-template-columns: 2fr 1fr;">
  <div class="card">
    <h3 style="margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px;">Estatísticas de Audiência</h3>
    <canvas id="audienceChart" height="250"></canvas>
  </div>
  
  <div class="card">
    <h3 style="margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px;">Últimos Pedidos</h3>
    <ul style="list-style: none; padding: 0;">
      <li style="padding: 12px 0; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center;">
        <div>
          <strong class="text-gradient">Maria Silva</strong><br>
          <small style="color: var(--text-muted)">Coldplay - Yellow</small>
        </div>
        <span style="font-size: 0.8rem; background: rgba(0,240,255,0.1); color: var(--neon-blue); padding: 4px 8px; border-radius: 4px;">Novo</span>
      </li>
      <li style="padding: 12px 0; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center;">
        <div>
          <strong class="text-gradient">João Souza</strong><br>
          <small style="color: var(--text-muted)">Alok - Hear Me Now</small>
        </div>
      </li>
    </ul>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const ctx = document.getElementById('audienceChart').getContext('2d');
  
  let gradient = ctx.createLinearGradient(0, 0, 0, 400);
  gradient.addColorStop(0, 'rgba(0, 240, 255, 0.5)');
  gradient.addColorStop(1, 'rgba(0, 240, 255, 0.0)');

  new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00'],
      datasets: [{
        label: 'Ouvintes Simultâneos',
        data: [45, 80, 150, 120, 180, 250, 210],
        borderColor: '#00f0ff',
        backgroundColor: gradient,
        borderWidth: 2,
        fill: true,
        tension: 0.4
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: { display: false }
      },
      scales: {
        y: {
          beginAtZero: true,
          grid: { color: 'rgba(255, 255, 255, 0.05)' }
        },
        x: {
          grid: { display: false }
        }
      }
    }
  });
</script>

<%- include('partials/footer') %>
