{% extends "base.html" %}
{% block title %}Sync Matrix — Strategos{% endblock %}
{% block content %}
<div style="padding:24px;max-width:1600px;margin:0 auto">
  <div style="display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap">
    <div>
      <h1 style="margin:0;font-size:1.5rem;color:#f1f5f9">Synchronization Matrix</h1>
      <p style="margin:4px 0 0;color:#64748b;font-size:.85rem">FM 3-0 / JP 5-0 — Time-phase operational effects across warfighting functions</p>
    </div>
    <div style="margin-left:auto;display:flex;gap:8px">
      <button onclick="showCreateModal()" style="padding:8px 18px;background:#f97316;border:none;border-radius:6px;color:#fff;font-weight:600;cursor:pointer">+ New Matrix</button>
    </div>
  </div>

  <div style="display:grid;grid-template-columns:280px 1fr;gap:20px">
    <!-- Sidebar -->
    <div style="background:#1e293b;border-radius:8px;padding:16px;height:fit-content">
      <h3 style="margin:0 0 12px;color:#94a3b8;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em">Operations</h3>
      <div id="matrixList" style="display:flex;flex-direction:column;gap:6px">
        {% for m in matrices %}
        <div class="matrix-item" data-id="{{ m.id }}" onclick="loadMatrix('{{ m.id }}')"
             style="padding:10px;background:#0f172a;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:all .15s">
          <div style="color:#f1f5f9;font-weight:600;font-size:.9rem">{{ m.operation_name }}</div>
          <div style="color:#64748b;font-size:.75rem;margin-top:2px">{{ m.theater }} · {{ m.phase or 'planning' }}</div>
        </div>
        {% else %}
        <div id="matrixListEmpty" style="color:#475569;font-size:.85rem;text-align:center;padding:20px 0">No matrices yet.<br>
          <button onclick="loadExample()" style="margin-top:10px;padding:6px 14px;background:#f97316;border:none;border-radius:5px;color:#fff;font-size:.82rem;cursor:pointer">Load Example</button>
        </div>
        {% endfor %}
      </div>
    </div>

    <!-- Matrix panel -->
    <div style="background:#1e293b;border-radius:8px;padding:16px">
      <div id="matrixEmpty" style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:320px;gap:12px;color:#475569">
        <div>Select an operation or create a new matrix</div>
        <button onclick="loadExample()" style="padding:8px 20px;background:#f97316;border:none;border-radius:6px;color:#fff;font-weight:600;cursor:pointer">Load Example Operation</button>
      </div>
      <div id="matrixContent" style="display:none">
        <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap">
          <div>
            <h2 id="matrixOpName" style="margin:0;color:#f1f5f9;font-size:1.1rem"></h2>
            <div id="matrixMeta" style="color:#64748b;font-size:.8rem"></div>
          </div>
          <div style="margin-left:auto;display:flex;gap:8px">
            <button onclick="saveMatrix()" style="padding:7px 16px;background:#10b981;border:none;border-radius:6px;color:#fff;font-weight:600;cursor:pointer">Save All</button>
            <button onclick="deleteMatrix()" style="padding:7px 14px;background:#991b1b;border:none;border-radius:6px;color:#fff;cursor:pointer">Delete</button>
          </div>
        </div>
        <!-- Legend -->
        <div style="display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap" id="wfaLegend"></div>
        <div style="overflow-x:auto">
          <table id="syncTable" style="border-collapse:collapse;font-size:.8rem"></table>
        </div>
        <div style="margin-top:10px;color:#475569;font-size:.75rem">Click any cell to edit. Press Tab to move right, Enter for new line within a cell. Click <strong>Save All</strong> when done.</div>
      </div>
    </div>
  </div>
</div>

