{% extends "base.html" %}

{% block title %}Living Docs{% endblock %}

{% block actions %}
  <button class="btn primary" id="scan-btn">Scan now</button>
{% endblock %}

{% block content %}
  {% set summary = health.summary or {} %}
  {% set quality = health.quality or {} %}

  <section class="section">
    <h2 class="section-title">Workspace</h2>
    <div class="card">
      <form id="ws-form" class="ws-form">
        <input id="ws-input" class="text-input" type="text" name="workspace"
               value="{{ config.workspace or '' }}" placeholder="/path/to/project" />
        <button type="submit" class="btn primary">Set workspace</button>
        {% if config.has_help_dir %}<span class="badge ok">.help ✓</span>
        {% else %}<span class="badge warn">no .help</span>{% endif %}
      </form>
    </div>
  </section>

  <section class="section">
    <h2 class="section-title">Health</h2>
    <div class="grid grid-4">
      <article class="card stat">
        <div class="stat-num">{{ summary.total or 0 }}</div>
        <div class="stat-label">Total</div>
      </article>
      <article class="card stat ok">
        <div class="stat-num">{{ summary.current or 0 }}</div>
        <div class="stat-label">Current</div>
      </article>
      <article class="card stat warn">
        <div class="stat-num">{{ summary.stale or 0 }}</div>
        <div class="stat-label">Stale</div>
      </article>
      <article class="card stat danger">
        <div class="stat-num">{{ summary.missing or 0 }}</div>
        <div class="stat-label">Missing</div>
      </article>
    </div>

    {% if quality.get('faithfulness') is not none %}
      <div class="quality-bars">
        <div class="qbar">
          <div class="qbar-head">
            <span>Faithfulness (End User)</span>
            <span class="{% if quality.faithfulness >= 0.95 %}ok{% else %}danger{% endif %}">
              {{ '%.0f' % (quality.faithfulness * 100) }}%
            </span>
          </div>
          <div class="qbar-track">
            <div class="qbar-fill {% if quality.faithfulness >= 0.95 %}ok{% else %}danger{% endif %}"
                 style="width: {{ (quality.faithfulness * 100)|round }}%"></div>
          </div>
        </div>
        <div class="qbar">
          <div class="qbar-head">
            <span>Strict Accuracy (Developer)</span>
            <span class="{% if quality.strict_accuracy >= 0.85 %}ok{% else %}danger{% endif %}">
              {{ '%.0f' % (quality.strict_accuracy * 100) }}%
            </span>
          </div>
          <div class="qbar-track">
            <div class="qbar-fill {% if quality.strict_accuracy >= 0.85 %}ok{% else %}danger{% endif %}"
                 style="width: {{ (quality.strict_accuracy * 100)|round }}%"></div>
          </div>
        </div>
      </div>
    {% endif %}
  </section>

  <section class="section">
    <h2 class="section-title">Documents <span class="dim small">({{ rows|length }})</span></h2>
    {% if rows %}
      <div class="table-wrap">
        <table class="data-table">
          <thead>
            <tr>
              <th>Feature</th>
              <th>Depth</th>
              <th>Persona</th>
              <th>Status</th>
              <th>Reason</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for row in rows %}
            <tr data-doc-id="{{ row.id }}"
                data-state="{{ row.computed_state }}"
                data-queue-item-id="{{ row.queue_item_id or '' }}"
                data-regen-job-id="{{ row.regen_job_id or '' }}">
              <td class="mono">{{ row.feature }}</td>
              <td class="mono">{{ row.depth }}</td>
              <td>{{ row.persona }}</td>
              <td data-slot="badge">
                {% if row.computed_state == 'current' %}
                  <span class="badge ok">current</span>
                {% elif row.computed_state == 'stale' %}
                  <span class="badge warn">stale</span>
                {% elif row.computed_state == 'missing' %}
                  <span class="badge danger">missing</span>
                {% elif row.computed_state == 'pending-review' %}
                  <span class="badge accent-soft">pending review</span>
                {% elif row.computed_state == 'regenerating' %}
                  <span class="badge accent">regenerating</span>
                {% elif row.computed_state == 'errored' %}
                  <span class="badge danger">errored</span>
                {% endif %}
              </td>
              <td class="dim">{{ row.reason or '—' }}</td>
              <td data-slot="actions">
                {% if row.computed_state in ('stale', 'missing') %}
                  <button class="btn ghost btn-regen"
                          data-id="{{ row.id }}">Regenerate</button>
                {% elif row.computed_state == 'pending-review' %}
                  <div class="row-actions">
                    <button class="btn primary btn-approve"
                            data-id="{{ row.queue_item_id }}">Approve</button>
                    <button class="btn ghost btn-revert"
                            data-id="{{ row.queue_item_id }}">Revert</button>
                  </div>
                  {% if row.diff_summary %}
                    <div class="diff-summary dim small">{{ row.diff_summary }}</div>
                  {% endif %}
                {% elif row.computed_state == 'regenerating' %}
                  <span class="dim small">regenerating…</span>
                {% elif row.computed_state == 'errored' %}
                  <div class="row-actions">
                    <span class="badge danger small">
                      {{ (row.regen_job_error or 'error')[:60] }}
                    </span>
                    <button class="btn ghost btn-regen"
                            data-id="{{ row.id }}">Retry</button>
                  </div>
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% else %}
      <p class="empty">No documents found in the current workspace.</p>
    {% endif %}
  </section>
{% endblock %}

