{% extends "base.html" %}
{% block title %}I&W Indicators — Strategos{% endblock %}
{% block content %}
<div class="classification-banner">CUI // SP-CTI</div>
<div style="padding:1rem 1.5rem;max-width:1400px;margin:0 auto">

  <div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem">
    <div>
      <h2 style="margin:0;color:#f59e0b">Indicator &amp; Warning Board</h2>
      <div style="color:#9ca3af;font-size:.8rem">J2 I&amp;W — Indicator → COA Probability Mapping</div>
    </div>
    <button onclick="showAddModal()" style="margin-left:auto;background:#f59e0b;color:#000;border:none;padding:.5rem 1.2rem;border-radius:6px;cursor:pointer;font-weight:600">+ Add Indicator</button>
  </div>

  <!-- COA Probability bars -->
  <div style="background:#1e293b;border:1px solid #334155;border-radius:10px;padding:1.2rem;margin-bottom:1.5rem">
    <div style="font-size:.8rem;font-weight:600;color:#6b7280;letter-spacing:.05em;margin-bottom:.8rem">COA PROBABILITY SCORES</div>
    <div id="coaBars"><div style="color:#475569;font-size:.85rem">Loading…</div></div>
  </div>

  <!-- Add Indicator Modal -->
  <div id="addModal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:1000;align-items:center;justify-content:center">
    <div style="background:#1e293b;border:1px solid #334155;border-radius:10px;padding:2rem;width:500px">
      <h3 style="margin:0 0 1.2rem;color:#e2e8f0">Add Indicator</h3>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:.8rem">
        <div>
          <label style="color:#9ca3af;font-size:.8rem">Indicator Name</label>
          <input id="indName" placeholder="e.g. SIGINT increase near strait" style="width:100%;margin-top:.3rem;padding:.5rem;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#e2e8f0;box-sizing:border-box">
        </div>
        <div>
          <label style="color:#9ca3af;font-size:.8rem">Category</label>
          <input id="indCategory" placeholder="military / political / economic" style="width:100%;margin-top:.3rem;padding:.5rem;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#e2e8f0;box-sizing:border-box">
        </div>
        <div>
          <label style="color:#9ca3af;font-size:.8rem">COA ID</label>
          <input id="indCoaId" placeholder="coa-01" style="width:100%;margin-top:.3rem;padding:.5rem;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#e2e8f0;box-sizing:border-box">
        </div>
        <div>
          <label style="color:#9ca3af;font-size:.8rem">COA Name</label>
          <input id="indCoaName" placeholder="Amphibious Assault" style="width:100%;margin-top:.3rem;padding:.5rem;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#e2e8f0;box-sizing:border-box">
        </div>
        <div>
          <label style="color:#9ca3af;font-size:.8rem">Weight (0.1–3.0)</label>
          <input id="indWeight" type="number" step="0.1" min="0.1" max="3.0" value="1.0" style="width:100%;margin-top:.3rem;padding:.5rem;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#e2e8f0;box-sizing:border-box">
        </div>
        <div>
          <label style="color:#9ca3af;font-size:.8rem">Theater</label>
          <input id="indTheater" value="global" style="width:100%;margin-top:.3rem;padding:.5rem;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#e2e8f0;box-sizing:border-box">
        </div>
      </div>
      <label style="color:#9ca3af;font-size:.8rem">Description</label>
      <textarea id="indDesc" rows="2" style="width:100%;margin:.3rem 0 1.2rem;padding:.5rem;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#e2e8f0;box-sizing:border-box;resize:vertical"></textarea>
      <div style="display:flex;gap:.8rem;justify-content:flex-end">
        <button onclick="closeAdd()" style="background:#334155;color:#e2e8f0;border:none;padding:.5rem 1.2rem;border-radius:6px;cursor:pointer">Cancel</button>
        <button onclick="addIndicator()" style="background:#f59e0b;color:#000;border:none;padding:.5rem 1.2rem;border-radius:6px;cursor:pointer;font-weight:600">Add</button>
      </div>
    </div>
  </div>

  <!-- Indicator matrix table -->
  <div style="background:#1e293b;border:1px solid #334155;border-radius:10px;overflow:hidden">
    <div style="padding:.8rem 1.2rem;border-bottom:1px solid #334155;display:flex;align-items:center;gap:1rem">
      <div style="font-size:.8rem;font-weight:600;color:#6b7280;letter-spacing:.05em">INDICATOR MATRIX</div>
      <button onclick="loadAll()" style="margin-left:auto;background:#1e293b;border:1px solid #334155;color:#9ca3af;padding:.3rem .8rem;border-radius:5px;cursor:pointer;font-size:.8rem">&#8635; Refresh</button>
    </div>
    <div style="overflow-x:auto">
      <table style="width:100%;border-collapse:collapse;font-size:.85rem">
        <thead>
          <tr style="background:#0f172a;color:#6b7280;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em">
            <th style="padding:.7rem 1rem;text-align:left;border-bottom:1px solid #334155">Indicator</th>
            <th style="padding:.7rem 1rem;text-align:left;border-bottom:1px solid #334155">COA</th>
            <th style="padding:.7rem 1rem;text-align:left;border-bottom:1px solid #334155">Category</th>
            <th style="padding:.7rem 1rem;text-align:center;border-bottom:1px solid #334155">Wt</th>
            <th style="padding:.7rem 1rem;text-align:center;border-bottom:1px solid #334155">Status</th>
            <th style="padding:.7rem 1rem;text-align:center;border-bottom:1px solid #334155">Actions</th>
          </tr>
        </thead>
        <tbody id="indicatorTable">
          <tr><td colspan="6" style="padding:2rem;text-align:center;color:#475569">Loading…</td></tr>
        </tbody>
      </table>
    </div>
  </div>

