{% extends "base.html" %}
{% block title %}Red Cell — 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:#e94560">Red Cell — MLCOA / MDCOA</h2>
      <div style="color:#9ca3af;font-size:.8rem">JP 5-0 / MDMP COA Analysis — Adversary Perspective</div>
    </div>
    <button onclick="showNewModal()" style="margin-left:auto;background:#e94560;color:#fff;border:none;padding:.5rem 1.2rem;border-radius:6px;cursor:pointer;font-weight:600">+ New Analysis</button>
  </div>

  <!-- New Analysis Modal -->
  <div id="newModal" 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:460px">
      <h3 style="margin:0 0 1.2rem;color:#e2e8f0">New Red Cell Analysis</h3>
      <label style="color:#9ca3af;font-size:.8rem">Theater / AO</label>
      <input id="rcTheater" placeholder="e.g. Western Pacific" style="width:100%;margin:.3rem 0 .8rem;padding:.5rem;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#e2e8f0;box-sizing:border-box">
      <label style="color:#9ca3af;font-size:.8rem">Scenario / Context</label>
      <textarea id="rcScenario" rows="3" placeholder="Operational scenario for adversary analysis…" 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="closeModal()" style="background:#334155;color:#e2e8f0;border:none;padding:.5rem 1.2rem;border-radius:6px;cursor:pointer">Cancel</button>
        <button onclick="createAnalysis()" style="background:#e94560;color:#fff;border:none;padding:.5rem 1.2rem;border-radius:6px;cursor:pointer;font-weight:600">Create</button>
      </div>
    </div>
  </div>

  <div style="display:grid;grid-template-columns:280px 1fr;gap:1.5rem">

    <!-- Analysis list -->
    <div>
      <div style="font-size:.8rem;color:#6b7280;font-weight:600;letter-spacing:.05em;margin-bottom:.6rem">ANALYSES</div>
      <div id="analysisList">
        {% for a in analyses %}
        <div class="rc-card" onclick="loadAnalysis('{{ a.id }}')" data-id="{{ a.id }}"
             style="background:#1e293b;border:1px solid #334155;border-radius:8px;padding:.8rem 1rem;margin-bottom:.5rem;cursor:pointer">
          <div style="font-weight:600;color:#e2e8f0;font-size:.9rem">{{ a.theater }}</div>
          <div style="font-size:.75rem;color:#9ca3af;margin-top:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ a.scenario or '—' }}</div>
          <div style="font-size:.7rem;color:#475569;margin-top:.4rem">{{ a.created_at[:10] if a.created_at else '' }}</div>
        </div>
        {% else %}
        <div style="color:#475569;font-size:.85rem;text-align:center;padding:2rem 0">No analyses yet</div>
        {% endfor %}
      </div>
    </div>

    <!-- Detail panel -->
    <div id="rcDetail" style="background:#1e293b;border:1px solid #334155;border-radius:10px;padding:1.5rem;min-height:500px">
      <div id="detailPlaceholder" style="color:#475569;text-align:center;padding:5rem 0">
        Select an analysis or create a new one to begin Red Cell assessment.
      </div>
      <div id="detailContent" style="display:none">
        <div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem">
          <div>
            <div id="rcTheaterLabel" style="font-size:1.1rem;font-weight:700;color:#e2e8f0"></div>
            <div id="rcScenarioLabel" style="font-size:.85rem;color:#9ca3af;margin-top:.2rem"></div>
          </div>
          <button onclick="deleteAnalysis()" style="margin-left:auto;background:#7f1d1d;color:#fca5a5;border:none;padding:.4rem .9rem;border-radius:6px;cursor:pointer;font-size:.8rem">Delete</button>
        </div>

        <!-- MLCOA -->
        <div style="margin-bottom:1.2rem;border:1px solid #3b82f644;border-radius:10px;overflow:hidden">
          <div style="background:#3b82f614;padding:.8rem 1.2rem;display:flex;align-items:center;gap:1rem">
            <div style="font-weight:700;color:#3b82f6;font-size:.95rem">MLCOA — MOST LIKELY COURSE OF ACTION</div>
            <button id="mlcoaBtn" onclick="synthMLCOA()" style="margin-left:auto;background:#3b82f6;color:#fff;border:none;padding:.35rem .9rem;border-radius:5px;cursor:pointer;font-size:.8rem">Synthesize</button>
          </div>
          <div style="padding:1rem">
            <div id="mlcoaContent" style="color:#cbd5e1;line-height:1.75;font-size:.875rem"></div>
            <div id="mlcoaPlaceholder" style="color:#475569;font-size:.85rem">Click Synthesize to generate MLCOA from the adversary perspective.</div>
          </div>
        </div>

        <!-- MDCOA -->
        <div style="border:1px solid #e9456044;border-radius:10px;overflow:hidden">
          <div style="background:#e9456014;padding:.8rem 1.2rem;display:flex;align-items:center;gap:1rem">
            <div style="font-weight:700;color:#e94560;font-size:.95rem">MDCOA — MOST DANGEROUS COURSE OF ACTION</div>
            <button id="mdcoaBtn" onclick="synthMDCOA()" style="margin-left:auto;background:#e94560;color:#fff;border:none;padding:.35rem .9rem;border-radius:5px;cursor:pointer;font-size:.8rem">Synthesize</button>
          </div>
          <div style="padding:1rem">
            <div id="mdcoaContent" style="color:#cbd5e1;line-height:1.75;font-size:.875rem"></div>
            <div id="mdcoaPlaceholder" style="color:#475569;font-size:.85rem">Click Synthesize to generate MDCOA from the adversary perspective.</div>
          </div>
        </div>

        <!-- Analyst notes -->
        <div style="margin-top:1.2rem">
          <label style="font-size:.8rem;color:#6b7280;font-weight:600">ANALYST NOTES</label>
          <textarea id="analystNotes" rows="3" onblur="saveNotes()" placeholder="Wargaming observations, additional context…"
                    style="width:100%;margin-top:.4rem;padding:.6rem;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#e2e8f0;box-sizing:border-box;resize:vertical;font-size:.85rem"></textarea>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
