<!-- Charts grid -->
<div class="charts-grid" id="analytics-charts-grid">

  <!-- Executions over time -->
  <div class="chart-card">
    <div class="chart-title">Executions Per Day</div>
    {% if summary.executions_by_day %}
    <div class="chart-container">
      <canvas id="chart-executions"></canvas>
    </div>
    {% else %}
    <div class="empty-state" style="padding: var(--space-8) 0;">
      <div class="empty-desc">No execution data for the selected period.</div>
    </div>
    {% endif %}
  </div>

  <!-- Cost over time -->
  <div class="chart-card">
    <div class="chart-title">Cost Over Time</div>
    {% if summary.cost_by_day %}
    <div class="chart-container">
      <canvas id="chart-cost"></canvas>
    </div>
    {% else %}
    <div class="empty-state" style="padding: var(--space-8) 0;">
      <div class="empty-desc">No cost data for the selected period.</div>
    </div>
    {% endif %}
  </div>

  <!-- Cost by agent -->
  <div class="chart-card">
    <div class="chart-title">Cost by Agent</div>
    {% if summary.cost_by_agent %}
    <div class="chart-container">
      <canvas id="chart-agent-cost"></canvas>
    </div>
    {% else %}
    <div class="empty-state" style="padding: var(--space-8) 0;">
      <div class="empty-desc">No data for the selected period.</div>
    </div>
    {% endif %}
  </div>

  <!-- Token usage -->
  <div class="chart-card">
    <div class="chart-title">Token Usage</div>
    {% if summary.cost_by_day %}
    <div class="chart-container">
      <canvas id="chart-tokens"></canvas>
    </div>
    {% else %}
    <div class="empty-state" style="padding: var(--space-8) 0;">
      <div class="empty-desc">No token data for the selected period.</div>
    </div>
    {% endif %}
  </div>

</div>

<!-- Chart init data -->
<script>
(function() {
  function initCharts() {
    if (typeof Chart === 'undefined') return;
    if (typeof initCostChart === 'undefined') return;
    if (typeof applyChartDefaults === 'function') applyChartDefaults();

    // Destroy existing charts before re-creating (for HTMX swaps)
    ['chart-cost', 'chart-executions', 'chart-agent-cost', 'chart-tokens'].forEach(function(id) {
      var existing = Chart.getChart(id);
      if (existing) existing.destroy();
    });

    // Executions per day
    {% if summary.executions_by_day %}
    initExecutionsChart('chart-executions',
      {{ summary.executions_by_day | map(attribute='day') | list | tojson }},
      {{ summary.executions_by_day | map(attribute='success_count') | list | tojson }},
      {{ summary.executions_by_day | map(attribute='failed_count') | list | tojson }}
    );
    {% endif %}

    // Cost over time
    {% if summary.cost_by_day %}
    initCostChart('chart-cost',
      {{ summary.cost_by_day | map(attribute='day') | list | tojson }},
      {{ summary.cost_by_day | map(attribute='total_cost_usd') | list | tojson }}
    );
    {% endif %}

    // Cost by agent
    {% if summary.cost_by_agent %}
    initAgentCostChart('chart-agent-cost',
      {{ summary.cost_by_agent | map(attribute='agent_id') | list | tojson }},
      {{ summary.cost_by_agent | map(attribute='total_cost_usd') | list | tojson }}
    );
    {% endif %}

    // Token usage
    {% if summary.cost_by_day %}
    initTokenChart('chart-tokens',
      {{ summary.cost_by_day | map(attribute='day') | list | tojson }},
      {{ summary.cost_by_day | map(attribute='total_input_tokens') | list | tojson }},
      {{ summary.cost_by_day | map(attribute='total_output_tokens') | list | tojson }}
    );
    {% endif %}
  }

  // Init on first load or HTMX swap
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initCharts);
  } else {
    initCharts();
  }
})();
</script>