</div>

<script>
const STATUS_COLORS = {
  observed:     {bg:'#064e3b', fg:'#34d399', label:'OBS'},
  not_observed: {bg:'#1e293b', fg:'#6b7280', label:'NOT OBS'},
  denied:       {bg:'#450a0a', fg:'#f87171', label:'DENIED'},
  obsolete:     {bg:'#0f172a', fg:'#475569', label:'OBS/OBF'},
};
const STATUS_CYCLE = ['not_observed', 'observed', 'denied'];

async function loadAll() {
  await Promise.all([loadIndicators(), loadCoaProbs()]);
}

async function loadIndicators() {
  const r = await fetch('/api/strategos/indicators');
  const d = await r.json();
  const tbody = document.getElementById('indicatorTable');
  if (!d.indicators || !d.indicators.length) {
    tbody.innerHTML = '<tr><td colspan="6" style="padding:2rem;text-align:center;color:#475569">No indicators. Add one to begin I&amp;W analysis.</td></tr>';
    return;
  }
  tbody.innerHTML = d.indicators.map(ind => {
    const sc = STATUS_COLORS[ind.status] || STATUS_COLORS.not_observed;
    return `<tr style="border-bottom:1px solid #1e293b">
      <td style="padding:.7rem 1rem;color:#e2e8f0">
        <div style="font-weight:600">${esc(ind.name)}</div>
        ${ind.description ? `<div style="font-size:.75rem;color:#6b7280">${esc(ind.description)}</div>` : ''}
      </td>
      <td style="padding:.7rem 1rem">
        <span style="font-size:.75rem;padding:.2rem .5rem;border-radius:4px;background:#1e293b;color:#94a3b8">${esc(ind.coa_id)}</span>
        <div style="font-size:.75rem;color:#6b7280;margin-top:.2rem">${esc(ind.coa_name)}</div>
      </td>
      <td style="padding:.7rem 1rem;color:#94a3b8;font-size:.8rem">${esc(ind.category)}</td>
      <td style="padding:.7rem 1rem;text-align:center;color:#cbd5e1;font-weight:600">${ind.weight}</td>
      <td style="padding:.7rem 1rem;text-align:center">
        <button onclick="cycleStatus('${ind.id}','${ind.status}')"
                style="background:${sc.bg};color:${sc.fg};border:1px solid ${sc.fg}44;padding:.25rem .7rem;border-radius:4px;cursor:pointer;font-size:.75rem;font-weight:600">
          ${sc.label}
        </button>
      </td>
      <td style="padding:.7rem 1rem;text-align:center">
        <button onclick="deleteIndicator('${ind.id}')" style="background:transparent;color:#f87171;border:1px solid #f8717144;padding:.25rem .7rem;border-radius:4px;cursor:pointer;font-size:.75rem">✕</button>
      </td>
    </tr>`;
  }).join('');
}

