{% extends "base.html" %}
{% block title %}IPB Canvas — 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">Intelligence Preparation of the Battlespace</h2>
      <div style="color:#9ca3af;font-size:.8rem">FM 2-01.3 — 4-Step IPB Workflow</div>
    </div>
    <button onclick="showNewSession()" style="margin-left:auto;background:#3b82f6;color:#fff;border:none;padding:.5rem 1.2rem;border-radius:6px;cursor:pointer">+ New Session</button>
  </div>

  <!-- New session modal -->
  <div id="newSessionModal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:1000;display:none;align-items:center;justify-content:center">
    <div style="background:#1e293b;border:1px solid #334155;border-radius:10px;padding:2rem;width:440px">
      <h3 style="margin:0 0 1.2rem;color:#e2e8f0">New IPB Session</h3>
      <label style="color:#9ca3af;font-size:.85rem">Theater / AO</label>
      <input id="ipbTheater" placeholder="e.g. Western Pacific" style="width:100%;margin:.3rem 0 1rem;padding:.5rem;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#e2e8f0;box-sizing:border-box">
      <label style="color:#9ca3af;font-size:.85rem">Scenario Description</label>
      <textarea id="ipbScenario" rows="3" placeholder="Brief operational context..." 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="createSession()" style="background:#3b82f6;color:#fff;border:none;padding:.5rem 1.2rem;border-radius:6px;cursor:pointer">Create</button>
      </div>
    </div>
  </div>

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

    <!-- Session list -->
    <div>
      <div style="font-size:.8rem;color:#6b7280;font-weight:600;letter-spacing:.05em;margin-bottom:.6rem">SESSIONS</div>
      <div id="sessionList">
        {% for s in sessions %}
        <div class="sess-card" onclick="loadSession('{{ s.id }}')" data-id="{{ s.id }}"
             style="background:#1e293b;border:1px solid #334155;border-radius:8px;padding:.8rem 1rem;margin-bottom:.5rem;cursor:pointer;transition:border-color .15s">
          <div style="font-weight:600;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ s.theater }}</div>
          <div style="font-size:.75rem;color:#9ca3af;margin-top:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ s.scenario or '—' }}</div>
          <div style="display:flex;gap:.5rem;margin-top:.5rem;align-items:center">
            <span style="font-size:.7rem;padding:.15rem .5rem;border-radius:4px;background:{% if s.status=='active' %}#064e3b;color:#34d399{% else %}#1e293b;color:#6b7280{% endif %}">{{ s.status }}</span>
            <span style="font-size:.7rem;color:#475569;margin-left:auto">{{ s.created_at[:10] if s.created_at else '' }}</span>
          </div>
        </div>
        {% else %}
        <div style="color:#475569;font-size:.85rem;text-align:center;padding:2rem 0">No sessions yet</div>
        {% endfor %}
      </div>
    </div>

    <!-- Session detail -->
    <div id="sessionDetail" style="background:#1e293b;border:1px solid #334155;border-radius:10px;padding:1.5rem;min-height:400px">
      <div id="detailPlaceholder" style="color:#475569;text-align:center;padding:4rem 0">
        Select a session or create a new one to begin IPB.
      </div>
      <div id="detailContent" style="display:none">
        <div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem">
          <div>
            <div id="detailTheater" style="font-size:1.2rem;font-weight:700;color:#e2e8f0"></div>
            <div id="detailScenario" style="font-size:.85rem;color:#9ca3af;margin-top:.2rem"></div>
          </div>
          <button id="deleteSessionBtn" onclick="deleteSession()" style="margin-left:auto;background:#7f1d1d;color:#fca5a5;border:none;padding:.4rem .9rem;border-radius:6px;cursor:pointer;font-size:.8rem">Delete Session</button>
        </div>

        <!-- 4 steps -->
        <div id="stepsContainer" style="display:flex;flex-direction:column;gap:1rem"></div>
      </div>
    </div>

  </div>
</div>

<script>
const STEP_NAMES = [
  "Define Battlespace Environment",
  "Describe Battlespace Effects",
  "Evaluate the Threat",
  "Determine Threat COAs",
];
const STEP_COLORS = ["#3b82f6","#f59e0b","#e94560","#8b5cf6"];

let currentSessionId = null;
function mth(s) { return (window.ICDEV && window.ICDEV.mdToHtml) ? window.ICDEV.mdToHtml(s) : (s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/\n/g,'<br>'); }

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

async function createSession() {
  const theater = document.getElementById('ipbTheater').value.trim();
  const scenario = document.getElementById('ipbScenario').value.trim();
  if (!theater) { alert('Theater is required'); return; }
  const r = await fetch('/api/strategos/ipb/sessions', {
    method:'POST', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({theater, scenario})
  });
  const d = await r.json();
  closeModal();
  document.getElementById('ipbTheater').value = '';
  document.getElementById('ipbScenario').value = '';
  await refreshSessionList();
  loadSession(d.session_id);
}

