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

  <div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem">
    <div>
      <h2 style="margin:0;color:#e94560">F3EAD Targeting Workflow</h2>
      <div style="color:#9ca3af;font-size:.8rem">JP 3-60 — Find · Fix · Finish · Exploit · Analyze · Disseminate</div>
    </div>
    <button onclick="showAddTarget()" style="margin-left:auto;background:#e94560;color:#fff;border:none;padding:.5rem 1.2rem;border-radius:6px;cursor:pointer;font-weight:600">+ Add Target</button>
  </div>

  <!-- Add Target Modal -->
  <div id="addTargetModal" 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:520px">
      <h3 style="margin:0 0 1.2rem;color:#e2e8f0">Add Target</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="tgtName" placeholder="e.g. SAM Battery Echo-7" 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">Target Type</label>
          <select id="tgtType" style="width:100%;margin-top:.3rem;padding:.5rem;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#e2e8f0;box-sizing:border-box">
            <option>node</option><option>network</option><option>individual</option>
            <option>infrastructure</option><option>unit</option><option>facility</option>
          </select>
        </div>
        <div>
          <label style="color:#9ca3af;font-size:.8rem">Priority (1=highest)</label>
          <input id="tgtPriority" type="number" min="1" max="5" value="3" 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="tgtTheater" 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">Responsible Element</label>
          <input id="tgtElement" placeholder="e.g. 7th Fleet / TF-77" 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">Geo Hint (optional)</label>
          <input id="tgtGeo" placeholder="e.g. 22.3N 114.2E" 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">Description</label>
          <textarea id="tgtDesc" rows="2" 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="closeAddTarget()" style="background:#334155;color:#e2e8f0;border:none;padding:.5rem 1.2rem;border-radius:6px;cursor:pointer">Cancel</button>
        <button onclick="addTarget()" style="background:#e94560;color:#fff;border:none;padding:.5rem 1.2rem;border-radius:6px;cursor:pointer;font-weight:600">Add Target</button>
      </div>
    </div>
  </div>

  <!-- Kanban board -->
  <div id="kanbanBoard" style="display:flex;gap:1rem;overflow-x:auto;padding-bottom:1rem">
    <div style="color:#475569;text-align:center;padding:4rem;width:100%">Loading targeting board…</div>
  </div>

  <!-- Stats bar -->
  <div id="statsBar" style="display:flex;gap:1rem;margin-top:1rem;flex-wrap:wrap"></div>

</div>

<script>
const PHASE_COLORS = {
  find:        '#3b82f6',
  fix:         '#f59e0b',
  finish:      '#e94560',
  exploit:     '#8b5cf6',
  analyze:     '#10b981',
  disseminate: '#06b6d4',
  complete:    '#6b7280',
};
const PHASE_LABELS = {
  find:'FIND', fix:'FIX', finish:'FINISH',
  exploit:'EXPLOIT', analyze:'ANALYZE',
  disseminate:'DISSEMINATE', complete:'COMPLETE',
};
const PHASE_DESCS = {
  find:        'Identify & locate target',
  fix:         'Continuous contact / track',
  finish:      'Lethal / non-lethal engagement',
  exploit:     'Collect post-strike intel',
  analyze:     'Process intel, assess BDA',
  disseminate: 'Distribute products',
  complete:    'Cycle closed',
};

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

async function loadBoard() {
  const r = await fetch('/api/strategos/f3ead/board');
  const d = await r.json();
  if (d.error) return;
  renderBoard(d);
}