async function loadCoaProbs() {
  const r = await fetch('/api/strategos/indicators/coa-probabilities');
  const d = await r.json();
  const container = document.getElementById('coaBars');
  const probs = d.coa_probabilities || [];
  if (!probs.length) {
    container.innerHTML = '<div style="color:#475569;font-size:.85rem">No indicators — add some to compute COA probabilities.</div>';
    return;
  }
  container.innerHTML = probs.map(p => {
    const pct = Math.round(p.probability * 100);
    const color = pct >= 70 ? '#e94560' : pct >= 40 ? '#f59e0b' : '#3b82f6';
    return `<div style="margin-bottom:.8rem">
      <div style="display:flex;justify-content:space-between;margin-bottom:.3rem">
        <span style="color:#e2e8f0;font-size:.85rem;font-weight:600">${esc(p.coa_name)} <span style="color:#6b7280;font-size:.75rem">(${esc(p.coa_id)})</span></span>
        <span style="color:${color};font-weight:700">${pct}%</span>
      </div>
      <div style="background:#0f172a;border-radius:4px;height:10px;overflow:hidden">
        <div style="background:${color};width:${pct}%;height:100%;border-radius:4px;transition:width .4s"></div>
      </div>
      <div style="font-size:.7rem;color:#475569;margin-top:.2rem">${p.indicator_count} indicator${p.indicator_count!==1?'s':''}</div>
    </div>`;
  }).join('');
}

async function cycleStatus(id, current) {
  const idx = STATUS_CYCLE.indexOf(current);
  const next = STATUS_CYCLE[(idx + 1) % STATUS_CYCLE.length];
  await fetch(`/api/strategos/indicators/${id}/observe`, {
    method:'POST', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({observed_status: next, source:'analyst', confidence:0.7})
  });
  await loadAll();
}

async function deleteIndicator(id) {
  if (!confirm('Delete this indicator?')) return;
  await fetch(`/api/strategos/indicators/${id}`, {method:'DELETE'});
  await loadAll();
}

function showAddModal() {
  document.getElementById('addModal').style.display = 'flex';
}
function closeAdd() {
  document.getElementById('addModal').style.display = 'none';
}

async function addIndicator() {
  const name = document.getElementById('indName').value.trim();
  const coa_id = document.getElementById('indCoaId').value.trim();
  const coa_name = document.getElementById('indCoaName').value.trim();
  if (!name || !coa_id || !coa_name) { alert('Name, COA ID, and COA Name are required'); return; }
  await fetch('/api/strategos/indicators', {
    method:'POST', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({
      name, coa_id, coa_name,
      description: document.getElementById('indDesc').value.trim(),
      category: document.getElementById('indCategory').value.trim() || 'general',
      weight: parseFloat(document.getElementById('indWeight').value) || 1.0,
      theater: document.getElementById('indTheater').value.trim() || 'global',
    })
  });
  closeAdd();
  ['indName','indCoaId','indCoaName','indDesc','indCategory'].forEach(id => document.getElementById(id).value='');
  document.getElementById('indWeight').value = '1.0';
  await loadAll();
}

function esc(s) {
  return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

loadAll();
</script>
{% endblock %}