<!-- Create Modal -->
<div id="createModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1000;align-items:center;justify-content:center">
  <div style="background:#1e293b;border-radius:10px;padding:28px;width:420px;border:1px solid #334155">
    <h3 style="margin:0 0 20px;color:#f1f5f9">New Synchronization Matrix</h3>
    <label style="display:block;margin-bottom:4px;color:#94a3b8;font-size:.85rem">Operation Name</label>
    <input id="newOpName" type="text" placeholder="e.g. OPERATION IRON HAMMER" style="width:100%;box-sizing:border-box;padding:8px;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#f1f5f9;margin-bottom:14px">
    <label style="display:block;margin-bottom:4px;color:#94a3b8;font-size:.85rem">Theater</label>
    <input id="newTheater" type="text" placeholder="e.g. Pacific" style="width:100%;box-sizing:border-box;padding:8px;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#f1f5f9;margin-bottom:20px">
    <div style="display:flex;gap:10px;justify-content:flex-end">
      <button onclick="closeCreateModal()" style="padding:8px 18px;background:#334155;border:none;border-radius:6px;color:#f1f5f9;cursor:pointer">Cancel</button>
      <button onclick="createMatrix()" style="padding:8px 18px;background:#f97316;border:none;border-radius:6px;color:#fff;font-weight:600;cursor:pointer">Create</button>
    </div>
  </div>
</div>

<script>
let currentMatrix = null;

const WFA_COLORS = {
  'Maneuver':           '#3b82f6',
  'Fires':              '#e94560',
  'ISR / Collection':   '#8b5cf6',
  'C2 / Command':       '#06b6d4',
  'CSS / Sustainment':  '#10b981',
  'Air Defense':        '#f97316',
  'SIGINT / EW':        '#f59e0b',
  'Cyber / Info Ops':   '#a855f7',
  'Aviation':           '#34d399',
  'Special Operations': '#ec4899',
};

