{% extends 'base.html' %}
{% block title %}Sources — Admin OpenCare{% endblock %}

{% block content %}
<div class="admin-layout">
  {% include 'admin/_sidebar.html' %}

  <div class="admin-main">
    <div class="admin-page-header">
      <div>
        <h1 class="admin-page-title">
          <i class="fas fa-rss me-2 text-accent"></i>Sources de crawl
        </h1>
        <p class="text-muted mb-0">Gérez les URLs surveillées quotidiennement</p>
      </div>
      <button type="button" class="btn btn-outline-primary btn-sm" onclick="triggerCrawl(null)">
        <i class="fas fa-sync me-1"></i>Crawler toutes les sources
      </button>
    </div>

    <!-- ── Crawl log panel ─────────────────────────────────────────── -->
    <div id="crawlStatusPanel" class="card border-0 shadow-sm rounded-3 mb-4" style="display:none">
      <div class="card-body p-4">
        <div class="d-flex align-items-center gap-3 mb-3">
          <div id="crawlStatusIcon" class="admin-stat-icon" style="background:#eff6ff;color:#2563eb">
            <i class="fas fa-sync fa-spin"></i>
          </div>
          <div class="flex-grow-1">
            <div class="d-flex align-items-center gap-2 flex-wrap">
              <strong id="crawlStatusTitle">Crawl en cours…</strong>
              <span id="crawlStatusBadge" class="badge bg-primary">En cours</span>
            </div>
            <div class="text-muted small" id="crawlStatusMeta"></div>
          </div>
          <div id="crawlStatsCounts" class="d-flex gap-3 text-center"></div>
        </div>
        <div id="crawlLog" class="crawl-log-box">
          <span class="text-muted" style="font-size:.78rem;font-style:italic">En attente de logs…</span>
        </div>
      </div>
    </div>

    <!-- ── Add source form ─────────────────────────────────────────── -->
    <div class="card border-0 shadow-sm rounded-3 mb-4">
      <div class="card-body p-4">
        <h5 class="fw-bold mb-3"><i class="fas fa-plus-circle me-2 text-accent"></i>Ajouter une source</h5>
        <form method="post" action="{{ url_for('admin_sources') }}">
          <div class="row g-3 align-items-end">
            <div class="col-md-3">
              <label class="form-label fw-medium">Nom</label>
              <input type="text" name="name" class="form-control" placeholder="Examine.com Nutrition" required>
            </div>
            <div class="col-md-4">
              <label class="form-label fw-medium">URL</label>
              <input type="url" name="url" class="form-control" placeholder="https://..." required>
            </div>
            <div class="col-md-2">
              <label class="form-label fw-medium">Type</label>
              <select name="source_type" class="form-select">
                <option value="rss">Flux RSS</option>
                <option value="index">Index (liens)</option>
                <option value="webpage">Page web</option>
              </select>
            </div>
            <div class="col-md-2">
              <label class="form-label fw-medium">Catégorie</label>
              <select name="category" class="form-select">
                <option value="advice">Conseils</option>
                <option value="scientific">Scientifique</option>
              </select>
            </div>
            <div class="col-md-1">
              <button type="submit" class="btn btn-primary w-100"><i class="fas fa-plus"></i></button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <!-- ── Sources list ────────────────────────────────────────────── -->
    {% if sources %}
    <div class="card border-0 shadow-sm rounded-3">
      <div class="table-responsive">
        <table class="table table-hover mb-0 admin-table">
          <thead>
            <tr>
              <th>Nom</th>
              <th>URL</th>
              <th>Type</th>
              <th>Catégorie</th>
              <th>Dernier crawl</th>
              <th>Articles</th>
              <th>Statut</th>
              <th class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for src in sources %}
            <tr class="{% if not src.active %}table-secondary opacity-60{% endif %}">
              <td class="fw-medium">{{ src.name }}</td>
              <td>
                <a href="{{ src.url }}" target="_blank" rel="noopener"
                   class="text-muted small text-truncate d-inline-block" style="max-width:260px">
                  {{ src.url }}<i class="fas fa-external-link-alt ms-1 opacity-50" style="font-size:.65rem"></i>
                </a>
              </td>
              <td>
                {% if src.source_type == 'rss' %}
                <span class="badge bg-info text-dark"><i class="fas fa-rss me-1"></i>RSS</span>
                {% elif src.source_type == 'index' %}
                <span class="badge bg-warning text-dark"><i class="fas fa-sitemap me-1"></i>Index</span>
                {% else %}
                <span class="badge bg-secondary"><i class="fas fa-globe me-1"></i>Webpage</span>
                {% endif %}
              </td>
              <td>
                {% if src.category == 'scientific' %}
                <span class="badge bg-primary"><i class="fas fa-flask me-1"></i>Scientifique</span>
                {% else %}
                <span class="badge bg-success"><i class="fas fa-lightbulb me-1"></i>Conseils</span>
                {% endif %}
              </td>
              <td class="text-muted small" id="lastCrawl_{{ src.id }}">
                {{ src.last_crawled_at.strftime('%d/%m/%Y %H:%M') if src.last_crawled_at else '—' }}
              </td>
              <td class="text-muted">{{ src.articles_found or 0 }}</td>
              <td>
                {% if src.active %}
                <span class="badge bg-success">Actif</span>
                {% else %}
                <span class="badge bg-secondary">Inactif</span>
                {% endif %}
              </td>
              <td class="text-end">
                <div class="d-flex gap-1 justify-content-end">
                  <!-- AJAX crawl button -->
                  <button type="button" class="btn btn-sm btn-outline-secondary"
                          title="Crawler maintenant" onclick="triggerCrawl({{ src.id }})">
                    <i class="fas fa-sync"></i>
                  </button>
                  <form action="{{ url_for('admin_source_toggle', sid=src.id) }}" method="post" class="d-inline">
                    <button type="submit"
                      class="btn btn-sm {% if src.active %}btn-outline-warning{% else %}btn-outline-success{% endif %}"
                      title="{% if src.active %}Désactiver{% else %}Activer{% endif %}">
                      <i class="fas fa-{% if src.active %}pause{% else %}play{% endif %}"></i>
                    </button>
                  </form>
                  <form action="{{ url_for('admin_source_delete', sid=src.id) }}" method="post" class="d-inline"
                        onsubmit="return confirm('Supprimer « {{ src.name }} » ?')">
                    <button type="submit" class="btn btn-sm btn-outline-danger" title="Supprimer">
                      <i class="fas fa-trash"></i>
                    </button>
                  </form>
                </div>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    {% else %}
    <div class="text-center py-5 text-muted">
      <i class="fas fa-rss fa-3x mb-3 opacity-25"></i>
      <p class="mb-0">Aucune source configurée. Ajoutez une URL ci-dessus.</p>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const CRAWL_RUN_URL  = '{{ url_for("admin_crawl_run") }}';
