{% extends "base.html" %}
{% block title %}Pattern Analysis — {{ design.name }}{% 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/canvas/{{ design.id }}" class="btn btn-sm btn-outline-secondary">← Canvas</a>
    <div>
      <h4 class="mb-0">🔍 Pattern Analysis</h4>
      <small class="text-muted">{{ design.name }} &middot; {{ design.domain or 'unspecified' }}</small>
    </div>
    <div class="ms-auto">
      <span class="badge fs-6 px-3 py-2
        {% if result.dominant == 'UNCLASSIFIED' %}bg-secondary
        {% else %}bg-primary{% endif %}">
        {{ result.dominant }}
      </span>
    </div>
  </div>

  <!-- Structural flags -->
  <div class="card mb-3">
    <div class="card-header fw-semibold py-2">Structural Flags</div>
    <div class="card-body d-flex flex-wrap gap-2 py-2">
      {% for flag, val in result.flags.items() %}
      <span class="badge {{ 'bg-success' if val else 'bg-light text-dark border' }}">
        {{ flag.replace('_',' ') }}
      </span>
      {% endfor %}
    </div>
  </div>

  <!-- Pattern scores -->
  <div class="card mb-3">
    <div class="card-header fw-semibold py-2">Pattern Confidence Scores</div>
    <div class="card-body p-0">
      <table class="table table-sm table-hover mb-0">
        <thead class="table-light">
          <tr>
            <th>Pattern</th>
            <th style="width:200px">Confidence</th>
            <th>Description</th>
            <th>Matched</th>
            <th>Missing Nodes</th>
          </tr>
        </thead>
        <tbody>
          {% for p in result.patterns %}
          <tr class="{{ 'table-primary fw-semibold' if p.id == result.dominant else '' }}">
            <td>
              {{ p.name }}
              {% if p.id == result.dominant %}
              <span class="badge bg-primary ms-1">Dominant</span>
              {% endif %}
            </td>
            <td>
              <div class="d-flex align-items-center gap-2">
                <div class="progress flex-grow-1" style="height:8px">
                  <div class="progress-bar
                    {% if p.confidence >= 70 %}bg-success
                    {% elif p.confidence >= 40 %}bg-warning
                    {% else %}bg-danger{% endif %}"
                    style="width:{{ p.confidence }}%"></div>
                </div>
                <span class="text-muted small">{{ p.confidence }}%</span>
              </div>
            </td>
            <td class="text-muted small">{{ p.description }}</td>
            <td>
              {% for f in p.matched_flags %}
              <span class="badge bg-success-subtle text-success me-1 small">{{ f }}</span>
              {% endfor %}
            </td>
            <td>
              {% for m in p.missing_nodes %}
              <span class="badge bg-warning-subtle text-warning-emphasis me-1 small">{{ m }}</span>
              {% endfor %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <!-- Recommendations based on dominant pattern -->
  {% if result.patterns and result.patterns[0].missing_nodes %}
  <div class="card border-warning">
    <div class="card-header fw-semibold py-2 text-warning-emphasis">
      ⚠ Suggested Nodes for {{ result.dominant }}
    </div>
    <div class="card-body py-2">
      <p class="text-muted small mb-2">
        Adding these nodes would strengthen the dominant pattern's compliance and safety posture:
      </p>
      <div class="d-flex flex-wrap gap-2">
        {% for m in result.patterns[0].missing_nodes %}
        <span class="badge bg-warning-subtle text-dark border border-warning px-2 py-1">+ {{ m }}</span>
        {% endfor %}
      </div>
    </div>
  </div>
  {% endif %}

</div>
{% endblock %}