{% extends "base.html" %}
{% block title %}Info Ops Dashboard — 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-header p  { margin:6px 0 0; color:#94a3b8; font-size:.9rem; }
.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-stat { text-align:center; padding:16px; }
.iop-stat .val { font-size:1.8rem; font-weight:700; color:#60a5fa; }
.iop-stat .lbl { font-size:.72rem; color:#64748b; margin-top:4px; text-transform:uppercase; letter-spacing:.5px; }
.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-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.iop-table th { text-align:left; padding:10px 12px; background:#0f172a; color:#94a3b8; font-weight:600; border-bottom:1px solid #334155; }
.iop-table td { padding:10px 12px; border-bottom:1px solid #334155; color:#e2e8f0; }
.iop-table tr:hover td { background:#252f47; }
.badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:.7rem; font-weight:600; }
.badge-green { background:rgba(34,197,94,.15); color:#22c55e; }
.badge-yellow { background:rgba(251,191,36,.15); color:#fbbf24; }
.badge-red { background:rgba(239,68,68,.15); color:#ef4444; }
.badge-blue { background:rgba(96,165,250,.15); color:#60a5fa; }
</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>Info Ops Dashboard</h1>
      <p>Real-time situational awareness and campaign monitoring</p>
    </div>
    <div style="display:flex;gap:10px;">
      <a href="/info-ops/analysis" class="iop-btn iop-btn-primary">+ New Analysis</a>
      <a href="/info-ops/reports" class="iop-btn iop-btn-secondary">Reports</a>
      <a href="/info-ops/settings" class="iop-btn iop-btn-secondary">Settings</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> / Dashboard
</div>

<!-- Stats row -->
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin-bottom:24px;">
  <div class="iop-card iop-stat">
    <div class="val">12</div>
    <div class="lbl">Campaigns</div>
  </div>
  <div class="iop-card iop-stat">
    <div class="val" style="color:#22c55e;">4</div>
    <div class="lbl">Active Ops</div>
  </div>
  <div class="iop-card iop-stat">
    <div class="val" style="color:#f59e0b;">7</div>
    <div class="lbl">Pending Reports</div>
  </div>
  <div class="iop-card iop-stat">
    <div class="val" style="color:#ef4444;">3</div>
    <div class="lbl">Alerts Today</div>
  </div>
  <div class="iop-card iop-stat">
    <div class="val" style="color:#a78bfa;">23</div>
    <div class="lbl">OSINT Feeds</div>
  </div>
</div>

<!-- Charts row -->
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:20px;margin-bottom:24px;">
  <div class="iop-card">
    <h3>Sentiment Trend (7 Days)</h3>
    <canvas id="sentimentChart" height="200"></canvas>
  </div>
  <div class="iop-card">
    <h3>Campaign Status</h3>
    <canvas id="campaignChart" height="200"></canvas>
  </div>
</div>

<!-- Active Campaigns -->
<div class="iop-card" style="margin-bottom:24px;">
  <h3>Active Campaigns</h3>
  <table class="iop-table">
    <thead>
      <tr><th>Campaign</th><th>Status</th><th>Sentiment</th><th>Reach</th><th>Last Update</th><th>Actions</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>Op Narrative Shield</td>
        <td><span class="badge badge-green">Active</span></td>
        <td><span class="badge badge-yellow">Mixed</span></td>
        <td>1.2M</td>
        <td>2026-05-15 14:30</td>
        <td><a href="/info-ops/analysis" class="iop-btn iop-btn-secondary" style="padding:4px 10px;font-size:.75rem;">Analyze</a></td>
      </tr>
      <tr>
        <td>Op Resilience Net</td>
        <td><span class="badge badge-green">Active</span></td>
        <td><span class="badge badge-green">Positive</span></td>
        <td>890K</td>
        <td>2026-05-15 13:15</td>
        <td><a href="/info-ops/analysis" class="iop-btn iop-btn-secondary" style="padding:4px 10px;font-size:.75rem;">Analyze</a></td>
      </tr>
      <tr>
        <td>Op Watchtower</td>
        <td><span class="badge badge-yellow">Monitoring</span></td>
        <td><span class="badge badge-red">Negative</span></td>
        <td>450K</td>
        <td>2026-05-15 12:00</td>
        <td><a href="/info-ops/analysis" class="iop-btn iop-btn-secondary" style="padding:4px 10px;font-size:.75rem;">Analyze</a></td>
      </tr>
      <tr>
        <td>Op Clear Signal</td>
        <td><span class="badge badge-blue">Planned</span></td>
        <td><span class="badge badge-yellow">Mixed</span></td>
        <td>—</td>
        <td>2026-05-14 09:00</td>
        <td><a href="/info-ops/analysis" class="iop-btn iop-btn-secondary" style="padding:4px 10px;font-size:.75rem;">Analyze</a></td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var theme = document.documentElement.getAttribute('data-theme') || 'dark';
  var gridColor = theme === 'light' ? '#e2e8f0' : '#334155';
  var textColor = theme === 'light' ? '#1e293b' : '#e2e8f0';

  new Chart(document.getElementById('sentimentChart'), {
    type: 'line',
    data: {
      labels: ['May 09','May 10','May 11','May 12','May 13','May 14','May 15'],
      datasets: [
        { label: 'Positive', data: [45,52,48,55,60,58,62], borderColor: '#22c55e', backgroundColor: 'rgba(34,197,94,.15)', fill: true, tension: 0.3 },
        { label: 'Negative', data: [30,28,35,25,22,30,27], borderColor: '#ef4444', backgroundColor: 'rgba(239,68,68,.15)', fill: true, tension: 0.3 },
        { label: 'Neutral',  data: [25,20,17,20,18,12,11], borderColor: '#94a3b8', backgroundColor: 'rgba(148,163,184,.15)', fill: true, tension: 0.3 },
      ]
    },
    options: {
      responsive: true,
      plugins: { legend: { labels: { color: textColor } } },
      scales: {
        x: { grid: { color: gridColor }, ticks: { color: textColor } },
        y: { grid: { color: gridColor }, ticks: { color: textColor } }
      }
    }
  });

  new Chart(document.getElementById('campaignChart'), {
    type: 'doughnut',
    data: {
      labels: ['Active','Monitoring','Planned','Completed'],
      datasets: [{ data: [4,3,3,2], backgroundColor: ['#22c55e','#f59e0b','#60a5fa','#64748b'], borderWidth: 0 }]
    },
    options: {
      responsive: true,
      plugins: { legend: { position: 'right', labels: { color: textColor } } }
    }
  });
});
</script>

{% endblock %}