const CRAWL_STAT_URL = '{{ url_for("admin_crawl_status") }}';

const panel  = document.getElementById('crawlStatusPanel');
const logBox = document.getElementById('crawlLog');
const icon   = document.getElementById('crawlStatusIcon');
const ttl    = document.getElementById('crawlStatusTitle');
const badge  = document.getElementById('crawlStatusBadge');
const meta   = document.getElementById('crawlStatusMeta');
const counts = document.getElementById('crawlStatsCounts');

let pollTimer    = null;
let lastLogLen   = 0;
let triggeredAt  = 0;   // timestamp of last crawl trigger

// ── Trigger crawl via AJAX (no page reload) ───────────────────────
async function triggerCrawl(sourceId) {
  triggeredAt = Date.now();
  lastLogLen  = 0;
  logBox.innerHTML = '<span style="color:#64748b;font-style:italic">Démarrage du crawl…</span>';
  showRunning('Démarrage…');
  panel.style.display = 'block';
  panel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });

  const body = new FormData();
  if (sourceId) body.append('source_id', sourceId);

  try {
    await fetch(CRAWL_RUN_URL, {
      method: 'POST',
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      body,
    });
  } catch(e) {
    appendLog('❌ Impossible de contacter le serveur : ' + e, 'log-err');
    return;
  }

  clearTimeout(pollTimer);
  schedulePoll();
}