async function refreshSessionList() {
  const r = await fetch('/api/strategos/ipb/sessions');
  const d = await r.json();
  const list = document.getElementById('sessionList');
  if (!d.sessions || !d.sessions.length) {
    list.innerHTML = '<div style="color:#475569;font-size:.85rem;text-align:center;padding:2rem 0">No sessions yet</div>';
    return;
  }
  list.innerHTML = d.sessions.map(s => `
    <div class="sess-card" onclick="loadSession('${s.id}')" data-id="${s.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;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${s.theater}</div>
      <div style="font-size:.75rem;color:#9ca3af;margin-top:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${s.scenario||'—'}</div>
      <div style="display:flex;gap:.5rem;margin-top:.5rem;align-items:center">
        <span style="font-size:.7rem;padding:.15rem .5rem;border-radius:4px;background:${s.status==='active'?'#064e3b':'#0f172a'};color:${s.status==='active'?'#34d399':'#6b7280'}">${s.status}</span>
        <span style="font-size:.7rem;color:#475569;margin-left:auto">${(s.created_at||'').slice(0,10)}</span>
      </div>
    </div>`).join('');
}

async function loadSession(id) {
  currentSessionId = id;
  document.querySelectorAll('.sess-card').forEach(c => {
    c.style.borderColor = c.dataset.id === id ? '#3b82f6' : '#334155';
  });
  const r = await fetch(`/api/strategos/ipb/sessions/${id}`);
  const s = await r.json();
  document.getElementById('detailPlaceholder').style.display = 'none';
  document.getElementById('detailContent').style.display = '';
  document.getElementById('detailTheater').textContent = s.theater;
  document.getElementById('detailScenario').textContent = s.scenario || 'No scenario description';
  renderSteps(s.steps || []);
}

function renderSteps(steps) {
  const container = document.getElementById('stepsContainer');
  container.innerHTML = steps.map((step, i) => {
    const color = STEP_COLORS[i] || '#6b7280';
    const isComplete = step.status === 'complete';
    return `
    <div style="border:1px solid ${isComplete ? color+'44' : '#334155'};border-radius:8px;overflow:hidden">
      <div style="display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;background:${isComplete ? color+'18' : '#0f172a'};cursor:pointer"
           onclick="toggleStep(${i})">
        <div style="width:24px;height:24px;border-radius:50%;background:${color};color:#fff;font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center">${i+1}</div>
        <div style="font-weight:600;color:#e2e8f0">Step ${i+1}: ${STEP_NAMES[i]}</div>
        <span style="margin-left:auto;font-size:.75rem;padding:.2rem .6rem;border-radius:4px;background:${isComplete?color+'33':'#1e293b'};color:${isComplete?color:'#6b7280'}">${step.status}</span>
        ${!isComplete ? `<button onclick="event.stopPropagation();synthesizeStep(${step.step_num})" style="background:${color};color:#fff;border:none;padding:.35rem .9rem;border-radius:5px;cursor:pointer;font-size:.8rem">Synthesize</button>` : ''}
      </div>
      <div id="stepBody${i}" style="display:none;padding:1rem;border-top:1px solid #1e293b">
        ${isComplete && step.content
          ? `<div style="color:#cbd5e1;line-height:1.7;font-size:.9rem">${mth(step.content)}</div>`
          : `<div style="color:#475569;font-size:.85rem">No synthesis yet. Click <strong>Synthesize</strong> to generate.</div>`}
      </div>
    </div>`;
  }).join('');
  // auto-expand complete steps
  steps.forEach((s, i) => { if (s.status === 'complete') toggleStep(i, true); });
}

function toggleStep(i, forceOpen) {
  const body = document.getElementById('stepBody'+i);
  if (!body) return;
  body.style.display = (forceOpen || body.style.display === 'none') ? 'block' : 'none';
}

async function synthesizeStep(stepNum) {
  if (!currentSessionId) return;
  const btn = event.target;
  btn.textContent = 'Synthesizing…';
  btn.disabled = true;
  try {
    const r = await fetch(`/api/strategos/ipb/sessions/${currentSessionId}/synthesize/${stepNum}`, {method:'POST'});
    const d = await r.json();
    if (d.error) { alert(d.error); }
    else { await loadSession(currentSessionId); }
  } finally {
    btn.textContent = 'Synthesize';
    btn.disabled = false;
  }
}

async function deleteSession() {
  if (!currentSessionId) return;
  if (!confirm('Delete this IPB session? This cannot be undone.')) return;
  await fetch(`/api/strategos/ipb/sessions/${currentSessionId}`, {method:'DELETE'});
  currentSessionId = null;
  document.getElementById('detailContent').style.display = 'none';
  document.getElementById('detailPlaceholder').style.display = '';
  await refreshSessionList();
}
</script>
{% endblock %}