{% load i18n %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% trans "Visitor overview" %}</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
    <style>
      * { box-sizing: border-box; }
      body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; padding: 24px; background: #f5f5f5; }
      .overview { max-width: 900px; margin: 0 auto; }
      h1 { font-size: 1.5rem; margin: 0 0 8px; color: #333; }
      .description { color: #666; font-size: 0.9rem; margin-bottom: 16px; line-height: 1.4; }
      .grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 20px; }
      @media (max-width: 640px) { .grid { grid-template-columns: 1fr; } }
      .card { background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
      .card.summary-card { display: flex; flex-direction: column; }
      .card h2 { font-size: 1rem; margin: 0 0 16px; color: #555; font-weight: 600; }
      .summary-grid { display: flex; flex-direction: column; gap: 12px; flex: 1; }
      .summary-stat { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 10px; }
      .summary-stat.today { background: linear-gradient(135deg, rgba(100, 149, 237, 0.2), rgba(100, 149, 237, 0.08)); border: 1px solid rgba(100, 149, 237, 0.4); }
      .summary-stat.month { background: linear-gradient(135deg, rgba(102, 221, 170, 0.2), rgba(102, 221, 170, 0.08)); border: 1px solid rgba(102, 221, 170, 0.4); }
      .summary-stat.year { background: linear-gradient(135deg, rgba(255, 204, 0, 0.2), rgba(255, 204, 0, 0.08)); border: 1px solid rgba(255, 204, 0, 0.4); }
      .summary-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
      .summary-stat.today .summary-value { color: #4169e1; }
      .summary-stat.month .summary-value { color: #2d8a5e; }
      .summary-stat.year .summary-value { color: #c99700; }
      .summary-label { font-size: 0.8rem; color: #666; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
      .chart-container { position: relative; height: 280px; }
      .month-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 24px; }
      .month-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #ccc; border-radius: 6px; background: #fff; color: #333; text-decoration: none; font-size: 1.5rem; line-height: 1; transition: background 0.2s; }
      .month-nav-btn:hover { background: #f0f0f0; }
      .month-name { font-size: 1.1rem; font-weight: 600; color: #333; min-width: 140px; text-align: center; }
      .overview-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
      .overview-header h1 { margin: 0; flex: 1; }
      .header-btns { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
      .switch-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; height: 36px; border: 1px solid #ddd; border-radius: 6px; background: #fff; color: #666; text-decoration: none; font-size: 0.875rem; transition: background 0.2s, color 0.2s; }
      .switch-btn:hover { background: #f5f5f5; color: #333; }
      .refresh-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid #ddd; border-radius: 6px; background: #fff; color: #666; cursor: pointer; transition: background 0.2s, color 0.2s; }
      .refresh-btn:hover { background: #f5f5f5; color: #333; }
      .refresh-btn:disabled { opacity: 0.6; cursor: not-allowed; }
    </style>
  </head>
  <body>
    <div class="overview">
      <div class="overview-header">
        <h1>{% trans "Visitor overview" %}</h1>
        <div class="header-btns">
          <a href="{% url 'cookie_optin:overview' %}?year={{ year }}&month={{ month }}" class="switch-btn" title="{% trans 'Consent overview' %}">{% trans "Consent overview" %}</a>
          <button type="button" id="refreshBtn" class="refresh-btn" title="{% trans 'Refresh' %}" aria-label="{% trans 'Refresh' %}">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 4v6h-6"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
          </button>
        </div>
      </div>
      <p class="description">
        {% trans "Number of visitors who saw the cookie banner, by day, month and year." %}
      </p>
      <div class="month-nav">
        <a href="{{ prev_url }}" class="month-nav-btn" title="{% trans 'Previous month' %}">‹</a>
        <span class="month-name">{{ month_name|capfirst }}</span>
        <a href="{{ next_url }}" class="month-nav-btn" title="{% trans 'Next month' %}">›</a>
      </div>

      <div class="grid">
        <div class="card summary-card">
          <h2>{% trans "Summary" %}</h2>
          <div class="summary-grid">
            <div class="summary-stat today">
              <div class="summary-value">{{ today_count }}</div>
              <div class="summary-label">{% trans "Today" %}</div>
            </div>
            <div class="summary-stat month">
              <div class="summary-value">{{ month_total }}</div>
              <div class="summary-label">{% trans "This month" %}</div>
            </div>
            <div class="summary-stat year">
              <div class="summary-value">{{ year_total }}</div>
              <div class="summary-label">{% trans "This year" %} ({{ year }})</div>
            </div>
          </div>
        </div>

        <div class="card">
          <h2>{% trans "Visitors per day" %}</h2>
          <div class="chart-container">
            <canvas id="visitorChart"></canvas>
          </div>
        </div>
      </div>
    </div>

    <script>
      (function() {
        var labels = {{ chart_labels|safe }};
        var visitors = {{ chart_visitors|safe }};
        var visitorsLabel = {{ visitors_label|safe }};
        var noDataMsg = {{ no_data_msg|safe }};

        if (!labels || labels.length === 0) {
          document.getElementById('visitorChart').parentNode.innerHTML = '<p style="color:#999;padding:40px;text-align:center;">' + noDataMsg + '</p>';
        } else {
          var ctx = document.getElementById('visitorChart').getContext('2d');
          new Chart(ctx, {
            type: 'bar',
            data: {
              labels: labels,
              datasets: [{
                label: visitorsLabel,
                data: visitors,
                backgroundColor: 'rgba(100, 149, 237, 0.8)'
              }]
            },
            options: {
              responsive: true,
              maintainAspectRatio: false,
              scales: {
                x: {
                  ticks: { maxRotation: 45, minRotation: 45, maxTicksLimit: 12 }
                },
                y: {
                  beginAtZero: true,
                  ticks: { stepSize: 1 }
                }
              },
              plugins: {
                legend: { display: false }
              }
            }
          });
        }

        document.getElementById('refreshBtn').addEventListener('click', function() {
          this.disabled = true;
          location.reload();
        });
      })();
    </script>
  </body>
</html>
