{% extends "webmail/base.html" %}

{% block title %}All mail — ign8mail{% endblock %}

{% block extra_css %}
<style>
  .thread-row {
    display: grid;
    grid-template-columns: 9rem 1fr 2.6fr auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1.5rem;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: background 0.1s;
  }
  .thread-row:hover { background: var(--surface2); }
  .thread-row.unread { font-weight: 600; }
  .thread-row:not(.unread) { color: var(--muted2); }
  .mb-pill {
    font-family: var(--mono);
    font-size: 0.7rem;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--surface2);
    color: var(--muted);
    border: 1px solid var(--border);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mb-pill.personal { color: var(--flame); border-color: rgba(249,115,22,.3); }
  .mb-pill.shared { color: var(--accent); border-color: rgba(59,130,246,.3); }
  .thread-from, .thread-subject {
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .thread-count {
    font-size: 0.72rem;
    color: var(--muted);
    font-family: var(--mono);
    background: var(--surface2);
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid var(--border);
    white-space: nowrap;
  }
  .thread-count.multi { color: var(--accent); border-color: rgba(59,130,246,.3); }
  .thread-date {
    font-size: 0.72rem;
    color: var(--muted);
    white-space: nowrap;
    font-family: var(--mono);
  }
  .unseen-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    display: inline-block;
    margin-right: 0.4rem;
  }
  .empty { padding: 2rem 1.5rem; color: var(--muted); font-size: 0.85rem; }
  .loading { padding: 2rem 1.5rem; color: var(--muted); font-size: 0.85rem; }
  .skeleton-row {
    display: grid;
    grid-template-columns: 9rem 1fr 2.6fr auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1.5rem;
    border-bottom: 1px solid var(--border);
  }
  .skeleton-row .bar {
    height: 12px;
    background: linear-gradient(90deg, var(--surface2), var(--border), var(--surface2));
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
    border-radius: 4px;
  }
  @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
  <h1>{% if context_mailbox %}{{ context_mailbox }}{% else %}All mail{% endif %}</h1>
  <span id="inbox-count" class="sub">loading…</span>
</div>
<div id="inbox-rows"
     data-context-mailbox="{{ context_mailbox }}"
     data-window-days="{{ window_days|default_if_none:'' }}">
  <div class="skeleton-row"><span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span></div>
  <div class="skeleton-row"><span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span></div>
  <div class="skeleton-row"><span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span></div>
</div>
{% endblock %}

{% block extra_js %}
<script>
(function () {
  const root = document.getElementById('inbox-rows');
  const countEl = document.getElementById('inbox-count');
  if (!root) return;

  const ctxMb = root.dataset.contextMailbox || '';
  const days = root.dataset.windowDays || '';
  const params = new URLSearchParams();
  if (ctxMb) params.set('mailbox', ctxMb);
  if (days) params.set('days', days);
  const url = '{% url "api_inbox" %}' + (params.toString() ? '?' + params.toString() : '');

  function esc(s) {
    const d = document.createElement('div');
    d.textContent = s == null ? '' : String(s);
    return d.innerHTML;
  }

  function threadHref(mailbox, uid) {
    return '/m/' + encodeURIComponent(mailbox) + '/thread/' + encodeURIComponent(uid) + '/';
  }

  function renderRows(rows) {
    if (!rows.length) {
      root.innerHTML = '<div class="empty">No messages.</div>';
      return;
    }
    const html = rows.map(row => {
      const pillCls = 'mb-pill ' + (row.shared ? 'shared' : 'personal');
      const rowCls = 'thread-row' + (row.unseen_count ? ' unread' : '');
      const dot = row.unseen_count ? '<span class="unseen-dot"></span>' : '';
      const countCls = 'thread-count' + (row.count > 1 ? ' multi' : '');
      const countText = row.count > 1 ? (row.count + ' msgs') : '1 msg';
      return (
        '<a class="' + rowCls + '" href="' + esc(threadHref(row.root_mailbox, row.root_uid)) + '">' +
          '<span class="' + pillCls + '">' + esc(row.root_mailbox) + '</span>' +
          '<span class="thread-from">' + dot + esc(row.senders) + '</span>' +
          '<span class="thread-subject">' + esc(row.subject) + '</span>' +
          '<span class="' + countCls + '">' + esc(countText) + '</span>' +
          '<span class="thread-date">' + esc(row.latest_date) + '</span>' +
        '</a>'
      );
    }).join('');
    root.innerHTML = html;
  }

  fetch(url, { credentials: 'same-origin' })
    .then(r => r.ok ? r.json() : Promise.reject(r.status))
    .then(data => {
      const n = data.rows.length;
      countEl.textContent = n + ' thread' + (n === 1 ? '' : 's');
      renderRows(data.rows);
    })
    .catch(() => {
      countEl.textContent = 'failed to load';
      root.innerHTML = '<div class="empty">Failed to load messages. Refresh to try again.</div>';
    });
})();
</script>
{% endblock %}