{% extends "base.html" %}
{% block title %}Dashboard — Salesforce Security AI Scanner{% endblock %}

{% block extra_head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.min.js"></script>
<style>
.scan-row { transition: background .15s; }
.scan-row:hover { background: var(--bg-card-hover); }
.risk-ring { font-size:1.6rem; font-weight:700; }
</style>
{% endblock %}

{% block content %}
<div class="content-wrapper">
<div class="container">

  <!-- Page header -->
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h4 class="fw-bold mb-0">Dashboard</h4>
      <p class="text-muted small mb-0">
        {% if user.is_admin %}All users' scans{% else %}Your scans and findings{% endif %}
      </p>
    </div>
    <a href="/scans/new" class="btn btn-primary fw-semibold">
      <i class="bi bi-plus-circle me-1"></i>New Scan
    </a>
  </div>

  <!-- ── Stat cards (populated by API) ───────────────────────────── -->
  <div class="row g-3 mb-4" id="stat-cards">
    <div class="col-6 col-md-3">
      <div class="stat-card">
        <div class="stat-number" id="stat-total-scans">—</div>
        <div class="stat-label"><i class="bi bi-radar me-1"></i>Total Scans</div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="stat-card">
        <div class="stat-number" id="stat-total-findings">—</div>
        <div class="stat-label"><i class="bi bi-bug me-1"></i>Total Findings</div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="stat-card">
        <div class="stat-number" style="color:#f85149;" id="stat-critical">—</div>
        <div class="stat-label"><i class="bi bi-exclamation-octagon me-1"></i>Critical</div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="stat-card">
        <div class="stat-number" id="stat-avg-risk">—</div>
        <div class="stat-label"><i class="bi bi-activity me-1"></i>Avg Risk Score</div>
      </div>
    </div>
  </div>

  <!-- ── Charts ──────────────────────────────────────────────────── -->
  <div class="row g-4 mb-4">
    <div class="col-md-4">
      <div class="card p-3 h-100">
        <h6 class="fw-semibold mb-3"><i class="bi bi-pie-chart me-1"></i>Findings by Severity</h6>
        <canvas id="chartSeverity" height="220"></canvas>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card p-3 h-100">
        <h6 class="fw-semibold mb-3"><i class="bi bi-bar-chart-horizontal me-1"></i>OWASP Categories</h6>
        <canvas id="chartOwasp" height="220"></canvas>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card p-3 h-100">
        <h6 class="fw-semibold mb-3"><i class="bi bi-graph-up me-1"></i>Scans (14 days)</h6>
        <canvas id="chartScans" height="220"></canvas>
      </div>
    </div>
  </div>

  <!-- ── Recent scans ─────────────────────────────────────────────── -->
  <div class="row g-4">
    <div class="col-lg-7">
      <div class="card p-0">
        <div class="d-flex justify-content-between align-items-center p-3 border-bottom" style="border-color:var(--border-muted)!important;">
          <h6 class="fw-semibold mb-0"><i class="bi bi-clock-history me-1"></i>Recent Scans</h6>
          <a href="/scans/new" class="btn btn-sm btn-outline-primary">
            <i class="bi bi-plus me-1"></i>New
          </a>
        </div>
        <div class="table-responsive">
          <table class="table table-dark table-hover mb-0" style="background:transparent;">
            <thead><tr style="color:#8b949e;font-size:.78rem;">
              <th>Target</th><th>Type</th><th>Status</th><th>Risk</th><th>Date</th><th></th>
            </tr></thead>
            <tbody>
              {% for scan in recent_scans %}
              <tr class="scan-row" style="font-size:.85rem;">
                <td style="max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                  <a href="/scans/{{ scan.id }}" style="color:#58a6ff;text-decoration:none;">
                    {{ scan.target_url | replace("https://","") | truncate(30) }}
                  </a>
                </td>
                <td>
                  {% if scan.scan_type == 'auth' %}
                    <span class="badge" style="background:#d2992222;color:#d29922;border:1px solid #d2992244;font-size:.7rem;">Auth</span>
                  {% else %}
                    <span class="badge" style="background:#388bfd22;color:#79c0ff;border:1px solid #388bfd44;font-size:.7rem;">Guest</span>
                  {% endif %}
                </td>
                <td class="status-{{ scan.status }}">
                  {% if scan.status == 'running' %}<i class="bi bi-arrow-repeat me-1 spin"></i>{% endif %}
                  {% if scan.status == 'completed' %}<i class="bi bi-check-circle me-1"></i>{% endif %}
                  {% if scan.status == 'failed' %}<i class="bi bi-x-circle me-1"></i>{% endif %}
                  {% if scan.status == 'pending' %}<i class="bi bi-hourglass me-1"></i>{% endif %}
                  {{ scan.status | title }}
                </td>
                <td>
                  {% if scan.risk_score > 0 %}
                  <span class="risk-ring {% if scan.risk_score >= 70 %}risk-high{% elif scan.risk_score >= 40 %}risk-medium{% else %}risk-low{% endif %}" style="font-size:.9rem;">
                    {{ scan.risk_score }}
                  </span>
                  {% else %}—{% endif %}
                </td>
                <td style="color:#8b949e;">{{ scan.created_at.strftime('%b %d') }}</td>
                <td>
                  <a href="/scans/{{ scan.id }}" class="btn btn-sm" style="background:transparent;border:none;color:#58a6ff;padding:.1rem .4rem;">
                    <i class="bi bi-arrow-right"></i>
                  </a>
                </td>
              </tr>
              {% else %}
              <tr><td colspan="6" class="text-center text-muted py-4">
                No scans yet. <a href="/scans/new" style="color:#58a6ff;">Start your first scan</a>
              </td></tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- ── Recent findings ─────────────────────────────────────── -->
    <div class="col-lg-5">
      <div class="card p-0">
        <div class="p-3 border-bottom" style="border-color:var(--border-muted)!important;">
          <h6 class="fw-semibold mb-0"><i class="bi bi-bug me-1"></i>Recent Findings</h6>
        </div>
        <ul class="list-unstyled mb-0">
          {% for finding in recent_findings %}
          <li class="p-3 border-bottom" style="border-color:var(--border-muted)!important;font-size:.83rem;">
            <div class="d-flex align-items-start gap-2">
              <span class="severity-badge badge-{{ finding.severity }} mt-1" style="white-space:nowrap;">
                {{ finding.severity | upper }}
              </span>
              <div>
                <div class="fw-semibold lh-sm">{{ finding.title | truncate(60) }}</div>
                <div style="color:#8b949e;font-size:.75rem;">
                  {{ finding.owasp_ref or '—' }} &middot; {{ finding.scanner }}
                </div>
              </div>
            </div>
          </li>
          {% else %}
          <li class="p-4 text-center text-muted small">No findings yet.</li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>

</div>
</div>
{% endblock %}

{% block extra_scripts %}
<style>
@keyframes spin { to { transform: rotate(360deg); } }
.spin { display:inline-block; animation: spin 1.2s linear infinite; }
</style>
<script>
// Chart defaults for dark theme
Chart.defaults.color = '#8b949e';
Chart.defaults.borderColor = '#30363d';

async function loadStats() {
  const res = await fetch('/api/stats');
  if (!res.ok) return;
  const d = await res.json();

  // Stat cards
  document.getElementById('stat-total-scans').textContent = d.total_scans;
  document.getElementById('stat-total-findings').textContent = d.total_findings;
  document.getElementById('stat-critical').textContent = d.severity?.critical ?? 0;
  document.getElementById('stat-avg-risk').textContent = d.avg_risk_score;

  // Severity donut
  const sevData = d.severity || {};
  new Chart(document.getElementById('chartSeverity'), {
    type: 'doughnut',
    data: {
      labels: ['Critical','High','Medium','Low','Info'],
      datasets: [{
        data: [sevData.critical||0, sevData.high||0, sevData.medium||0, sevData.low||0, sevData.info||0],
        backgroundColor: ['#f85149','#d29922','#a371f7','#388bfd','#3fb950'],
        borderWidth: 0,
      }]
    },
    options: { plugins: { legend: { position:'bottom', labels:{ padding:12, font:{size:11} } } }, cutout:'65%' }
  });

  // OWASP bar
  const owData = d.owasp || {};
  const owLabels = Object.keys(owData);
  const owValues = Object.values(owData);
  new Chart(document.getElementById('chartOwasp'), {
    type: 'bar',
    data: {
      labels: owLabels,
      datasets: [{ data: owValues, backgroundColor:'#58a6ff88', borderColor:'#58a6ff', borderWidth:1, borderRadius:4 }]
    },
    options: {
      indexAxis:'y',
      plugins: { legend:{ display:false } },
      scales: { x:{ ticks:{color:'#8b949e'} }, y:{ ticks:{color:'#8b949e'} } }
    }
  });

  // Scans per day line
  const spd = d.scans_per_day || [];
  new Chart(document.getElementById('chartScans'), {
    type: 'line',
    data: {
      labels: spd.map(x => x.date.slice(5)),
      datasets: [{
        label:'Scans',
        data: spd.map(x => x.count),
        borderColor:'#58a6ff', backgroundColor:'#58a6ff22',
        fill:true, tension:.4, pointRadius:3,
      }]
    },
    options: {
      plugins:{ legend:{display:false} },
      scales: { x:{ ticks:{color:'#8b949e'} }, y:{ ticks:{color:'#8b949e'}, beginAtZero:true } }
    }
  });
}

loadStats();
</script>
{% endblock %}