// Example content for OPERATION IRON HAMMER (notional Pacific amphibious assault)
const EXAMPLE_CELLS = {
  // Row indices match DEFAULT_ROW_LABELS order
  // Col indices match DEFAULT_TIME_BLOCKS: H-72,H-48,H-24,H-12,H-4,H-3,H-2,H-1,H-Hour,H+1,H+2,H+4,H+8,H+12,H+24
  // Maneuver (row 0)
  '0:2':  'Assault elements move to final assembly areas (FAA)',
  '0:3':  'BN tactical assembly complete. CO-level briefings.',
  '0:4':  'Amphibious task force crosses LD (Line of Departure)',
  '0:6':  'Lead elements in LVT/AAV form up at line of departure',
  '0:7':  '30-min countdown. Assault elements in assault position.',
  '0:8':  '1/3 BN crosses beach, seizes OBJ EAGLE. 2/3 follows 15 min.',
  '0:9':  'OBJ EAGLE secured. 1/3 BN consolidates. 2/3 advances on OBJ HAWK.',
  '0:10': 'OBJ HAWK assault in progress.',
  '0:11': 'Exploitation phase. ATF scouts OBJ FALCON.',
  '0:12': 'All OBJs secured. ATF transitions to defend.',
  '0:14': 'Hand-off to follow-on force. ATF prepares retrograde.',

  // Fires (row 1)
  '1:1':  'FSCOORD coordination meeting. Fires plan briefed.',
  '1:2':  'Naval Surface Fire Support (NSFS) on-station. FFIR updated.',
  '1:3':  'NSFS SEAD fires on known threat air defense sites. Call-for-fire authority delegated to Co FSO.',
  '1:4':  'SEAD window H-4 to H-Hour. NSFS destroys known SHORAD sites.',
  '1:5':  'Fires on beach obstacles. NGF keeps flanks suppressed.',
  '1:6':  'Suppression lifts 5 min before H-Hour. Shift to on-call CAS.',
  '1:7':  'Final prep fires on landing zone. Lift H-2 min.',
  '1:8':  'CAS on-call: CASEVAC corridor open. NSFS shifts to inland targets.',
  '1:9':  'Priority target: ATGM positions vicinity OBJ HAWK.',
  '1:10': 'Fires on OBJ HAWK. AC-130 on-station for night ops.',
  '1:13': 'Counter-battery radar active. Fires on any enemy arty within 15 km.',

  // ISR / Collection (row 2)
  '2:0':  'UAV orbit NAI-1 (landing beach), NAI-2 (inland route). HUMINT confirmation of beach obstacles requested.',
  '2:1':  'SIGINT collection shifted to coastal defense comms. Report due 1800L.',
  '2:2':  'IMINT pass scheduled 0400L. HUMINT-ALPHA-07 reports no change to obstacle density.',
  '2:3':  'UAV hand-off to tactical control. Real-time ISR on beach sector.',
  '2:4':  'ISR focus: NAI-3 (reserve force positions). Watch for armor movement.',
  '2:5':  'Maintain UAV orbit. SIGINT reports C2 nodes active.',
  '2:6':  'Switch ISR to immediate pre-H reconnaissance. Update beach obs report.',
  '2:7':  'Final recce of landing zone clear. Confirm 0 obstacles at grid BT-442.',
  '2:8':  'ISR transitions to exploitation. NAI-5: counterattack avenue of approach.',
  '2:9':  'UAV on OBJ HAWK approach. Thermal for ATGM teams.',
  '2:11': 'BDA collection: OBJ EAGLE and HAWK. Report to J2 within 2 hours.',
  '2:14': 'PIR assessment: enemy reserve commitment — confirmed or denied?',

  // C2 / Command (row 3)
  '3:0':  'OPORD issue. ACE brief. CCIR registered in system.',
  '3:1':  'Rehearsal of Concept (ROC) drill. FRAGO authority delegated.',
  '3:2':  'C2 nodes activated. PACE plan confirmed. Primary: SATCOM.',
  '3:3':  'Final confirmation briefing. CO + XO forward.',
  '3:6':  'Radio silence unless emergency. EMCON Alpha.',
  '3:7':  'Break EMCON. Report assault positions NLT H-30 min.',
  '3:8':  'ACE in C2 mode. SITREP every 30 min from H-Hour forward.',
  '3:9':  'CO reports OBJ EAGLE status to BDE. Adjust FRAGO if delayed.',
  '3:13': 'CCIR update: has enemy committed reserves?',

  // CSS / Sustainment (row 4)
  '4:0':  'Class III/V (fuel/ammo) pre-positioned at ATF logistics ship.',
  '4:2':  'CASEVAC plan confirmed. Medevac helicopter on-call.',
  '4:3':  'Forward support element (FSE) embarked. Blood products aboard.',
  '4:7':  'Medical teams at H-Hour minus 30 min at TRP Charlie.',
  '4:8':  'CASEVAC activated. FSE lands at H+30 if beach secured.',
  '4:9':  'Ammo resupply: 40mm and 5.56 priority. Push to OBJ EAGLE.',
  '4:12': 'Class III resupply sorties begin. LOGPAC schedule issued.',
  '4:14': 'Sustainment transfer to follow-on force. ATF sustains for 72 hrs.',

  // Air Defense (row 5)
  '5:2':  'SHORAD assets (Stinger teams) assigned. FAAD net activated.',
  '5:3':  'Air Defense Warning: YELLOW. ROE: positive identification required.',
  '5:7':  'Air corridor de-conflicted with NSFS. ACM in effect.',
  '5:8':  'SHORAD deploy to beach on H+15. Air Warning: RED.',
  '5:10': 'GBAD assets transition to inland positions.',

  // SIGINT / EW (row 6)
  '6:1':  'EW: jamming of enemy tactical comms authorized H-12.',
  '6:3':  'EW pre-planned jamming on PLAN coastal defense freq band.',
  '6:5':  'EA-18G on-station. Begin coordinated jamming. J6 monitoring fratricide.',
  '6:6':  'EMCON Alpha enforced fleet-wide. EW passive mode.',
  '6:8':  'Post-H SIGINT: listen for C2 changes indicating enemy reaction.',
  '6:11': 'SIGINT assessment: is enemy adapting comms? Report to J2.',

  // Cyber / Info Ops (row 7)
  '7:0':  'Cyber: prepare CNO packages for PLAN coastal radar network.',
  '7:2':  'Info Ops: leaflet drop over potential civilian areas authorized.',
  '7:4':  'CNO: enable effect on coastal surveillance radar grid (1 hr window).',
  '7:8':  'MILDEC: false radio traffic suggesting secondary landing at OBJ DECOY.',
  '7:12': 'PSYOP: loudspeaker broadcasts on secured ground.',

  // Aviation (row 8)
  '8:1':  'Attack aviation brief. AH-1Z ready 2-hr NTM.',
  '8:3':  'CH-53 helos pre-positioned for CASEVAC and vertical envelopment.',
  '8:5':  'Helo attack runs on identified ATGM and MG positions.',
  '8:7':  'AH-1Z escort for assault craft. Suppress flanks.',
  '8:8':  'Vertical envelopment: 1 x MV-22 platoon lands OBJ EAGLE rear.',
  '8:9':  'AH-1Z: priority fires on vehicle-mounted threats.',
  '8:11': 'Aviation BDA assessment.',

  // Special Operations (row 9)
  '9:0':  'SEAL recce team inserted H-72 for beach obstacle survey.',
  '9:1':  'SEAL team reports: 3 x wire obstacles, no mines detected at primary landing beach.',
  '9:2':  'SEAL team extracts H-24. Report clears beach sector Alpha.',
  '9:7':  'SEAL team 2: direct action on coastal radar site H-1.',
  '9:8':  'SERE teams on-call. CSAR ready H-Hour.',
  '9:11': 'SOF transition to SR (special reconnaissance) for exploitation phase.',
};

