{% extends "base.html" %}
{% load scoped_tags %}

{% block title %}Health{% endblock %}
{% block page_title %}System Health{% endblock %}
{% block page_subtitle %}Health checks and compliance reporting (Layer 0){% endblock %}
{% block layer_indicator %}L0 Compliance{% endblock %}

{% block content %}
{# Overall Status #}
<div class="mb-6">
  <div class="flex items-center gap-4 p-4 rounded-xl border shadow-sm
    {% if overall_status == 'HEALTHY' %}bg-green-50 border-green-200{% elif overall_status == 'UNHEALTHY' %}bg-red-50 border-red-200{% else %}bg-slate-50 border-slate-200{% endif %}">
    <div class="text-3xl">
      {% if overall_status == "HEALTHY" %}&#10003;{% elif overall_status == "UNHEALTHY" %}&#10007;{% else %}?{% endif %}
    </div>
    <div>
      <h2 class="text-lg font-semibold {% if overall_status == 'HEALTHY' %}text-green-800{% elif overall_status == 'UNHEALTHY' %}text-red-800{% else %}text-slate-800{% endif %}">
        {{ overall_status }}
      </h2>
      <p class="text-sm {% if overall_status == 'HEALTHY' %}text-green-600{% elif overall_status == 'UNHEALTHY' %}text-red-600{% else %}text-slate-500{% endif %}">
        {{ pass_count }} passed, {{ fail_count }} failed of {{ checks|length }} check{{ checks|length|pluralize }}
      </p>
    </div>
  </div>
</div>

{# Health Checks #}
<div class="mb-8">
  <h2 class="text-lg font-semibold text-slate-900 mb-4">Health Checks</h2>

  {% if checks %}
  <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
    <table class="min-w-full divide-y divide-slate-200">
      <thead class="bg-slate-50">
        <tr>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Check</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Status</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Message</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Duration</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-200">
        {% for check in checks %}
        <tr class="hover:bg-slate-50">
          <td class="px-4 py-3 text-sm font-medium text-slate-900">{{ check.name }}</td>
          <td class="px-4 py-3">
            {% if check.status == "PASS" or check.status == "OK" or check.status == "HEALTHY" %}
            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-700 ring-1 ring-green-600/20">PASS</span>
            {% elif check.status == "FAIL" or check.status == "ERROR" or check.status == "UNHEALTHY" %}
            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-50 text-red-700 ring-1 ring-red-600/20">FAIL</span>
            {% else %}
            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-slate-50 text-slate-600 ring-1 ring-slate-500/20">{{ check.status }}</span>
            {% endif %}
          </td>
          <td class="px-4 py-3 text-sm text-slate-500">{{ check.message|default:"--" }}</td>
          <td class="px-4 py-3 text-xs font-mono text-slate-400">
            {% if check.duration_ms %}{{ check.duration_ms }}ms{% else %}--{% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  {% include "components/_empty_state.html" with title="No health checks" message="Health checks could not be executed. Ensure the Scoped backend is properly initialized." %}
  {% endif %}
</div>

{# Compliance Report #}
{% if compliance %}
<div class="mb-8">
  <h2 class="text-lg font-semibold text-slate-900 mb-4">Compliance Report</h2>
  <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-5">
    <div class="grid grid-cols-3 gap-4 mb-4">
      <div class="text-center p-3 rounded-lg bg-slate-50">
        <p class="text-2xl font-bold text-slate-900">{{ compliance.total }}</p>
        <p class="text-xs text-slate-500">Total Checks</p>
      </div>
      <div class="text-center p-3 rounded-lg bg-green-50">
        <p class="text-2xl font-bold text-green-700">{{ compliance.passed }}</p>
        <p class="text-xs text-green-600">Passed</p>
      </div>
      <div class="text-center p-3 rounded-lg {% if compliance.failed > 0 %}bg-red-50{% else %}bg-slate-50{% endif %}">
        <p class="text-2xl font-bold {% if compliance.failed > 0 %}text-red-700{% else %}text-slate-600{% endif %}">{{ compliance.failed }}</p>
        <p class="text-xs {% if compliance.failed > 0 %}text-red-600{% else %}text-slate-500{% endif %}">Failed</p>
      </div>
    </div>

    {% if compliance.failures %}
    <div class="mt-4">
      <h3 class="text-sm font-medium text-red-800 mb-2">Failures</h3>
      <ul class="space-y-1">
        {% for failure in compliance.failures %}
        <li class="text-sm text-red-600 flex items-center gap-2">
          <span class="text-red-400">&#10007;</span> {{ failure }}
        </li>
        {% endfor %}
      </ul>
    </div>
    {% endif %}

    {% if compliance.warnings %}
    <div class="mt-4">
      <h3 class="text-sm font-medium text-amber-800 mb-2">Warnings</h3>
      <ul class="space-y-1">
        {% for warning in compliance.warnings %}
        <li class="text-sm text-amber-600 flex items-center gap-2">
          <span class="text-amber-400">!</span> {{ warning }}
        </li>
        {% endfor %}
      </ul>
    </div>
    {% endif %}
  </div>
</div>
{% endif %}

{# System Info #}
{% if system_info %}
<div>
  <h2 class="text-lg font-semibold text-slate-900 mb-4">System Info</h2>
  <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
    <dl class="divide-y divide-slate-200">
      {% if system_info.version %}
      <div class="px-4 py-3 flex justify-between">
        <dt class="text-sm text-slate-500">Scoped Version</dt>
        <dd class="text-sm font-mono text-slate-900">{{ system_info.version }}</dd>
      </div>
      {% endif %}
      {% if system_info.backend %}
      <div class="px-4 py-3 flex justify-between">
        <dt class="text-sm text-slate-500">Storage Backend</dt>
        <dd class="text-sm font-mono text-slate-900">{{ system_info.backend }}</dd>
      </div>
      {% endif %}
      {% if system_info.layers_loaded %}
      <div class="px-4 py-3 flex justify-between">
        <dt class="text-sm text-slate-500">Services Loaded</dt>
        <dd class="text-sm font-mono text-slate-900">{{ system_info.layers_loaded }}</dd>
      </div>
      {% endif %}
    </dl>
  </div>
</div>
{% endif %}
{% endblock %}