{% extends "base.html" %}
{% block title %}METT-TC — 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:#06b6d4">METT-TC Worksheet</h2>
      <div style="color:#9ca3af;font-size:.8rem">FM 6-0 / MDMP Step 2 — Mission Analysis Framework</div>
    </div>
    <div style="margin-left:auto;display:flex;gap:.6rem">
      <button onclick="autoFill()" style="background:#0f172a;border:1px solid #06b6d4;color:#06b6d4;padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-size:.85rem">&#9889; Auto-Populate</button>
      <button onclick="showNewModal()" style="background:#06b6d4;color:#000;border:none;padding:.5rem 1.2rem;border-radius:6px;cursor:pointer;font-weight:600">+ New Worksheet</button>
    </div>
  </div>

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

    <!-- Worksheet list -->
    <div>
      <div style="font-size:.8rem;color:#6b7280;font-weight:600;letter-spacing:.05em;margin-bottom:.6rem">WORKSHEETS</div>
      <div id="wsList">
        {% for ws in worksheets %}
        <div class="ws-card" onclick="loadWorksheet('{{ ws.id }}')" data-id="{{ ws.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;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ ws.operation_name or ws.theater }}</div>
          <div style="font-size:.75rem;color:#9ca3af;margin-top:.2rem">{{ ws.theater }}</div>
          <div style="font-size:.7rem;color:#475569;margin-top:.4rem">{{ ws.created_at[:10] if ws.created_at else '' }} · {{ ws.created_by }}</div>
        </div>
        {% else %}
        <div style="color:#475569;font-size:.85rem;text-align:center;padding:2rem 0">No worksheets yet</div>
        {% endfor %}
      </div>
    </div>

    <!-- Editor panel -->
    <div>
      <div id="editorPlaceholder" style="background:#1e293b;border:1px solid #334155;border-radius:10px;padding:5rem;text-align:center;color:#475569">
        Select a worksheet or create a new one.<br>
        <span style="font-size:.8rem">Use Auto-Populate to pre-fill from live Strategos data.</span>
      </div>
      <div id="editor" style="display:none">

        <div style="display:flex;align-items:center;gap:1rem;margin-bottom:1rem">
          <div id="wsTitle" style="font-size:1.1rem;font-weight:700;color:#e2e8f0"></div>
          <div style="margin-left:auto;display:flex;gap:.6rem">
            <button onclick="saveWorksheet()" style="background:#06b6d4;color:#000;border:none;padding:.4rem 1rem;border-radius:6px;cursor:pointer;font-size:.85rem;font-weight:600">Save</button>
            <button onclick="deleteWorksheet()" style="background:#7f1d1d;color:#fca5a5;border:none;padding:.4rem .9rem;border-radius:6px;cursor:pointer;font-size:.8rem">Delete</button>
          </div>
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
          {% set factors = [
            ('M', 'Mission', 'mission', '#10b981', 'The task, with purpose, assigned or deduced from higher HQ orders.'),
            ('E', 'Enemy', 'enemy_situation', '#e94560', 'Enemy forces: strength, composition, disposition, recent activity, COAs.'),
            ('T', 'Terrain & Weather', 'terrain_weather', '#f59e0b', 'Key terrain, observation, cover/concealment, obstacles, weather effects.'),
            ('T', 'Troops Available', 'troops_available', '#3b82f6', 'Friendly forces available: organic, attached, OPCON, supporting.'),
            ('T', 'Time Available', 'time_available', '#8b5cf6', 'Time available for planning, preparation, and execution.'),
            ('C', 'Civil Considerations', 'civil_considerations', '#06b6d4', 'Human terrain: population, NGOs, key leaders, infrastructure impact.'),
          ] %}
          {% for letter, label, field_id, color, hint in factors %}
          <div style="background:#1e293b;border:1px solid #334155;border-radius:8px;padding:1rem">
            <div style="display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem">
              <div style="width:28px;height:28px;border-radius:50%;background:{{ color }};color:#fff;font-weight:700;font-size:.9rem;display:flex;align-items:center;justify-content:center">{{ letter }}</div>
              <div>
                <div style="font-weight:600;color:{{ color }};font-size:.85rem">{{ label }}</div>
                <div style="font-size:.7rem;color:#475569">{{ hint }}</div>
              </div>
            </div>
            <textarea id="field_{{ field_id }}" rows="5"
                      placeholder="{{ hint }}"
                      style="width:100%;padding:.5rem;background:#0f172a;border:1px solid #1e293b;border-radius:6px;color:#cbd5e1;box-sizing:border-box;resize:vertical;font-size:.85rem;line-height:1.5"></textarea>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>

  <!-- New Worksheet 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:440px">
      <h3 style="margin:0 0 1.2rem;color:#e2e8f0">New METT-TC Worksheet</h3>
      <label style="color:#9ca3af;font-size:.8rem">Operation Name</label>
      <input id="wsOpName" placeholder="e.g. OPERATION IRON ANVIL" 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">Theater / AO</label>
      <input id="wsTheater" placeholder="e.g. Western Pacific" 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">
      <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="createWorksheet()" style="background:#06b6d4;color:#000;border:none;padding:.5rem 1.2rem;border-radius:6px;cursor:pointer;font-weight:600">Create</button>
      </div>
    </div>
  </div>
