{% extends 'dashboard/base.html' %}
{% load humanize %}

{% block title %}Traffic Analytics - Peza API{% endblock %}
{% block breadcrumb %}Traffic Analytics{% endblock %}

{% block content %}
<main class="mx-auto px-4 py-6">
  <!-- Header with stats cards -->
  <div class="mb-6">
    <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
      <div>
        <h1 class="text-2xl font-bold text-gray-900">Traffic Analytics</h1>
        <p class="text-gray-600 mt-1">Session-based insights and real-time visitor tracking across all connected websites</p>
      </div>
      <div class="flex items-center gap-3 flex-wrap sm:justify-end">
        <div class="px-4 py-2 bg-blue-50 border border-blue-100 rounded-lg">
          <div class="text-sm text-blue-600">Live Sessions</div>
          <div class="font-semibold text-blue-900">{{ live_visitors|intcomma }}</div>
        </div>
        <form method="get" class="flex items-center gap-2">
          <select name="site_id" class="px-3 py-2 bg-white border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" onchange="this.form.submit()">
            {% for site in tracking_sites %}
              <option value="{{ site.id }}" {% if selected_site and selected_site.id == site.id %}selected{% endif %}>
                {{ site.name }}{% if site.domain %} ({{ site.domain }}){% endif %}
              </option>
            {% endfor %}
          </select>
        </form>
      </div>
    </div>
  </div>

  <!-- Tabs -->
  <div class="mb-6 flex flex-wrap gap-2">
    <button type="button" class="tab-btn rounded-lg bg-slate-900 px-3 py-2 text-xs font-semibold text-white" data-tab="overview">Overview</button>
    <button type="button" class="tab-btn rounded-lg border border-gray-200 px-3 py-2 text-xs font-semibold text-gray-700" data-tab="audience">Audience</button>
    <button type="button" class="tab-btn rounded-lg border border-gray-200 px-3 py-2 text-xs font-semibold text-gray-700" data-tab="acquisition">Acquisition</button>
    <button type="button" class="tab-btn rounded-lg border border-gray-200 px-3 py-2 text-xs font-semibold text-gray-700" data-tab="behavior">Behavior</button>
    <button type="button" class="tab-btn rounded-lg border border-gray-200 px-3 py-2 text-xs font-semibold text-gray-700" data-tab="technology">Technology</button>
    <button type="button" class="tab-btn rounded-lg border border-gray-200 px-3 py-2 text-xs font-semibold text-gray-700" data-tab="api">API</button>
  </div>

  <div id="tab-overview" class="tab-panel">
  <!-- Main Stats Grid -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2 space-y-6">
      <!-- Key Metrics Cards -->
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <!-- Sessions Today -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
          <div class="flex items-center justify-between mb-2">
            <div class="p-2 bg-blue-100 rounded-lg">
              <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12h4l3 8 4-16 3 8h4"/>
              </svg>
            </div>
            <span class="text-xs font-medium text-gray-400">Last 24h</span>
          </div>
          <div class="text-2xl font-bold text-gray-900">{{ visits_today|intcomma }}</div>
          <div class="text-sm text-gray-500 mt-1">Sessions Today</div>
        </div>

        <!-- Sessions This Week -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
          <div class="flex items-center justify-between mb-2">
            <div class="p-2 bg-green-100 rounded-lg">
              <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 17l4-4 4 4 8-8"/>
              </svg>
            </div>
            <span class="text-xs font-medium text-gray-400">Last 7 days</span>
          </div>
          <div class="text-2xl font-bold text-gray-900">{{ visits_week|intcomma }}</div>
          <div class="text-sm text-gray-500 mt-1">Sessions This Week</div>
        </div>

        <!-- Avg Pages/Session -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
          <div class="flex items-center justify-between mb-2">
            <div class="p-2 bg-purple-100 rounded-lg">
              <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
              </svg>
            </div>
          </div>
          <div class="text-2xl font-bold text-gray-900">{{ avg_pages_per_session }}</div>
          <div class="text-sm text-gray-500 mt-1">Avg Pages / Session</div>
        </div>

        <!-- Bounce Rate -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
          <div class="flex items-center justify-between mb-2">
            <div class="p-2 bg-yellow-100 rounded-lg">
              <svg class="w-5 h-5 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
              </svg>
            </div>
          </div>
          <div class="text-2xl font-bold text-gray-900">{{ bounce_rate }}%</div>
          <div class="text-sm text-gray-500 mt-1">Bounce Rate</div>
        </div>

        <!-- Avg Session Duration -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 sm:col-span-2">
          <div class="flex items-center justify-between mb-2">
            <div class="p-2 bg-indigo-100 rounded-lg">
              <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
            </div>
          </div>
          <div class="text-2xl font-bold text-gray-900">{{ avg_session_duration }}s</div>
          <div class="text-sm text-gray-500 mt-1">Average Session Duration</div>
        </div>
      </div>

      <!-- Charts Section -->
      <div class="grid grid-cols-1 gap-6">
        <!-- Sessions Over Time Chart -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-900 flex items-center">
              <svg class="w-5 h-5 text-blue-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
              </svg>
              Sessions Over Time
            </h3>
            <span class="text-sm text-gray-500">Last 7 days</span>
          </div>
          <div class="chart-box h-48 max-h-48">
            <canvas id="visitorsChart" class="w-full h-full"></canvas>
          </div>
        </div>
      </div>

      <!-- Top Pages & Active Sessions Grid -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Top Pages -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
          <div class="border-b border-gray-200 px-6 py-4">
            <h3 class="text-lg font-semibold text-gray-900 flex items-center">
              <svg class="w-5 h-5 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9.5a2.5 2.5 0 00-2.5-2.5H15"/>
              </svg>
              Top Pages
            </h3>
          </div>
          <div class="p-6">
            {% if top_pages %}
              <div class="space-y-3">
                {% for item in top_pages %}
                <div class="flex items-center justify-between">
                  <div class="flex-1 mr-4">
                    <div class="text-sm text-gray-900 truncate">{{ item.page_url }}</div>
                  </div>
                  <span class="text-sm font-semibold text-gray-900">{{ item.total|intcomma }}</span>
                </div>
                {% endfor %}
              </div>
            {% else %}
              <div class="text-center py-8">
                <svg class="w-12 h-12 mx-auto text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9.5a2.5 2.5 0 00-2.5-2.5H15"/>
                </svg>
                <p class="text-sm text-gray-500">No page data yet</p>
              </div>
            {% endif %}
          </div>
        </div>

        <!-- Active Sessions -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
          <div class="border-b border-gray-200 px-6 py-4">
            <h3 class="text-lg font-semibold text-gray-900 flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6l4 2"/>
              </svg>
              Active Sessions
              <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                Last 60s
              </span>
            </h3>
          </div>
          <div class="p-6">
            {% if active_sessions %}
              <div class="space-y-3">
                {% for item in active_sessions %}
                <div class="p-3 bg-gray-50 rounded-lg border border-gray-100">
                  <div class="flex items-center justify-between mb-1">
                    <span class="text-xs font-medium text-gray-500">{{ item.device_type|default:"unknown" }}</span>
                    <span class="text-xs text-gray-400">{{ item.last_seen|date:"H:i:s" }}</span>
                  </div>
                  <div class="text-sm text-gray-700 truncate">{{ item.page_url }}</div>
                  <div class="text-xs text-gray-400 mt-1">{{ item.ip_address|default:"—" }}</div>
                </div>
                {% endfor %}
              </div>
            {% else %}
              <div class="text-center py-8">
                <svg class="w-12 h-12 mx-auto text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <p class="text-sm text-gray-500">No active sessions</p>
              </div>
            {% endif %}
          </div>
        </div>
      </div>

      <!-- Device & Country Breakdown -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Device Breakdown -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
          <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
            <svg class="w-5 h-5 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9h14M5 15h14M6 3h12a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V5a2 2 0 012-2z"/>
            </svg>
            Device Breakdown
          </h3>
          {% if devices %}
            <div class="chart-box h-48 max-h-48">
              <canvas id="deviceChart" class="w-full h-full"></canvas>
            </div>
          {% else %}
            <div class="text-center py-8">
              <p class="text-sm text-gray-500">No device data yet</p>
            </div>
          {% endif %}
        </div>

        <!-- Top Countries -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
          <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
            <svg class="w-5 h-5 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            Top Countries
          </h3>
          {% if countries %}
            <div class="space-y-3">
              {% for item in countries %}
              <div class="flex items-center justify-between">
                <span class="text-sm text-gray-600">{{ item.country|default:"Unknown" }}</span>
                <span class="text-sm font-semibold text-gray-900">{{ item.total|intcomma }}</span>
              </div>
              {% endfor %}
            </div>
          {% else %}
            <div class="text-center py-8">
              <p class="text-sm text-gray-500">No location data yet</p>
            </div>
          {% endif %}
        </div>
      </div>

      <!-- Recent Sessions Table -->
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="border-b border-gray-200 px-6 py-4">
          <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <h3 class="text-lg font-semibold text-gray-900 flex items-center">
              <svg class="w-5 h-5 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
              Recent Sessions
            </h3>
            <a href="{% url 'traffic-analytics-export' %}?site_id={{ selected_site.id }}&range={{ range_key }}{% if start_param %}&start={{ start_param }}{% endif %}{% if end_param %}&end={{ end_param }}{% endif %}{% if selected_host %}&host={{ selected_host }}{% endif %}" 
               class="inline-flex items-center px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-200 transition-colors">
              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
              </svg>
              Export CSV
            </a>
          </div>
        </div>
        
        <div class="overflow-x-auto">
          <table class="w-full">
            <thead class="bg-gray-50 border-b border-gray-200">
              <tr class="text-xs text-gray-500 uppercase">
                <th class="px-6 py-3 text-left font-medium">Session</th>
                <th class="px-6 py-3 text-left font-medium">Last Seen</th>
                <th class="px-6 py-3 text-left font-medium">Pageviews</th>
                <th class="px-6 py-3 text-left font-medium">Pages</th>
                <th class="px-6 py-3 text-right font-medium">Actions</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
              {% for s in sessions %}
              <tr class="hover:bg-gray-50 transition-colors">
                <td class="px-6 py-4">
                  <div class="flex items-center">
                    <div class="p-2 bg-gray-100 rounded-lg mr-3">
                      <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                      </svg>
                    </div>
                    <div>
                      <div class="text-sm font-medium text-gray-900">Session {{ forloop.counter }}</div>
                    </div>
                  </div>
                </td>
                <td class="px-6 py-4">
                  <div class="text-sm text-gray-900">{{ s.last_seen|date:"M d, H:i" }}</div>
                </td>
                <td class="px-6 py-4">
                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                    {{ s.total }}
                  </span>
                </td>
                <td class="px-6 py-4">
                  <div class="text-sm text-gray-600">
                    {% for url in s.pages|slice:":2" %}
                    <div class="truncate max-w-xs">{{ url }}</div>
                    {% endfor %}
                    {% if s.pages|length > 2 %}
                    <div class="text-xs text-gray-400 mt-1">+{{ s.pages|length|add:"-2" }} more</div>
                    {% endif %}
                  </div>
                </td>
                <td class="px-6 py-4 text-right">
                  <button type="button" 
                          class="p-1.5 text-gray-400 hover:text-blue-600 transition-colors" 
                          data-session-id="{{ s.session_id }}" 
                          onclick="openSessionModal(this)"
                          title="View Details">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                    </svg>
                  </button>
                </td>
              </tr>
              {% empty %}
              <tr>
                <td colspan="5" class="px-6 py-12 text-center">
                  <div class="text-gray-400">
                    <svg class="w-12 h-12 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <p class="text-gray-500">No session data found</p>
                    <p class="text-sm text-gray-400 mt-1">Start tracking to see visitor sessions</p>
                  </div>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- Sidebar -->
    <aside class="space-y-6">
      <!-- Tracker Installation Card -->
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="border-b border-gray-200 px-6 py-4">
          <h4 class="text-sm font-medium text-gray-700 flex items-center">
            <svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
            </svg>
            Tracker Installation
          </h4>
        </div>
        <div class="p-6">
          <p class="text-xs text-gray-500 mb-3">Paste this snippet into the <code class="text-blue-600">&lt;head&gt;</code> of your site:</p>
          <pre id="script-snippet" class="text-xs bg-gray-900 text-green-300 p-3 rounded-lg overflow-x-auto">{{ script_snippet }}</pre>
          <button type="button" 
                  class="mt-3 w-full px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-200 transition-colors flex items-center justify-center"
                  onclick="copyToClipboard(document.getElementById('script-snippet').textContent)">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
            </svg>
            Copy Snippet
          </button>
        </div>
      </div>

      <!-- Website Keys Management -->
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="border-b border-gray-200 px-6 py-4">
          <div class="flex flex-col gap-3">
            <h4 class="text-sm font-medium text-gray-700 flex items-center">
              <svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
              </svg>
              Website Keys
            </h4>
            <form method="post" class="flex flex-col gap-2">
              {% csrf_token %}
              <input type="hidden" name="action" value="create_site">
              <input type="text" name="site_name" placeholder="Website name" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
              <input type="text" name="site_domain" placeholder="example.com" class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
              <button type="submit" class="w-full px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors" {% if not can_add_site %}disabled class="opacity-60 cursor-not-allowed"{% endif %}>
                Add Website
              </button>
            </form>
            {% if not can_add_site %}
            <div class="bg-yellow-50 border border-yellow-200 text-yellow-800 px-3 py-2 rounded-lg text-xs">
              Free accounts can track only 1 website. Subscribe to add more.
            </div>
            {% endif %}
          </div>
        </div>
        
        <div class="p-6">
          <div class="space-y-3 max-h-96 overflow-y-auto">
            {% for site in tracking_sites %}
            <div class="p-3 bg-gray-50 rounded-lg border border-gray-100">
              <div class="flex items-center justify-between mb-2">
                <span class="text-sm font-medium text-gray-900">{{ site.name }}</span>
                <form method="post" onsubmit="return confirm('Delete this website key?');" class="inline">
                  {% csrf_token %}
                  <input type="hidden" name="action" value="delete_site">
                  <input type="hidden" name="site_id" value="{{ site.id }}">
                  <button type="submit" class="text-xs text-red-600 hover:text-red-700">Delete</button>
                </form>
              </div>
              <div class="text-xs text-gray-500 mb-2">{{ site.domain|default:"No domain set" }}</div>
              <div class="flex items-center justify-between">
                <code class="text-xs font-mono bg-gray-100 px-2 py-1 rounded">{{ site.key|slice:":8" }}...{{ site.key|slice:"-4:" }}</code>
                <button type="button" class="text-xs text-blue-600 hover:text-blue-700" onclick="copyToClipboard('{{ site.key }}')">Copy</button>
              </div>
            </div>
            {% empty %}
            <div class="text-center py-6">
              <p class="text-sm text-gray-500">No websites added yet</p>
              <p class="text-xs text-gray-400 mt-1">Add your first website to start tracking</p>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>

      <!-- Top Referrers -->
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="border-b border-gray-200 px-6 py-4">
          <h4 class="text-sm font-medium text-gray-700 flex items-center">
            <svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
            </svg>
            Top Referrers
          </h4>
        </div>
        <div class="p-6">
          {% if top_referrers %}
            <div class="space-y-3">
              {% for item in top_referrers %}
              <div class="flex items-center justify-between">
                <span class="text-sm text-gray-600 truncate max-w-[150px]">{{ item.referrer }}</span>
                <span class="text-sm font-semibold text-gray-900">{{ item.total|intcomma }}</span>
              </div>
              {% endfor %}
            </div>
          {% else %}
            <div class="text-center py-6">
              <p class="text-sm text-gray-500">No referrer data yet</p>
            </div>
          {% endif %}
        </div>
      </div>

      <!-- Quick Actions -->
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <h4 class="text-sm font-medium text-gray-700 mb-4 flex items-center">
          <svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
          </svg>
          Quick Actions
        </h4>
        <div class="space-y-3">
          <a href="{% url 'developer-dashboard' %}" class="flex items-center text-sm text-gray-600 hover:text-gray-700 p-2 hover:bg-gray-50 rounded-lg transition-colors">
            <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
            </svg>
            Dashboard Home
          </a>
          <a href="{% url 'api-keys-management' %}" class="flex items-center text-sm text-gray-600 hover:text-gray-700 p-2 hover:bg-gray-50 rounded-lg transition-colors">
            <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
            </svg>
            Manage API Keys
          </a>
          <a href="{% url 'api-documentation' %}" class="flex items-center text-sm text-gray-600 hover:text-gray-700 p-2 hover:bg-gray-50 rounded-lg transition-colors">
            <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
            </svg>
            Documentation
          </a>
        </div>
      </div>
    </aside>
  </div>
  </div>

  <div id="tab-audience" class="tab-panel hidden">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="text-xs text-gray-500">Unique Visitors</div>
        <div class="text-2xl font-bold text-gray-900 mt-1">{{ unique_visitors|intcomma }}</div>
      </div>
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="text-xs text-gray-500">New Visitors</div>
        <div class="text-2xl font-bold text-gray-900 mt-1">{{ new_visitors|intcomma }}</div>
      </div>
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="text-xs text-gray-500">Returning Visitors</div>
        <div class="text-2xl font-bold text-gray-900 mt-1">{{ returning_visitors|intcomma }}</div>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Top Countries</h3>
        {% if countries %}
          <div class="space-y-3">
            {% for item in countries %}
            <div class="flex items-center justify-between">
              <span class="text-sm text-gray-600">{{ item.country|default:"Unknown" }}</span>
              <span class="text-sm font-semibold text-gray-900">{{ item.total|intcomma }}</span>
            </div>
            {% endfor %}
          </div>
        {% else %}
          <div class="text-sm text-gray-500">No location data yet</div>
        {% endif %}
      </div>
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Languages</h3>
        {% if languages %}
          <div class="space-y-2 text-sm">
            {% for item in languages %}
            <div class="flex items-center justify-between">
              <span class="text-gray-700">{{ item.language }}</span>
              <span class="font-semibold text-gray-900">{{ item.total|intcomma }}</span>
            </div>
            {% endfor %}
          </div>
        {% else %}
          <div class="text-sm text-gray-500">No language data yet</div>
        {% endif %}
      </div>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Timezones</h3>
        {% if timezones %}
          <div class="space-y-2 text-sm">
            {% for item in timezones %}
            <div class="flex items-center justify-between">
              <span class="text-gray-700">{{ item.timezone }}</span>
              <span class="font-semibold text-gray-900">{{ item.total|intcomma }}</span>
            </div>
            {% endfor %}
          </div>
        {% else %}
          <div class="text-sm text-gray-500">No timezone data yet</div>
        {% endif %}
      </div>
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Screen Sizes</h3>
        {% if screen_sizes %}
          <div class="space-y-2 text-sm">
            {% for item in screen_sizes %}
            <div class="flex items-center justify-between">
              <span class="text-gray-700">{{ item.screen_width }}x{{ item.screen_height }}</span>
              <span class="font-semibold text-gray-900">{{ item.total|intcomma }}</span>
            </div>
            {% endfor %}
          </div>
        {% else %}
          <div class="text-sm text-gray-500">No screen data yet</div>
        {% endif %}
      </div>
    </div>
  </div>

  <div id="tab-acquisition" class="tab-panel hidden">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Traffic Sources</h3>
        {% if sources %}
          <div class="space-y-2 text-sm">
            {% for item in sources %}
            <div class="flex items-center justify-between">
              <span class="text-gray-700">{{ item.traffic_source|title }}</span>
              <span class="font-semibold text-gray-900">{{ item.total|intcomma }}</span>
            </div>
            {% endfor %}
          </div>
        {% else %}
          <div class="text-sm text-gray-500">No source data yet</div>
        {% endif %}
      </div>
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Top Referrers</h3>
        {% if top_referrers %}
          <div class="space-y-2 text-sm">
            {% for item in top_referrers %}
            <div class="flex items-center justify-between">
              <span class="text-gray-700 truncate max-w-xs">{{ item.referrer }}</span>
              <span class="font-semibold text-gray-900">{{ item.total|intcomma }}</span>
            </div>
            {% endfor %}
          </div>
        {% else %}
          <div class="text-sm text-gray-500">No referrers yet</div>
        {% endif %}
      </div>
    </div>
  </div>

  <div id="tab-behavior" class="tab-panel hidden">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="text-xs text-gray-500">Avg Time on Page</div>
        <div class="text-2xl font-bold text-gray-900 mt-1">{{ avg_time_on_page }}s</div>
      </div>
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="text-xs text-gray-500">Avg Scroll Depth</div>
        <div class="text-2xl font-bold text-gray-900 mt-1">{{ avg_scroll_depth }}%</div>
      </div>
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="text-xs text-gray-500">Avg Load Time</div>
        <div class="text-2xl font-bold text-gray-900 mt-1">{{ avg_load_time }}s</div>
      </div>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Pages per Session</h3>
        <div class="chart-box h-48 max-h-48">
          <canvas id="pagesPerSessionChart" class="w-full h-full"></canvas>
        </div>
      </div>
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Peak Hours</h3>
        <div class="chart-box h-48 max-h-48">
          <canvas id="peakHoursChart" class="w-full h-full"></canvas>
        </div>
      </div>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Top Entry Pages</h3>
        {% if top_entry_pages %}
          <div class="space-y-2 text-sm">
            {% for item in top_entry_pages %}
            <div class="flex items-center justify-between">
              <span class="text-gray-700 truncate max-w-xs">{{ item.page_url }}</span>
              <span class="font-semibold text-gray-900">{{ item.total|intcomma }}</span>
            </div>
            {% endfor %}
          </div>
        {% else %}
          <div class="text-sm text-gray-500">No entry page data yet</div>
        {% endif %}
      </div>
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Top Exit Pages</h3>
        {% if top_exit_pages %}
          <div class="space-y-2 text-sm">
            {% for item in top_exit_pages %}
            <div class="flex items-center justify-between">
              <span class="text-gray-700 truncate max-w-xs">{{ item.page_url }}</span>
              <span class="font-semibold text-gray-900">{{ item.total|intcomma }}</span>
            </div>
            {% endfor %}
          </div>
        {% else %}
          <div class="text-sm text-gray-500">No exit page data yet</div>
        {% endif %}
      </div>
    </div>
  </div>

  <div id="tab-technology" class="tab-panel hidden">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Device Breakdown</h3>
        {% if devices %}
          <div class="chart-box h-48 max-h-48">
            <canvas id="deviceChartTech" class="w-full h-full"></canvas>
          </div>
        {% else %}
          <div class="text-sm text-gray-500">No device data yet</div>
        {% endif %}
      </div>
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Browsers</h3>
        {% if browsers %}
          <div class="space-y-2 text-sm">
            {% for item in browsers %}
            <div class="flex items-center justify-between">
              <span class="text-gray-700">{{ item.browser|title }}</span>
              <span class="font-semibold text-gray-900">{{ item.total|intcomma }}</span>
            </div>
            {% endfor %}
          </div>
        {% else %}
          <div class="text-sm text-gray-500">No browser data yet</div>
        {% endif %}
      </div>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Operating Systems</h3>
        {% if os_list %}
          <div class="space-y-2 text-sm">
            {% for item in os_list %}
            <div class="flex items-center justify-between">
              <span class="text-gray-700">{{ item.os|title }}</span>
              <span class="font-semibold text-gray-900">{{ item.total|intcomma }}</span>
            </div>
            {% endfor %}
          </div>
        {% else %}
          <div class="text-sm text-gray-500">No OS data yet</div>
        {% endif %}
      </div>
      <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Performance</h3>
        <div class="text-xs text-gray-500">Average Page Load</div>
        <div class="text-2xl font-bold text-gray-900 mt-1">{{ avg_load_time }}s</div>
      </div>
    </div>
  </div>

  <div id="tab-api" class="tab-panel hidden">
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
      <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h2 class="text-lg font-semibold text-gray-900">Build On Your Data</h2>
          <p class="text-sm text-gray-500">Use the Analytics API to power your own dashboards, alerts, and BI tools.</p>
        </div>
        <div class="flex gap-2">
          <a href="{% url 'api-documentation' %}" class="px-3 py-2 rounded-lg bg-gray-100 text-sm text-gray-700 hover:bg-gray-200">View Docs</a>
          <button type="button" class="px-3 py-2 rounded-lg bg-blue-600 text-sm text-white hover:bg-blue-700" onclick="copyToClipboard(document.getElementById('api-snippet-curl').textContent)">Copy cURL</button>
        </div>
      </div>
      <div class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-4">
        <div>
          <div class="text-xs text-gray-500 mb-2">cURL</div>
          <pre id="api-snippet-curl" class="text-xs bg-gray-900 text-green-300 p-3 rounded-lg overflow-x-auto">curl -H "X-API-KEY: YOUR_API_KEY" \
{{ request.scheme }}://{{ request.get_host }}/api/analytics/overview/?site_id={{ selected_site.id }}&range=7</pre>
        </div>
        <div>
          <div class="text-xs text-gray-500 mb-2">JavaScript (fetch)</div>
          <pre class="text-xs bg-gray-900 text-green-300 p-3 rounded-lg overflow-x-auto">fetch("{{ request.scheme }}://{{ request.get_host }}/api/analytics/overview/?site_id={{ selected_site.id }}&range=7", {
  headers: { "X-API-KEY": "YOUR_API_KEY" }
}).then(r => r.json()).then(console.log);</pre>
        </div>
        <div>
          <div class="text-xs text-gray-500 mb-2">Python (requests)</div>
          <pre class="text-xs bg-gray-900 text-green-300 p-3 rounded-lg overflow-x-auto">import requests

