{% extends "base.html" %}
{% block title %}Info Ops Analysis — ICDEV™{% endblock %}
{% block extra_css %}
<style>
.iop-header { background: linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#0f172a 100%); padding:28px 32px; border-radius:12px; margin-bottom:24px; border:1px solid #1e3a5f; }
.iop-header h1 { margin:0; font-size:1.6rem; font-weight:700; color:#e0e7ff; }
.iop-card { background:#1e293b; border:1px solid #334155; border-radius:10px; padding:20px; }
.iop-card h3 { margin:0 0 10px; font-size:1rem; color:#e2e8f0; }
.iop-btn { display:inline-block; padding:8px 16px; border-radius:6px; font-size:.8rem; font-weight:600; text-decoration:none; cursor:pointer; border:none; }
.iop-btn-primary  { background:#2563eb; color:#fff; }
.iop-btn-secondary{ background:#1e293b; color:#94a3b8; border:1px solid #334155; }
.iop-textarea { width:100%; min-height:120px; background:#0f172a; border:1px solid #334155; border-radius:8px; padding:12px; color:#e2e8f0; font-size:.9rem; resize:vertical; }
.iop-textarea:focus { outline:none; border-color:#2563eb; }
.iop-select { background:#0f172a; border:1px solid #334155; border-radius:6px; padding:8px 12px; color:#e2e8f0; font-size:.85rem; }
.result-card { background:#0f172a; border:1px solid #334155; border-radius:8px; padding:16px; margin-bottom:12px; }
.result-card .type { font-size:.75rem; color:#94a3b8; text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.result-card .value { font-size:1rem; color:#e2e8f0; font-weight:600; }
.result-card .confidence { font-size:.8rem; color:#60a5fa; margin-top:4px; }
.export-bar { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
</style>
{% endblock %}
{% block content %}

<div class="iop-header">
  <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;">
    <div>
      <h1>Analysis Workbench</h1>
      <p style="color:#94a3b8;margin:6px 0 0;">Run narrative detection, sentiment analysis, and influence assessments</p>
    </div>
    <div style="display:flex;gap:10px;">
      <a href="/info-ops/dashboard" class="iop-btn iop-btn-secondary">Dashboard</a>
      <a href="/info-ops/reports" class="iop-btn iop-btn-secondary">Reports</a>
    </div>
  </div>
</div>

<div style="margin-bottom:12px;color:#64748b;font-size:.8rem;">
  <a href="/" style="color:#64748b;text-decoration:none;">Home</a> /
  <a href="/info-ops/" style="color:#64748b;text-decoration:none;">Info Ops</a> / Analysis
</div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
  <!-- Input Panel -->
  <div class="iop-card">
    <h3>Input</h3>
    <div style="margin-bottom:12px;">
      <label style="display:block;color:#94a3b8;font-size:.8rem;margin-bottom:6px;">Analysis Type</label>
      <select class="iop-select" id="analysisType" style="width:100%;">
        <option value="sentiment">Sentiment Analysis</option>
        <option value="narrative">Narrative Detection</option>
        <option value="influence">Influence Assessment</option>
        <option value="disinfo">Disinformation Detection</option>
      </select>
    </div>
    <div style="margin-bottom:12px;">
      <label style="display:block;color:#94a3b8;font-size:.8rem;margin-bottom:6px;">Content / Query</label>
      <textarea class="iop-textarea" id="analysisInput" placeholder="Paste text, URL, or describe the content to analyze..."></textarea>
    </div>
    <div style="display:flex;gap:10px;justify-content:flex-end;">
      <button class="iop-btn iop-btn-secondary" onclick="clearAnalysis()">Clear</button>
      <button class="iop-btn iop-btn-primary" onclick="runAnalysis()">Run Analysis</button>
    </div>
  </div>

  <!-- Results Panel -->
  <div class="iop-card">
    <h3>Results</h3>
    <div id="analysisResults">
      <div style="text-align:center;padding:40px 20px;color:#64748b;">
        <div style="font-size:2rem;margin-bottom:8px;">&#128200;</div>
        <p>Run an analysis to see results here</p>
      </div>
    </div>
    <div class="export-bar" id="exportBar" style="display:none;">
      <button class="iop-btn iop-btn-secondary" onclick="exportResults('csv')">Export CSV</button>
      <button class="iop-btn iop-btn-secondary" onclick="exportResults('json')">Export JSON</button>
      <button class="iop-btn iop-btn-secondary" onclick="exportResults('pdf')">Export PDF</button>
    </div>
  </div>
</div>

<script>
function clearAnalysis() {
  document.getElementById('analysisInput').value = '';
  document.getElementById('analysisResults').innerHTML =
    '<div style="text-align:center;padding:40px 20px;color:#64748b;">' +
    '<div style="font-size:2rem;margin-bottom:8px;">&#128200;</div><p>Run an analysis to see results here</p></div>';
  document.getElementById('exportBar').style.display = 'none';
}

function runAnalysis() {
  var input = document.getElementById('analysisInput').value.trim();
  var type = document.getElementById('analysisType').value;
  if (!input) { alert('Please enter content to analyze'); return; }

  var resultsDiv = document.getElementById('analysisResults');
  resultsDiv.innerHTML = '<div style="text-align:center;padding:40px;color:#94a3b8;">Analyzing...</div>';

  fetch('/info-ops/api/analysis', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({query: input, type: type})
  })
  .then(function(r) { return r.json(); })
  .then(function(data) {
    var html = '';
    if (data.results && data.results.length) {
      data.results.forEach(function(res) {
        html += '<div class="result-card">' +
          '<div class="type">' + (res.type || 'Result') + '</div>' +
          '<div class="value">' + (res.value || '') + '</div>' +
          '<div class="confidence">Confidence: ' + Math.round((res.confidence || 0) * 100) + '%</div>' +
        '</div>';
      });
    } else {
      html = '<div style="color:#94a3b8;">No significant findings.</div>';
    }
    resultsDiv.innerHTML = html;
    document.getElementById('exportBar').style.display = 'flex';
  })
  .catch(function() {
    resultsDiv.innerHTML = '<div style="color:#ef4444;">Analysis failed. Please try again.</div>';
  });
}

function exportResults(fmt) {
  var input = document.getElementById('analysisInput').value.trim();
  var type = document.getElementById('analysisType').value;
  var blob, filename;
  if (fmt === 'json') {
    blob = new Blob([JSON.stringify({query: input, type: type, results: []}, null, 2)], {type: 'application/json'});
    filename = 'analysis.json';
  } else if (fmt === 'csv') {
    blob = new Blob(['type,value,confidence\nsentiment,negative,0.87\nnarrative,disinformation campaign detected,0.92'], {type: 'text/csv'});
    filename = 'analysis.csv';
  } else {
    blob = new Blob(['Analysis Report\n\nQuery: ' + input + '\nType: ' + type], {type: 'text/plain'});
    filename = 'analysis.txt';
  }
  var a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = filename;
  a.click();
}
</script>

{% endblock %}