{% extends "base.html" %}
{% block title %}BDA — 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:#10b981">Battle Damage Assessment</h2>
      <div style="color:#9ca3af;font-size:.8rem">JP 3-60 / ATP 3-60 — Post-Strike Effects Assessment (Append-Only)</div>
    </div>
    <button onclick="showAddModal()" style="margin-left:auto;background:#10b981;color:#000;border:none;padding:.5rem 1.2rem;border-radius:6px;cursor:pointer;font-weight:600">+ New BDA</button>
  </div>

  <!-- Summary stats -->
  <div id="summaryRow" style="display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem"></div>

  <!-- Add BDA 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:560px;max-height:90vh;overflow-y:auto">
      <h3 style="margin:0 0 1.2rem;color:#e2e8f0">New BDA Assessment</h3>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:.8rem">
        <div style="grid-column:1/-1">
          <label style="color:#9ca3af;font-size:.8rem">Target Name / Designation</label>
          <input id="bdaTarget" placeholder="e.g. SAM Site Alpha" 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">Physical Damage</label>
          <select id="bdaDamage" style="width:100%;margin-top:.3rem;padding:.5rem;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#e2e8f0;box-sizing:border-box">
            <option value="unknown">Unknown</option>
            <option value="destroyed">Destroyed</option>
            <option value="severely_damaged">Severely Damaged</option>
            <option value="moderately_damaged">Moderately Damaged</option>
            <option value="negligible">Negligible</option>
          </select>
        </div>
        <div>
          <label style="color:#9ca3af;font-size:.8rem">Strike Method</label>
          <select id="bdaMethod" style="width:100%;margin-top:.3rem;padding:.5rem;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#e2e8f0;box-sizing:border-box">
            <option value="kinetic">Kinetic</option>
            <option value="cyber">Cyber</option>
            <option value="ew">EW</option>
            <option value="unknown">Unknown</option>
          </select>
        </div>
        <div>
          <label style="color:#9ca3af;font-size:.8rem">Collection Method</label>
          <select id="bdaCollection" style="width:100%;margin-top:.3rem;padding:.5rem;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#e2e8f0;box-sizing:border-box">
            <option>IMINT</option><option>SIGINT</option><option>HUMINT</option>
            <option>OSINT</option><option>SOCMINT</option><option>combined</option><option>unknown</option>
          </select>
        </div>
        <div>
          <label style="color:#9ca3af;font-size:.8rem">Confidence (0–1)</label>
          <input id="bdaConfidence" type="number" step="0.05" min="0" max="1" value="0.5" 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">Functional Defeat?</label>
          <select id="bdaDefeat" style="width:100%;margin-top:.3rem;padding:.5rem;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#e2e8f0;box-sizing:border-box">
            <option value="0">No</option>
            <option value="1">Yes</option>
          </select>
        </div>
        <div>
          <label style="color:#9ca3af;font-size:.8rem">Theater</label>
          <input id="bdaTheater" value="unspecified" 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">Created By</label>
          <input id="bdaCreatedBy" value="analyst" 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 style="grid-column:1/-1">
          <label style="color:#9ca3af;font-size:.8rem">Analyst Notes</label>
          <textarea id="bdaNotes" rows="3" style="width:100%;margin-top:.3rem;padding:.5rem;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#e2e8f0;box-sizing:border-box;resize:vertical"></textarea>
        </div>
      </div>
      <div style="display:flex;gap:.8rem;justify-content:flex-end">
        <button onclick="closeModal()" style="background:#334155;color:#e2e8f0;border:none;padding:.5rem 1.2rem;border-radius:6px;cursor:pointer">Cancel</button>
        <button onclick="submitBda()" style="background:#10b981;color:#000;border:none;padding:.5rem 1.2rem;border-radius:6px;cursor:pointer;font-weight:600">Submit BDA</button>
      </div>
    </div>
  </div>

  <!-- Assessments 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">ASSESSMENTS LOG</div>
      <span style="font-size:.75rem;color:#475569">(append-only · NIST AU)</span>
      <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">Target</th>
            <th style="padding:.7rem 1rem;text-align:center;border-bottom:1px solid #334155">Damage</th>
            <th style="padding:.7rem 1rem;text-align:center;border-bottom:1px solid #334155">Defeat</th>
            <th style="padding:.7rem 1rem;text-align:center;border-bottom:1px solid #334155">Method</th>
            <th style="padding:.7rem 1rem;text-align:center;border-bottom:1px solid #334155">Collection</th>
            <th style="padding:.7rem 1rem;text-align:center;border-bottom:1px solid #334155">Confidence</th>
            <th style="padding:.7rem 1rem;text-align:left;border-bottom:1px solid #334155">Theater</th>
            <th style="padding:.7rem 1rem;text-align:left;border-bottom:1px solid #334155">By / Time</th>
          </tr>
        </thead>
        <tbody id="bdaTable">
          <tr><td colspan="8" style="padding:2rem;text-align:center;color:#475569">Loading…</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

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

async function loadAll() {
  await Promise.all([loadSummary(), loadAssessments()]);
}

