{# -*- CUI // SP-CTI -*-
  Reusable partial — Autonomous Recovery panel.

  Shows the failure_triage + autofix + recent-failures stream so the
  operator can see what the autonomous system is doing. Auto-hides
  entirely when nothing is happening (no triage markers in the last 24h,
  no autofix branches, no unresolved failures in the last hour).

  Include on any page that wants this view:
      {% include "_autonomy_status.html" %}

  Host page must call refreshAutonomyStatus() on load and in its
  auto-refresh loop. The function + window.ICDEV_AUTO namespace are
  guarded against double-include. #}

<section id="autonomy-status" style="margin-top:1.5rem; display:none;">
    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:0.5rem;">
        <h2 style="margin:0; font-size:1.15rem; color:var(--text-primary);">
            Autonomous Recovery
            <span id="autonomy-status-tag" style="font-size:0.72rem; padding:0.1rem 0.4rem;
                  border-radius:3px; margin-left:0.3rem; vertical-align:middle;
                  background:rgba(76,175,80,0.25); color:#81c784; font-weight:600;">active</span>
        </h2>
        <span id="autonomy-summary" style="font-size:0.78rem; color:var(--text-secondary);"></span>
    </div>
    <div id="autonomy-container"></div>
</section>

<style>
  .auto-card { border: 1px solid var(--border-color, #2a2a40); border-radius: 8px;
               background: var(--bg-card, #16213e); margin-bottom: 0.6rem;
               padding: 0.6rem 0.8rem; }
  .auto-card-head { display:flex; align-items:center; gap:0.5rem;
                    margin-bottom: 0.3rem; font-size: 0.85rem;
                    color: var(--text-primary, #e0e0e0); }
  .auto-card-head .auto-badge { display: inline-block; font-size: 0.7rem;
                    padding: 0.08rem 0.4rem; border-radius: 3px; font-weight: 600; }
  .auto-badge-fix      { background: rgba(76,175,80,0.25);  color: #81c784; }
  .auto-badge-review   { background: rgba(33,150,243,0.25); color: #6db3f8; }
  .auto-badge-quarantine { background: rgba(255,152,0,0.25); color: #ffb74d; }
  .auto-badge-block    { background: rgba(244,67,54,0.25);  color: #ff6b7a; }
  .auto-meta { font-family: monospace; font-size: 0.75rem;
               color: var(--text-secondary, #a0a0b8); }
  .auto-reason { font-size: 0.8rem; color: var(--text-secondary);
                 margin-top: 0.2rem; font-style: italic; }
  .auto-section-title { font-size: 0.78rem; color: var(--text-muted, #6c6c80);
                        text-transform: uppercase; letter-spacing: 0.05em;
                        margin: 0.5rem 0 0.25rem; font-weight: 600; }

  .auto-branch-row { display: flex; justify-content: space-between;
                     padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--border-color);
                     font-size: 0.82rem; }
  .auto-branch-row:last-child { border-bottom: none; }
  .auto-branch-name { font-family: monospace; color: var(--accent-blue-light, #6db3f8); }

  .auto-failure-row { padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--border-color);
                      font-size: 0.8rem; }
  .auto-failure-row:last-child { border-bottom: none; }
  .auto-failure-head { display: flex; justify-content: space-between;
                       color: var(--text-primary); margin-bottom: 0.15rem; }
  .auto-failure-reason { color: #ff8a80; font-family: monospace;
                         font-size: 0.72rem; word-break: break-word; }
</style>

<script>
(function () {
  if (window.ICDEV_AUTO && window.ICDEV_AUTO._loaded) return;
  if (!window.ICDEV_AUTO) window.ICDEV_AUTO = {};
  window.ICDEV_AUTO._loaded = true;

  function escapeHTML(s) {
    return String(s || '').replace(/[&<>"']/g, function (c) {
      return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[c];
    });
  }

  // Map triage outcomes → one-word badge + label.
  function outcomeBadge(outcome, rec) {
    outcome = (outcome || '').toLowerCase();
    rec = (rec || '').toLowerCase();
    if (outcome.indexOf('applied_') === 0)               return {cls:'auto-badge-fix',        label:'AUTO-FIXED'};
    if (outcome === 'verification_failed')                return {cls:'auto-badge-block',      label:'VERIFY FAILED'};
    if (outcome.indexOf('rejected_') === 0)               return {cls:'auto-badge-block',      label:'REJECTED'};
    if (outcome === 'suggested_card_created' && rec === 'quarantine') return {cls:'auto-badge-quarantine', label:'QUARANTINED'};
    if (outcome === 'suggested_card_created')             return {cls:'auto-badge-review',     label:'HUMAN REVIEW'};
    if (outcome === 'apply_failed_fell_through_to_card')  return {cls:'auto-badge-review',     label:'ESCALATED'};
    if (outcome === 'skipped_already_triaged')            return {cls:'auto-badge-review',     label:'DEDUPED'};
    return {cls:'auto-badge-review', label: escapeHTML(outcome) || 'review'};
  }

  function triageCardHTML(t) {
    var b = outcomeBadge(t.outcome, t.recommendation);
    var conf = t.confidence != null ? (Math.round(t.confidence*100)/100).toFixed(2) : '—';
    return ''
      + '<div class="auto-card">'
      + '  <div class="auto-card-head">'
      + '    <span class="auto-badge ' + b.cls + '">' + b.label + '</span>'
      + '    <span>' + escapeHTML(t.title || t.task_id) + '</span>'
      + '    <span class="auto-meta" style="margin-left:auto;">'
      +        escapeHTML(t.task_id) + ' · conf=' + conf
      + '    </span>'
      + '  </div>'
      + '  <div class="auto-reason">' + escapeHTML(t.gate_reason || t.recommendation || '') + '</div>'
      + '</div>';
  }

  function branchRowHTML(b) {
    return ''
      + '<div class="auto-branch-row">'
      + '  <span class="auto-branch-name">' + escapeHTML(b.branch) + '</span>'
      + '  <span class="auto-meta">' + escapeHTML(b.subject || '') + '</span>'
      + '</div>';
  }

  function failureRowHTML(f) {
    return ''
      + '<div class="auto-failure-row">'
      + '  <div class="auto-failure-head">'
      + '    <span>' + escapeHTML(f.title || f.id) + ' <span class="auto-meta">(' + escapeHTML(f.id) + ', status=' + escapeHTML(f.status) + ', fc=' + (f.failure_count || 0) + ')</span></span>'
      + '  </div>'
      + '  <div class="auto-failure-reason">' + escapeHTML(f.reason || '') + '</div>'
      + '</div>';
  }

  function renderAutonomyStatus(payload) {
    var section = document.getElementById('autonomy-status');
    var container = document.getElementById('autonomy-container');
    var summaryEl = document.getElementById('autonomy-summary');
    var tagEl = document.getElementById('autonomy-status-tag');
    if (!section || !container) return;

    if (!payload || !payload.visible) {
      section.style.display = 'none';
      return;
    }
    section.style.display = '';

    var triage = payload.triage_recent || [];
    var branches = payload.autofix_branches || [];
    var failures = payload.unresolved_failures || [];
    var tr = payload.triage_summary || {};

    if (summaryEl) {
      var bits = [];
      if ((tr.total || 0) > 0) {
        bits.push(tr.applied + ' auto-fixed / ' + tr.verification_failed + ' verify-failed / ' + tr.total + ' audited');
      }
      if (branches.length) bits.push(branches.length + ' autofix branch' + (branches.length===1?'':'es'));
      if (failures.length) bits.push(failures.length + ' unresolved');
      summaryEl.textContent = bits.join(' · ');
    }
    // Update tag color based on whether any applied vs only review
    if (tagEl) {
      if (tr.applied > 0)   { tagEl.textContent = 'fixing';   tagEl.style.background = 'rgba(76,175,80,0.25)';  tagEl.style.color = '#81c784'; }
      else if (failures.length > 0) { tagEl.textContent = 'diagnosing'; tagEl.style.background = 'rgba(255,152,0,0.25)'; tagEl.style.color = '#ffb74d'; }
      else                  { tagEl.textContent = 'watching'; tagEl.style.background = 'rgba(33,150,243,0.25)'; tagEl.style.color = '#6db3f8'; }
    }

    var html = '';
    if (triage.length) {
      html += '<div class="auto-section-title">Recent diagnoses</div>';
      html += triage.map(triageCardHTML).join('');
    }
    if (branches.length) {
      html += '<div class="auto-section-title">Autofix branches (ready to review)</div>';
      html += '<div class="auto-card" style="padding:0;">'
           + branches.map(branchRowHTML).join('')
           + '</div>';
    }
    if (failures.length) {
      html += '<div class="auto-section-title">Unresolved failures (last hour)</div>';
      html += '<div class="auto-card" style="padding:0;">'
           + failures.map(failureRowHTML).join('')
           + '</div>';
    }
    container.innerHTML = html;
  }

  function refreshAutonomyStatus() {
    fetch('/api/autonomy/status')
      .then(function (r) { return r.json(); })
      .then(renderAutonomyStatus)
      .catch(function () {
        // fail silently — panel simply stays hidden
        var s = document.getElementById('autonomy-status');
        if (s) s.style.display = 'none';
      });
  }

  window.ICDEV_AUTO.refresh = refreshAutonomyStatus;
  window.ICDEV_AUTO.render = renderAutonomyStatus;
  window.refreshAutonomyStatus = refreshAutonomyStatus;
  window.renderAutonomyStatus = renderAutonomyStatus;
})();
</script>