{% extends "layout.html" %}

{% block content %}
<section class="ui-shell">
  <div class="ui-page-header flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
    <div>
      <p class="ui-eyebrow">Cost Analytics</p>
      <h1 class="ui-page-title">Dashboard</h1>
      <p class="ui-page-subtitle">
        {% if local_runtime_mode %}
          Last local dbt execution analysis
        {% else %}
          BigQuery spend analysis for {{ date_range.display }}
        {% endif %}
      </p>
    </div>
    {% if not local_runtime_mode %}
      {% include "dashboard/_date_range_picker.html" %}
    {% endif %}
  </div>

  {% if has_data %}
    {# Cost Summary Section #}
    <div id="cost-summary-section">
      {% include "dashboard/_cost_summary.html" %}
    </div>

    {# Main Content Grid #}
    <div class="mt-8 grid gap-6 lg:grid-cols-2">
      {# Trend Chart #}
      {% if selected_lens != 'storage' %}
        <div id="trend-chart-section" class="lg:col-span-2">
          {% include "dashboard/_trend_chart.html" %}
        </div>
      {% endif %}

      {# Cost Drivers #}
      <div id="cost-drivers-section" class="lg:col-span-2">
        {% include "dashboard/_cost_drivers.html" %}
      </div>

      {# Opportunities Summary #}
      <div id="opportunities-section" class="lg:col-span-2">
        {% include "dashboard/_opportunities_summary.html" %}
      </div>

      {# Usage Statistics #}
      {% if selected_lens != 'storage' %}
        <div id="usage-stats-section" class="lg:col-span-2">
          {% include "dashboard/_usage_stats.html" %}
        </div>
      {% endif %}
    </div>
  {% else %}
    {% include "dashboard/_empty_state.html" %}
  {% endif %}
</section>

<script src="/static/js/dashboard-charts.js?v=20260412a"></script>
{% if background_jobs_running %}
<script>
(function() {
  var pollTimer = null;
  var wasRunning = true;

  function pollBgJobs() {
    if (document.visibilityState !== 'visible') return;
    fetch('/dashboard/bg-jobs-status')
      .then(function(r) { return r.json(); })
      .then(function(data) {
        if (wasRunning && !data.running) {
          // Jobs just finished — reload to show updated data
          window.location.reload();
        }
        wasRunning = data.running;
        if (!data.running && pollTimer) {
          clearInterval(pollTimer);
          pollTimer = null;
        }
      })
      .catch(function() {});
  }

  pollTimer = setInterval(pollBgJobs, 5000);
})();
</script>
{% endif %}
{% endblock %}