{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}
{% block content %}
<h1>Dashboard</h1>
<p style="color:var(--muted);margin-bottom:1.2rem;font-family:system-ui,sans-serif;font-size:0.92rem;">
  Documenti analizzati da StudyGraph.
</p>

{% if message %}
<div class="flash">{{ message }}</div>
{% endif %}

{% if documents %}
<div class="card" style="padding:0.8rem 1rem;margin-bottom:1rem;">
  <span class="pill pill-candidate">Candidate: {{ decisions.get('candidate', 0) }}</span>
  <span class="pill pill-needs_review" style="margin-left:0.4rem;">Needs review: {{ decisions.get('needs_review', 0) }}</span>
  <span class="pill pill-private_only" style="margin-left:0.4rem;">Private: {{ decisions.get('private_only', 0) }}</span>
  <span class="pill pill-reject" style="margin-left:0.4rem;">Reject: {{ decisions.get('reject', 0) }}</span>
  <span class="pill pill-duplicate" style="margin-left:0.4rem;">Duplicate: {{ decisions.get('duplicate', 0) }}</span>
</div>

<div class="filters">
  <input type="text" id="filterName" placeholder="Filtra per filename..." onkeyup="filterTable()">
  <select id="filterDecision" onchange="filterTable()">
    <option value="">Tutte le decisioni</option>
    <option value="candidate">Candidate</option>
    <option value="needs_review">Needs review</option>
    <option value="reject">Reject</option>
    <option value="duplicate">Duplicate</option>
    <option value="private_only">Private only</option>
  </select>
</div>

<div style="overflow-x:auto;">
<table>
<thead>
<tr>
  <th onclick="sortBy(0)">Filename</th>
  <th onclick="sortBy(1)">Corso</th>
  <th onclick="sortBy(2)">Argomento</th>
  <th onclick="sortBy(3)">Score</th>
  <th onclick="sortBy(4)">Decisione</th>
  <th class="tech-col" style="display:none;" onclick="sortBy(5)">Pagine</th>
  <th class="tech-col" style="display:none;" onclick="sortBy(6)">Caratteri</th>
  <th class="tech-col" style="display:none;">Qualita</th>
  <th class="tech-col" style="display:none;">Scansionato</th>
  <th class="tech-col" style="display:none;">Lingua</th>
</tr>
</thead>
<tbody id="docTable">
{% for d in documents %}
{% set dec = d.get('final_decision', d.get('suggested_decision', 'reject')) %}
<tr>
  <td>{{ d.get('filename', '') }}</td>
  <td>{{ d.get('course', '') }}</td>
  <td>{{ d.get('topic', '') }}</td>
  <td>{{ '%.2f'|format(d.get('final_score', 0)) }}</td>
  <td><span class="pill pill-{{ dec }}">{{ dec }}</span></td>
  <td class="tech-col" style="display:none;">{{ d.get('page_count', '') }}</td>
  <td class="tech-col" style="display:none;">{{ d.get('char_count', '') }}</td>
  <td class="tech-col" style="display:none;">{{ '%.2f'|format(d.get('text_quality_score', 0)) }}</td>
  <td class="tech-col" style="display:none;">{{ 'si' if d.get('is_probably_scanned') else 'no' }}</td>
  <td class="tech-col" style="display:none;">{{ d.get('language', '') }}</td>
</tr>
{% endfor %}
</tbody>
</table>

<div style="margin-top:0.6rem;text-align:right;">
  <button onclick="toggleDetails()" id="toggleBtn" class="btn-ghost" style="font-size:0.78rem;padding:0.3rem 0.7rem;">+ Dettagli tecnici</button>
</div>
</div>

<script>
var techVisible = false;
function toggleDetails() {
  techVisible = !techVisible;
  var cols = document.querySelectorAll('.tech-col');
  var btn = document.getElementById('toggleBtn');
  cols.forEach(function(c) { c.style.display = techVisible ? '' : 'none'; });
  btn.textContent = techVisible ? '- Dettagli tecnici' : '+ Dettagli tecnici';
}
function filterTable() {
  var name = document.getElementById('filterName').value.toLowerCase();
  var dec = document.getElementById('filterDecision').value;
  var rows = document.querySelectorAll('#docTable tr');
  rows.forEach(function(r) {
    var ok = true;
    if (dec && r.children[4].textContent.trim() !== dec) ok = false;
    if (name && !r.children[0].textContent.toLowerCase().includes(name)) ok = false;
    r.style.display = ok ? '' : 'none';
  });
}
function sortBy(n) {
  var tbody = document.getElementById('docTable');
  var rows = Array.from(tbody.rows);
  rows.sort(function(a, b) {
    var x = a.children[n].textContent, y = b.children[n].textContent;
    var xn = parseFloat(x), yn = parseFloat(y);
    if (!isNaN(xn) && !isNaN(yn)) return xn - yn;
    return x.localeCompare(y);
  });
  rows.forEach(function(r) { tbody.appendChild(r); });
}
</script>

{% else %}
<div class="empty-state">
  Nessun documento analizzato.<br>
  <a href="/" style="color:var(--accent);">Carica dei PDF per iniziare</a>
</div>
{% endif %}
{% endblock %}