let currentId = null;

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

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

async function createAnalysis() {
  const theater = document.getElementById('rcTheater').value.trim();
  if (!theater) { alert('Theater required'); return; }
  const r = await fetch('/api/strategos/red-cell/analyses', {
    method:'POST', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({
      theater,
      scenario: document.getElementById('rcScenario').value.trim(),
    })
  });
  const d = await r.json();
  closeModal();
  document.getElementById('rcTheater').value='';
  document.getElementById('rcScenario').value='';
  await refreshList();
  loadAnalysis(d.analysis_id);
}

async function refreshList() {
  const r = await fetch('/api/strategos/red-cell/analyses');
  const d = await r.json();
  const list = document.getElementById('analysisList');
  if (!d.analyses || !d.analyses.length) {
    list.innerHTML = '<div style="color:#475569;font-size:.85rem;text-align:center;padding:2rem 0">No analyses yet</div>';
    return;
  }
  list.innerHTML = d.analyses.map(a => `
    <div class="rc-card" onclick="loadAnalysis('${a.id}')" data-id="${a.id}"
         style="background:#1e293b;border:1px solid #334155;border-radius:8px;padding:.8rem 1rem;margin-bottom:.5rem;cursor:pointer">
      <div style="font-weight:600;color:#e2e8f0;font-size:.9rem">${esc(a.theater)}</div>
      <div style="font-size:.75rem;color:#9ca3af;margin-top:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${esc(a.scenario||'—')}</div>
      <div style="font-size:.7rem;color:#475569;margin-top:.4rem">${(a.created_at||'').slice(0,10)}</div>
    </div>`).join('');
}

async function loadAnalysis(id) {
  currentId = id;
  document.querySelectorAll('.rc-card').forEach(c => {
    c.style.borderColor = c.dataset.id===id ? '#e94560' : '#334155';
  });
  const r = await fetch(`/api/strategos/red-cell/analyses/${id}`);
  const a = await r.json();
  document.getElementById('detailPlaceholder').style.display='none';
  document.getElementById('detailContent').style.display='';
  document.getElementById('rcTheaterLabel').textContent = a.theater;
  document.getElementById('rcScenarioLabel').textContent = a.scenario || 'No scenario description';
  document.getElementById('analystNotes').value = a.analyst_notes || '';

  const mth = (window.ICDEV && window.ICDEV.mdToHtml) ? window.ICDEV.mdToHtml : (s => s ? s.replace(/\n/g,'<br>') : '');
  const ml = a.mlcoa_rationale;
  document.getElementById('mlcoaContent').innerHTML = ml ? mth(ml) : '';
  document.getElementById('mlcoaContent').style.display = ml ? '' : 'none';
  document.getElementById('mlcoaPlaceholder').style.display = ml ? 'none' : '';

  const md = a.mdcoa_rationale;
  document.getElementById('mdcoaContent').innerHTML = md ? mth(md) : '';
  document.getElementById('mdcoaContent').style.display = md ? '' : 'none';
  document.getElementById('mdcoaPlaceholder').style.display = md ? 'none' : '';
}

async function synthMLCOA() {
  if (!currentId) return;
  const btn = document.getElementById('mlcoaBtn');
  btn.textContent='Analyzing…'; btn.disabled=true;
  try {
    const r = await fetch(`/api/strategos/red-cell/analyses/${currentId}/mlcoa`, {method:'POST'});
    const d = await r.json();
    if (d.error) alert(d.error);
    else await loadAnalysis(currentId);
  } finally { btn.textContent='Re-synthesize'; btn.disabled=false; }
}

async function synthMDCOA() {
  if (!currentId) return;
  const btn = document.getElementById('mdcoaBtn');
  btn.textContent='Analyzing…'; btn.disabled=true;
  try {
    const r = await fetch(`/api/strategos/red-cell/analyses/${currentId}/mdcoa`, {method:'POST'});
    const d = await r.json();
    if (d.error) alert(d.error);
    else await loadAnalysis(currentId);
  } finally { btn.textContent='Re-synthesize'; btn.disabled=false; }
}

async function saveNotes() {
  if (!currentId) return;
  const notes = document.getElementById('analystNotes').value;
  await fetch(`/api/strategos/red-cell/analyses/${currentId}`, {
    method:'PATCH', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({analyst_notes: notes})
  });
}

async function deleteAnalysis() {
  if (!currentId || !confirm('Delete this Red Cell analysis?')) return;
  await fetch(`/api/strategos/red-cell/analyses/${currentId}`, {method:'DELETE'});
  currentId = null;
  document.getElementById('detailContent').style.display='none';
  document.getElementById('detailPlaceholder').style.display='';
  await refreshList();
}
</script>
{% endblock %}