{% extends "base.html" %}
{% block title %}Historique des conversations — SPARC{% endblock %}

{% block extra_head %}
<style>
  .conv-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: .75rem;
    background: #fff;
    transition: box-shadow .15s;
  }
  .conv-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
  .conv-title { font-weight: 600; font-size: .95rem; color: #1e293b; }
  .conv-meta { font-size: .78rem; color: #64748b; margin-top: .2rem; }
  .badge-provider {
    font-size: .72rem; padding: .25em .6em; border-radius: 6px;
    background: #f1f5f9; color: #475569; font-weight: 500;
  }
  .token-stat { font-size: .78rem; color: #64748b; }
  .empty-state { text-align: center; padding: 4rem 1rem; color: #94a3b8; }
  .empty-state i { font-size: 3rem; display: block; margin-bottom: 1rem; }
  .filter-bar { margin-bottom: 1.5rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
  #searchInput { max-width: 280px; }
</style>
{% endblock %}

{% block content %}
<div class="container py-4" style="max-width: 860px;">
  <div class="d-flex align-items-center mb-4 gap-3">
    <a href="/chat" class="btn btn-outline-secondary btn-sm">
      <i class="bi bi-arrow-left me-1"></i>Retour au chat
    </a>
    <h4 class="mb-0 flex-grow-1">
      <i class="bi bi-clock-history me-2 text-primary"></i>Historique des conversations
    </h4>
    <span class="badge bg-secondary" id="convCount">{{ conversations|length }}</span>
    <button class="btn btn-outline-danger btn-sm" id="deleteAllBtn" onclick="deleteAll()" {% if not conversations %}disabled{% endif %}>
      <i class="bi bi-trash me-1"></i>Tout supprimer
    </button>
  </div>

  <div class="filter-bar">
    <input type="search" id="searchInput" class="form-control form-control-sm" placeholder="Rechercher…" oninput="filterCards()">
    <select id="providerFilter" class="form-select form-select-sm" style="max-width:160px" onchange="filterCards()">
      <option value="">Tous les providers</option>
      {% set providers = conversations | map(attribute='provider') | select | unique | list %}
      {% for p in providers %}
      <option value="{{ p }}">{{ p|capitalize }}</option>
      {% endfor %}
    </select>
    <label class="ms-auto text-muted" style="font-size:.82rem" id="shownCount"></label>
  </div>

  {% if conversations %}
  <div id="convList">
    {% for c in conversations %}
    <div class="conv-card" data-title="{{ (c.title or '')|lower }}" data-provider="{{ c.provider or '' }}">
      <div class="d-flex align-items-start gap-2">
        <div class="flex-grow-1 min-w-0">
          <div class="conv-title text-truncate">
            {{ c.title or ('Conversation ' + c.id[:8]) }}
          </div>
          <div class="conv-meta d-flex flex-wrap gap-2 mt-1">
            {% if c.provider %}
            <span class="badge-provider">
              <i class="bi bi-cpu me-1"></i>{{ c.provider|capitalize }}
              {% if c.model %} · {{ c.model }}{% endif %}
            </span>
            {% endif %}
            {% if c.token_in or c.token_out %}
            <span class="token-stat">
              <i class="bi bi-arrow-down-circle me-1"></i>{{ c.token_in or 0 }} in
              <i class="bi bi-arrow-up-circle ms-1 me-1"></i>{{ c.token_out or 0 }} out
            </span>
            {% endif %}
            {% if c.message_count %}
            <span class="token-stat"><i class="bi bi-chat-dots me-1"></i>{{ c.message_count }} messages</span>
            {% endif %}
            <span class="token-stat ms-auto">
              <i class="bi bi-calendar3 me-1"></i>
              {{ c.updated_at or c.created_at or '' }}
            </span>
          </div>
        </div>
        <div class="d-flex gap-1 flex-shrink-0">
          <button class="btn btn-sm btn-outline-primary" onclick="openConv('{{ c.id }}')" title="Ouvrir">
            <i class="bi bi-chat-square-text"></i>
          </button>
          <button class="btn btn-sm btn-outline-secondary" onclick="exportConv('{{ c.id }}')" title="Exporter JSON">
            <i class="bi bi-download"></i>
          </button>
          <button class="btn btn-sm btn-outline-danger" onclick="deleteConv('{{ c.id }}', this)" title="Supprimer">
            <i class="bi bi-trash"></i>
          </button>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="empty-state">
    <i class="bi bi-chat-square-dots"></i>
    Aucune conversation sauvegardée.<br>
    <a href="/chat" class="btn btn-primary mt-3">Démarrer une conversation</a>
  </div>
  {% endif %}
</div>

<script>
function filterCards() {
  const q = document.getElementById('searchInput').value.toLowerCase();
  const prov = document.getElementById('providerFilter').value.toLowerCase();
  const cards = document.querySelectorAll('#convList .conv-card');
  let shown = 0;
  cards.forEach(c => {
    const titleMatch = !q || c.dataset.title.includes(q);
    const provMatch = !prov || c.dataset.provider === prov;
    c.style.display = (titleMatch && provMatch) ? '' : 'none';
    if (titleMatch && provMatch) shown++;
  });
  const total = cards.length;
  document.getElementById('shownCount').textContent = shown < total ? `${shown} / ${total}` : `${total} conversation${total > 1 ? 's' : ''}`;
}

function openConv(id) {
  sessionStorage.setItem('sparc_conv_id', id);
  sessionStorage.setItem('sparc_load_conv', id);
  window.location.href = '/chat';
}

async function exportConv(id) {
  const r = await fetch(`/api/conversations/${id}`);
  if (!r.ok) { alert('Erreur lors du chargement'); return; }
  const data = await r.json();
  const blob = new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'});
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = `conv_${id.slice(0, 8)}_${new Date().toISOString().slice(0,10)}.json`;
  a.click();
}

async function deleteConv(id, btn) {
  if (!confirm('Supprimer cette conversation ?')) return;
  const r = await fetch(`/api/conversations/${id}`, {method: 'DELETE'});
  if (r.ok) {
    btn.closest('.conv-card').remove();
    updateCount();
    filterCards();
  } else {
    alert('Erreur lors de la suppression');
  }
}

async function deleteAll() {
  if (!confirm('Supprimer TOUTES les conversations ? Cette action est irréversible.')) return;
  const r = await fetch('/api/conversations', {method: 'DELETE'});
  if (r.ok) {
    document.getElementById('convList').innerHTML = `
      <div class="empty-state">
        <i class="bi bi-chat-square-dots"></i>
        Aucune conversation sauvegardée.<br>
        <a href="/chat" class="btn btn-primary mt-3">Démarrer une conversation</a>
      </div>`;
    document.getElementById('convCount').textContent = '0';
    document.getElementById('deleteAllBtn').disabled = true;
    document.getElementById('shownCount').textContent = '';
  } else {
    alert('Erreur lors de la suppression');
  }
}

function updateCount() {
  const n = document.querySelectorAll('#convList .conv-card').length;
  document.getElementById('convCount').textContent = n;
  if (n === 0) document.getElementById('deleteAllBtn').disabled = true;
}

// Init count label
document.addEventListener('DOMContentLoaded', filterCards);
</script>
{% endblock %}