// ── Polling ───────────────────────────────────────────────────────
function schedulePoll() {
  // Grace window: poll every 400ms for 15s after trigger (thread may not have started yet)
  const inGrace = (Date.now() - triggeredAt) < 15000;
  const delay = inGrace ? 400 : 1500;
  pollTimer = setTimeout(poll, delay);
}

async function poll() {
  try {
    const r = await fetch(CRAWL_STAT_URL);
    const data = await r.json();
    renderStatus(data);

    const inGrace = (Date.now() - triggeredAt) < 15000;
    if (data.status === 'running' || (data.status === 'idle' && inGrace)) {
      schedulePoll();
    } else if (data.status !== 'idle') {
      // done or error — one final render, stop polling
      pollTimer = null;
    } else {
      pollTimer = null;
    }
  } catch(e) {
    pollTimer = setTimeout(poll, 3000);
  }
}

// ── Render helpers ────────────────────────────────────────────────
function showRunning(text) {
  icon.innerHTML = '<i class="fas fa-sync fa-spin"></i>';
  icon.style.cssText = 'background:#eff6ff;color:#2563eb';
  ttl.textContent = text;
  badge.textContent = 'En cours'; badge.className = 'badge bg-primary';
}

function renderStatus(data) {
  if (!data || data.status === 'idle') return;

  panel.style.display = 'block';

  if (data.status === 'running') {
    showRunning('Crawl en cours…');
  } else if (data.status === 'done') {
    icon.innerHTML = '<i class="fas fa-check-circle"></i>';
    icon.style.cssText = 'background:#f0fdf4;color:#166534';
    ttl.textContent = 'Crawl terminé';
    badge.textContent = 'Terminé'; badge.className = 'badge bg-success';
  } else {
    icon.innerHTML = '<i class="fas fa-exclamation-triangle"></i>';
    icon.style.cssText = 'background:#fef2f2;color:#991b1b';
    ttl.textContent = 'Erreur lors du crawl';
    badge.textContent = 'Erreur'; badge.className = 'badge bg-danger';
  }

  let metaTxt = '';
  if (data.started_at) metaTxt = 'Démarré à ' + data.started_at;
  if (data.ended_at)   metaTxt += ' · Terminé à ' + data.ended_at;
  meta.textContent = metaTxt;

  if (data.articles_processed > 0 || data.status !== 'running') {
    counts.innerHTML =
      `<div><div class="fw-bold fs-5">${data.articles_processed}</div><div class="small text-muted">articles</div></div>` +
      `<div><div class="fw-bold fs-5">${data.recs_generated}</div><div class="small text-muted">recs</div></div>`;
  }

  // Append only new log lines
  const lines = data.log || [];
  if (lines.length > lastLogLen) {
    if (lastLogLen === 0) logBox.innerHTML = '';
    lines.slice(lastLogLen).forEach(line => appendLog(line));
    lastLogLen = lines.length;
    logBox.scrollTop = logBox.scrollHeight;
  }
}

function appendLog(line, extraClass) {
  const div = document.createElement('div');
  div.className = 'crawl-log-line';
  if (extraClass) div.classList.add(extraClass);
  else if (/✅|✓|🏁/.test(line)) div.classList.add('log-ok');
  else if (/⚠|❌|💥/.test(line)) div.classList.add('log-err');
  else if (/🤖/.test(line))      div.classList.add('log-ai');
  div.textContent = line;
  logBox.appendChild(div);
}

// ── On page load: restore last run if any ────────────────────────
(async () => {
  const r = await fetch(CRAWL_STAT_URL);
  const data = await r.json();
  if (data.status && data.status !== 'idle') {
    renderStatus(data);
    if (data.status === 'running') poll();
  }
})();
</script>
{% endblock %}