{% extends "layout.html" %}
{% block content %}
<section class="ui-shell">
<div class="space-y-5">
  <div class="ui-page-header">
    <p class="ui-eyebrow">Admin</p>
    <div class="mt-2">
      <h1 class="ui-page-title mt-0">Validation &amp; Safety</h1>
      <p class="ui-page-subtitle mt-1">Deterministic Rule Coverage, cost estimation method, and impact scoring.</p>
    </div>
  </div>

  {% for group in validation_rule_groups %}
  <div class="border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900">
    <div class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
      <p class="ui-type-body-sm font-medium text-slate-900 dark:text-slate-100">{{ group.title }}</p>
      <p class="ui-card-meta mt-0.5">{{ group.description }}</p>
    </div>
    <div class="overflow-x-auto">
      <table class="w-full text-sm">
        <thead>
          <tr class="ui-table-head-row">
            <th class="py-2 px-4">Rule</th>
            <th class="py-2 px-4">Fix</th>
            <th class="py-2 px-4">Cost Estimation</th>
            <th class="py-2 px-4">Impact</th>
          </tr>
        </thead>
        <tbody class="text-slate-700 dark:text-slate-300">
          {% for rule in group.rules %}
          <tr class="{% if not loop.last %}border-b border-slate-100 dark:border-slate-800/50{% endif %} align-top">
            {# ── Rule ── #}
            <td class="py-3 px-4">
              <div class="flex items-center gap-2 flex-wrap">
                <span class="font-medium text-slate-900 dark:text-slate-100">{{ rule.display_name }}</span>
                {% if rule.enabled %}
                <span class="text-[11px] rounded-full bg-emerald-50 dark:bg-emerald-900/30 px-2 py-0.5 text-emerald-700 dark:text-emerald-300">On</span>
                {% else %}
                <span class="text-[11px] rounded-full bg-slate-100 dark:bg-slate-800 px-2 py-0.5 text-slate-500 dark:text-slate-400">Off</span>
                {% endif %}
              </div>
              <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">{{ rule.description }}</p>
            </td>
            {# ── Fix ── #}
            <td class="py-3 px-4">
              {% if rule.template_coverages %}
                {% for cov in rule.template_coverages %}
                <div class="{% if not loop.first %}mt-2{% endif %}">
                  <div class="flex items-center gap-1.5">
                    <span class="text-[11px] rounded-full bg-brand-50 dark:bg-brand-900/30 px-2 py-0.5 text-brand-700 dark:text-brand-300">Template</span>
                    <code class="text-xs text-slate-500 dark:text-slate-400">{{ cov.template_id }}</code>
                  </div>
                  <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">{{ cov.summary }}</p>
                </div>
                {% endfor %}
              {% else %}
                <div class="flex items-center gap-1.5">
                  <span class="text-[11px] rounded-full bg-amber-50 dark:bg-amber-900/30 px-2 py-0.5 text-amber-700 dark:text-amber-300">LLM</span>
                </div>
                <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">AI-generated, then AST-validated.</p>
              {% endif %}
            </td>
            {# ── Cost Estimation ── #}
            <td class="py-3 px-4">
              <p class="text-xs text-slate-600 dark:text-slate-300">{{ rule.cost_method }}</p>
              {% if rule.cost_detail %}
              <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">{{ rule.cost_detail }}</p>
              {% endif %}
            </td>
            {# ── Impact ── #}
            <td class="py-3 px-4">
              <p class="text-xs text-slate-600 dark:text-slate-300">{{ rule.impact_label }}</p>
              <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">{{ rule.impact_detail }}</p>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endfor %}

  {# ── Impact Scale Legend ── #}
  <div class="border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4">
    <p class="ui-card-label mb-2">Impact Scale</p>
    <div class="flex flex-wrap gap-x-6 gap-y-1 text-xs text-slate-600 dark:text-slate-400">
      <span><span class="font-medium text-slate-700 dark:text-slate-300">1&ndash;20</span> Low (&lt;$10)</span>
      <span><span class="font-medium text-slate-700 dark:text-slate-300">21&ndash;50</span> Moderate ($10&ndash;$100)</span>
      <span><span class="font-medium text-slate-700 dark:text-slate-300">51&ndash;80</span> High ($100&ndash;$1K)</span>
      <span><span class="font-medium text-slate-700 dark:text-slate-300">81&ndash;100</span> Critical ($1K+)</span>
    </div>
    <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Adjusted by confidence (min 50%) and +5 for recurring issues.</p>
  </div>

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