{% extends "base.html" %}
{% block title %}AADC Analytics{% endblock %}
{% block content %}
<div class="container-fluid py-3">

  <!-- Header -->
  <div class="d-flex align-items-center gap-3 mb-3">
    <a href="/agentic-ai/" class="btn btn-sm btn-outline-secondary">← Designs</a>
    <div>
      <h4 class="mb-0">📈 Portfolio Analytics</h4>
      <small class="text-muted">Cross-design intelligence &middot; {{ data.total_designs }} designs &middot; generated {{ data.generated_at[:19] }} UTC</small>
    </div>
  </div>

  <!-- Top summary row -->
  <div class="row g-3 mb-3">
    <div class="col-md-2">
      <div class="card text-center h-100">
        <div class="card-body py-3">
          <div class="fs-2 fw-bold text-primary">{{ data.total_designs }}</div>
          <div class="text-muted small">Total Designs</div>
        </div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="card text-center h-100">
        <div class="card-body py-3">
          <div class="fs-2 fw-bold
            {% if data.avg_score >= 70 %}text-success
            {% elif data.avg_score >= 50 %}text-warning
            {% else %}text-danger{% endif %}">
            {{ data.avg_score }}%
          </div>
          <div class="text-muted small">Avg Score</div>
        </div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="card text-center h-100">
        <div class="card-body py-3">
          <div class="fs-2 fw-bold text-info">{{ data.p90_score }}%</div>
          <div class="text-muted small">P90 Score</div>
        </div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="card text-center h-100">
        <div class="card-body py-3">
          <div class="fs-2 fw-bold
            {% if data.ato_ready_rate >= 70 %}text-success
            {% elif data.ato_ready_rate >= 40 %}text-warning
            {% else %}text-danger{% endif %}">
            {{ data.ato_ready_rate }}%
          </div>
          <div class="text-muted small">ATO Ready Rate</div>
        </div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="card text-center h-100">
        <div class="card-body py-3">
          <div class="fs-2 fw-bold text-success">{{ data.improved_count }}</div>
          <div class="text-muted small">Improved (30d)</div>
        </div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="card text-center h-100 {{ 'border-danger' if data.degraded_count > 0 else '' }}">
        <div class="card-body py-3">
          <div class="fs-2 fw-bold {{ 'text-danger' if data.degraded_count > 0 else 'text-success' }}">
            {{ data.degraded_count }}
          </div>
          <div class="text-muted small">Degraded (30d)</div>
        </div>
      </div>
    </div>
  </div>

  <div class="row g-3 mb-3">

    <!-- Score trend (8-week) -->
    <div class="col-md-6">
      <div class="card h-100">
        <div class="card-header fw-semibold py-2">Score Trend (8 Weeks)</div>
        <div class="card-body">
          {% if data.score_trend %}
          <table class="table table-sm mb-0">
            <thead class="table-light"><tr><th>Week</th><th>Avg Score</th><th>Assessments</th></tr></thead>
            <tbody>
              {% for t in data.score_trend %}
              {% if t.count > 0 %}
              <tr>
                <td class="text-muted small">{{ t.week }}</td>
                <td>
                  <div class="d-flex align-items-center gap-2">
                    <div class="progress flex-grow-1" style="height:6px">
                      <div class="progress-bar
                        {% if t.avg_score >= 70 %}bg-success
                        {% elif t.avg_score >= 50 %}bg-warning
                        {% else %}bg-danger{% endif %}"
                        style="width:{{ t.avg_score or 0 }}%"></div>
                    </div>
                    <small>{{ t.avg_score }}%</small>
                  </div>
                </td>
                <td class="text-muted small">{{ t.count }}</td>
              </tr>
              {% endif %}
              {% endfor %}
            </tbody>
          </table>
          {% else %}
          <p class="text-muted small">No assessment history yet.</p>
          {% endif %}
        </div>
      </div>
    </div>

    <!-- Pattern distribution -->
    <div class="col-md-6">
      <div class="card h-100">
        <div class="card-header fw-semibold py-2">Dominant Pattern Distribution</div>
        <div class="card-body">
          {% if data.pattern_distribution %}
          {% set max_count = data.pattern_distribution[0].count %}
          {% for p in data.pattern_distribution %}
          <div class="mb-2">
            <div class="d-flex justify-content-between small mb-1">
              <span>{{ p.pattern }}</span>
              <span class="text-muted">{{ p.count }}</span>
            </div>
            <div class="progress" style="height:8px">
              <div class="progress-bar bg-primary" style="width:{{ (p.count / max_count * 100)|round(0)|int }}%"></div>
            </div>
          </div>
          {% endfor %}
          {% else %}
          <p class="text-muted small">No pattern analysis data yet. Run pattern detection on your designs.</p>
          {% endif %}
        </div>
      </div>
    </div>

  </div>

  <div class="row g-3 mb-3">

    <!-- Red team risk distribution -->
    <div class="col-md-4">
      <div class="card h-100">
        <div class="card-header fw-semibold py-2">Red Team Risk Distribution</div>
        <div class="card-body">
          {% set rt = data.rt_distribution %}
          {% for level, color in [('CRITICAL','danger'),('HIGH','warning'),('MEDIUM','info'),('LOW','success')] %}
          {% set cnt = rt.get(level, 0) %}
          <div class="d-flex align-items-center gap-2 mb-2">
            <span class="badge bg-{{ color }} {{ 'text-dark' if level in ['HIGH','MEDIUM'] else '' }}" style="width:80px">{{ level }}</span>
            <div class="progress flex-grow-1" style="height:8px">
              <div class="progress-bar bg-{{ color }}" style="width:{{ (cnt / [data.total_designs, 1] | max * 100)|round(0)|int }}%"></div>
            </div>
            <span class="text-muted small">{{ cnt }}</span>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>

    <!-- Lint score distribution -->
    <div class="col-md-4">
      <div class="card h-100">
        <div class="card-header fw-semibold py-2">Lint Score Distribution</div>
        <div class="card-body">
          {% set ld = data.lint_distribution %}
          {% for bucket, label, color in [('excellent','Excellent (90-100)','success'),('good','Good (70-89)','info'),('fair','Fair (50-69)','warning'),('poor','Poor (<50)','danger')] %}
          {% set cnt = ld.get(bucket, 0) %}
          <div class="d-flex align-items-center gap-2 mb-2">
            <span class="badge bg-{{ color }} {{ 'text-dark' if bucket in ['good','fair'] else '' }}" style="width:100px">{{ bucket|capitalize }}</span>
            <div class="progress flex-grow-1" style="height:8px">
              <div class="progress-bar bg-{{ color }}" style="width:{{ (cnt / [data.total_designs, 1] | max * 100)|round(0)|int }}%"></div>
            </div>
            <span class="text-muted small">{{ cnt }}</span>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>

    <!-- Risk density by domain -->
    <div class="col-md-4">
      <div class="card h-100">
        <div class="card-header fw-semibold py-2">Risk Density by Domain</div>
        <div class="card-body p-0">
          {% if data.risk_density %}
          <table class="table table-sm mb-0">
            <thead class="table-light">
              <tr><th>Domain</th><th>Risks</th><th>Critical</th><th>Density</th></tr>
            </thead>
            <tbody>
              {% for r in data.risk_density[:6] %}
              <tr>
                <td class="small">{{ r.domain }}</td>
                <td>{{ r.total_risks }}</td>
                <td class="{{ 'text-danger fw-semibold' if r.critical_risks > 0 else 'text-muted' }}">{{ r.critical_risks }}</td>
                <td class="text-muted small">{{ r.density }}/design</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
          {% else %}
          <p class="text-muted small p-3">No risk data yet.</p>
          {% endif %}
        </div>
      </div>
    </div>

  </div>

  <!-- Top risk designs -->
  {% if data.top_risk_designs %}
  <div class="card mb-3">
    <div class="card-header fw-semibold py-2">Top Designs by Open Critical Risks</div>
    <div class="card-body p-0">
      <table class="table table-sm mb-0">
        <thead class="table-light"><tr><th>#</th><th>Design</th><th>Critical Open Risks</th></tr></thead>
        <tbody>
          {% for d in data.top_risk_designs %}
          <tr>
            <td class="text-muted">{{ loop.index }}</td>
            <td><a href="/agentic-ai/risks/{{ d.design_id }}">{{ d.name }}</a></td>
            <td><span class="badge bg-danger">{{ d.critical_open }}</span></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endif %}

  <!-- Compliance drift -->
  {% if data.compliance_drift %}
  <div class="card mb-3">
    <div class="card-header fw-semibold py-2">Compliance Drift (Last 30 Days)</div>
    <div class="card-body p-0">
      <table class="table table-sm mb-0">
        <thead class="table-light"><tr><th>Design</th><th>Current Score</th><th>30-Day Delta</th></tr></thead>
        <tbody>
          {% for d in data.compliance_drift %}
          <tr>
            <td><a href="/agentic-ai/canvas/{{ d.design_id }}">{{ d.design_id[:12] }}</a></td>
            <td>{{ d.current_score }}%</td>
            <td class="{{ 'text-success' if d.delta > 0 else 'text-danger' if d.delta < 0 else 'text-muted' }}">
              {{ '+' if d.delta > 0 else '' }}{{ d.delta }}%
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endif %}

</div>
{% endblock %}