function showCreateModal() { document.getElementById('createModal').style.display='flex'; }
function closeCreateModal() { document.getElementById('createModal').style.display='none'; }

async function createMatrix(opName, theater, prefillCells) {
  const name = opName || document.getElementById('newOpName').value.trim();
  if (!name && !opName) { alert('Operation name required'); return; }
  const th = theater || document.getElementById('newTheater').value.trim() || 'unspecified';
  const r = await fetch('/api/strategos/sync-matrix/matrices', {
    method:'POST', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({operation_name: name, theater: th})
  });
  const d = await r.json();
  closeCreateModal();
  document.getElementById('newOpName').value = '';
  document.getElementById('newTheater').value = '';
  const mid = d.matrix_id;

  if (prefillCells) {
    await fetch(`/api/strategos/sync-matrix/matrices/${mid}/bulk`, {
      method:'PATCH', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({cells: prefillCells})
    });
  }

  const matrixData = await (await fetch(`/api/strategos/sync-matrix/matrices/${mid}`)).json();
  addMatrixSidebar(matrixData);
  renderMatrixContent(matrixData);
}

async function loadExample() {
  if (!confirm('Load OPERATION IRON HAMMER — a notional Pacific amphibious assault sync matrix?')) return;
  await createMatrix('OPERATION IRON HAMMER', 'Pacific', EXAMPLE_CELLS);
  showToast('Example matrix loaded');
}

function addMatrixSidebar(m) {
  const empty = document.getElementById('matrixListEmpty');
  if (empty) empty.remove();
  const list = document.getElementById('matrixList');
  const el = document.createElement('div');
  el.className = 'matrix-item';
  el.dataset.id = m.id || m.matrix_id;
  el.onclick = () => loadMatrix(m.id || m.matrix_id);
  el.style.cssText = 'padding:10px;background:#0f172a;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:all .15s';
  el.innerHTML = `<div style="color:#f1f5f9;font-weight:600;font-size:.9rem">${m.operation_name}</div><div style="color:#64748b;font-size:.75rem;margin-top:2px">${m.theater || 'unspecified'} · planning</div>`;
  list.prepend(el);
  // Highlight
  document.querySelectorAll('.matrix-item').forEach(e => { e.style.borderColor='transparent'; e.style.background='#0f172a'; });
  el.style.borderColor = '#f97316';
  el.style.background = '#1c1208';
}

async function loadMatrix(id) {
  document.querySelectorAll('.matrix-item').forEach(el => {
    const sel = el.dataset.id === id;
    el.style.borderColor = sel ? '#f97316' : 'transparent';
    el.style.background  = sel ? '#1c1208'  : '#0f172a';
  });
  const r = await fetch(`/api/strategos/sync-matrix/matrices/${id}`);
  const m = await r.json();
  renderMatrixContent(m);
}

function renderMatrixContent(m) {
  currentMatrix = m;
  document.getElementById('matrixEmpty').style.display   = 'none';
  document.getElementById('matrixContent').style.display = 'block';
  document.getElementById('matrixOpName').textContent = m.operation_name;
  document.getElementById('matrixMeta').textContent   = `Theater: ${m.theater} · Created by: ${m.created_by}`;

  // Legend
  const legend = document.getElementById('wfaLegend');
  legend.innerHTML = (m.row_labels||[]).map(lbl => {
    const c = WFA_COLORS[lbl] || '#64748b';
    return `<span style="background:${c}22;color:${c};border:1px solid ${c}44;padding:2px 8px;border-radius:4px;font-size:.72rem;font-weight:600">${lbl}</span>`;
  }).join('');

  renderTable(m);
}

