{% extends "base.html" %}
{% block title %}Dashboard — Swiss Truth{% endblock %}

{% block content %}
<style>
  .dash-grid   { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
  .kpi-grid    { grid-template-columns: repeat(4, 1fr); }
  .mid-grid    { grid-template-columns: 2fr 1fr; }
  .bot-grid    { grid-template-columns: 1fr 1fr; }

  .kpi {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 1.4rem 1.6rem;
    position: relative;
    overflow: hidden;
  }
  .kpi::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 14px 14px 0 0;
  }
  .kpi.green::before  { background: #22c55e; }
  .kpi.yellow::before { background: #f59e0b; }
  .kpi.blue::before   { background: #3b82f6; }
  .kpi.purple::before { background: #8b5cf6; }

  .kpi-value {
    font-size: 2.6rem;
    font-weight: 700;
    color: #111;
    line-height: 1;
    letter-spacing: -0.04em;
  }
  .kpi-label {
    font-size: 0.78rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.35rem;
  }
  .kpi-sub {
    font-size: 0.8rem;
    color: #9ca3af;
    margin-top: 0.5rem;
  }

  .panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 1.4rem 1.6rem;
  }
  .panel h3 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin: 0 0 1.1rem;
  }

  /* Domain cards */
  .domain-list { display: flex; flex-direction: column; gap: 0.9rem; }
  .domain-item { }
  .domain-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.3rem;
  }
  .domain-name { font-weight: 600; font-size: 0.92rem; color: #111; }
  .domain-counts { font-size: 0.78rem; color: #6b7280; }
  .domain-bar {
    height: 6px;
    background: #f3f4f6;
    border-radius: 99px;
    overflow: hidden;
    display: flex;
    gap: 1px;
  }
  .bar-cert   { background: #22c55e; border-radius: 99px 0 0 99px; }
  .bar-review { background: #f59e0b; }
  .bar-draft  { background: #ef4444; border-radius: 0 99px 99px 0; }

  /* Confidence dist */
  .conf-list { display: flex; flex-direction: column; gap: 0.7rem; }
  .conf-row { display: flex; align-items: center; gap: 0.7rem; }
  .conf-label { font-size: 0.8rem; color: #374151; width: 5rem; flex-shrink: 0; text-align: right; }
  .conf-bar-wrap { flex: 1; height: 18px; background: #f3f4f6; border-radius: 6px; overflow: hidden; }
  .conf-bar-fill { height: 100%; background: linear-gradient(90deg, #6366f1, #8b5cf6); border-radius: 6px; transition: width .5s; }
  .conf-count { font-size: 0.8rem; color: #6b7280; width: 2.5rem; text-align: right; }

  /* Validators */
  .val-list { display: flex; flex-direction: column; gap: 0.65rem; }
  .val-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .val-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.75rem; font-weight: 700;
    flex-shrink: 0;
  }
  .val-info { flex: 1; min-width: 0; }
  .val-name { font-size: 0.85rem; font-weight: 600; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .val-inst { font-size: 0.75rem; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .val-badge {
    font-size: 0.72rem; font-weight: 600;
    background: #f0fdf4; color: #16a34a;
    border: 1px solid #bbf7d0;
    border-radius: 99px;
    padding: 0.15rem 0.5rem;
    flex-shrink: 0;
  }

  /* Recent claims */
  .recent-list { display: flex; flex-direction: column; gap: 0.75rem; }
  .recent-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
  }
  .recent-item:last-child { border-bottom: none; padding-bottom: 0; }
  .recent-conf {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 700; color: #16a34a;
    flex-shrink: 0;
  }
  .recent-text {
    font-size: 0.83rem;
    color: #374151;
    line-height: 1.45;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .recent-meta { font-size: 0.72rem; color: #9ca3af; margin-top: 0.2rem; }

  .section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
  }

  @media (max-width: 900px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .mid-grid, .bot-grid { grid-template-columns: 1fr; }
  }
</style>

<div style="margin-bottom:1.5rem;">
  <h1 class="section-title">Knowledge Base Dashboard</h1>
  <p style="color:#6b7280;font-size:0.9rem;margin:0;">Live-Statistiken · automatisch aktualisiert beim Laden</p>
</div>

<!-- KPI-Reihe -->
<div class="dash-grid kpi-grid">
  <div class="kpi green">
    <div class="kpi-value">{{ s.certified }}</div>
    <div class="kpi-label">Zertifizierte Claims</div>
    <div class="kpi-sub">Ø Konfidenz {{ s.avg_confidence }}%</div>
  </div>
  <div class="kpi yellow">
    <div class="kpi-value">{{ s.peer_review }}</div>
    <div class="kpi-label">In Review Queue</div>
    <div class="kpi-sub">warten auf Experten-Validierung</div>
  </div>
  <div class="kpi blue">
    <div class="kpi-value">{{ s.cert_rate }}%</div>
    <div class="kpi-label">Zertifizierungsrate</div>
    <div class="kpi-sub">{{ s.certified }} von {{ s.total }} Claims</div>
  </div>
  <div class="kpi purple">
    <div class="kpi-value">{{ s.domains | length }}</div>
    <div class="kpi-label">Wissensdomains</div>
    <div class="kpi-sub">{{ s.domains | selectattr('certified', 'gt', 0) | list | length }} mit zertifizierten Claims</div>
  </div>
  {% if s.needs_renewal or s.expiring_soon %}
  <div class="kpi" style="border-top: 3px solid #f97316;">
    <div class="kpi-value" style="color:#c2410c;">{{ s.needs_renewal }}</div>
    <div class="kpi-label">Renewal erforderlich</div>
    <div class="kpi-sub">
      {% if s.expiring_soon %}+ {{ s.expiring_soon }} laufen in 30 Tagen ab{% else %}alle Claims aktuell{% endif %}
    </div>
  </div>
  {% endif %}
</div>

<!-- Mitte: Domains + Confidence -->
<div class="dash-grid mid-grid">

  <!-- Domain-Breakdown -->
  <div class="panel">
    <h3>Domains</h3>
    <div class="domain-list">
      {% for d in s.domains %}
      {% set domain_total = d.certified + d.peer_review + d.draft %}
      <div class="domain-item">
        <div class="domain-header">
          <span class="domain-name">{{ d.name }}</span>
          <span class="domain-counts">
            <span style="color:#22c55e;font-weight:600;">{{ d.certified }}</span> zertifiziert
            {% if d.peer_review %} · <span style="color:#f59e0b;font-weight:600;">{{ d.peer_review }}</span> in Review{% endif %}
            {% if d.draft %} · <span style="color:#ef4444;">{{ d.draft }}</span> draft{% endif %}
          </span>
        </div>
        {% if domain_total > 0 %}
        <div class="domain-bar">
          <div class="bar-cert"   style="width:{{ (d.certified   / domain_total * 100)|round }}%"></div>
          <div class="bar-review" style="width:{{ (d.peer_review / domain_total * 100)|round }}%"></div>
          <div class="bar-draft"  style="width:{{ (d.draft       / domain_total * 100)|round }}%"></div>
        </div>
        {% else %}
        <div class="domain-bar"><div style="width:100%;background:#f3f4f6;height:6px;border-radius:99px;"></div></div>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </div>

  <!-- Confidence-Verteilung -->
  <div class="panel">
    <h3>Konfidenz-Verteilung</h3>
    {% set max_conf = s.confidence_dist | map(attribute='n') | max | default(1) %}
    <div class="conf-list">
      {% for row in s.confidence_dist %}
      <div class="conf-row">
        <span class="conf-label">{{ row.bucket }}</span>
        <div class="conf-bar-wrap">
          <div class="conf-bar-fill" style="width:{{ (row.n / max_conf * 100)|round }}%"></div>
        </div>
        <span class="conf-count">{{ row.n }}</span>
      </div>
      {% endfor %}
      {% if not s.confidence_dist %}
      <p style="color:#9ca3af;font-size:0.85rem;">Noch keine zertifizierten Claims.</p>
      {% endif %}
    </div>
  </div>

</div>

<!-- Bottom: Validatoren + Zuletzt zertifiziert -->
<div class="dash-grid bot-grid">

  <!-- Top-Validatoren -->
  <div class="panel">
    <h3>Top-Validatoren</h3>
    <div class="val-list">
      {% for v in s.validators %}
      <div class="val-row">
        <div class="val-avatar">{{ v.name[:2] | upper }}</div>
        <div class="val-info">
          <div class="val-name">{{ v.name }}</div>
          <div class="val-inst">{{ v.institution or '—' }}</div>
        </div>
        <span class="val-badge">{{ v.certified }} ✓</span>
      </div>
      {% endfor %}
      {% if not s.validators %}
      <p style="color:#9ca3af;font-size:0.85rem;">Noch keine Validierungen.</p>
      {% endif %}
    </div>
  </div>

  <!-- Zuletzt zertifiziert -->
  <div class="panel">
    <h3>Zuletzt zertifiziert</h3>
    <div class="recent-list">
      {% for c in s.recent %}
      <a href="/review/{{ c.id }}" style="text-decoration:none;color:inherit;">
        <div class="recent-item">
          <div class="recent-conf">{{ (c.confidence_score * 100)|round|int }}%</div>
          <div style="flex:1;min-width:0;">
            <div class="recent-text">{{ c.text }}</div>
            <div class="recent-meta">
              {{ c.domain_id }}
              {% if c.validator %} · {{ c.validator }}{% endif %}
              {% if c.last_reviewed %} · {{ c.last_reviewed[:10] }}{% endif %}
            </div>
          </div>
        </div>
      </a>
      {% endfor %}
      {% if not s.recent %}
      <p style="color:#9ca3af;font-size:0.85rem;">Noch keine zertifizierten Claims.</p>
      {% endif %}
    </div>
  </div>

</div>
{% endblock %}