{% extends "base.html" %}

{% block title %}Router Status - Timmy Time{% endblock %}

{% block content %}
<div class="mc-panel">
  <div class="mc-panel-header">
    <h1 class="page-title">Router Status</h1>
    <p class="mc-text-secondary">LLM provider health and metrics</p>
  </div>

  <!-- Overall Stats -->
  <div class="mc-stats-row">
    <div class="mc-stat-card">
      <div class="mc-stat-value">{{ providers|length }}</div>
      <div class="mc-stat-label">Providers</div>
    </div>
    <div class="mc-stat-card">
      <div class="mc-stat-value">{{ total_requests }}</div>
      <div class="mc-stat-label">Total Requests</div>
    </div>
    <div class="mc-stat-card">
      <div class="mc-stat-value">{{ total_success }}</div>
      <div class="mc-stat-label">Successful</div>
    </div>
    <div class="mc-stat-card">
      <div class="mc-stat-value">{{ total_failed }}</div>
      <div class="mc-stat-label">Failed</div>
    </div>
    <div class="mc-stat-card">
      <div class="mc-stat-value">{{ avg_latency_ms }}<small>ms</small></div>
      <div class="mc-stat-label">Avg Latency</div>
    </div>
  </div>

  <!-- Preferred Provider -->
  {% if preferred_provider %}
  <div class="mc-alert mc-alert-success">
    <strong>Preferred Provider:</strong> {{ preferred_provider }}
    <span class="mc-badge mc-badge-success">ACTIVE</span>
  </div>
  {% else %}
  <div class="mc-alert mc-alert-warning">
    <strong>Warning:</strong> No healthy providers available
  </div>
  {% endif %}

  <!-- Provider Cards -->
  <div class="mc-providers-grid">
    {% for provider in providers %}
    <div class="mc-provider-card provider-{{ provider.status }}">
      <div class="provider-header">
        <h3>{{ provider.name }}</h3>
        <span class="mc-badge mc-badge-{{ provider.status }}">
          {{ provider.status }}
        </span>
      </div>
      
      <div class="provider-meta">
        <span class="provider-type">{{ provider.type }}</span>
        <span class="provider-priority">Priority: {{ provider.priority }}</span>
        {% if not provider.enabled %}
        <span class="mc-badge mc-badge-disabled">DISABLED</span>
        {% endif %}
      </div>

      <div class="provider-circuit">
        Circuit: <span class="circuit-{{ provider.circuit_state }}">{{ provider.circuit_state }}</span>
      </div>

      <div class="provider-metrics">
        <div class="metric">
          <span class="metric-value">{{ provider.metrics.total }}</span>
          <span class="metric-label">Requests</span>
        </div>
        <div class="metric">
          <span class="metric-value">{{ provider.metrics.success }}</span>
          <span class="metric-label">Success</span>
        </div>
        <div class="metric">
          <span class="metric-value">{{ provider.metrics.failed }}</span>
          <span class="metric-label">Failed</span>
        </div>
        <div class="metric">
          <span class="metric-value">{{ provider.metrics.avg_latency_ms }}ms</span>
          <span class="metric-label">Latency</span>
        </div>
        <div class="metric">
          <span class="metric-value">{{ "%.1f"|format(provider.metrics.error_rate * 100) }}%</span>
          <span class="metric-label">Error Rate</span>
        </div>
      </div>

      {% if provider.metrics.error_rate > 0.1 %}
      <div class="mc-alert mc-alert-warning mc-alert-small">
        High error rate detected
      </div>
      {% endif %}
    </div>
    {% endfor %}
  </div>

  {% if not providers %}
  <div class="mc-empty-state">
    <p>No providers configured.</p>
    <p class="mc-text-secondary">Check config/providers.yaml</p>
  </div>
  {% endif %}
</div>

{% endblock %}