{% extends "base.html" %}
{% block title %}Analysis{% endblock %}

{% block head %}
{% if active_tab == 'analysis' %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
{% endif %}
{% endblock %}

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

  <h1 class="text-2xl font-bold">Mailbox Analysis</h1>

  {% set period_qs = "days=" ~ lookback_param ~ ("&custom_days=" ~ (custom_days or '')) if lookback_param == 'custom' else "days=" ~ lookback_param %}

  <!-- Tabs -->
  <div role="tablist" class="tabs tabs-bordered">
    <a role="tab" class="tab {% if active_tab == 'analysis' %}tab-active{% endif %}"
       href="/analysis?tab=analysis">
      Analysis
    </a>
    <a role="tab" class="tab {% if active_tab == 'scanner' %}tab-active{% endif %}"
       href="/analysis?tab=scanner">
      Mailbox Scanner
    </a>
  </div>

  {% if active_tab == 'analysis' %}
  <!-- =============== ANALYSIS TAB =============== -->

  <!-- Live mailbox scan — htmx loads this async -->
  <div class="card bg-base-100 shadow-sm">
    <div class="card-body pb-2">
      <div class="flex flex-wrap items-center justify-between gap-3">
        <div>
          <h2 class="card-title text-base">Live Sender Analysis</h2>
          <p class="text-sm text-base-content/50">Scanned directly from the mailbox via Graph API.</p>
        </div>
        <div class="flex items-center gap-2">
          <form method="get" action="/analysis" class="flex items-center gap-2">
            <input type="hidden" name="tab" value="analysis" />
            <div class="join">
              {% for label, val in [('30d','30'),('60d','60'),('90d','90'),('6m','180'),('1y','365')] %}
              <button type="submit" name="days" value="{{ val }}"
                      class="join-item btn btn-xs {% if lookback_param == val %}btn-primary{% else %}btn-ghost border border-base-300{% endif %}">
                {{ label }}
              </button>
              {% endfor %}
            </div>
          </form>
          <button class="btn btn-ghost btn-sm"
                  hx-get="/analysis/live?{{ period_qs }}"
                  hx-target="#live-tbody"
                  hx-swap="innerHTML"
                  hx-indicator="#live-spinner">
            ↻
          </button>
        </div>
      </div>
    </div>
    <div class="overflow-x-auto">
      <table class="table table-sm" id="senders-table">
        <thead>
          <tr>
            <th class="cursor-pointer select-none" data-col="0" data-type="str">Sender <span class="sort-icon text-base-content/30">↕</span></th>
            <th class="cursor-pointer select-none" data-col="1" data-type="str">Type <span class="sort-icon text-base-content/30">↕</span></th>
            <th class="cursor-pointer select-none text-right" data-col="2" data-type="num">Count <span class="sort-icon">↓</span></th>
            <th class="cursor-pointer select-none" data-col="3" data-type="date">First Seen <span class="sort-icon text-base-content/30">↕</span></th>
            <th class="cursor-pointer select-none" data-col="4" data-type="date">Last Seen <span class="sort-icon text-base-content/30">↕</span></th>
            <th></th>
          </tr>
        </thead>
        <tbody id="live-tbody"
               hx-get="/analysis/live?{{ period_qs }}"
               hx-trigger="load"
               hx-swap="innerHTML"
               hx-indicator="#live-spinner">
          <tr id="live-spinner">
            <td colspan="6" class="text-center py-10">
              <span class="loading loading-spinner loading-md text-primary"></span>
              <span class="ml-2 text-base-content/50 text-sm">Scanning mailbox…</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- Processed-email charts (from email_log) -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">

    <div class="card bg-base-100 shadow-sm">
      <div class="card-body">
        <h2 class="card-title text-base">Daily Volume — Processed Emails</h2>
        <p class="text-xs text-base-content/40 -mt-1">Emails processed by Howl in this period</p>
        <div class="h-48">
          <canvas id="dailyChart"></canvas>
        </div>
      </div>
    </div>

    <div class="card bg-base-100 shadow-sm">
      <div class="card-body">
        <h2 class="card-title text-base">Classification Breakdown</h2>
        <p class="text-xs text-base-content/40 -mt-1">LLM classifications from processed emails</p>
        <div class="h-48">
          <canvas id="classChart"></canvas>
        </div>
      </div>
    </div>

  </div>

  {% elif active_tab == 'scanner' %}
  <!-- =============== SCANNER TAB =============== -->

  {% set scanner_qs = period_qs ~ "&mailbox=" ~ (selected_mailbox | urlencode) %}

  <div class="card bg-base-100 shadow-sm">
    <div class="card-body pb-2">
      <div class="flex flex-wrap items-center justify-between gap-3">
        <div>
          <h2 class="card-title text-base">Mailbox Scanner</h2>
          <p class="text-sm text-base-content/50">Scan the mailbox and create sender profiles. Use AI to auto-recommend profile settings.</p>
        </div>
        <div class="flex items-center gap-2">
          {% if mailboxes | length > 1 %}
          <select id="mailbox-select" class="select select-bordered select-sm font-mono text-xs"
                  onchange="switchMailbox(this.value)">
            {% for mb in mailboxes %}
            <option value="{{ mb }}" {% if mb == selected_mailbox %}selected{% endif %}>{{ mb }}</option>
            {% endfor %}
          </select>
          {% endif %}
          <form method="get" action="/analysis" class="flex items-center gap-2">
            <input type="hidden" name="tab" value="scanner" />
            <input type="hidden" name="mailbox" value="{{ selected_mailbox }}" />
            <div class="join">
              {% for label, val in [('7d','7'),('14d','14'),('30d','30'),('60d','60'),('90d','90')] %}
              <button type="submit" name="days" value="{{ val }}"
                      class="join-item btn btn-xs {% if lookback_param == val %}btn-primary{% else %}btn-ghost border border-base-300{% endif %}">
                {{ label }}
              </button>
              {% endfor %}
            </div>
          </form>
          <button class="btn btn-ghost btn-sm"
                  hx-get="/analysis/scanner?{{ scanner_qs }}"
                  hx-target="#scanner-tbody"
                  hx-swap="innerHTML">
            ↻
          </button>
        </div>
      </div>
    </div>
    <div class="overflow-x-auto">
      <table class="table table-sm" id="scanner-table">
        <thead>
          <tr>
            <th>Received</th>
            <th>Sender</th>
            <th>Subject</th>
            <th></th>
          </tr>
        </thead>
        <tbody id="scanner-tbody"
               hx-get="/analysis/scanner?{{ scanner_qs }}"
               hx-trigger="load"
               hx-swap="innerHTML">
          <tr>
            <td colspan="4" class="text-center py-10">
              <span class="loading loading-spinner loading-md text-primary"></span>
              <span class="ml-2 text-base-content/50 text-sm">Scanning mailbox…</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  {% endif %}

</div>

<script>
(function () {
  {% if active_tab == 'analysis' %}
  // Sortable table for analysis tab
  var table = document.getElementById('senders-table');
  var sortCol = 2, sortDir = 'desc';

  function cellValue(row, col, type) {
    var cell = row.cells[col];
    if (!cell) return '';
    var text = cell.innerText.trim();
    if (type === 'num') return parseInt(text.replace(/\D/g, '')) || 0;
    if (type === 'date') return text === '\u2014' ? '' : text;
    return text.toLowerCase();
  }

  function sortTable(col, type) {
    var tbody = document.getElementById('live-tbody');
    var rows = Array.from(tbody.rows);
    if (rows.length <= 1 && rows[0] && rows[0].cells.length === 1) return;

    if (sortCol === col) {
      sortDir = sortDir === 'asc' ? 'desc' : 'asc';
    } else {
      sortCol = col;
      sortDir = type === 'num' || type === 'date' ? 'desc' : 'asc';
    }

    rows.sort(function (a, b) {
      var av = cellValue(a, col, type);
      var bv = cellValue(b, col, type);
      if (av < bv) return sortDir === 'asc' ? -1 : 1;
      if (av > bv) return sortDir === 'asc' ? 1 : -1;
      return 0;
    });
    rows.forEach(function (r) { tbody.appendChild(r); });

    Array.from(table.tHead.rows[0].cells).forEach(function (th, i) {
      var icon = th.querySelector('.sort-icon');
      if (!icon) return;
      if (i === sortCol) {
        icon.textContent = sortDir === 'asc' ? '\u2191' : '\u2193';
        icon.classList.remove('text-base-content/30');
      } else {
        icon.textContent = '\u2195';
        icon.classList.add('text-base-content/30');
      }
    });
  }

  document.body.addEventListener('htmx:beforeRequest', function (e) {
    if (e.detail.target && e.detail.target.id === 'live-tbody') {
      e.detail.target.innerHTML =
        '<tr><td colspan="6" class="text-center py-10">' +
        '<span class="loading loading-spinner loading-md text-primary"></span>' +
        '<span class="ml-2 text-base-content/50 text-sm">Scanning mailbox\u2026</span>' +
        '</td></tr>';
    }
  });

  document.body.addEventListener('htmx:afterSwap', function (e) {
    if (e.detail.target && e.detail.target.id === 'live-tbody') {
      sortCol = 2; sortDir = 'desc';
    }
  });

  if (table && table.tHead) {
    Array.from(table.tHead.rows[0].cells).forEach(function (th) {
      if (th.dataset.col === undefined) return;
      th.addEventListener('click', function () { sortTable(+th.dataset.col, th.dataset.type); });
    });
  }

  // Charts
  var palette = [
    '#6366f1','#8b5cf6','#ec4899','#f59e0b','#10b981',
    '#3b82f6','#ef4444','#14b8a6','#f97316','#84cc16','#06b6d4','#a855f7'
  ];

  var dailyLabels = {{ daily_labels_json | safe }};
  var dailyCounts = {{ daily_counts_json | safe }};
  var classLabels  = {{ classification_labels_json | safe }};
  var classCounts  = {{ classification_counts_json | safe }};

  if (dailyLabels.length) {
    new Chart(document.getElementById('dailyChart'), {
      type: 'bar',
      data: { labels: dailyLabels, datasets: [{ label: 'Emails', data: dailyCounts, backgroundColor: '#6366f1', borderRadius: 3 }] },
      options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } },
        scales: { x: { grid: { display: false }, ticks: { maxTicksLimit: 10, font: { size: 10 } } }, y: { beginAtZero: true, ticks: { font: { size: 10 } } } } }
    });
  } else {
    document.getElementById('dailyChart').parentElement.innerHTML += '<p class="text-sm text-base-content/50">No processed-email data for this period.</p>';
  }

  if (classLabels.length) {
    new Chart(document.getElementById('classChart'), {
      type: 'doughnut',
      data: { labels: classLabels, datasets: [{ data: classCounts, backgroundColor: palette.slice(0, classLabels.length), borderWidth: 1 }] },
      options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'right', labels: { font: { size: 10 }, boxWidth: 12 } } } }
    });
  } else {
    document.getElementById('classChart').parentElement.innerHTML += '<p class="text-sm text-base-content/50">No classification data for this period.</p>';
  }
  {% endif %}

  {% if active_tab == 'scanner' %}
  // Switch mailbox: reload the page preserving period
  window.switchMailbox = function (mb) {
    var url = '/analysis?tab=scanner&{{ period_qs }}&mailbox=' + encodeURIComponent(mb);
    window.location.href = url;
  };

  // Scanner: show spinner on refresh
  document.body.addEventListener('htmx:beforeRequest', function (e) {
    if (e.detail.target && e.detail.target.id === 'scanner-tbody') {
      e.detail.target.innerHTML =
        '<tr><td colspan="4" class="text-center py-10">' +
        '<span class="loading loading-spinner loading-md text-primary"></span>' +
        '<span class="ml-2 text-base-content/50 text-sm">Scanning mailbox\u2026</span>' +
        '</td></tr>';
    }
  });

  // Convert UTC timestamps to local timezone after rows load
  function convertLocalTimes(root) {
    (root || document).querySelectorAll('time.local-time').forEach(function (el) {
      var d = new Date(el.getAttribute('datetime'));
      if (isNaN(d)) return;
      var mm = String(d.getMonth() + 1).padStart(2, '0');
      var dd = String(d.getDate()).padStart(2, '0');
      var hh = String(d.getHours()).padStart(2, '0');
      var min = String(d.getMinutes()).padStart(2, '0');
      el.textContent = mm + '/' + dd + ' ' + hh + ':' + min;
    });
  }
  document.body.addEventListener('htmx:afterSwap', function (e) {
    if (e.detail.target && e.detail.target.id === 'scanner-tbody') {
      convertLocalTimes(e.detail.target);
    }
  });
  {% endif %}
})();
</script>
{% endblock %}