{% extends "base.html" %}
{% block title %}Source Registry — Strategos{% endblock %}
{% block content %}
<div style="padding:24px;max-width:1400px;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">Source Registry</h1>
      <p style="margin:4px 0 0;color:#64748b;font-size:.85rem">STANAG 2022 / AJP-2.1 — Reliability (A-F) · Credibility (1-6) · Confidence decay</p>
    </div>
    <div style="margin-left:auto;display:flex;gap:8px">
      <button onclick="seedExamples()" style="padding:7px 16px;background:#334155;border:none;border-radius:6px;color:#94a3b8;font-size:.85rem;cursor:pointer">+ Load Examples</button>
      <button onclick="showSourceModal()" style="padding:8px 18px;background:#34d399;border:none;border-radius:6px;color:#0f172a;font-weight:600;cursor:pointer">+ Register Source</button>
    </div>
  </div>

  <!-- Grade legend -->
  <div style="background:#1e293b;border-radius:8px;padding:12px 16px;margin-bottom:16px;display:flex;gap:24px;flex-wrap:wrap;align-items:center">
    <div style="color:#64748b;font-size:.75rem;font-weight:600;text-transform:uppercase">STANAG 2022 RELIABILITY</div>
    <div style="display:flex;gap:8px;flex-wrap:wrap">
      {% for g, col, desc in [('A','#10b981','Completely reliable'),('B','#34d399','Usually reliable'),('C','#f59e0b','Fairly reliable'),('D','#f97316','Not usually reliable'),('E','#e94560','Unreliable'),('F','#64748b','Cannot judge')] %}
      <span title="{{ desc }}" style="background:{{ col }}22;color:{{ col }};border:1px solid {{ col }}44;padding:3px 10px;border-radius:4px;font-weight:700;font-size:.85rem;cursor:default">{{ g }} — {{ desc }}</span>
      {% endfor %}
    </div>
  </div>

  <div style="display:grid;grid-template-columns:320px 1fr;gap:20px">
    <!-- Sources list -->
    <div style="background:#1e293b;border-radius:8px;padding:16px">
      <h3 style="margin:0 0 12px;color:#94a3b8;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em">Sources</h3>
      <div id="sourceList" style="display:flex;flex-direction:column;gap:6px">
        {% for s in sources %}
        {% set rcolors = {'A':'#10b981','B':'#34d399','C':'#f59e0b','D':'#f97316','E':'#e94560','F':'#64748b'} %}
        {% set rc = rcolors.get(s.reliability, '#64748b') %}
        <div class="source-item" data-id="{{ s.id }}" onclick="loadSource('{{ s.id }}')"
             style="padding:10px;background:#0f172a;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:all .15s">
          <div style="display:flex;align-items:center;gap:8px">
            <span style="background:{{ rc }}22;color:{{ rc }};border:1px solid {{ rc }}44;padding:2px 10px;border-radius:4px;font-weight:700;font-size:.9rem;min-width:28px;text-align:center">{{ s.reliability }}</span>
            <span style="color:#e2e8f0;font-weight:600;font-size:.9rem">{{ s.source_name }}</span>
          </div>
          <div style="color:#64748b;font-size:.75rem;margin-top:4px;padding-left:2px">{{ s.source_type }} · {{ s.theater }}</div>
        </div>
        {% else %}
        <div id="emptyListMsg" style="color:#475569;font-size:.85rem;text-align:center;padding:30px 0">
          No sources yet.<br>
          <button onclick="showSourceModal()" style="margin-top:10px;padding:6px 16px;background:#34d399;border:none;border-radius:5px;color:#0f172a;font-weight:600;cursor:pointer;font-size:.85rem">Register first source</button>
        </div>
        {% endfor %}
      </div>
    </div>

    <!-- Source detail panel -->
    <div>
      <div id="sourceEmpty" style="background:#1e293b;border-radius:8px;padding:60px;text-align:center;color:#475569">
        Select a source from the list to view details and intelligence reports.
      </div>

      <div id="sourceDetail" style="display:none">
        <!-- Header card -->
        <div style="background:#1e293b;border-radius:8px;padding:16px;margin-bottom:14px">
          <div style="display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap">
            <span id="srcGradeBadge" style="padding:5px 16px;border-radius:6px;font-weight:700;font-size:1.2rem"></span>
            <div>
              <div id="srcName" style="color:#f1f5f9;font-weight:700;font-size:1.1rem"></div>
              <div id="srcMeta" style="color:#64748b;font-size:.8rem;margin-top:2px"></div>
            </div>
            <div style="margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap">
              <label style="color:#94a3b8;font-size:.8rem">Update reliability:</label>
              <select id="srcReliabilitySelect" onchange="updateReliability()" style="padding:6px 10px;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#f1f5f9;font-size:.85rem">
                <option value="A">A — Completely reliable</option>
                <option value="B">B — Usually reliable</option>
                <option value="C">C — Fairly reliable</option>
                <option value="D">D — Not usually reliable</option>
                <option value="E">E — Unreliable</option>
                <option value="F">F — Cannot be judged</option>
              </select>
              <button onclick="deleteSource()" style="padding:7px 14px;background:#991b1b;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.85rem">Delete</button>
            </div>
          </div>
          <div id="srcNotes" style="color:#94a3b8;font-size:.85rem;padding:8px;background:#0f172a;border-radius:5px;border-left:3px solid #334155"></div>
        </div>

        <!-- Add Report -->
        <div style="background:#1e293b;border-radius:8px;padding:16px;margin-bottom:14px">
          <h3 style="margin:0 0 12px;color:#94a3b8;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em">Log Intelligence Report</h3>
          <div style="margin-bottom:8px">
            <input id="rSubject" type="text" placeholder="Subject / topic (optional)" style="width:100%;box-sizing:border-box;padding:7px 10px;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#f1f5f9;font-size:.85rem">
          </div>
          <div style="display:grid;grid-template-columns:1fr 220px auto;gap:8px">
            <input id="rContent" type="text" placeholder="Intelligence report content..." style="padding:8px 10px;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#f1f5f9;font-size:.85rem">
            <select id="rCredibility" style="padding:8px;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#f1f5f9;font-size:.82rem">
              <option value="1">1 — Confirmed</option>
              <option value="2">2 — Probably true</option>
              <option value="3">3 — Possibly true</option>
              <option value="4">4 — Doubtful</option>
              <option value="5">5 — Improbable</option>
              <option value="6" selected>6 — Cannot judge</option>
            </select>
            <button onclick="addReport()" style="padding:8px 16px;background:#34d399;border:none;border-radius:6px;color:#0f172a;font-weight:600;cursor:pointer;white-space:nowrap">Log Report</button>
          </div>
        </div>

        <!-- Reports table -->
        <div style="background:#1e293b;border-radius:8px;padding:16px">
          <h3 style="margin:0 0 12px;color:#94a3b8;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em">Intelligence Reports
            <span id="reportCount" style="background:#334155;color:#94a3b8;padding:1px 8px;border-radius:10px;font-size:.75rem;margin-left:8px;font-weight:400"></span>
          </h3>
          <table style="width:100%;border-collapse:collapse;font-size:.82rem">
            <thead>
              <tr style="color:#64748b;text-transform:uppercase;font-size:.72rem;border-bottom:1px solid #334155">
                <th style="padding:7px 8px;text-align:left">Grade</th>
                <th style="padding:7px 8px;text-align:left">Subject / Content</th>
                <th style="padding:7px 8px;text-align:center">Base Conf</th>
                <th style="padding:7px 8px;text-align:center">Current Conf ↓</th>
                <th style="padding:7px 8px;text-align:left">Collected</th>
              </tr>
            </thead>
            <tbody id="reportsBody">
              <tr><td colspan="5" style="padding:20px;text-align:center;color:#475569">No reports logged</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Source Registration Modal -->
