{% extends "base.html" %}
{% block titel %}{{ titel }} — Spiele-Redaktion{% endblock %}
{% block inhalt %}
<h1 class="text-2xl font-bold mb-2">{{ titel }}</h1>
<p class="text-slate-600 mb-4">
  Die Prüfung läuft automatisch bei jeder Eintragung in die Planungsliste.
  Hier kann sie auch von Hand für einen Titel ausgeführt werden.
</p>

<div class="grid md:grid-cols-4 gap-3 mb-6 text-sm">
  <div class="bg-white border border-slate-200 rounded-xl p-3">
    <p class="font-medium text-slate-700 mb-1">&#127962; Verlags-Konflikt</p>
    <p class="text-slate-500">Gleiches Spiel bei verschiedenen Verlagen/Vertrieb &rarr; Verlagsauswahl.</p>
  </div>
  <div class="bg-white border border-slate-200 rounded-xl p-3">
    <p class="font-medium text-slate-700 mb-1">&#127463; Titel-Varianten</p>
    <p class="text-slate-500">Deutsche Version wird bevorzugt (Heuristik + BGG Alternate-Names).</p>
  </div>
  <div class="bg-white border border-slate-200 rounded-xl p-3">
    <p class="font-medium text-slate-700 mb-1">&#128214; Bereits besprochen</p>
    <p class="text-slate-500">Spiel oder Vorg&auml;nger (BGG-Erweiterungs-Relation + Fuzzy-Match) schon in der Redaktion.</p>
  </div>
  <div class="bg-white border border-slate-200 rounded-xl p-3">
    <p class="font-medium text-slate-700 mb-1">&#128203; Schon in Planung</p>
    <p class="text-slate-500">Titel steht bereits in der Planungsliste eines anderen Rezensenten.</p>
  </div>
</div>

<div class="bg-white border border-slate-200 rounded-xl shadow-sm p-4 mb-6">
  <h2 class="font-semibold mb-3">Titel pr&uuml;fen</h2>
  <form method="post" action="/dedup/pruefen" class="flex flex-wrap items-end gap-3">
    <div>
      <label for="titel" class="block text-xs font-medium text-slate-500 mb-1">Spieltitel *</label>
      <input type="text" id="titel" name="titel" required value="{{ ergebnis.titel if ergebnis else '' }}"
             class="border border-slate-300 rounded-lg px-3 py-2 text-sm w-72 focus:outline-none focus:ring-2 focus:ring-emerald-500">
    </div>
    <div>
      <label for="verlag" class="block text-xs font-medium text-slate-500 mb-1">Verlag</label>
      <input type="text" id="verlag" name="verlag" value="{{ ergebnis.verlag if ergebnis and ergebnis.verlag else '' }}"
             class="border border-slate-300 rounded-lg px-3 py-2 text-sm w-56 focus:outline-none focus:ring-2 focus:ring-emerald-500">
    </div>
    <div>
      <label for="bgg_id" class="block text-xs font-medium text-slate-500 mb-1">BGG-ID (optional)</label>
      <input type="text" id="bgg_id" name="bgg_id" value="{{ ergebnis.bgg_id if ergebnis and ergebnis.bgg_id else '' }}"
             class="border border-slate-300 rounded-lg px-3 py-2 text-sm w-32 focus:outline-none focus:ring-2 focus:ring-emerald-500">
    </div>
    <button type="submit"
            class="bg-emerald-600 hover:bg-emerald-700 text-white font-medium px-4 py-2 rounded-lg text-sm">
      Pr&uuml;fen
    </button>
  </form>

  {% if fehler %}
  <div class="mt-4 px-4 py-3 rounded-lg border bg-red-50 border-red-200 text-red-700 text-sm">{{ fehler }}</div>
  {% endif %}
  {% if meldung %}
  <div class="mt-4 px-4 py-3 rounded-lg border bg-emerald-50 border-emerald-200 text-emerald-800 text-sm">{{ meldung }}</div>
  {% endif %}

  {% if ergebnis %}
  <div class="mt-4 rounded-lg border p-4 text-sm
              {% if ergebnis.hat_konflikte %}bg-amber-50 border-amber-300{% else %}bg-emerald-50 border-emerald-200{% endif %}">
    <p class="font-medium mb-2 {% if ergebnis.hat_konflikte %}text-amber-800{% else %}text-emerald-800{% endif %}">
      {% if ergebnis.hat_konflikte %}&#9888; {{ ergebnis.konflikte|length }} Treffer f&uuml;r „{{ ergebnis.titel }}“{% else %}&#10003; Keine Treffer f&uuml;r „{{ ergebnis.titel }}“{% endif %}
    </p>
    <ul class="list-disc list-inside space-y-1 text-slate-700">
      {% for konflikt in ergebnis.konflikte %}
      <li>
        <span class="inline-block px-2 py-0.5 rounded-full text-xs mr-1
                     {% if konflikt.art == 'verlag' %}bg-orange-200 text-orange-900
                     {% elif konflikt.art == 'titel' %}bg-sky-200 text-sky-900
                     {% elif konflikt.art == 'besprochen' %}bg-violet-200 text-violet-900
                     {% else %}bg-amber-200 text-amber-900{% endif %}">{{ konflikt.anzeige }}</span>
        {{ konflikt.beschreibung }}
      </li>
      {% endfor %}
    </ul>
    {% if ergebnis.titel_empfehlung and ergebnis.titel_empfehlung != ergebnis.titel %}
    <p class="mt-2 text-slate-600">Empfohlener Titel: <span class="font-medium">{{ ergebnis.titel_empfehlung }}</span></p>
    {% endif %}
  </div>
  {% endif %}
</div>

<div class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-x-auto">
  <h2 class="font-semibold px-4 pt-4 pb-2">Letzte Pr&uuml;fungen</h2>
  <table class="w-full text-sm">
    <thead class="bg-slate-50 text-left text-slate-500">
      <tr>
        <th class="px-4 py-2 font-medium">Zeitpunkt</th>
        <th class="px-4 py-2 font-medium">Titel</th>
        <th class="px-4 py-2 font-medium">Verlag</th>
        <th class="px-4 py-2 font-medium">BGG-ID</th>
        <th class="px-4 py-2 font-medium">Gepr&uuml;ft von</th>
        <th class="px-4 py-2 font-medium">Befund</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-100">
      {% for pruefung in protokoll %}
      <tr class="hover:bg-slate-50">
        <td class="px-4 py-2 whitespace-nowrap text-slate-500">{{ pruefung.erstellt_am.strftime('%d.%m.%Y %H:%M') if pruefung.erstellt_am else '—' }}</td>
        <td class="px-4 py-2 font-medium">{{ pruefung.titel }}</td>
        <td class="px-4 py-2">{{ pruefung.verlag or '—' }}</td>
        <td class="px-4 py-2">{{ pruefung.bgg_id or '—' }}</td>
        <td class="px-4 py-2">{{ pruefung.geprueft_durch or '—' }}</td>
        <td class="px-4 py-2">
          {% if pruefung.konflikte %}
            {% for konflikt in pruefung.konflikte %}
            <span class="inline-block px-2 py-0.5 rounded-full bg-amber-100 text-amber-800 text-xs mr-1">{{ konflikt_anzeige.get(konflikt.art, konflikt.art) }}</span>
            {% endfor %}
          {% else %}
            <span class="text-emerald-700">Keine Treffer</span>
          {% endif %}
        </td>
      </tr>
      {% else %}
      <tr><td colspan="6" class="px-4 py-6 text-center text-slate-400">Noch keine Pr&uuml;fungen durchgef&uuml;hrt.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}