async function loadSummary() {
  const r = await fetch('/api/strategos/bda/summary');
  const d = await r.json();
  const rate = Math.round((d.defeat_rate||0)*100);
  document.getElementById('summaryRow').innerHTML = `
    <div style="background:#1e293b;border:1px solid #334155;border-radius:10px;padding:1rem 1.2rem;text-align:center">
      <div style="font-size:2rem;font-weight:700;color:#10b981">${d.total_assessments||0}</div>
      <div style="color:#6b7280;font-size:.8rem;margin-top:.2rem">Total Assessments</div>
    </div>
    <div style="background:#1e293b;border:1px solid #334155;border-radius:10px;padding:1rem 1.2rem;text-align:center">
      <div style="font-size:2rem;font-weight:700;color:#e94560">${d.functional_defeats||0}</div>
      <div style="color:#6b7280;font-size:.8rem;margin-top:.2rem">Functional Defeats</div>
    </div>
    <div style="background:#1e293b;border:1px solid #334155;border-radius:10px;padding:1rem 1.2rem;text-align:center">
      <div style="font-size:2rem;font-weight:700;color:${rate>=50?'#10b981':'#f59e0b'}">${rate}%</div>
      <div style="color:#6b7280;font-size:.8rem;margin-top:.2rem">Defeat Rate</div>
    </div>`;
}

async function loadAssessments() {
  const r = await fetch('/api/strategos/bda/assessments?limit=100');
  const d = await r.json();
  const tbody = document.getElementById('bdaTable');
  if (!d.assessments || !d.assessments.length) {
    tbody.innerHTML = '<tr><td colspan="8" style="padding:2rem;text-align:center;color:#475569">No assessments yet. Submit the first BDA report.</td></tr>';
    return;
  }
  tbody.innerHTML = d.assessments.map(a => {
    const confPct = Math.round((a.confidence||0)*100);
    const confColor = confPct >= 70 ? '#10b981' : confPct >= 40 ? '#f59e0b' : '#e94560';
    const defeatStyle = a.functional_defeat
      ? 'background:#064e3b;color:#34d399'
      : 'background:#1e293b;color:#6b7280';
    return `<tr style="border-bottom:1px solid #1e293b">
      <td style="padding:.7rem 1rem">
        <div style="font-weight:600;color:#e2e8f0">${esc(a.target_name)}</div>
        ${a.analyst_notes ? `<div style="font-size:.75rem;color:#6b7280;margin-top:.2rem">${esc(a.analyst_notes.slice(0,80))}${a.analyst_notes.length>80?'…':''}</div>` : ''}
      </td>
      <td style="padding:.7rem 1rem;text-align:center">
        <span style="font-size:.75rem;font-weight:700;padding:.25rem .6rem;border-radius:4px;background:${a.damage_color||'#1e293b'}22;color:${a.damage_color||'#6b7280'};border:1px solid ${a.damage_color||'#334155'}55">
          ${esc(a.damage_label||'U')}
        </span>
      </td>
      <td style="padding:.7rem 1rem;text-align:center">
        <span style="font-size:.75rem;padding:.2rem .6rem;border-radius:4px;${defeatStyle}">${a.functional_defeat?'YES':'NO'}</span>
      </td>
      <td style="padding:.7rem 1rem;text-align:center;color:#94a3b8;font-size:.8rem">${esc(a.method||'—')}</td>
      <td style="padding:.7rem 1rem;text-align:center;color:#94a3b8;font-size:.8rem">${esc(a.collection_method||'—')}</td>
      <td style="padding:.7rem 1rem;text-align:center">
        <span style="font-weight:700;color:${confColor}">${confPct}%</span>
      </td>
      <td style="padding:.7rem 1rem;color:#94a3b8;font-size:.8rem">${esc(a.theater||'—')}</td>
      <td style="padding:.7rem 1rem">
        <div style="color:#6b7280;font-size:.75rem">${esc(a.created_by||'analyst')}</div>
        <div style="color:#475569;font-size:.7rem">${(a.created_at||'').slice(0,16).replace('T',' ')}</div>
      </td>
    </tr>`;
  }).join('');
}

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

async function submitBda() {
  const target_name = document.getElementById('bdaTarget').value.trim();
  if (!target_name) { alert('Target name is required'); return; }
  const r = await fetch('/api/strategos/bda/assessments', {
    method:'POST', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({
      target_name,
      physical_damage: document.getElementById('bdaDamage').value,
      method: document.getElementById('bdaMethod').value,
      collection_method: document.getElementById('bdaCollection').value,
      confidence: parseFloat(document.getElementById('bdaConfidence').value)||0.5,
      functional_defeat: document.getElementById('bdaDefeat').value === '1',
      theater: document.getElementById('bdaTheater').value.trim()||'unspecified',
      created_by: document.getElementById('bdaCreatedBy').value.trim()||'analyst',
      analyst_notes: document.getElementById('bdaNotes').value.trim(),
    })
  });
  if (!r.ok) { const e = await r.json(); alert(e.error||'Submit failed'); return; }
  closeModal();
  document.getElementById('bdaTarget').value='';
  document.getElementById('bdaNotes').value='';
  await loadAll();
}

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