</div>

<script>
const FIELDS = ['mission','enemy_situation','terrain_weather','troops_available','time_available','civil_considerations'];
let currentWsId = null;
let currentTheater = 'unspecified';

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 createWorksheet() {
  const op = document.getElementById('wsOpName').value.trim();
  const theater = document.getElementById('wsTheater').value.trim() || 'unspecified';
  const r = await fetch('/api/strategos/mett-tc', {
    method:'POST', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({operation_name: op, theater})
  });
  const d = await r.json();
  closeModal();
  document.getElementById('wsOpName').value='';
  document.getElementById('wsTheater').value='';
  await refreshList();
  loadWorksheet(d.worksheet_id);
}

async function refreshList() {
  const r = await fetch('/api/strategos/mett-tc');
  const d = await r.json();
  const list = document.getElementById('wsList');
  if (!d.worksheets || !d.worksheets.length) {
    list.innerHTML = '<div style="color:#475569;font-size:.85rem;text-align:center;padding:2rem 0">No worksheets yet</div>';
    return;
  }
  list.innerHTML = d.worksheets.map(ws => `
    <div class="ws-card" onclick="loadWorksheet('${ws.id}')" data-id="${ws.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;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${esc(ws.operation_name||ws.theater)}</div>
      <div style="font-size:.75rem;color:#9ca3af;margin-top:.2rem">${esc(ws.theater)}</div>
      <div style="font-size:.7rem;color:#475569;margin-top:.4rem">${(ws.created_at||'').slice(0,10)}</div>
    </div>`).join('');
}

async function loadWorksheet(id) {
  currentWsId = id;
  document.querySelectorAll('.ws-card').forEach(c => {
    c.style.borderColor = c.dataset.id===id ? '#06b6d4' : '#334155';
  });
  const r = await fetch(`/api/strategos/mett-tc/${id}`);
  const ws = await r.json();
  currentTheater = ws.theater || 'unspecified';
  document.getElementById('editorPlaceholder').style.display='none';
  document.getElementById('editor').style.display='';
  document.getElementById('wsTitle').textContent = (ws.operation_name || ws.theater) + ' — METT-TC';
  FIELDS.forEach(f => {
    const el = document.getElementById('field_'+f);
    if (el) el.value = ws[f] || '';
  });
}

async function autoFill() {
  const theater = currentTheater !== 'unspecified' ? currentTheater :
    (document.getElementById('wsTheater') ? document.getElementById('wsTheater').value.trim() : 'unspecified');
  const r = await fetch(`/api/strategos/mett-tc/auto-populate?theater=${encodeURIComponent(theater)}`);
  const d = await r.json();
  Object.entries(d).forEach(([k, v]) => {
    const el = document.getElementById('field_'+k);
    if (el && v) el.value = v;
  });
  if (!currentWsId) {
    alert('Auto-populate filled the fields — create a worksheet and Save to persist.');
  }
}

async function saveWorksheet() {
  if (!currentWsId) { alert('No worksheet loaded'); return; }
  const payload = {};
  FIELDS.forEach(f => {
    const el = document.getElementById('field_'+f);
    if (el) payload[f] = el.value.trim();
  });
  await fetch(`/api/strategos/mett-tc/${currentWsId}`, {
    method:'PATCH', headers:{'Content-Type':'application/json'},
    body: JSON.stringify(payload)
  });
  const btn = event.target;
  btn.textContent = 'Saved ✓';
  setTimeout(() => btn.textContent='Save', 1500);
}

async function deleteWorksheet() {
  if (!currentWsId || !confirm('Delete this worksheet?')) return;
  await fetch(`/api/strategos/mett-tc/${currentWsId}`, {method:'DELETE'});
  currentWsId = null;
  document.getElementById('editor').style.display='none';
  document.getElementById('editorPlaceholder').style.display='';
  await refreshList();
}
</script>
{% endblock %}