{% extends "base.html" %}

{% block title %}API Activity — Job Cannon{% endblock %}

{% block content %}
<div class="max-w-5xl mx-auto space-y-6">

  <!-- Page header + view toggle -->
  <div class="flex items-center justify-between">
    <h1 class="text-2xl font-bold text-slate-100">API Activity</h1>
    <div class="flex items-center gap-3">
      <span class="text-sm text-slate-400 hidden sm:inline">30-day overview</span>
      <div role="tablist" aria-label="View" class="inline-flex rounded-lg border border-slate-700 overflow-hidden text-sm">
        <a href="{{ url_for('costs.index', view='usage') }}"
           role="tab"
           aria-selected="{{ 'true' if view == 'usage' else 'false' }}"
           class="px-3 py-1.5 {% if view == 'usage' %}bg-slate-700 text-slate-100 font-semibold{% else %}bg-slate-900 text-slate-400 hover:text-slate-200{% endif %}">
          Usage
        </a>
        <a href="{{ url_for('costs.index', view='cost') }}"
           role="tab"
           aria-selected="{{ 'true' if view == 'cost' else 'false' }}"
           class="px-3 py-1.5 border-l border-slate-700 {% if view == 'cost' %}bg-slate-700 text-slate-100 font-semibold{% else %}bg-slate-900 text-slate-400 hover:text-slate-200{% endif %}">
          Cost
        </a>
      </div>
    </div>
  </div>

  {% if view == 'usage' %}
  {# ====================================================================== #}
  {# USAGE VIEW — tokens in/out across all providers (incl. free/CLI/local). #}
  {# ====================================================================== #}

  <!-- 30-day stacked output-tokens chart -->
  <div class="bg-slate-800 rounded-xl border border-slate-700 p-5">
    {% if top_purpose_insight %}
    <h2 class="text-sm font-semibold text-slate-300 mb-1 flex items-baseline gap-1.5 flex-wrap">
      <span class="font-mono text-violet-300 text-base">{{ top_purpose_insight.purpose }}</span>
      <span class="font-normal">drives</span>
      <span class="text-violet-300 text-base font-bold">{{ "%.0f" | format(top_purpose_insight.share_pct) }}%</span>
      <span class="text-slate-400 font-normal">of output tokens (last 30 days)</span>
    </h2>
    <p class="text-xs text-slate-500 mb-4">{{ "{:,}".format(top_purpose_insight.share_tokens) }} of {{ "{:,}".format(top_purpose_insight.total_tokens) }} tokens · all providers (Ollama, Claude CLI, Anthropic SDK, etc.)</p>
    {% else %}
    <h2 class="text-sm font-semibold text-slate-300 mb-1">Output Tokens by Purpose (30 Days)</h2>
    <p class="text-xs text-slate-500 mb-4">Includes every provider — Ollama, Claude CLI, Anthropic SDK, etc.</p>
    {% endif %}
    <div style="position: relative; height: 320px;">
      <canvas id="usage-chart"></canvas>
    </div>
    <div id="usage-chart-empty" class="hidden items-center justify-center" style="height: 320px;">
      <p class="text-slate-500 text-sm">No API calls recorded yet.</p>
    </div>
  </div>

  <!-- Period stat cards: calls + tokens -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
    {% for label, key in [('Today', 'today'), ('This Week', 'week'), ('This Month', 'month'), ('Projected / mo', 'projected_monthly')] %}
    {% set s = usage_stats[key] %}
    <div class="bg-slate-800 rounded-xl border border-slate-700 p-4">
      <div class="text-xs text-slate-500 uppercase tracking-wide text-center">{{ label }}</div>
      <div class="text-2xl font-bold text-slate-100 mt-1 text-center">{{ "{:,}".format(s.calls) }}<span class="text-sm font-normal text-slate-500 ml-1">calls</span></div>
      <div class="flex justify-between mt-3 pt-3 border-t border-slate-700/60 text-xs">
        <div>
          <div class="text-slate-500">In</div>
          <div class="text-slate-300 font-mono">{{ "{:,}".format(s.input_tokens) }}</div>
        </div>
        <div class="text-right">
          <div class="text-slate-500">Out</div>
          <div class="text-slate-300 font-mono">{{ "{:,}".format(s.output_tokens) }}</div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>

  <!-- Feature breakdown table (current calendar month) -->
  <div class="bg-slate-800 rounded-xl border border-slate-700 p-5">
    <h2 class="text-sm font-semibold text-slate-300 mb-4">This Month by Feature</h2>
    {% if monthly_feature_usage %}
    {# Column maxes drive the bar-in-cell widths; computed once per render. #}
    {% set feat_max_calls = (monthly_feature_usage | map(attribute='calls') | max) or 1 %}
    {% set feat_max_input = (monthly_feature_usage | map(attribute='input_tokens') | max) or 1 %}
    {% set feat_max_output = (monthly_feature_usage | map(attribute='output_tokens') | max) or 1 %}
    <table class="w-full text-sm">
      <thead>
        <tr class="text-left text-slate-500 border-b border-slate-700">
          <th class="pb-2 font-medium">Feature</th>
          <th class="pb-2 font-medium text-right">Calls</th>
          <th class="pb-2 font-medium text-right">Input tokens</th>
          <th class="pb-2 font-medium text-right">Output tokens</th>
        </tr>
      </thead>
      <tbody>
        {% for item in monthly_feature_usage %}
        {% set call_pct = (item.calls / feat_max_calls * 100) %}
        {% set in_pct = (item.input_tokens / feat_max_input * 100) %}
        {% set out_pct = (item.output_tokens / feat_max_output * 100) %}
        <tr class="border-b border-slate-700/50 hover:bg-slate-700/20 transition-colors">
          <td class="py-2 text-slate-300 font-mono">{{ item.purpose }}</td>
          <td class="py-2 text-slate-400 text-right" style="background: linear-gradient(to left, rgba(148,163,184,0.18) {{ call_pct }}%, transparent {{ call_pct }}%);">{{ "{:,}".format(item.calls) }}</td>
          <td class="py-2 text-slate-400 text-right font-mono" style="background: linear-gradient(to left, rgba(56,189,248,0.18) {{ in_pct }}%, transparent {{ in_pct }}%);">{{ "{:,}".format(item.input_tokens) }}</td>
          <td class="py-2 text-slate-300 text-right font-mono" style="background: linear-gradient(to left, rgba(139,92,246,0.25) {{ out_pct }}%, transparent {{ out_pct }}%);">{{ "{:,}".format(item.output_tokens) }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <p class="text-slate-500 text-sm text-center py-4">No API calls this month.</p>
    {% endif %}
  </div>

  <!-- Provider breakdown table (current calendar month) -->
  <div class="bg-slate-800 rounded-xl border border-slate-700 p-5">
    <h2 class="text-sm font-semibold text-slate-300 mb-4">This Month by Provider</h2>
    {% if monthly_provider_usage %}
    {% set prov_max_calls = (monthly_provider_usage | map(attribute='calls') | max) or 1 %}
    {% set prov_max_input = (monthly_provider_usage | map(attribute='input_tokens') | max) or 1 %}
    {% set prov_max_output = (monthly_provider_usage | map(attribute='output_tokens') | max) or 1 %}
    <table class="w-full text-sm">
      <thead>
        <tr class="text-left text-slate-500 border-b border-slate-700">
          <th class="pb-2 font-medium">Provider</th>
          <th class="pb-2 font-medium text-right">Calls</th>
          <th class="pb-2 font-medium text-right">Input tokens</th>
          <th class="pb-2 font-medium text-right">Output tokens</th>
        </tr>
      </thead>
      <tbody>
        {% for item in monthly_provider_usage %}
        {% set call_pct = (item.calls / prov_max_calls * 100) %}
        {% set in_pct = (item.input_tokens / prov_max_input * 100) %}
        {% set out_pct = (item.output_tokens / prov_max_output * 100) %}
        <tr class="border-b border-slate-700/50 hover:bg-slate-700/20 transition-colors">
          <td class="py-2 text-slate-300 font-mono">{{ item.provider }}</td>
          <td class="py-2 text-slate-400 text-right" style="background: linear-gradient(to left, rgba(148,163,184,0.18) {{ call_pct }}%, transparent {{ call_pct }}%);">{{ "{:,}".format(item.calls) }}</td>
          <td class="py-2 text-slate-400 text-right font-mono" style="background: linear-gradient(to left, rgba(56,189,248,0.18) {{ in_pct }}%, transparent {{ in_pct }}%);">{{ "{:,}".format(item.input_tokens) }}</td>
          <td class="py-2 text-slate-300 text-right font-mono" style="background: linear-gradient(to left, rgba(139,92,246,0.25) {{ out_pct }}%, transparent {{ out_pct }}%);">{{ "{:,}".format(item.output_tokens) }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <p class="text-slate-500 text-sm text-center py-4">No API calls this month.</p>
    {% endif %}
  </div>

  {% else %}
  {# ====================================================================== #}
  {# COST VIEW — paid providers only. Subscription/free rows excluded by SQL #}
  {# in get_cost_stats / get_*_breakdown (FREE_PROVIDERS filter, mirroring   #}
  {# cost_gate semantics).                                                   #}
  {# ====================================================================== #}

  <!-- 30-day stacked bar chart -->
  <div class="bg-slate-800 rounded-xl border border-slate-700 p-5">
    <h2 class="text-sm font-semibold text-slate-300 mb-1">API Spend by Feature (30 Days)</h2>
    <p class="text-xs text-slate-500 mb-4">Subscription &amp; CLI paths ($0) excluded. Switch to Usage view to see all activity.</p>
    <div style="position: relative; height: 320px;">
      <canvas id="cost-chart"></canvas>
    </div>
    <div id="cost-chart-empty" class="hidden items-center justify-center" style="height: 320px;">
      <p class="text-slate-500 text-sm">No paid API calls in the last 30 days.</p>
    </div>
  </div>

  <!-- Budget progress bar -->
  {% if budget_pct >= 100 %}
    {% set bar_color = "bg-red-500" %}
    {% set pct_text = "text-red-400" %}
  {% elif budget_pct >= 80 %}
    {% set bar_color = "bg-amber-500" %}
    {% set pct_text = "text-amber-400" %}
  {% else %}
    {% set bar_color = "bg-emerald-500" %}
    {% set pct_text = "text-emerald-400" %}
  {% endif %}

  <div class="bg-slate-800 rounded-xl border border-slate-700 p-5 space-y-3">
    <div class="flex items-center justify-between">
      <h2 class="text-sm font-semibold text-slate-300">Daily Budget Usage</h2>
      <span class="{{ pct_text }} text-sm font-semibold">{{ "%.0f" | format(budget_pct) }}% of daily cap used</span>
    </div>
    <div>
      <div class="flex justify-between text-xs text-slate-500 mb-1">
        <span>Today's spend: ${{ "%.4f" | format(cost_stats.today) }}</span>
        <span>Daily cap: ${{ "%.0f" | format(budget_cap) }}</span>
      </div>
      <div id="budget-progress-bar" class="w-full bg-slate-700 rounded-full h-2">
        <div class="{{ bar_color }} h-2 rounded-full transition-all"
             style="width: {{ [budget_pct, 100] | min }}%"></div>
      </div>
    </div>
  </div>

  <!-- Period stat cards -->
  <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
    <div class="bg-slate-800 rounded-xl border border-slate-700 p-4 text-center">
      <div class="text-xs text-slate-500 uppercase tracking-wide">Today</div>
      <div class="text-2xl font-bold text-slate-100 mt-1">${{ "%.3f" | format(cost_stats.today) }}</div>
    </div>
    <div class="bg-slate-800 rounded-xl border border-slate-700 p-4 text-center">
      <div class="text-xs text-slate-500 uppercase tracking-wide">This Week</div>
      <div class="text-2xl font-bold text-slate-100 mt-1">${{ "%.3f" | format(cost_stats.week) }}</div>
    </div>
    <div class="bg-slate-800 rounded-xl border border-slate-700 p-4 text-center">
      <div class="text-xs text-slate-500 uppercase tracking-wide">This Month</div>
      <div class="text-2xl font-bold text-slate-100 mt-1">${{ "%.2f" | format(cost_stats.month) }}</div>
    </div>
    <div class="bg-slate-800 rounded-xl border border-slate-700 p-4 text-center">
      <div class="text-xs text-slate-500 uppercase tracking-wide">Projected / mo</div>
      <div class="text-2xl font-bold text-slate-100 mt-1">${{ "%.2f" | format(cost_stats.projected_monthly) }}</div>
    </div>
  </div>

  <!-- Feature breakdown table (current calendar month) -->
  <div class="bg-slate-800 rounded-xl border border-slate-700 p-5">
    <h2 class="text-sm font-semibold text-slate-300 mb-4">This Month by Feature</h2>
    {% if monthly_breakdown %}
    {% set cf_max_calls = (monthly_breakdown | map(attribute='calls') | max) or 1 %}
    {% set cf_max_spend = (monthly_breakdown | map(attribute='spend') | max) or 1 %}
    <table class="w-full text-sm">
      <thead>
        <tr class="text-left text-slate-500 border-b border-slate-700">
          <th class="pb-2 font-medium">Feature</th>
          <th class="pb-2 font-medium text-right">Calls</th>
          <th class="pb-2 font-medium text-right">Spend</th>
        </tr>
      </thead>
      <tbody>
        {% for item in monthly_breakdown %}
        {% set call_pct = (item.calls / cf_max_calls * 100) %}
        {% set spend_pct = (item.spend / cf_max_spend * 100) %}
        <tr class="border-b border-slate-700/50 hover:bg-slate-700/20 transition-colors">
          <td class="py-2 text-slate-300 font-mono">{{ item.purpose }}</td>
          <td class="py-2 text-slate-400 text-right" style="background: linear-gradient(to left, rgba(148,163,184,0.18) {{ call_pct }}%, transparent {{ call_pct }}%);">{{ item.calls }}</td>
          <td class="py-2 text-slate-300 text-right" style="background: linear-gradient(to left, rgba(139,92,246,0.25) {{ spend_pct }}%, transparent {{ spend_pct }}%);">${{ "%.4f" | format(item.spend) }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <p class="text-slate-500 text-sm text-center py-4">No paid API calls this month.</p>
    {% endif %}
  </div>

  <!-- Provider breakdown table (current calendar month) -->
  <div class="bg-slate-800 rounded-xl border border-slate-700 p-5">
    <h2 class="text-sm font-semibold text-slate-300 mb-4">This Month by Provider</h2>
    {% if monthly_provider_breakdown %}
    {% set cp_max_calls = (monthly_provider_breakdown | map(attribute='calls') | max) or 1 %}
    {% set cp_max_spend = (monthly_provider_breakdown | map(attribute='spend') | max) or 1 %}
    <table class="w-full text-sm">
      <thead>
        <tr class="text-left text-slate-500 border-b border-slate-700">
          <th class="pb-2 font-medium">Provider</th>
          <th class="pb-2 font-medium text-right">Calls</th>
          <th class="pb-2 font-medium text-right">Spend</th>
        </tr>
      </thead>
      <tbody>
        {% for item in monthly_provider_breakdown %}
        {% set call_pct = (item.calls / cp_max_calls * 100) %}
        {% set spend_pct = (item.spend / cp_max_spend * 100) %}
        <tr class="border-b border-slate-700/50 hover:bg-slate-700/20 transition-colors">
          <td class="py-2 text-slate-300 font-mono">{{ item.provider }}</td>
          <td class="py-2 text-slate-400 text-right" style="background: linear-gradient(to left, rgba(148,163,184,0.18) {{ call_pct }}%, transparent {{ call_pct }}%);">{{ item.calls }}</td>
          <td class="py-2 text-slate-300 text-right" style="background: linear-gradient(to left, rgba(139,92,246,0.25) {{ spend_pct }}%, transparent {{ spend_pct }}%);">${{ "%.4f" | format(item.spend) }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <p class="text-slate-500 text-sm text-center py-4">No paid API calls this month.</p>
    {% endif %}
  </div>

  {% endif %}

</div>
{% endblock %}

{% block extra_scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>

{% if view == 'usage' %}
<script>
(function () {
  const rawData = {{ daily_usage | tojson }};

  const canvas = document.getElementById('usage-chart');
  const empty = document.getElementById('usage-chart-empty');
  if (rawData.length === 0) {
    if (canvas) canvas.style.display = 'none';
    if (empty) { empty.classList.remove('hidden'); empty.style.display = 'flex'; }
    return;
  }

  // Top-N palette: distinct colors for the heavyweights, neutral gray
  // for the "Other" bucket. Franconeri: more than ~5 categorical colors
  // and the viewer stops matching swatches to legend entries.
  const TOP_PALETTE = [
    'rgba(139, 92, 246, 0.85)',  // violet — #1
    'rgba(14, 165, 233, 0.85)',  // sky — #2
    'rgba(16, 185, 129, 0.85)',  // emerald — #3
    'rgba(245, 158, 11, 0.85)',  // amber — #4
  ];
  const OTHER_COLOR = 'rgba(100, 116, 139, 0.65)';  // slate-500 — Other bucket
  const TOP_N = 4;

  const dateSet = new Set();
  rawData.forEach(d => dateSet.add(d.date));
  const dates = Array.from(dateSet).sort();

  // 30-day total per purpose, used both for sort order AND top-N bucketing.
  const purposeTotals = {};
  rawData.forEach(d => {
    purposeTotals[d.purpose] = (purposeTotals[d.purpose] || 0) + d.output_tokens;
  });
  const purposesSorted = Object.keys(purposeTotals)
    .sort((a, b) => purposeTotals[b] - purposeTotals[a]);  // DESC by total
  const topPurposes = purposesSorted.slice(0, TOP_N);
  const tailPurposes = new Set(purposesSorted.slice(TOP_N));

  // lookup: date+purpose -> output_tokens
  const lookup = {};
  rawData.forEach(d => {
    lookup[d.date + '|' + d.purpose] = d.output_tokens;
  });

  // Build datasets in reverse-sorted order so the LARGEST series sits at
  // the bottom of the stack (Cleveland: bottom-of-stack shares the
  // common baseline and reads most accurately). Chart.js stacks in
  // dataset-declaration order, top-most listed = top of stack.
  const datasets = [];
  // Largest first → bottom of stack.
  topPurposes.forEach((purpose, i) => {
    datasets.push({
      type: 'bar',
      label: purpose,
      data: dates.map(date => lookup[date + '|' + purpose] || 0),
      backgroundColor: TOP_PALETTE[i],
      stack: 'tokens',
    });
  });
  // Tail purposes collapsed into a single "Other" series.
  if (tailPurposes.size > 0) {
    const otherData = dates.map(date => {
      let sum = 0;
      tailPurposes.forEach(p => { sum += lookup[date + '|' + p] || 0; });
      return sum;
    });
    datasets.push({
      type: 'bar',
      label: `Other (${tailPurposes.size})`,
      data: otherData,
      backgroundColor: OTHER_COLOR,
      stack: 'tokens',
      _tailPurposes: Array.from(tailPurposes),  // surface in tooltip on demand
    });
  }

  const axisColor = 'rgba(148, 163, 184, 0.65)';

  new Chart(canvas, {
    data: { labels: dates, datasets },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        x: {
          stacked: true,
          ticks: { color: 'rgb(148, 163, 184)' },
          grid: { display: false },
          border: { display: true, color: axisColor },
        },
        y: {
          stacked: true,
          ticks: {
            color: 'rgb(148, 163, 184)',
            stepSize: 500000,
            callback: (v) => v >= 1000 ? (v / 1000).toFixed(0) + 'k' : v,
          },
          grid: { display: false },
          border: { display: true, color: axisColor },
        },
      },
      plugins: {
        legend: { display: true, labels: { color: 'rgb(148, 163, 184)' } },
        tooltip: {
          callbacks: {
            title: (items) => items[0].label,
            label: (item) => `${item.dataset.label}: ${item.raw.toLocaleString()} tokens out`,
            footer: (items) => {
              const total = items.reduce((sum, i) => sum + i.raw, 0);
              return `Day total: ${total.toLocaleString()} tokens out`;
            },
          },
        },
      },
    },
  });
})();
</script>
{% else %}
<script>
(function () {
  const rawData = {{ daily_breakdown | tojson }};
  const budgetCap = {{ budget_cap | tojson }};

  const canvas = document.getElementById('cost-chart');
  const empty = document.getElementById('cost-chart-empty');
  if (rawData.length === 0) {
    if (canvas) canvas.style.display = 'none';
    if (empty) { empty.classList.remove('hidden'); empty.style.display = 'flex'; }
    return;
  }

  const PALETTE = [
    'rgba(139, 92, 246, 0.85)',
    'rgba(14, 165, 233, 0.85)',
    'rgba(16, 185, 129, 0.85)',
    'rgba(245, 158, 11, 0.85)',
    'rgba(236, 72, 153, 0.85)',
    'rgba(99, 102, 241, 0.85)',
    'rgba(248, 113, 113, 0.85)',
    'rgba(45, 212, 191, 0.85)',
  ];

  const dateSet = new Set();
  const purposeSet = new Set();
  rawData.forEach(d => { dateSet.add(d.date); purposeSet.add(d.purpose); });
  const dates = Array.from(dateSet).sort();
  const purposes = Array.from(purposeSet).sort();

  const lookup = {};
  rawData.forEach(d => { lookup[d.date + '|' + d.purpose] = d.spend; });

  const barDatasets = purposes.map((purpose, i) => ({
    type: 'bar',
    label: purpose,
    data: dates.map(date => lookup[date + '|' + purpose] || 0),
    backgroundColor: PALETTE[i % PALETTE.length],
    stack: 'costs',
  }));

  const budgetPerDay = budgetCap / 30;
  const paceDataset = {
    type: 'line',
    label: 'Budget pace',
    data: Array(dates.length).fill(budgetPerDay),
    borderColor: 'rgba(148, 163, 184, 0.6)',
    borderDash: [5, 5],
    pointRadius: 0,
    fill: false,
    order: 0,
  };

  new Chart(canvas, {
    data: { labels: dates, datasets: [...barDatasets, paceDataset] },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        x: { stacked: true, ticks: { color: 'rgb(148, 163, 184)' }, grid: { color: 'rgba(100, 116, 139, 0.3)' } },
        y: { stacked: true, ticks: { color: 'rgb(148, 163, 184)' }, grid: { color: 'rgba(100, 116, 139, 0.3)' } },
      },
      plugins: {
        legend: { display: true, labels: { color: 'rgb(148, 163, 184)' } },
        tooltip: {
          callbacks: {
            title: (items) => items[0].label,
            label: (item) => {
              if (item.dataset.type === 'line') return null;
              return `${item.dataset.label}: $${item.raw.toFixed(4)}`;
            },
            footer: (items) => {
              const total = items
                .filter(i => i.dataset.type !== 'line')
                .reduce((sum, i) => sum + i.raw, 0);
              return `Day total: $${total.toFixed(4)}`;
            },
          },
        },
      },
    },
  });
})();
</script>
{% endif %}
{% endblock %}