function renderTable(m) {
  const rows  = m.row_labels  || [];
  const cols  = m.time_blocks || [];
  const cells = m.cells       || {};
  const table = document.getElementById('syncTable');

  let html = '<thead><tr>';
  html += '<th style="padding:6px 10px;background:#0f172a;color:#94a3b8;text-align:left;min-width:130px;position:sticky;left:0;z-index:2;font-size:.75rem">WFA / Time</th>';
  for (const c of cols) {
    const isH = c === 'H-Hour';
    const isPrep = c.startsWith('H-');
    const bg = isH ? '#7c3aed' : isPrep ? '#1a1f2e' : '#0f172a';
    const color = isH ? '#fff' : isPrep ? '#64748b' : '#94a3b8';
    html += `<th style="padding:6px 8px;background:${bg};color:${color};text-align:center;min-width:100px;white-space:nowrap;font-size:.75rem;font-weight:${isH?'700':'600'}">${c}</th>`;
  }
  html += '</tr></thead><tbody>';

  for (let ri = 0; ri < rows.length; ri++) {
    const rowColor = WFA_COLORS[rows[ri]] || '#64748b';
    const rowBg = ri % 2 === 0 ? '#0b111e' : '#0d1520';
    html += `<tr>`;
    html += `<td style="padding:6px 10px;background:#0f172a;color:${rowColor};font-weight:700;font-size:.78rem;position:sticky;left:0;z-index:1;border-right:3px solid ${rowColor}44;white-space:nowrap">${rows[ri]}</td>`;
    for (let ci = 0; ci < cols.length; ci++) {
      const key = `${ri}:${ci}`;
      const val = cells[key] || '';
      const isH = cols[ci] === 'H-Hour';
      const bg  = isH ? '#1e1b4b' : rowBg;
      html += `<td style="padding:2px;background:${bg};border:1px solid #1e293b;vertical-align:top">
        <textarea data-key="${key}" data-row="${ri}" data-col="${ci}"
          style="width:100%;min-width:96px;box-sizing:border-box;background:${val?rowColor+'18':'transparent'};border:none;color:#e2e8f0;resize:none;font-size:.76rem;padding:4px 6px;line-height:1.45;min-height:${val?'auto':'48px'};max-height:120px;outline:none;transition:background .2s"
          placeholder="—" oninput="this.style.background=this.value?'${rowColor}18':'transparent';this.style.minHeight='auto'">${val}</textarea>
      </td>`;
    }
    html += '</tr>';
  }
  html += '</tbody>';
  table.innerHTML = html;
}

async function saveMatrix() {
  if (!currentMatrix) return;
  const cells = {};
  document.querySelectorAll('#syncTable textarea').forEach(ta => {
    if (ta.value.trim()) cells[ta.dataset.key] = ta.value.trim();
  });
  const r = await fetch(`/api/strategos/sync-matrix/matrices/${currentMatrix.id}/bulk`, {
    method:'PATCH', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({cells})
  });
  const d = await r.json();
  if (d.ok) { currentMatrix.cells = cells; showToast('Matrix saved'); }
}

async function deleteMatrix() {
  if (!currentMatrix) return;
  if (!confirm(`Delete "${currentMatrix.operation_name}"?`)) return;
  await fetch(`/api/strategos/sync-matrix/matrices/${currentMatrix.id}`, {method:'DELETE'});
  const el = document.querySelector(`.matrix-item[data-id="${currentMatrix.id}"]`);
  if (el) el.remove();
  currentMatrix = null;
  document.getElementById('matrixEmpty').style.display   = 'flex';
  document.getElementById('matrixContent').style.display = 'none';
  if (!document.querySelector('.matrix-item')) {
    document.getElementById('matrixList').innerHTML = '<div id="matrixListEmpty" style="color:#475569;font-size:.85rem;text-align:center;padding:20px 0">No matrices yet.</div>';
  }
}

function showToast(msg) {
  const t = document.createElement('div');
  t.textContent = msg;
  t.style.cssText='position:fixed;bottom:24px;right:24px;background:#f97316;color:#fff;padding:10px 22px;border-radius:8px;font-weight:600;z-index:9999;opacity:0;transition:opacity .3s';
  document.body.appendChild(t);
  requestAnimationFrame(() => t.style.opacity='1');
  setTimeout(() => { t.style.opacity='0'; setTimeout(() => t.remove(),300); }, 2500);
}

{% if matrices %}
document.addEventListener('DOMContentLoaded', () => loadMatrix('{{ matrices[0].id }}'));
{% endif %}
</script>
{% endblock %}