{% extends "base.html" %}
{% block title %}Claude Code Cost Explorer — Daily Summary{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/dark.css">
<style>
  /* Flatpickr Premium CCX Theme Overrides */
  .flatpickr-calendar.dark {
    background: var(--ccx-surface);
    border: 1px solid var(--ccx-border);
    box-shadow: 0 16px 32px rgba(0,0,0,0.4);
    font-family: 'Inter', sans-serif;
  }
  .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
    background: var(--ccx-accent) !important;
    border-color: var(--ccx-accent) !important;
    color: #fff !important;
  }
  .flatpickr-day:hover {
    background: var(--ccx-surface-hover) !important;
    border-color: var(--ccx-border) !important;
  }
  .ccx-date-input {
    background: var(--ccx-bg);
    border: 1px solid var(--ccx-border);
    color: var(--ccx-text);
    padding: 6px 12px;
    border-radius: var(--ccx-radius);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    outline: none;
    transition: border-color var(--ccx-transition), box-shadow var(--ccx-transition);
  }
  .ccx-date-input:focus {
    border-color: var(--ccx-accent);
    box-shadow: 0 0 0 2px var(--ccx-glow);
  }
</style>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
{% endblock %}
{% block content %}
<h2>Daily Cost Summary</h2>
<form class="ccx-filter" method="get" action="/">
  <label for="from">From</label>
  <input type="text" class="ccx-date-input" id="from" name="from" value="{{ from_date }}" placeholder="YYYY-MM-DD">
  <label for="to">To</label>
  <input type="text" class="ccx-date-input" id="to" name="to" value="{{ to_date }}" placeholder="YYYY-MM-DD">
  <button class="ccx-filter__btn" type="submit">Filter</button>
  {% if from_date or to_date %}<a class="ccx-filter__clear" href="/">Clear</a>{% endif %}
</form>
{% if days %}
<div class="ccx-metrics">
  <div class="ccx-metric">
    <span class="ccx-metric__label">Total Cost</span>
    <span class="ccx-metric__value ccx-metric__value--accent">{{ format_cost(total_cost) }}</span>
  </div>
  <div class="ccx-metric">
    <span class="ccx-metric__label">Days</span>
    <span class="ccx-metric__value">{{ days|length }}</span>
  </div>
  <div class="ccx-metric">
    <span class="ccx-metric__label">Sessions</span>
    <span class="ccx-metric__value">{{ days|sum(attribute='session_count') }}</span>
  </div>
  <div class="ccx-metric">
    <span class="ccx-metric__label">API Calls</span>
    <span class="ccx-metric__value">{{ days|sum(attribute='message_count') }}</span>
  </div>
</div>
<div class="ccx-card">
  <table class="ccx-table">
    <thead><tr>
      <th>Date</th>
      <th>Cost</th>
      <th>Sessions</th>
      <th>API Calls</th>
      <th>Input Tokens</th>
      <th>Output Tokens</th>
    </tr></thead>
    <tbody>
      {% for day in days %}
      <tr>
        <td><a href="/day/{{ day.date }}">{{ day.date }}</a></td>
        <td class="ccx-cost {{ cost_severity(day.total_cost) }}">{{ format_cost(day.total_cost) }}</td>
        <td>{{ day.session_count }}</td>
        <td>{{ day.message_count }}</td>
        <td class="ccx-tokens">{{ format_tokens(day.total_input_tokens) }}</td>
        <td class="ccx-tokens">{{ format_tokens(day.total_output_tokens) }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<div class="ccx-empty">No data found for the selected date range.</div>
{% endif %}

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const commonConfig = {
      theme: "dark",
      dateFormat: "Y-m-d",
      allowInput: true,
      disableMobile: "true"
    };

    const fromPicker = flatpickr("#from", {
      ...commonConfig,
      onChange: function(selectedDates, dateStr) {
        toPicker.set('minDate', dateStr);
      }
    });

    const toPicker = flatpickr("#to", {
      ...commonConfig,
      onChange: function(selectedDates, dateStr) {
        fromPicker.set('maxDate', dateStr);
      }
    });
  });
</script>
{% endblock %}