url = "{{ request.scheme }}://{{ request.get_host }}/api/analytics/overview/?site_id={{ selected_site.id }}&range=7"
headers = {"X-API-KEY": "YOUR_API_KEY"}
print(requests.get(url, headers=headers).json())</pre>
        </div>
        <div>
          <div class="text-xs text-gray-500 mb-2">PHP (cURL)</div>
          <pre class="text-xs bg-gray-900 text-green-300 p-3 rounded-lg overflow-x-auto">$ch = curl_init("{{ request.scheme }}://{{ request.get_host }}/api/analytics/overview/?site_id={{ selected_site.id }}&range=7");
curl_setopt($ch, CURLOPT_HTTPHEADER, ["X-API-KEY: YOUR_API_KEY"]);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$data = curl_exec($ch);
curl_close($ch);
echo $data;</pre>
        </div>
        <div>
          <div class="text-xs text-gray-500 mb-2">Node.js (axios)</div>
          <pre class="text-xs bg-gray-900 text-green-300 p-3 rounded-lg overflow-x-auto">import axios from "axios";

const url = "{{ request.scheme }}://{{ request.get_host }}/api/analytics/overview/?site_id={{ selected_site.id }}&range=7";
const res = await axios.get(url, { headers: { "X-API-KEY": "YOUR_API_KEY" } });
console.log(res.data);</pre>
        </div>
      </div>
    </div>
  </div>
