<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>AstroOracle . Dashboard</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    body { background: #0b1020; color: #e9edf5; }
    .card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
    .muted { color: rgba(233,237,245,0.72); }
    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
    a { color: #a7c7ff; }
    .badge-soft { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
    table { color: inherit; }
  </style>
</head>
<body>

<nav class="navbar navbar-dark" style="background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.08);">
  <div class="container">
    <a class="navbar-brand" href="/">AstroOracle</a>
    <div class="d-flex gap-2">
      <a class="btn btn-sm btn-outline-light" href="/">Landing</a>
      <a class="btn btn-sm btn-outline-light" href="/api/export?format=csv">Export CSV</a>
      <a class="btn btn-sm btn-outline-light" href="/api/export?format=json">Export JSON</a>
    </div>
  </div>
</nav>

<main class="py-4">
  <div class="container">

    <div class="row g-4">
      <div class="col-lg-6">
        <div class="card p-3">
          <h1 class="h5 mb-2">Dashboard annotations</h1>
          <div class="muted">Résumé rapide. Les exports sortent depuis l'endpoint API.</div>
          <div class="mt-3">
            <div class="muted" style="font-size:0.9rem;">Fichiers</div>
            <div class="mono" style="font-size:0.9rem;">candidates: {{ paths.candidates }}</div>
            <div class="mono" style="font-size:0.9rem;">annotations: {{ paths.annotations }}</div>
          </div>

          <hr class="border-light" style="opacity: 0.15;" />

          <div class="d-flex flex-wrap gap-2">
            {% for label, cnt in annotation_counts.items() %}
              <span class="badge badge-soft rounded-pill">
                <span class="mono">{{ label }}</span>
                <span class="mono">{{ cnt }}</span>
              </span>
            {% endfor %}
            {% if annotation_counts|length == 0 %}
              <span class="muted">Aucune annotation pour le moment.</span>
            {% endif %}
          </div>

          <div class="mt-3 d-flex gap-2 flex-wrap">
            <button class="btn btn-sm btn-outline-light" id="refresh">Refresh</button>
            <button class="btn btn-sm btn-outline-light" id="toggleHeatmap">Heatmap</button>
          </div>

          <div id="heatmap" class="mt-3" style="display:none;">
            <div class="muted">Heatmap (comptage labels). Version lightweight.</div>
            <div id="heatmapTable"></div>
          </div>

        </div>
      </div>

      <div class="col-lg-6">
        <div class="card p-3">
          <h2 class="h6 mb-2">Dernières annotations (preview)</h2>
          <div class="muted" style="font-size:0.9rem;">Limite côté serveur. Utilisez l'export pour la totalité.</div>
          <div class="table-responsive mt-2" style="max-height: 520px; overflow:auto;">
            <table class="table table-sm table-dark align-middle" style="--bs-table-bg: transparent; --bs-table-striped-bg: rgba(255,255,255,0.03);">
              <thead>
                <tr>
                  <th>id</th>
                  <th>label</th>
                  <th>score</th>
                  <th>comment</th>
                </tr>
              </thead>
              <tbody id="rows">
                {% for r in annotations_preview %}
                  <tr>
                    <td class="mono">{{ r.get('id','') }}</td>
                    <td class="mono">{{ r.get('label','') }}</td>
                    <td class="mono">{{ '%.3f'|format(r.get('anomaly_score',0.0) or 0.0) }}</td>
                    <td>{{ r.get('comment','') }}</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>

    </div>

  </div>
</main>

<script>
function buildHeatmap(counts){
  const entries = Object.entries(counts || {});
  if(entries.length === 0){
    document.getElementById('heatmapTable').innerHTML = '<div class="muted">Aucune donnée.</div>';
    return;
  }

  let html = '<table class="table table-sm table-dark" style="--bs-table-bg: transparent;">';
  html += '<thead><tr><th>label</th><th>count</th></tr></thead><tbody>';
  for(const [k,v] of entries){
    html += `<tr><td class="mono">${k}</td><td class="mono">${v}</td></tr>`;
  }
  html += '</tbody></table>';
  document.getElementById('heatmapTable').innerHTML = html;
}

async function refresh(){
  const r = await fetch('/api/annotations?limit=100');
  const data = await r.json();
  const tbody = document.getElementById('rows');
  tbody.innerHTML = '';
  for(const row of data.rows){
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td class="mono">${row.id || ''}</td>
      <td class="mono">${row.label || ''}</td>
      <td class="mono">${Number(row.anomaly_score || 0).toFixed(3)}</td>
      <td>${row.comment || ''}</td>
    `;
    tbody.appendChild(tr);
  }

  // Counts
  const counts = {};
  for(const row of data.rows){
    if(!row.label) continue;
    counts[row.label] = (counts[row.label] || 0) + 1;
  }
  buildHeatmap(counts);
}

const hm = document.getElementById('heatmap');
document.getElementById('toggleHeatmap').addEventListener('click', () => {
  hm.style.display = (hm.style.display === 'none') ? 'block' : 'none';
});

document.getElementById('refresh').addEventListener('click', refresh);
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