<div id="sourceModal" 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:460px;border:1px solid #334155">
    <h3 style="margin:0 0 18px;color:#f1f5f9">Register Intelligence Source</h3>
    <label style="display:block;margin-bottom:4px;color:#94a3b8;font-size:.82rem">Source Designator / Name *</label>
    <input id="sName" type="text" placeholder="e.g. HUMINT-ALPHA-07" style="width:100%;box-sizing:border-box;padding:8px;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#f1f5f9;margin-bottom:14px">
    <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:14px">
      <div>
        <label style="display:block;margin-bottom:4px;color:#94a3b8;font-size:.82rem">Collection Type</label>
        <select id="sType" style="width:100%;padding:8px;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#f1f5f9">
          <option>HUMINT</option><option>SIGINT</option><option>IMINT</option>
          <option>OSINT</option><option>MASINT</option><option>SOCMINT</option>
          <option>technical</option><option>unknown</option>
        </select>
      </div>
      <div>
        <label style="display:block;margin-bottom:4px;color:#94a3b8;font-size:.82rem">Initial Reliability</label>
        <select id="sReliability" style="width:100%;padding:8px;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#f1f5f9">
          <option>A</option><option>B</option><option>C</option>
          <option>D</option><option>E</option><option value="F" selected>F</option>
        </select>
      </div>
      <div>
        <label style="display:block;margin-bottom:4px;color:#94a3b8;font-size:.82rem">Theater</label>
        <input id="sTheater" type="text" placeholder="global" style="width:100%;box-sizing:border-box;padding:8px;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#f1f5f9">
      </div>
    </div>
    <label style="display:block;margin-bottom:4px;color:#94a3b8;font-size:.82rem">Handling Notes / Restrictions</label>
    <textarea id="sNotes" placeholder="Access restrictions, handling caveats..." style="width:100%;box-sizing:border-box;padding:8px;background:#0f172a;border:1px solid #334155;border-radius:6px;color:#f1f5f9;margin-bottom:20px;resize:vertical;min-height:60px"></textarea>
    <div style="display:flex;gap:10px;justify-content:flex-end">
      <button onclick="closeSourceModal()" style="padding:8px 18px;background:#334155;border:none;border-radius:6px;color:#f1f5f9;cursor:pointer">Cancel</button>
      <button onclick="submitSource()" style="padding:8px 18px;background:#34d399;border:none;border-radius:6px;color:#0f172a;font-weight:600;cursor:pointer">Register</button>
    </div>
  </div>
