{% extends "admin/base_site.html" %}
{% load pensieve_tags %}

{% block extrahead %}
  {{ block.super }}
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    .dashboard-container {
      max-width: 1400px;
      margin: 20px auto;
      padding: 20px;
    }

    .dashboard-header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 40px;
      border-radius: 12px;
      margin-bottom: 30px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .dashboard-header h1 {
      margin: 0;
      font-size: 32px;
      font-weight: 600;
    }

    .section-card {
      background-color: #ffffff;
      border: 1px solid #e0e0e0;
      border-radius: 12px;
      padding: 30px;
      margin-bottom: 30px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .section-title {
      font-size: 24px;
      color: #333;
      margin: 0 0 20px 0;
      padding-bottom: 12px;
      border-bottom: 3px solid #667eea;
      font-weight: 600;
    }

    .styled-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 15px;
      font-size: 14px;
    }

    .styled-table thead tr {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      text-align: left;
    }

    .styled-table th,
    .styled-table td {
      padding: 14px 18px;
    }

    .styled-table th {
      font-weight: 600;
      text-transform: uppercase;
      font-size: 12px;
      letter-spacing: 0.5px;
    }

    .styled-table tbody tr {
      border-bottom: 1px solid #e0e0e0;
      transition: background-color 0.2s ease;
    }

    .styled-table tbody tr:hover {
      background-color: #f8f9ff;
    }

    .styled-table tbody tr:last-of-type {
      border-bottom: 2px solid #667eea;
    }

    .styled-table a {
      color: #667eea;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s ease;
    }

    .styled-table a:hover {
      color: #5568d3;
      text-decoration: underline;
    }

    .error-count-badge {
      display: inline-block;
      padding: 4px 12px;
      background-color: #dc3545;
      color: white;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 600;
    }

    .latency-badge {
      display: inline-block;
      padding: 4px 12px;
      background-color: #ffc107;
      color: #333;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 600;
    }

    .empty-state {
      text-align: center;
      padding: 40px;
      color: #666;
      font-size: 16px;
    }

    .empty-state-icon {
      font-size: 48px;
      margin-bottom: 15px;
      opacity: 0.5;
    }

    .filter-container {
      background-color: #f8f9fa;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 25px;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .filter-label {
      font-weight: 600;
      color: #333;
      font-size: 14px;
    }

    .filter-input {
      flex: 1;
      min-width: 250px;
      padding: 10px 15px;
      border: 1px solid #ced4da;
      border-radius: 6px;
      font-size: 14px;
      transition: border-color 0.2s ease;
    }

    .filter-input:focus {
      outline: none;
      border-color: #667eea;
      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .filter-button {
      padding: 10px 24px;
      background-color: #667eea;
      color: white;
      border: none;
      border-radius: 6px;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.2s ease;
      font-size: 14px;
    }

    .filter-button:hover {
      background-color: #5568d3;
    }

    .clear-filter {
      padding: 10px 20px;
      background-color: #99a5b1;
      color: white;
      text-decoration: none;
      border-radius: 6px;
      font-weight: 500;
      transition: background-color 0.2s ease;
      font-size: 14px;
    }

    .clear-filter:hover {
      background-color: #5a6268;
      text-decoration: none;
    }

    .chart-container {
      background-color: white;
      border-radius: 8px;
      padding: 25px;
      margin-top: 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .chart-title {
      font-size: 18px;
      color: #333;
      margin-bottom: 20px;
      font-weight: 600;
    }

    .no-data-message {
      background-color: #fff3cd;
      border: 1px solid #ffc107;
      border-radius: 8px;
      padding: 20px;
      color: #856404;
      text-align: center;
      margin-top: 20px;
    }
  </style>
{% endblock %}

{% block content %}
  <div class="dashboard-container">
    <div class="dashboard-header">
      <h1>📊 Performance Dashboard</h1>
    </div>

    <!-- Latest Errors Section -->
    <div class="section-card">
      <h2 class="section-title">🔴 Latest Errors</h2>
      {% if error_data %}
        <table class="styled-table">
          <thead>
            <tr>
              <th>Error Type</th>
              <th>URL</th>
              <th>Occurrences</th>
              <th>Last Seen</th>
            </tr>
          </thead>
          <tbody>
          {% for error in error_data %}
            <tr>
              <td>
                <a href="{% url 'admin:pensieve-error-detail' error.group_hash %}">
                  {{ error.error_type }}
                </a>
              </td>
              <td><code style="font-size: 12px; color: #667eea;">{{ error.url }}</code></td>
              <td><span class="error-count-badge">{{ error.count }}</span></td>
              <td>{{ error.last_seen }}</td>
            </tr>
          {% endfor %}
          </tbody>
        </table>
      {% else %}
        <div class="empty-state">
          <div class="empty-state-icon">✓</div>
          <p>No errors recorded! Your application is running smoothly.</p>
        </div>
      {% endif %}
    </div>

    <!-- Performance Metrics Section -->
    <div class="section-card">
      <h2 class="section-title">⚡ Performance Metrics</h2>
      
      <div class="filter-container">
        <label for="url_filter_input" class="filter-label">Filter by URL:</label>
        <input 
          type="text" 
          id="url_filter_input" 
          class="filter-input"
          placeholder="Enter endpoint URL..."
          value="{{ current_url_filter|default:'' }}"
        >
        <button type="button" id="url_filter_button" class="filter-button">Apply Filter</button>
        {% if current_url_filter %}
          <a href="?" class="clear-filter">Clear Filter</a>
        {% endif %}
      </div>

      {% if current_url_filter %}
        <div class="chart-container">
          <div class="chart-title">Performance History for: <code>{{ current_url_filter }}</code></div>
          <canvas id="performanceChart"></canvas>
        </div>
        
        {% if not metric_data %}
          <div class="no-data-message">
            <strong>No performance data found for URL:</strong> {{ current_url_filter }}
          </div>
        {% endif %}
        
        {{ metric_data|json_script:"metric-data" }}

      {% else %}
        <!-- Project Summary Chart -->
        <div class="chart-container">
          <div class="chart-title">Overall Project Latency (p95 vs Avg)</div>
          <canvas id="projectSummaryChart"></canvas>
        </div>
        
        {{ project_summary_data|json_script:"project-summary-data" }}

        <h3 style="margin: 25px 0 15px 0; font-size: 18px; color: #555;">Top 5 Slowest Endpoints (by p95 Latency)</h3>
        {% if top_slow_endpoints %}
          <table class="styled-table">
            <thead>
              <tr>
                <th>Endpoint URL</th>
                <th>Highest p95 Latency</th>
              </tr>
            </thead>
            <tbody>
            {% for endpoint in top_slow_endpoints %}
              <tr>
                <td>
                  <a href="{% url 'admin:pensieve-endpoint-detail' endpoint.url|b64encode %}">{{ endpoint.url }}</a>
                </td>
                <td><span class="latency-badge">{{ endpoint.max_p95 }} ms</span></td>
              </tr>
            {% endfor %}
            </tbody>
          </table>
        {% else %}
          <div class="empty-state">
            <div class="empty-state-icon">📈</div>
            <p>No performance data aggregated yet. Start monitoring your endpoints!</p>
          </div>
        {% endif %}
      {% endif %}
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      
      // Function to format date in the same way as backend
      function formatDateTime(dateString) {
        const date = new Date(dateString);
        const options = {
          month: 'short',
          day: 'numeric',
          hour: 'numeric',
          minute: '2-digit',
          hour12: true
        };
        return date.toLocaleString('en-US', options);
      }
      
      // --- Chart.js Logic ---
      const chartCanvas = document.getElementById('performanceChart');
      if (chartCanvas) {
        const data = JSON.parse(document.getElementById('metric-data').textContent);
        
        if (data && data.length > 0) {
          data.reverse(); 

          const labels = data.map(d => formatDateTime(d.timestamp));
          const p95Data = data.map(d => d.p95_duration_ms);
          const avgData = data.map(d => d.avg_duration_ms);
          const requestCountData = data.map(d => d.request_count || 0);

          new Chart(chartCanvas, {
            type: 'bar',
            data: {
              labels: labels,
              datasets: [
                {
                  label: 'Request Count',
                  data: requestCountData,
                  type: 'bar',
                  backgroundColor: 'rgba(40, 167, 69, 0.3)',
                  borderColor: '#28a745',
                  borderWidth: 1,
                  borderRadius: 4,
                  yAxisID: 'y-requests',
                  order: 3
                },
                {
                  label: 'p95 Latency (ms)',
                  data: p95Data,
                  type: 'line',
                  borderColor: '#dc3545',
                  backgroundColor: 'rgba(220, 53, 69, 0.1)',
                  borderWidth: 3,
                  tension: 0.4,
                  fill: false,
                  pointRadius: 5,
                  pointHoverRadius: 7,
                  pointBackgroundColor: '#dc3545',
                  yAxisID: 'y-latency',
                  order: 1
                },
                {
                  label: 'Average Latency (ms)',
                  data: avgData,
                  type: 'line',
                  borderColor: '#667eea',
                  backgroundColor: 'rgba(102, 126, 234, 0.1)',
                  borderWidth: 3,
                  tension: 0.4,
                  fill: false,
                  pointRadius: 5,
                  pointHoverRadius: 7,
                  pointBackgroundColor: '#667eea',
                  yAxisID: 'y-latency',
                  order: 2
                }
              ]
            },
            options: {
              responsive: true,
              maintainAspectRatio: true,
              interaction: {
                mode: 'index',
                intersect: false
              },
              plugins: {
                legend: {
                  display: true,
                  position: 'top',
                  labels: {
                    usePointStyle: true,
                    padding: 15,
                    font: {
                      size: 13,
                      weight: '500'
                    }
                  }
                },
                tooltip: {
                  backgroundColor: 'rgba(0, 0, 0, 0.8)',
                  padding: 12,
                  titleFont: {
                    size: 14,
                    weight: '600'
                  },
                  bodyFont: {
                    size: 13
                  },
                  displayColors: true,
                  callbacks: {
                    label: function(context) {
                      const label = context.dataset.label;
                      const value = context.parsed.y;
                      if (label === 'Request Count') {
                        return label + ': ' + value + ' requests';
                      } else {
                        return label + ': ' + value.toFixed(2) + ' ms';
                      }
                    }
                  }
                }
              },
              scales: {
                'y-latency': { 
                  type: 'linear',
                  position: 'left',
                  beginAtZero: true, 
                  title: { 
                    display: true, 
                    text: 'Latency (ms)',
                    font: {
                      size: 14,
                      weight: '600'
                    },
                    color: '#4a5fc1'
                  },
                  grid: {
                    color: 'rgba(0, 0, 0, 0.05)'
                  },
                  ticks: {
                    font: {
                      size: 12
                    },
                    color: '#4a5fc1'
                  }
                },
                'y-requests': { 
                  type: 'linear',
                  position: 'right',
                  beginAtZero: true, 
                  title: { 
                    display: true, 
                    text: 'Request Count',
                    font: {
                      size: 14,
                      weight: '600'
                    },
                    color: '#1e7e34'
                  },
                  grid: {
                    drawOnChartArea: false
                  },
                  ticks: {
                    font: {
                      size: 12
                    },
                    color: '#1e7e34',
                    precision: 0
                  }
                },
                x: { 
                  title: { 
                    display: true, 
                    text: 'Time',
                    font: {
                      size: 14,
                      weight: '600'
                    }
                  },
                  grid: {
                    color: 'rgba(0, 0, 0, 0.05)'
                  },
                  ticks: {
                    font: {
                      size: 11
                    },
                    maxRotation: 45,
                    minRotation: 45
                  }
                }
              }
            }
          });
        } else {
          chartCanvas.style.display = 'none';
        }
      }

      // --- Request Count Bar Chart ---
      const requestCountCanvas = document.getElementById('requestCountChart');
      if (requestCountCanvas) {
        const data = JSON.parse(document.getElementById('metric-data').textContent);
        
        if (data && data.length > 0) {
          data.reverse(); 

          const labels = data.map(d => formatDateTime(d.timestamp));
          const requestCountData = data.map(d => d.request_count || 0);

          new Chart(requestCountCanvas, {
            type: 'bar',
            data: {
              labels: labels,
              datasets: [
                {
                  label: 'Request Count',
                  data: requestCountData,
                  backgroundColor: 'rgba(40, 167, 69, 0.7)',
                  borderColor: '#28a745',
                  borderWidth: 2,
                  borderRadius: 6,
                  hoverBackgroundColor: 'rgba(40, 167, 69, 0.9)'
                }
              ]
            },
            options: {
              responsive: true,
              maintainAspectRatio: true,
              plugins: {
                legend: {
                  display: true,
                  position: 'top',
                  labels: {
                    usePointStyle: true,
                    padding: 15,
                    font: {
                      size: 13,
                      weight: '500'
                    }
                  }
                },
                tooltip: {
                  backgroundColor: 'rgba(0, 0, 0, 0.8)',
                  padding: 12,
                  titleFont: {
                    size: 14,
                    weight: '600'
                  },
                  bodyFont: {
                    size: 13
                  },
                  displayColors: true,
                  callbacks: {
                    label: function(context) {
                      return context.dataset.label + ': ' + context.parsed.y + ' requests';
                    }
                  }
                }
              },
              scales: {
                y: { 
                  beginAtZero: true, 
                  title: { 
                    display: true, 
                    text: 'Number of Requests',
                    font: {
                      size: 14,
                      weight: '600'
                    }
                  },
                  grid: {
                    color: 'rgba(0, 0, 0, 0.05)'
                  },
                  ticks: {
                    font: {
                      size: 12
                    },
                    precision: 0
                  }
                },
                x: { 
                  title: { 
                    display: true, 
                    text: 'Time',
                    font: {
                      size: 14,
                      weight: '600'
                    }
                  },
                  grid: {
                    color: 'rgba(0, 0, 0, 0.05)'
                  },
                  ticks: {
                    font: {
                      size: 11
                    },
                    maxRotation: 45,
                    minRotation: 45
                  }
                }
              }
            }
          });
        } else {
          requestCountCanvas.style.display = 'none';
        }
      }

      // --- NEW: Logic for Project Summary Chart (default view) ---
      const summaryChartCanvas = document.getElementById('projectSummaryChart');
      if (summaryChartCanvas) {
        const summaryData = JSON.parse(document.getElementById('project-summary-data').textContent);
        
        if (summaryData && summaryData.length > 0) {
          summaryData.reverse(); 

          const labels = summaryData.map(d => formatDateTime(d.timestamp));
          const p95Data = summaryData.map(d => d.p95_duration_ms);
          const avgData = summaryData.map(d => d.avg_duration_ms);

          new Chart(summaryChartCanvas, {
            type: 'line',
            data: {
              labels: labels,
              datasets: [
                {
                  label: 'Overall p95 Latency (ms)',
                  data: p95Data,
                  borderColor: '#dc3545',
                  backgroundColor: 'rgba(220, 53, 69, 0.1)',
                  borderWidth: 3,
                  tension: 0.4,
                  fill: true,
                  pointRadius: 5,
                  pointHoverRadius: 7,
                  pointBackgroundColor: '#dc3545'
                },
                {
                  label: 'Overall Average Latency (ms)',
                  data: avgData,
                  borderColor: '#667eea',
                  backgroundColor: 'rgba(102, 126, 234, 0.1)',
                  borderWidth: 3,
                  tension: 0.4,
                  fill: true,
                  pointRadius: 5,
                  pointHoverRadius: 7,
                  pointBackgroundColor: '#667eea'
                }
              ]
            },
            options: {
              responsive: true,
              maintainAspectRatio: true,
              plugins: {
                legend: {
                  display: true,
                  position: 'top',
                  labels: {
                    usePointStyle: true,
                    padding: 15,
                    font: {
                      size: 13,
                      weight: '500'
                    }
                  }
                },
                tooltip: {
                  backgroundColor: 'rgba(0, 0, 0, 0.8)',
                  padding: 12,
                  titleFont: {
                    size: 14,
                    weight: '600'
                  },
                  bodyFont: {
                    size: 13
                  },
                  displayColors: true,
                  callbacks: {
                    label: function(context) {
                      return context.dataset.label + ': ' + context.parsed.y.toFixed(2) + ' ms';
                    }
                  }
                }
              },
              scales: {
                y: { 
                  beginAtZero: true, 
                  title: { 
                    display: true, 
                    text: 'Duration (ms)',
                    font: {
                      size: 14,
                      weight: '600'
                    }
                  },
                  grid: {
                    color: 'rgba(0, 0, 0, 0.05)'
                  },
                  ticks: {
                    font: {
                      size: 12
                    }
                  }
                },
                x: { 
                  title: { 
                    display: true, 
                    text: 'Time',
                    font: {
                      size: 14,
                      weight: '600'
                    }
                  },
                  grid: {
                    color: 'rgba(0, 0, 0, 0.05)'
                  },
                  ticks: {
                    font: {
                      size: 11
                    },
                    maxRotation: 45,
                    minRotation: 45
                  }
                }
              }
            }
          });
        } else {
          summaryChartCanvas.style.display = 'none';
        }
      }

      // --- Filter Button Logic ---
      function applyFilter() {
        const currentUrl = new URL(window.location.href);
        const filterInput = document.getElementById('url_filter_input');
        
        if (filterInput && filterInput.value) {
          currentUrl.searchParams.set('url_filter', filterInput.value);
        } else {
          currentUrl.searchParams.delete('url_filter');
        }
        window.location.href = currentUrl.href;
      }

      const filterButton = document.getElementById('url_filter_button');
      if (filterButton) {
        filterButton.onclick = applyFilter;
      }
      
      const filterInput = document.getElementById('url_filter_input');
      if (filterInput) {
        filterInput.addEventListener('keypress', function(e) {
          if (e.key === 'Enter') {
            applyFilter();
          }
        });
      }
    });
  </script>
{% endblock %}