{% extends 'layouts/base.html' %}

{% block title %}Dashboard - Stream Processor{% endblock %}

{% block page_title %}
  <div class="d-flex align-items-center">
    <i class="fas fa-tachometer-alt me-3 text-primary"></i>
    Dashboard
  </div>
{% endblock %}

{% block content %}
<div class="container py-4">
  <!-- Header -->
  <div class="d-flex justify-content-between align-items-center mb-3">
    <div>
      <h1 class="h4 fw-bold mb-1">
        <i class="fas fa-tachometer-circle alt-2 text-primary"></i>
        Dashboard
      </h1>
      <p class="text-muted small mb-0"> 
        Real-time streaming metrics and analytics
      </p>
    </div>
  </div>
  <!-- Enhanced Stats Grid with Real-time Updates -->
  <div id="stats-grid" 
       class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4 mb-4"
       hx-get="{% url 'monitoring:dashboard_stats' %}"
       hx-trigger="every 10s"
       hx-swap="innerHTML"
       hx-indicator="#stats-loading">
    <!-- Loading Indicator -->
    <div id="stats-loading" class="htmx-indicator col-12">
      <div class="text-center py-4">
        <div class="spinner-border text-primary" role="status">
          <span class="visually-hidden">Loading stats...</span>
        </div>
        <div class="mt-2 text-muted">Updating dashboard...</div>
      </div>
    </div>

    <!-- Active Streams -->
    <div class="col">
      <div class="card h-100 shadow-sm border-0" 
           hx-get="{% url 'monitoring:stream_stats' %}"
           hx-trigger="every 15s"
           hx-target="#active-streams-count"
           hx-swap="innerHTML">
        <div class="card-body">
          <div class="d-flex align-items-center">
            <div class="flex-shrink-0">
              <div class="d-flex align-items-center justify-content-center rounded bg-success" style="width:32px;height:32px;">
                <i class="fas fa-play text-white fs-6"></i>
              </div>
            </div>
            <div class="ms-3 flex-grow-1">
              <div class="small text-muted text-truncate">Active Streams</div>
              <div id="active-streams-count" class="fs-5 fw-semibold">{{ stats.active_streams }}</div>
            </div>
            <div class="htmx-indicator">
              <div class="spinner-border spinner-border-sm text-success" role="status"></div>
            </div>
          </div>
        </div>
        <div class="card-footer bg-light border-0">
          <a href="{% url 'streams:session_list' %}" 
             class="fw-medium text-decoration-none"
             hx-get="{% url 'streams:session_list' %}"
             hx-target="#main-content"
             hx-push-url="true">
            <span class="text-primary">View all sessions</span>
            <i class="fas fa-arrow-right ms-1"></i>
          </a>
        </div>
      </div>
    </div>

    <!-- Total Channels -->
    <div class="col">
      <div class="card h-100 shadow-sm">
        <div class="card-body">
          <div class="d-flex align-items-center">
            <div class="flex-shrink-0">
              <div class="d-flex align-items-center justify-content-center rounded bg-primary" style="width:32px;height:32px;">
                <i class="fas fa-broadcast-tower text-white fs-6"></i>
              </div>
            </div>
            <div class="ms-3 flex-grow-1">
              <div class="small text-muted text-truncate">Total Channels</div>
              <div class="fs-5 fw-semibold">{{ stats.total_channels }}</div>
            </div>
          </div>
        </div>
        <div class="card-footer bg-light">
          <a href="{% url 'streams:channel_list' %}" class="fw-medium text-decoration-none">
            <span class="text-primary">Manage channels</span>
          </a>
        </div>
      </div>
    </div>

    <!-- Detections Today -->
    <div class="col">
      <div class="card h-100 shadow-sm">
        <div class="card-body">
          <div class="d-flex align-items-center">
            <div class="flex-shrink-0">
              <div class="d-flex align-items-center justify-content-center rounded" style="width:32px;height:32px;background:#a855f7;">
                <i class="fas fa-music text-white fs-6"></i>
              </div>
            </div>
            <div class="ms-3 flex-grow-1">
              <div class="small text-muted text-truncate">Detections Today</div>
              <div class="fs-5 fw-semibold">{{ stats.detections_today }}</div>
            </div>
          </div>
        </div>
        <div class="card-footer bg-light">
          <a href="{% url 'jingles:detection_list' %}" class="fw-medium text-decoration-none">
            <span class="text-primary">View detections</span>
          </a>
        </div>
      </div>
    </div>

    <!-- Ad Breaks Today -->
    <div class="col">
      <div class="card h-100 shadow-sm">
        <div class="card-body">
          <div class="d-flex align-items-center">
            <div class="flex-shrink-0">
              <div class="d-flex align-items-center justify-content-center rounded bg-warning" style="width:32px;height:32px;">
                <i class="fas fa-ad text-white fs-6"></i>
              </div>
            </div>
            <div class="ms-3 flex-grow-1">
              <div class="small text-muted text-truncate">Ad Breaks Today</div>
              <div class="fs-5 fw-semibold">{{ stats.ad_breaks_today }}</div>
            </div>
          </div>
        </div>
        <div class="card-footer bg-light">
          <a href="{% url 'jingles:adbreak_list' %}" class="fw-medium text-decoration-none">
            <span class="text-primary">View ad breaks</span>
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Main Content Grid -->
  <div class="row g-4">
    <!-- Active Streams Panel -->
    <div class="col-lg-8">
      <div class="card shadow-sm h-100">
        <div class="card-body">
          <div class="d-flex align-items-center justify-content-between mb-3">
            <h3 class="h6 fw-semibold m-0">
              <i class="fas fa-stream me-2 text-primary"></i>
              Active Streams
            </h3>
            <div
              hx-get="{% url 'monitoring:live_streams' %}"
              hx-trigger="every 10s"
              hx-target="#live-streams-container"
              class="small text-muted d-flex align-items-center gap-2">
              <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
              Auto-refreshing
            </div>
          </div>

          <div id="live-streams-container">
            {% include 'monitoring/partials/live_streams.html' %}
          </div>
        </div>
      </div>
    </div>

    <!-- Recent Activity Panel -->
    <div class="col-lg-4">
      <div class="card shadow-sm h-100">
        <div class="card-body">
          <div class="d-flex align-items-center justify-content-between mb-3">
            <h3 class="h6 fw-semibold m-0">
              <i class="fas fa-clock me-2 text-primary"></i>
              Recent Activity
            </h3>
            <div
              hx-get="{% url 'monitoring:recent_activity' %}"
              hx-trigger="every 15s"
              hx-target="#recent-activity-container"
              class="small text-muted">
              <i class="fas fa-sync-alt"></i>
            </div>
          </div>

          <div id="recent-activity-container">
            {% include 'monitoring/partials/recent_activity.html' %}
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Quick Actions -->
  <div class="mt-4">
    <div class="card shadow-sm">
      <div class="card-body">
        <h3 class="h6 fw-semibold mb-3">
          <i class="fas fa-rocket me-2 text-primary"></i>
          Quick Actions
        </h3>

        <div class="row g-3">
          <!-- Start New Stream -->
          <div class="col-12 col-sm-6 col-lg-3">
            <button type="button"
                    class="tile-action w-100 text-center"
                    data-url="{% url 'streams:channel_list' %}">
              <i class="fas fa-plus text-muted fs-3 mb-2 d-block"></i>
              <span class="small fw-semibold text-dark d-block">Start New Stream</span>
            </button>
          </div>

          <!-- Upload Jingle -->
          <div class="col-12 col-sm-6 col-lg-3">
            <button type="button"
                    class="tile-action w-100 text-center"
                    data-url="{% url 'jingles:template_list' %}">
              <i class="fas fa-upload text-muted fs-3 mb-2 d-block"></i>
              <span class="small fw-semibold text-dark d-block">Upload Jingle</span>
            </button>
          </div>

          <!-- Configure Notifications -->
          <div class="col-12 col-sm-6 col-lg-3">
            <button type="button"
                    class="tile-action w-100 text-center"
                    data-url="{% url 'notifications:channel_list' %}">
              <i class="fas fa-bell text-muted fs-3 mb-2 d-block"></i>
              <span class="small fw-semibold text-dark d-block">Setup Notifications</span>
            </button>
          </div>

          <!-- View Metrics -->
          <div class="col-12 col-sm-6 col-lg-3">
            <button type="button"
                    class="tile-action w-100 text-center"
                    data-url="{% url 'monitoring:metrics' %}">
              <i class="fas fa-chart-line text-muted fs-3 mb-2 d-block"></i>
              <span class="small fw-semibold text-dark d-block">View Metrics</span>
            </button>
          </div>
          
          <script>
          document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.tile-action[data-url]').forEach(function(button) {
              button.addEventListener('click', function() {
                window.location.href = this.getAttribute('data-url');
              });
            });
          });
          </script>
        </div>

      </div>
    </div>
  </div>  
</div>
{% endblock %}

{% block extra_js %}
<style>
  /* Dashed, focusable tiles to mimic Tailwind dashed action blocks */
  .tile-action{
    border:2px dashed #d1d5db; /* gray-300 */
    background: transparent;
    padding: 1rem;
    border-radius: .5rem;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .tile-action:hover{
    border-color:#9ca3af; /* gray-400 */
  }
  .tile-action:focus{
    outline:0;
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
    border-color: var(--bs-primary);
  }
</style>

<script>
  // Dashboard-specific JS (unchanged)
  document.addEventListener('DOMContentLoaded', function() {
    console.log('Dashboard loaded and auto-refresh enabled');

    document.querySelectorAll('[data-action]').forEach(button => {
      button.addEventListener('click', function() {
        const action = this.dataset.action;
        console.log('Quick action triggered:', action);
      });
    });
  });
</script>
{% endblock %}