{% extends "base.html" %}
{% block title %}Dashboard — Pitchkit{% endblock %}
{% block content %}

{% if setup_needed %}
<div class="setup-banner">
  <div class="setup-banner-inner">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#6c63ff" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4m0 4h.01"/></svg>
    <div>
      <strong>Connect your catalog to get started.</strong>
      <span>Point Pitchkit at your music folder and it'll index everything automatically.</span>
    </div>
    <a href="/setup" class="btn btn-primary btn-sm">Set Up Catalog →</a>
  </div>
</div>
{% endif %}

<div class="page-header">
  <h1>Dashboard</h1>
  <p class="page-subtitle">Your catalog at a glance.</p>
</div>

<!-- Analysis progress — shown whenever some songs are still unanalyzed.
     Matching can only search analyzed songs, so this must be visible up front. -->
<div id="analysis-progress-banner" class="setup-banner"
     style="{% if not (stats.total and stats.analyzed < stats.total) %}display:none;{% endif %}
            background:rgba(108,99,255,.10); border:1px solid rgba(108,99,255,.25);
            border-radius:10px; padding:16px 18px; margin-bottom:20px;">
  <div style="display:flex; align-items:center; gap:12px; flex-wrap:wrap;">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#6c63ff" stroke-width="2" stroke-linecap="round">
      <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
    </svg>
    <strong id="analysis-progress-title" style="font-size:15px;">
      Analyzing your catalog — {{ stats.analyzed }} of {{ stats.total }} ready
    </strong>
    <a href="/analyze" class="btn btn-primary btn-sm" style="margin-left:auto;">View progress →</a>
  </div>
  <div style="height:8px; border-radius:6px; background:rgba(255,255,255,.10); margin:12px 0 8px; overflow:hidden;">
    <div id="analysis-progress-bar"
         style="height:100%; border-radius:6px; background:#6c63ff; transition:width .4s ease;
                width:{% if stats.total %}{{ (stats.analyzed * 100 // stats.total) }}{% else %}0{% endif %}%;"></div>
  </div>
  <div id="analysis-progress-note" style="font-size:13px; opacity:.75;">
    Brief matching only searches songs that have finished analysis. More songs will
    appear in your match results as analysis continues.
  </div>
</div>

<div class="stat-grid">
  <div class="stat-card">
    <div class="stat-icon purple">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
    </div>
    <div class="stat-value" id="stat-total">
      {% if scanning and stats.total == 0 %}
        <span class="scan-spinner-wrap"><span class="scan-spinner"></span></span>
      {% else %}
        {{ stats.total }}
      {% endif %}
    </div>
    <div class="stat-label" id="stat-total-label">
      {% if scanning and stats.total == 0 %}Scanning folder…{% else %}Total Songs{% endif %}
    </div>
  </div>
  <div class="stat-card">
    <div class="stat-icon green">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
    </div>
    <div class="stat-value" id="stat-lyrics">{{ stats.with_lyrics }}</div>
    <div class="stat-label">Songs with Lyrics</div>
  </div>
  <div class="stat-card">
    <div class="stat-icon blue">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
    </div>
    <div class="stat-value" id="stat-artists">{{ stats.artists }}</div>
    <div class="stat-label">Artists / Aliases</div>
  </div>
  <div class="stat-card">
    <div class="stat-icon orange">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
    </div>
    <div class="stat-value" id="stat-genres">{{ stats.genres }}</div>
    <div class="stat-label">Genre Tags</div>
  </div>
</div>

<div class="quick-actions">
  <div class="section-title">Quick Actions</div>
  <div class="action-grid">
    <a href="/match" class="action-card">
      <div class="action-icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#6c63ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
        </svg>
      </div>
      <div>
        <div class="action-title">Match a Brief</div>
        <div class="action-desc">Paste any brief or description and find your best-fit songs instantly.</div>
      </div>
      <svg class="action-arrow" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
    </a>

    <a href="/catalog" class="action-card">
      <div class="action-icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4caf7d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/>
        </svg>
      </div>
      <div>
        <div class="action-title">Browse Catalog</div>
        <div class="action-desc" id="browse-desc">Search and filter all {{ stats.total }} songs by genre, mood, or keyword.</div>
      </div>
      <svg class="action-arrow" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
    </a>

    <a href="/folders" class="action-card">
      <div class="action-icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f5a623" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
        </svg>
      </div>
      <div>
        <div class="action-title">Pitch Folders</div>
        <div class="action-desc">View and manage your organized pitch collections.</div>
      </div>
      <svg class="action-arrow" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
    </a>

    <a href="/analyze" class="action-card">
      <div class="action-icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
        </svg>
      </div>
      <div>
        <div class="action-title">Analyze Catalog</div>
        <div class="action-desc">Extract BPM, key, energy, and lyrics from your audio files automatically.</div>
      </div>
      <svg class="action-arrow" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
    </a>
  </div>
</div>

<!-- ── Catalog Health: missing artists, vocal-gender coverage ───────────── -->
<div class="catalog-health" id="health-panel" style="margin-top:28px;display:none;">
  <div class="section-title">Catalog Health</div>
  <div class="health-grid">
    <div class="health-card" id="health-missing-artist">
      <div class="health-label">Songs missing artist</div>
      <div class="health-value" id="health-missing-artist-count">–</div>
      <button type="button" class="btn btn-outline btn-sm" id="btn-backfill"
              onclick="runBackfill()" style="margin-top:8px;">
        Re-read tags &amp; filenames
      </button>
    </div>
    <div class="health-card" id="health-vocal-gender">
      <div class="health-label">Vocal gender detected</div>
      <div class="health-value" id="health-vocal-gender-count">–</div>
      <div class="health-sub" id="health-vocal-gender-sub" style="font-size:.78rem;color:#888;margin-top:4px;"></div>
    </div>
    <div class="health-card" id="health-clean">
      <div class="health-label">Catalog cleanup</div>
      <div class="health-value" style="font-size:1rem;color:#aaa;">Remove instrumentals,<br>acapellas &amp; duplicates</div>
      <button type="button" class="btn btn-outline btn-sm" id="btn-clean"
              onclick="runCleanCatalog()" style="margin-top:8px;">
        Run Cleanup
      </button>
    </div>
  </div>
</div>

<style>
.catalog-health .health-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.catalog-health .health-card { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
   border-radius:10px; padding:14px 16px; }
.catalog-health .health-label { font-size:.78rem; color:#888; text-transform:uppercase; letter-spacing:.05em; }
.catalog-health .health-value { font-size:1.4rem; font-weight:600; color:#e8e8f0; margin-top:4px; }
</style>

{% endblock %}

{% block scripts %}
<script>
// ── Catalog Health panel ─────────────────────────────────────────────
// Loads counts of songs missing artist and vocal-gender coverage. If the
// catalog isn't configured yet, the panel stays hidden.
function refreshCatalogHealth() {
  fetch('/api/catalog-health')
    .then(r => r.ok ? r.json() : null)
    .then(d => {
      if (!d || d.error) return;
      document.getElementById('health-panel').style.display = '';
      document.getElementById('health-missing-artist-count').textContent =
        d.missing_artist + (d.total ? ' / ' + d.total : '');

      const vg = d.vocal_gender || {};
      const male   = vg.male   || 0;
      const female = vg.female || 0;
      const known  = male + female;
      document.getElementById('health-vocal-gender-count').textContent =
        known + (d.analyzed ? ' / ' + d.analyzed + ' analyzed' : '');
      document.getElementById('health-vocal-gender-sub').textContent =
        '♂ ' + male + ' male · ♀ ' + female + ' female';
    })
    .catch(() => {});
}

async function runBackfill() {
  const btn = document.getElementById('btn-backfill');
  btn.disabled = true; btn.textContent = 'Re-reading…';
  try {
    const r = await fetch('/api/backfill-artists', {method:'POST'});
    const d = await r.json();
    if (d.error) { alert('Error: ' + d.error); }
    else {
      alert(`Examined ${d.examined} songs.\nUpdated artist/title on ${d.updated}.\n` +
            (d.unrecoverable ? `${d.unrecoverable} still have no recoverable info.` : ''));
      refreshCatalogHealth();
    }
  } finally {
    btn.disabled = false; btn.textContent = 'Re-read tags & filenames';
  }
}

async function runCleanCatalog() {
  const btn = document.getElementById('btn-clean');
  btn.disabled = true; btn.textContent = 'Cleaning…';
  try {
    const r = await fetch('/api/clean-catalog', {method:'POST'});
    if (!r.ok) {
      const errText = await r.text();
      alert('Cleanup error (HTTP ' + r.status + '): ' + errText);
      return;
    }
    const d = await r.json();
    if (d.error) {
      alert('Error: ' + d.error);
    } else {
      const n = d.removed || 0;
      if (n === 0) {
        alert('Catalog is already clean — no duplicates, instrumentals, or acapellas found.');
      } else {
        alert('Removed ' + n + ' entr' + (n === 1 ? 'y' : 'ies') + ' (duplicates, instrumentals, acapellas, TV mixes).');
      }
      // Refresh the health panel counts
      refreshCatalogHealth();
      // Also update the main dashboard stat cards so the total song count reflects the cleanup
      fetch('/api/stats')
        .then(function(r2) { return r2.ok ? r2.json() : null; })
        .then(function(data) {
          if (!data) return;
          var s = data.stats || data;
          var totalEl = document.getElementById('stat-total');
          if (totalEl && s.total != null) totalEl.textContent = s.total;
          var lyricsEl = document.getElementById('stat-lyrics');
          if (lyricsEl && s.with_lyrics != null) lyricsEl.textContent = s.with_lyrics;
          var artistsEl = document.getElementById('stat-artists');
          if (artistsEl && s.artists != null) artistsEl.textContent = s.artists;
          var genresEl = document.getElementById('stat-genres');
          if (genresEl && s.genres != null) genresEl.textContent = s.genres;
          var browseDesc = document.getElementById('browse-desc');
          if (browseDesc && s.total != null) {
            browseDesc.textContent = 'Search and filter all ' + s.total + ' songs by genre, mood, or keyword.';
          }
        })
        .catch(function() {});
    }
  } catch (err) {
    alert('Cleanup failed: ' + (err.message || err));
  } finally {
    btn.disabled = false; btn.textContent = 'Run Cleanup';
  }
}

document.addEventListener('DOMContentLoaded', refreshCatalogHealth);
</script>

{% if scanning or (stats.total == 0 and not setup_needed) %}
<script>
(function () {
  // Poll /api/stats every 2 s while a scan is in progress (or count is 0 and
  // a folder is configured). Once the scan finishes and songs appear, update
  // all stat cards live and stop polling.
  var poll = setInterval(function () {
    fetch('/api/stats')
      .then(function (r) { return r.json(); })
      .then(function (d) {
        var s = d.stats;

        // Always update secondary counts while scan is live
        document.getElementById('stat-lyrics').textContent   = s.with_lyrics;
        document.getElementById('stat-artists').textContent  = s.artists;
        document.getElementById('stat-genres').textContent   = s.genres;

        if (s.total > 0) {
          // Songs found — replace spinner/0 with real count
          var totalEl = document.getElementById('stat-total');
          totalEl.textContent = s.total;
          document.getElementById('stat-total-label').textContent = 'Total Songs';

          var browseDesc = document.getElementById('browse-desc');
          if (browseDesc) {
            browseDesc.textContent = 'Search and filter all ' + s.total + ' songs by genre, mood, or keyword.';
          }
        }

        // Stop polling once scan is done and we have songs (or scan done with 0 — no folder)
        if (!d.scanning) {
          clearInterval(poll);
        }
      })
      .catch(function () { /* network hiccup — keep polling */ });
  }, 2000);
})();
</script>
{% endif %}

<script>
// Keep the analysis-progress banner live: poll /api/stats every 5 s and hide the
// banner once every song has been analyzed.
(function () {
  var banner = document.getElementById('analysis-progress-banner');
  if (!banner) return;
  var poll = setInterval(function () {
    fetch('/api/stats')
      .then(function (r) { return r.json(); })
      .then(function (d) {
        var s = d.stats || {};
        var total = s.total || 0, analyzed = s.analyzed || 0;
        if (!total || analyzed >= total) {
          banner.style.display = 'none';
          if (analyzed >= total && total) clearInterval(poll);
          return;
        }
        banner.style.display = '';
        document.getElementById('analysis-progress-title').textContent =
          'Analyzing your catalog — ' + analyzed + ' of ' + total + ' ready';
        document.getElementById('analysis-progress-bar').style.width =
          Math.floor(analyzed * 100 / total) + '%';
      })
      .catch(function () { /* network hiccup — keep polling */ });
  }, 5000);
})();
</script>
{% endblock %}