</main>

<!-- Session Details Modal -->
<div id="session-modal" class="fixed inset-0 z-50 hidden">
  <div class="absolute inset-0 bg-black/50" onclick="closeSessionModal()"></div>
  <div class="relative mx-auto mt-16 w-[92%] max-w-2xl rounded-xl bg-white shadow-xl">
    <div class="flex items-center justify-between border-b border-gray-200 px-6 py-4">
      <div>
        <div class="text-xs text-gray-500 uppercase tracking-wide">Session Details</div>
        <div id="session-modal-title" class="text-lg font-semibold text-gray-900">Session</div>
      </div>
      <button type="button" class="text-gray-400 hover:text-gray-600" onclick="closeSessionModal()">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
        </svg>
      </button>
    </div>
    <div id="session-modal-body" class="px-6 py-4 max-h-[70vh] overflow-y-auto"></div>
  </div>
</div>

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Sessions Chart
const visitorsCtx = document.getElementById('visitorsChart');
if (visitorsCtx) {
  new Chart(visitorsCtx, {
    type: 'line',
    data: {
      labels: {{ visitors_labels|safe }},
      datasets: [{
        label: 'Sessions',
        data: {{ visitors_data|safe }},
        borderColor: '#3B82F6',
        backgroundColor: 'rgba(59, 130, 246, 0.08)',
        borderWidth: 2,
        fill: true,
        tension: 0.4,
        pointBackgroundColor: '#3B82F6',
        pointBorderColor: '#fff',
        pointBorderWidth: 2,
        pointRadius: 4
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: { display: false }
      },
      scales: {
        y: {
          beginAtZero: true,
          grid: { borderDash: [2], color: '#f3f4f6' },
          ticks: { font: { size: 11 } }
        },
        x: {
          grid: { display: false },
          ticks: { font: { size: 11 } }
        }
      }
    }
  });
}

// Device Chart
const deviceCanvas = document.getElementById('deviceChart');
if (deviceCanvas) {
  const labels = [{% for item in devices %}'{{ item.device_type|default:"unknown"|title }}'{% if not forloop.last %},{% endif %}{% endfor %}];
  const data = [{% for item in devices %}{{ item.total }}{% if not forloop.last %},{% endif %}{% endfor %}];
  new Chart(deviceCanvas, {
    type: 'doughnut',
    data: {
      labels: labels,
      datasets: [{
        data: data,
        backgroundColor: ['#3B82F6', '#10B981', '#F59E0B', '#8B5CF6', '#EC4899'],
        borderWidth: 0
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: { 
          position: 'bottom',
          labels: { font: { size: 11 } }
        }
      },
      cutout: '65%'
    }
  });
}

// Device Chart (Technology tab)
const deviceCanvasTech = document.getElementById('deviceChartTech');
if (deviceCanvasTech) {
  const labels = [{% for item in devices %}'{{ item.device_type|default:"unknown"|title }}'{% if not forloop.last %},{% endif %}{% endfor %}];
  const data = [{% for item in devices %}{{ item.total }}{% if not forloop.last %},{% endif %}{% endfor %}];
  new Chart(deviceCanvasTech, {
    type: 'doughnut',
    data: {
      labels: labels,
      datasets: [{
        data: data,
        backgroundColor: ['#3B82F6', '#10B981', '#F59E0B', '#8B5CF6', '#EC4899'],
        borderWidth: 0
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: { position: 'bottom', labels: { font: { size: 11 } } }
      },
      cutout: '65%'
    }
  });
}

// Pages per session chart
const pagesPerSessionCtx = document.getElementById('pagesPerSessionChart');
if (pagesPerSessionCtx) {
  new Chart(pagesPerSessionCtx, {
    type: 'bar',
    data: {
      labels: {{ pages_per_session_labels|safe }},
      datasets: [{
        label: 'Sessions',
        data: {{ pages_per_session_data|safe }},
        backgroundColor: '#6366F1',
        borderRadius: 6
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: { legend: { display: false } },
      scales: {
        x: { grid: { display: false } },
        y: { beginAtZero: true, grid: { color: '#f3f4f6' } }
      }
    }
  });
}

// Peak hours chart
const peakHoursCtx = document.getElementById('peakHoursChart');
if (peakHoursCtx) {
  new Chart(peakHoursCtx, {
    type: 'line',
    data: {
      labels: {{ hour_labels|safe }},
      datasets: [{
        label: 'Pageviews',
        data: {{ hour_data|safe }},
        borderColor: '#10B981',
        backgroundColor: 'rgba(16, 185, 129, 0.08)',
        borderWidth: 2,
        fill: true,
        tension: 0.35,
        pointRadius: 0
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: { legend: { display: false } },
      scales: {
        x: { grid: { display: false } },
        y: { beginAtZero: true, grid: { color: '#f3f4f6' } }
      }
    }
  });
}

// Tabs
const tabButtons = document.querySelectorAll('.tab-btn');
const tabPanels = document.querySelectorAll('.tab-panel');
tabButtons.forEach((btn) => {
  btn.addEventListener('click', () => {
    const target = btn.getAttribute('data-tab');
    tabButtons.forEach((b) => {
      b.classList.remove('bg-slate-900', 'text-white');
      b.classList.add('border', 'border-gray-200', 'text-gray-700');
    });
    btn.classList.add('bg-slate-900', 'text-white');
    btn.classList.remove('border', 'border-gray-200', 'text-gray-700');
    tabPanels.forEach((panel) => {
      panel.classList.toggle('hidden', panel.id !== `tab-${target}`);
    });
  });
});

// Session Modal
const sessionData = {{ sessions_detail|safe }};
const sessionModal = document.getElementById('session-modal');
const sessionModalBody = document.getElementById('session-modal-body');
const sessionModalTitle = document.getElementById('session-modal-title');

function escapeHtml(value) {
  return String(value || '')
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/\"/g, '&quot;')
    .replace(/'/g, '&#039;');
}

window.openSessionModal = function(button) {
  const sessionId = button.getAttribute('data-session-id');
  const data = sessionData[sessionId];
  if (!data) return;
  
  sessionModalTitle.textContent = `Session ${sessionId.slice(0, 8)}`;
  const pages = Array.isArray(data.pages) ? data.pages : [];
  const pageRows = pages.map((url, idx) => (
    `<tr class="border-b border-gray-100">
      <td class="py-2 pr-4 text-xs text-gray-500">${idx + 1}</td>
      <td class="py-2 text-xs text-gray-700">${escapeHtml(url)}</td>
    </tr>`
  )).join('');
  
  sessionModalBody.innerHTML = `
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
      <div class="p-3 bg-gray-50 rounded-lg">
        <div class="text-xs text-gray-500 mb-1">Last seen</div>
        <div class="font-medium text-gray-900">${escapeHtml(data.last_seen)}</div>
      </div>
      <div class="p-3 bg-gray-50 rounded-lg">
        <div class="text-xs text-gray-500 mb-1">Pageviews</div>
        <div class="font-medium text-gray-900">${escapeHtml(data.total)}</div>
      </div>
      <div class="p-3 bg-gray-50 rounded-lg">
        <div class="text-xs text-gray-500 mb-1">IP Address</div>
        <div class="font-medium text-gray-900">${escapeHtml(data.ip_address || '—')}</div>
      </div>
      <div class="p-3 bg-gray-50 rounded-lg">
        <div class="text-xs text-gray-500 mb-1">Device</div>
        <div class="font-medium text-gray-900">${escapeHtml(data.device_type || '—')}</div>
      </div>
      <div class="p-3 bg-gray-50 rounded-lg sm:col-span-2">
        <div class="text-xs text-gray-500 mb-1">Location</div>
        <div class="font-medium text-gray-900">${escapeHtml((data.city || '') + (data.country ? ', ' + data.country : '') || '—')}</div>
      </div>
      <div class="p-3 bg-gray-50 rounded-lg sm:col-span-2">
        <div class="text-xs text-gray-500 mb-1">Referrer</div>
        <div class="font-medium text-gray-900">${escapeHtml(data.referrer || '—')}</div>
      </div>
    </div>
    <div class="border-t border-gray-200 pt-4">
      <div class="text-xs font-semibold text-gray-500 uppercase mb-3">Pages Visited</div>
      <div class="max-h-48 overflow-y-auto">
        <table class="min-w-full text-sm">
          <tbody>
            ${pageRows || '<tr><td class="py-3 text-xs text-gray-500">No pages recorded.</td></tr>'}
          </tbody>
        </table>
      </div>
    </div>
  `;
  
  sessionModal.classList.remove('hidden');
};

window.closeSessionModal = function() {
  sessionModal.classList.add('hidden');
};

// Copy functionality
function copyToClipboard(text) {
  navigator.clipboard.writeText(text).then(() => {
    // Show a brief success message (you can implement a toast notification here)
    alert('Copied to clipboard!');
  }).catch(err => {
    console.error('Failed to copy:', err);
  });
}
</script>
{% endblock %}
{% endblock %}