</div>

<script>
const RCOLOR = {A:'#10b981',B:'#34d399',C:'#f59e0b',D:'#f97316',E:'#e94560',F:'#64748b'};
const RDESC  = {A:'Completely reliable',B:'Usually reliable',C:'Fairly reliable',D:'Not usually reliable',E:'Unreliable',F:'Cannot be judged'};
let currentSource = null;

// ── Modal ──────────────────────────────────────────────────────────────────────
function showSourceModal() { document.getElementById('sourceModal').style.display='flex'; }
function closeSourceModal() { document.getElementById('sourceModal').style.display='none'; }

async function submitSource() {
  const name = document.getElementById('sName').value.trim();
  if (!name) { alert('Source designator required'); return; }
  const resp = await fetch('/api/strategos/sources', {
    method:'POST', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({
      source_name: name,
      source_type: document.getElementById('sType').value,
      reliability: document.getElementById('sReliability').value,
      theater: document.getElementById('sTheater').value.trim() || 'global',
      notes: document.getElementById('sNotes').value.trim()
    })
  });
  const d = await resp.json();
  if (d.error) { alert('Error: ' + d.error); return; }
  closeSourceModal();
  // Reset form
  document.getElementById('sName').value = '';
  document.getElementById('sNotes').value = '';
  document.getElementById('sTheater').value = '';
  // Add to sidebar without reload
  addToSidebar({id: d.source_id, source_name: name, source_type: document.getElementById('sType').value,
    reliability: document.getElementById('sReliability').value, theater: document.getElementById('sTheater').value || 'global'});
  loadSource(d.source_id);
}

function addToSidebar(src) {
  const empty = document.getElementById('emptyListMsg');
  if (empty) empty.remove();
  const list = document.getElementById('sourceList');
  const color = RCOLOR[src.reliability] || '#64748b';
  const el = document.createElement('div');
  el.className = 'source-item';
  el.dataset.id = src.id;
  el.onclick = () => loadSource(src.id);
  el.style.cssText = 'padding:10px;background:#0f172a;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:all .15s';
  el.innerHTML = `
    <div style="display:flex;align-items:center;gap:8px">
      <span style="background:${color}22;color:${color};border:1px solid ${color}44;padding:2px 10px;border-radius:4px;font-weight:700;font-size:.9rem;min-width:28px;text-align:center">${src.reliability}</span>
      <span style="color:#e2e8f0;font-weight:600;font-size:.9rem">${src.source_name}</span>
    </div>
    <div style="color:#64748b;font-size:.75rem;margin-top:4px;padding-left:2px">${src.source_type} · ${src.theater}</div>`;
  list.prepend(el);
}