{% block scripts %}
<script>
  // ── Polling ───────────────────────────────────────────────────────────────
  // Recursive setTimeout (not setInterval) so a hidden tab fully pauses
  // instead of waking every 1.5s to no-op.
  let _pollTimer = null;
  let _polling = false;

  function _startPoll() {
    if (_polling) return;
    _polling = true;
    _scheduleNextPoll(0);
  }

  function _stopPoll() {
    _polling = false;
    if (_pollTimer) { clearTimeout(_pollTimer); _pollTimer = null; }
  }

  function _scheduleNextPoll(delay) {
    if (!_polling || document.hidden) return;
    _pollTimer = setTimeout(_poll, delay);
  }

  async function _poll() {
    _pollTimer = null;
    if (!_polling) return;
    try {
      const data = await AttuneUI.api('/api/living-docs/rows');
      _applyRows(data.rows);
      if (!data.rows.some(r => r.computed_state === 'regenerating')) {
        _stopPoll();
        return;
      }
    } catch (_) { /* transient — keep polling */ }
    _scheduleNextPoll(1500);
  }

  document.addEventListener('visibilitychange', () => {
    if (!document.hidden && _polling && !_pollTimer) _scheduleNextPoll(0);
  });

  function _applyRows(rows) {
    rows.forEach(row => {
      const tr = document.querySelector(`tr[data-doc-id="${CSS.escape(row.id)}"]`);
      if (!tr) return;
      if (tr.dataset.state === row.computed_state &&
          tr.dataset.regenJobId === (row.regen_job_id || '')) return;
      tr.dataset.state = row.computed_state;
      tr.dataset.queueItemId = row.queue_item_id || '';
      tr.dataset.regenJobId = row.regen_job_id || '';
      _renderBadge(tr.querySelector('[data-slot="badge"]'), row);
      _renderActions(tr.querySelector('[data-slot="actions"]'), row);
    });
  }

  function _renderBadge(cell, row) {
    if (!cell) return;
    const labels = {
      'current': ['ok', 'current'],
      'stale': ['warn', 'stale'],
      'missing': ['danger', 'missing'],
      'pending-review': ['accent-soft', 'pending review'],
      'regenerating': ['accent', 'regenerating'],
      'errored': ['danger', 'errored'],
    };
    const [cls, text] = labels[row.computed_state] || ['dim', row.computed_state];
    cell.innerHTML = `<span class="badge ${cls}">${text}</span>`;
  }

  function _renderActions(cell, row) {
    if (!cell) return;
    const id = CSS.escape(row.id);
    const qid = row.queue_item_id || '';
    const err = (row.regen_job_error || 'error').slice(0, 60);
    const diff = row.diff_summary ? `<div class="diff-summary dim small">${row.diff_summary}</div>` : '';

    if (row.computed_state === 'stale' || row.computed_state === 'missing') {
      cell.innerHTML = `<button class="btn ghost btn-regen" data-id="${row.id}">Regenerate</button>`;
    } else if (row.computed_state === 'pending-review') {
      cell.innerHTML = `<div class="row-actions">
        <button class="btn primary btn-approve" data-id="${qid}">Approve</button>
        <button class="btn ghost btn-revert" data-id="${qid}">Revert</button>
      </div>${diff}`;
    } else if (row.computed_state === 'regenerating') {
      cell.innerHTML = `<span class="dim small">regenerating…</span>`;
    } else if (row.computed_state === 'errored') {
      cell.innerHTML = `<div class="row-actions">
        <span class="badge danger small">${err}</span>
        <button class="btn ghost btn-regen" data-id="${row.id}">Retry</button>
      </div>`;
    } else {
      cell.innerHTML = '';
    }
    _bindActionButtons(cell);
  }

  // ── Action button wiring ──────────────────────────────────────────────────
  function _bindActionButtons(root) {
    root.querySelectorAll('.btn-regen').forEach(btn => {
      btn.addEventListener('click', async () => {
        const id = btn.getAttribute('data-id');
        btn.disabled = true;
        try {
          await AttuneUI.api(
            `/api/living-docs/docs/${encodeURIComponent(id)}/regenerate`,
            { method: 'POST', body: '{}' }
          );
          AttuneUI.toast('Regen started', 'ok');
          const tr = btn.closest('tr[data-doc-id]');
          if (tr) {
            tr.dataset.state = 'regenerating';
            const badgeCell = tr.querySelector('[data-slot="badge"]');
            const actCell = tr.querySelector('[data-slot="actions"]');
            if (badgeCell) badgeCell.innerHTML = '<span class="badge accent">regenerating</span>';
            if (actCell) actCell.innerHTML = '<span class="dim small">regenerating…</span>';
          }
          _startPoll();
        } catch (e) {
          AttuneUI.toast(`Failed: ${e.message}`, 'danger');
          btn.disabled = false;
        }
      });
    });

    root.querySelectorAll('.btn-approve').forEach(btn => {
      btn.addEventListener('click', async () => {
        const id = btn.getAttribute('data-id');
        try {
          await AttuneUI.api(
            `/api/living-docs/queue/${encodeURIComponent(id)}/approve`,
            { method: 'POST', body: '{}' }
          );
          AttuneUI.toast('Approved.', 'ok');
          _poll();
        } catch (e) { AttuneUI.toast(`Failed: ${e.message}`, 'danger'); }
      });
    });

    root.querySelectorAll('.btn-revert').forEach(btn => {
      btn.addEventListener('click', async () => {
        const id = btn.getAttribute('data-id');
        try {
          await AttuneUI.api(
            `/api/living-docs/queue/${encodeURIComponent(id)}/revert`,
            { method: 'POST', body: '{}' }
          );
          AttuneUI.toast('Reverted.', 'ok');
          _poll();
        } catch (e) { AttuneUI.toast(`Failed: ${e.message}`, 'danger'); }
      });
    });
  }

  // ── Initial bind (server-rendered buttons) ────────────────────────────────
  document.querySelectorAll('td[data-slot="actions"]').forEach(_bindActionButtons);

  // ── Start poller if any row is already regenerating ───────────────────────
  if (document.querySelector('tr[data-state="regenerating"]')) _startPoll();

  // ── Workspace form ────────────────────────────────────────────────────────
  document.getElementById('ws-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const ws = document.getElementById('ws-input').value.trim();
    if (!ws) return;
    try {
      await AttuneUI.api('/api/living-docs/config', {
        method: 'PUT',
        body: JSON.stringify({ workspace: ws }),
      });
      AttuneUI.toast('Workspace updated, scanning…', 'ok');
      setTimeout(() => location.reload(), 600);
    } catch (e) {
      AttuneUI.toast(`Failed: ${e.message}`, 'danger');
    }
  });

  // ── Scan button ───────────────────────────────────────────────────────────
  document.getElementById('scan-btn').addEventListener('click', async () => {
    try {
      await AttuneUI.api('/api/living-docs/scan', {
        method: 'POST',
        body: JSON.stringify({ trigger: 'manual' }),
      });
      AttuneUI.toast('Scan queued.', 'ok');
      setTimeout(() => _poll(), 1500);
    } catch (e) {
      AttuneUI.toast(`Scan failed: ${e.message}`, 'danger');
    }
  });
</script>
{% endblock %}