function renderBoard(data) {
  const board = data.board || {};
  const phases = data.phases || [];
  const container = document.getElementById('kanbanBoard');
  container.innerHTML = phases.map(phase => {
    const cards = board[phase] || [];
    const color = PHASE_COLORS[phase] || '#6b7280';
    return `
    <div style="flex:0 0 200px;min-width:200px">
      <div style="padding:.6rem .8rem;background:${color}22;border:1px solid ${color}55;border-radius:8px 8px 0 0;display:flex;align-items:center;gap:.5rem">
        <span style="width:8px;height:8px;border-radius:50%;background:${color};display:inline-block"></span>
        <span style="font-size:.8rem;font-weight:700;color:${color}">${PHASE_LABELS[phase]||phase.toUpperCase()}</span>
        <span style="margin-left:auto;background:${color}33;color:${color};font-size:.75rem;padding:.1rem .4rem;border-radius:4px">${cards.length}</span>
      </div>
      <div style="background:#0f172a;border:1px solid ${color}33;border-top:none;border-radius:0 0 8px 8px;min-height:300px;padding:.5rem">
        <div style="font-size:.7rem;color:#475569;text-align:center;padding:.3rem 0 .5rem">${PHASE_DESCS[phase]||''}</div>
        ${cards.map(t => renderCard(t, phase, color)).join('')}
      </div>
    </div>`;
  }).join('');

  // stats bar
  const total = phases.reduce((s,p) => s + (board[p]||[]).length, 0);
  const active = total - (board.complete||[]).length;
  document.getElementById('statsBar').innerHTML = `
    <div style="background:#1e293b;border:1px solid #334155;border-radius:8px;padding:.6rem 1rem;font-size:.85rem">
      <span style="color:#6b7280">Total:</span> <strong style="color:#e2e8f0">${total}</strong>
    </div>
    <div style="background:#1e293b;border:1px solid #334155;border-radius:8px;padding:.6rem 1rem;font-size:.85rem">
      <span style="color:#6b7280">Active:</span> <strong style="color:#e94560">${active}</strong>
    </div>
    <div style="background:#1e293b;border:1px solid #334155;border-radius:8px;padding:.6rem 1rem;font-size:.85rem">
      <span style="color:#6b7280">Complete:</span> <strong style="color:#6b7280">${(board.complete||[]).length}</strong>
    </div>`;
}

function renderCard(t, phase, color) {
  const pLabels = {'1':'P1','2':'P2','3':'P3','4':'P4','5':'P5'};
  const pColors = {'1':'#e94560','2':'#f97316','3':'#f59e0b','4':'#3b82f6','5':'#6b7280'};
  const pKey = String(t.priority);
  return `
  <div style="background:#1e293b;border:1px solid #334155;border-radius:6px;padding:.7rem;margin-bottom:.5rem">
    <div style="display:flex;align-items:flex-start;gap:.4rem;margin-bottom:.4rem">
      <span style="font-size:.7rem;font-weight:700;padding:.1rem .4rem;border-radius:3px;background:${pColors[pKey]||'#334155'}22;color:${pColors[pKey]||'#6b7280'};white-space:nowrap">${pLabels[pKey]||pKey}</span>
      <span style="font-size:.8rem;font-weight:600;color:#e2e8f0;line-height:1.3">${esc(t.target_name)}</span>
    </div>
    <div style="font-size:.7rem;color:#6b7280;margin-bottom:.5rem">${esc(t.target_type)}${t.responsible_element?' · '+esc(t.responsible_element):''}</div>
    <div style="display:flex;gap:.4rem;flex-wrap:wrap">
      ${phase !== 'complete' ? `<button onclick="advancePhase('${t.id}')" style="flex:1;background:${color};color:#fff;border:none;padding:.3rem .4rem;border-radius:4px;cursor:pointer;font-size:.7rem;font-weight:600">Advance ›</button>` : ''}
      <button onclick="deleteTarget('${t.id}')" style="background:#450a0a;color:#f87171;border:none;padding:.3rem .5rem;border-radius:4px;cursor:pointer;font-size:.7rem">✕</button>
    </div>
  </div>`;
}

async function advancePhase(id) {
  const r = await fetch(`/api/strategos/f3ead/targets/${id}/advance`, {
    method:'POST', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({actor:'analyst'})
  });
  const d = await r.json();
  if (d.error) alert(d.error);
  else loadBoard();
}

async function deleteTarget(id) {
  if (!confirm('Remove this target from the board?')) return;
  await fetch(`/api/strategos/f3ead/targets/${id}`, {method:'DELETE'});
  loadBoard();
}

function showAddTarget() {
  document.getElementById('addTargetModal').style.display = 'flex';
}
function closeAddTarget() {
  document.getElementById('addTargetModal').style.display = 'none';
}

async function addTarget() {
  const name = document.getElementById('tgtName').value.trim();
  if (!name) { alert('Target name is required'); return; }
  await fetch('/api/strategos/f3ead/targets', {
    method:'POST', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({
      target_name: name,
      target_type: document.getElementById('tgtType').value,
      description: document.getElementById('tgtDesc').value.trim(),
      responsible_element: document.getElementById('tgtElement').value.trim(),
      priority: parseInt(document.getElementById('tgtPriority').value)||3,
      theater: document.getElementById('tgtTheater').value.trim()||'unspecified',
      geo_hint: document.getElementById('tgtGeo').value.trim(),
    })
  });
  closeAddTarget();
  document.getElementById('tgtName').value='';
  document.getElementById('tgtDesc').value='';
  document.getElementById('tgtElement').value='';
  document.getElementById('tgtGeo').value='';
  loadBoard();
}

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