// ── Load source detail ─────────────────────────────────────────────────────────
async function loadSource(id) {
  // Highlight sidebar
  document.querySelectorAll('.source-item').forEach(el => {
    const selected = el.dataset.id === id;
    el.style.borderColor  = selected ? '#34d399' : 'transparent';
    el.style.background   = selected ? '#0d2a1e' : '#0f172a';
  });

  // Fetch the source record
  const r = await fetch(`/api/strategos/sources/${id}`);
  if (!r.ok) return;
  const src = await r.json();
  currentSource = src;

  // Show detail panel
  document.getElementById('sourceEmpty').style.display  = 'none';
  document.getElementById('sourceDetail').style.display = 'block';

  // Populate header
  const color = RCOLOR[src.reliability] || '#64748b';
  const badge = document.getElementById('srcGradeBadge');
  badge.textContent    = src.reliability;
  badge.style.background = color + '22';
  badge.style.color      = color;
  badge.style.border     = '1px solid ' + color + '44';

  document.getElementById('srcName').textContent = src.source_name;
  document.getElementById('srcMeta').textContent = `${src.source_type} · ${src.theater} · ${RDESC[src.reliability] || ''}`;
  document.getElementById('srcNotes').textContent = src.notes || 'No handling notes.';
  document.getElementById('srcReliabilitySelect').value = src.reliability;

  await loadReports(id);
}

// ── Reports ────────────────────────────────────────────────────────────────────
async function loadReports(sourceId) {
  const r = await fetch(`/api/strategos/sources/${sourceId}/reports`);
  const d = await r.json();
  const reports = d.reports || [];
  document.getElementById('reportCount').textContent = reports.length;
  const tbody = document.getElementById('reportsBody');
  if (!reports.length) {
    tbody.innerHTML = '<tr><td colspan="5" style="padding:20px;text-align:center;color:#475569">No reports logged yet</td></tr>';
    return;
  }
  tbody.innerHTML = reports.map(rp => {
    const grade    = `${rp.reliability || '?'}${rp.credibility}`;
    const baseConf = Math.round((rp.confidence || 0) * 100);
    const curConf  = Math.round((rp.current_confidence || 0) * 100);
    const confColor = curConf >= 70 ? '#10b981' : curConf >= 40 ? '#f59e0b' : '#e94560';
    const collected = (rp.collected_at || '').substring(0, 16).replace('T', ' ');
    return `<tr style="border-top:1px solid #0f172a">
      <td style="padding:8px">
        <span style="background:#33415533;color:#94a3b8;padding:2px 9px;border-radius:4px;font-weight:700;letter-spacing:.04em">${grade}</span>
      </td>
      <td style="padding:8px">
        ${rp.subject ? `<div style="color:#64748b;font-size:.75rem;margin-bottom:2px">${rp.subject}</div>` : ''}
        <div style="color:#e2e8f0;font-size:.83rem">${rp.content || ''}</div>
        <div style="color:#475569;font-size:.72rem;margin-top:2px">${rp.credibility_desc || ''}</div>
      </td>
      <td style="padding:8px;text-align:center;color:#94a3b8">${baseConf}%</td>
      <td style="padding:8px;text-align:center;color:${confColor};font-weight:700">${curConf}%</td>
      <td style="padding:8px;color:#64748b;font-size:.78rem;white-space:nowrap">${collected}</td>
    </tr>`;
  }).join('');
}

async function addReport() {
  if (!currentSource) return;
  const content = document.getElementById('rContent').value.trim();
  if (!content) { alert('Report content required'); return; }
  const r = await fetch(`/api/strategos/sources/${currentSource.id}/reports`, {
    method:'POST', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({
      content,
      credibility: document.getElementById('rCredibility').value,
      subject: document.getElementById('rSubject').value.trim()
    })
  });
  const d = await r.json();
  if (d.error) { alert(d.error); return; }
  document.getElementById('rContent').value = '';
  document.getElementById('rSubject').value = '';
  await loadReports(currentSource.id);
}

// ── Reliability update ─────────────────────────────────────────────────────────
async function updateReliability() {
  if (!currentSource) return;
  const rel = document.getElementById('srcReliabilitySelect').value;
  const r = await fetch(`/api/strategos/sources/${currentSource.id}/reliability`, {
    method:'PATCH', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({reliability: rel})
  });
  if (!r.ok) return;
  currentSource.reliability = rel;
  const color = RCOLOR[rel] || '#64748b';
  const badge = document.getElementById('srcGradeBadge');
  badge.textContent    = rel;
  badge.style.background = color + '22';
  badge.style.color      = color;
  badge.style.border     = '1px solid ' + color + '44';
  document.getElementById('srcMeta').textContent = `${currentSource.source_type} · ${currentSource.theater} · ${RDESC[rel] || ''}`;
  // Update sidebar badge
  const item = document.querySelector(`.source-item[data-id="${currentSource.id}"] span`);
  if (item) { item.textContent = rel; item.style.background = color+'22'; item.style.color = color; }
  showToast('Reliability updated to ' + rel);
}

// ── Delete ─────────────────────────────────────────────────────────────────────
async function deleteSource() {
  if (!currentSource) return;
  if (!confirm(`Delete source "${currentSource.source_name}"? This also removes all its reports.`)) return;
  const r = await fetch(`/api/strategos/sources/${currentSource.id}`, {method:'DELETE'});
  if (r.ok) {
    const el = document.querySelector(`.source-item[data-id="${currentSource.id}"]`);
    if (el) el.remove();
    currentSource = null;
    document.getElementById('sourceEmpty').style.display  = 'block';
    document.getElementById('sourceDetail').style.display = 'none';
    if (!document.querySelector('.source-item')) {
      document.getElementById('sourceList').innerHTML = '<div id="emptyListMsg" style="color:#475569;font-size:.85rem;text-align:center;padding:30px 0">No sources yet.</div>';
    }
  }
}

// ── Seed examples ──────────────────────────────────────────────────────────────
const EXAMPLE_SOURCES = [
  { source_name:'HUMINT-ALPHA-07', source_type:'HUMINT', reliability:'B', theater:'Pacific',
    notes:'Network asset in port city. Handler: CPT Chen. Access to commercial shipping circles.',
    reports:[
      {subject:'Amphibious exercise LIBANG',content:'PLA PLAN conducted 3-day amphibious rehearsal off Hainan, approx 8 LSTs, 2 LHDs observed departing Yulin naval base 0300L.',credibility:'2'},
      {subject:'Fuel pre-positioning',content:'Source observed unusual fuel tanker activity at Sanya. Approximately 40,000 tons pre-positioned over past 30 days.',credibility:'3'}
    ]
  },
  { source_name:'SIGINT-BRAVO-12', source_type:'SIGINT', reliability:'A', theater:'Pacific',
    notes:'NSA-tasked SIGINT collection asset. High confidence in technical collection. NOFORN.',
    reports:[
      {subject:'C2 comms spike PLASSF',content:'PLASSF strategic communication traffic increased 340% above baseline over 72hr window. Suggests elevated readiness posture.',credibility:'1'},
      {subject:'AIS spoofing vessels',content:'12 PLAN vessels detected operating with spoofed AIS signatures in Luzon Strait during window 01-03 May.',credibility:'1'}
    ]
  },
  { source_name:'OSINT-GAMMA-03', source_type:'OSINT', reliability:'C', theater:'global',
    notes:'Open source monitoring: Chinese state media, shipping databases, academic publications.',
    reports:[
      {subject:'PRC defense white paper language shift',content:'PRC MoD press release dropped "peaceful reunification" language for first time in 18 months — replaced with "complete reunification" framing.',credibility:'2'}
    ]
  },
  { source_name:'IMINT-DELTA-06', source_type:'IMINT', reliability:'A', theater:'Pacific',
    notes:'Commercial satellite collection augmented by NRO tasking. 30cm resolution.',
    reports:[
      {subject:'Submarine pens activity',content:'Increased activity at Longpo submarine base. 4 Jin-class SSBNs and 2 Shang-class SSNs identified in open water vs historical average of 1.',credibility:'1'}
    ]
  },
];

async function seedExamples() {
  if (!confirm('Load 4 example STANAG 2022 sources with intelligence reports?')) return;
  let lastId = null;
  for (const src of EXAMPLE_SOURCES) {
    const r = await fetch('/api/strategos/sources', {
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({source_name:src.source_name, source_type:src.source_type,
        reliability:src.reliability, theater:src.theater, notes:src.notes})
    });
    const d = await r.json();
    const sid = d.source_id;
    lastId = sid;
    addToSidebar({id:sid, source_name:src.source_name, source_type:src.source_type, reliability:src.reliability, theater:src.theater});
    for (const rp of (src.reports || [])) {
      await fetch(`/api/strategos/sources/${sid}/reports`, {
        method:'POST', headers:{'Content-Type':'application/json'},
        body: JSON.stringify(rp)
      });
    }
  }
  if (lastId) loadSource(lastId);
  showToast('4 example sources loaded');
}

function showToast(msg) {
  const t = document.createElement('div');
  t.textContent = msg;
  t.style.cssText = 'position:fixed;bottom:24px;right:24px;background:#10b981;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);
}

// Auto-load first source on page load
{% if sources %}
document.addEventListener('DOMContentLoaded', () => loadSource('{{ sources[0].id }}'));
{% endif %}
</script>
{% endblock %}