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

<div class="page-header">
  <h1>Audio Intelligence</h1>
  <p class="page-subtitle">Extract real BPM, key, energy, and lyrics from every song in your catalog.</p>
</div>

<!-- Coverage banner -->
<div class="analyze-coverage-card">
  <div class="analyze-cov-left">
    <div class="analyze-cov-num">{{ analyzed }} <span>/ {{ total_songs }}</span></div>
    <div class="analyze-cov-label">songs analyzed</div>
  </div>
  <div class="analyze-cov-bar-wrap">
    <div class="analyze-cov-bar" id="coverageBar" style="width:{{ pct }}%"></div>
  </div>
  <div class="analyze-cov-pct" id="coveragePct">{{ pct }}%</div>
</div>

<!-- What this does -->
{% if analyzed == 0 %}
<div class="analyze-explainer">
  <div class="analyze-explainer-row">
    <div class="analyze-explainer-item">
      <div class="analyze-explainer-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>
        <div class="analyze-explainer-title">Real BPM & Key</div>
        <div class="analyze-explainer-desc">Detected from the audio — no manual entry needed.</div>
      </div>
    </div>
    <div class="analyze-explainer-item">
      <div class="analyze-explainer-icon green">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
      </div>
      <div>
        <div class="analyze-explainer-title">Energy & Vibe</div>
        <div class="analyze-explainer-desc">High/chill energy, danceability, brightness — auto-scored.</div>
      </div>
    </div>
    <div class="analyze-explainer-item">
      <div class="analyze-explainer-icon blue">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
      </div>
      <div>
        <div class="analyze-explainer-title">Lyrics Transcription</div>
        <div class="analyze-explainer-desc">Whisper (local AI) transcribes lyrics from the audio file.</div>
      </div>
    </div>
    <div class="analyze-explainer-item">
      <div class="analyze-explainer-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>
        <div class="analyze-explainer-title">Auto-Tags</div>
        <div class="analyze-explainer-desc">Genre, mood, and themes generated — only fills empty fields.</div>
      </div>
    </div>
  </div>
</div>
{% endif %}

<!-- Options + Start/Stop -->
<div class="analyze-controls" id="analyzeControls">
  <div class="analyze-options" id="analyzeOptions">
    <div class="analyze-opt-group">
      <label class="analyze-opt-label">Mode</label>
      <div class="analyze-radio-group">
        <label class="analyze-radio">
          <input type="radio" name="analyzeMode" value="features" checked>
          <span>Audio features only</span>
          <small>Fast — BPM, key, energy, tags</small>
        </label>
        <label class="analyze-radio">
          <input type="radio" name="analyzeMode" value="whisper">
          <span>Audio + lyrics (Whisper)</span>
          <small>Recommended — transcribes vocals with high accuracy</small>
        </label>
      </div>
    </div>

    <div class="analyze-opt-group" id="whisperSizeGroup" style="display:none">
      <label class="analyze-opt-label">Whisper Model</label>
      <!-- Default is Base: on CPU the Large model is roughly 20-50 hours for a
           1000-song catalog, which reads as a hang. Large is still offered, but
           labelled honestly instead of "Recommended ★". -->
      <select id="whisperSize" class="analyze-select">
        <option value="tiny">Tiny — fastest, lower accuracy (75 MB)</option>
        <option value="base" selected>Base — recommended: good speed/accuracy balance (150 MB) ★</option>
        <option value="small">Small — slower, better accuracy (250 MB)</option>
        <option value="medium">Medium — much slower, very accurate (800 MB)</option>
        <option value="large">Large — slowest, highest accuracy (1.5 GB) — CPU-only Macs: expect 20-50+ hours for 1000 songs</option>
      </select>
      <small style="color:var(--text-muted);margin-top:4px;display:block">Base is the recommended default and finishes a typical catalog in a reasonable time. Medium and Large are far slower on CPU-only Macs — pick them only if you can leave the run going for a long time.</small>
    </div>

    <div class="analyze-opt-group">
      <label class="analyze-checkbox-label">
        <input type="checkbox" id="forceReanalyze">
        Re-analyze songs that already have features
      </label>
    </div>
  </div>

  <div class="analyze-btn-row" id="analyzeBtnRow">
    <button class="btn btn-primary" id="startBtn" onclick="startAnalysis()">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
      Start Analysis
    </button>
    <button class="btn btn-danger hidden" id="stopBtn" onclick="stopAnalysis()">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12"/></svg>
      Stop
    </button>
    <div class="analyze-hint" id="analyzeHint">
      Runs in the background — you can use Pitchkit while it works.
    </div>
  </div>
</div>

<!-- Progress panel (hidden until running) -->
<div class="analyze-progress-panel hidden" id="progressPanel">
  <div class="analyze-prog-header">
    <div class="analyze-prog-title" id="progTitle">Analyzing…</div>
    <div class="analyze-prog-counts" id="progCounts">0 / 0</div>
  </div>

  <div class="analyze-prog-bar-wrap">
    <div class="analyze-prog-bar" id="progressBar" style="width:0%"></div>
  </div>
  <div class="analyze-prog-pct" id="progPct">0%</div>

  <div class="analyze-now-playing" id="nowPlaying">
    <div class="analyze-now-label">Now analyzing:</div>
    <div class="analyze-now-song" id="nowSong">—</div>
    <div class="analyze-now-meta" id="nowMeta"></div>
  </div>

  <div class="analyze-log-wrap">
    <div class="analyze-log-title">Live log</div>
    <div class="analyze-log" id="analyzeLog"></div>
  </div>
</div>

<!-- Done banner (hidden until finished) -->
<div class="analyze-done hidden" id="doneBanner">
  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#4caf7d" stroke-width="2.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
  <div>
    <div class="analyze-done-title">Analysis complete</div>
    <div class="analyze-done-sub" id="doneSubtitle"></div>
  </div>
  <a href="/match" class="btn btn-primary">Try Match Brief →</a>
</div>

{% endblock %}

{% block scripts %}
<script>
// ── Restore running state on page load ────────────────────────────────────────
let pollInterval = null;

function setRunning(yes) {
  document.getElementById("startBtn").classList.toggle("hidden", yes);
  document.getElementById("stopBtn").classList.toggle("hidden", !yes);
  document.getElementById("analyzeOptions").style.opacity = yes ? "0.45" : "1";
  document.getElementById("analyzeOptions").style.pointerEvents = yes ? "none" : "auto";
  document.getElementById("progressPanel").classList.toggle("hidden", !yes && !document.getElementById("doneBanner").classList.contains("hidden") === false);
  if (yes) {
    document.getElementById("progressPanel").classList.remove("hidden");
    document.getElementById("doneBanner").classList.add("hidden");
  }
}

function startAnalysis() {
  const mode = document.querySelector('input[name="analyzeMode"]:checked').value;
  const whisper = mode === "whisper";
  const whisperSize = document.getElementById("whisperSize").value;
  const force = document.getElementById("forceReanalyze").checked;

  fetch("/api/analyze/start", {
    method: "POST",
    headers: {"Content-Type": "application/json"},
    body: JSON.stringify({whisper, whisper_size: whisperSize, force})
  }).then(r => r.json()).then(data => {
    if (data.error) { alert(data.error); return; }
    setRunning(true);
    startPolling();
  });
}

function stopAnalysis() {
  fetch("/api/analyze/stop", {method: "POST"})
    .then(() => {
      setRunning(false);
      stopPolling();
    });
}

function startPolling() {
  stopPolling();
  pollInterval = setInterval(fetchStatus, 1500);
}

function stopPolling() {
  if (pollInterval) { clearInterval(pollInterval); pollInterval = null; }
}

function fetchStatus() {
  fetch("/api/analyze/status")
    .then(r => r.json())
    .then(d => {
      // Progress bar
      document.getElementById("progressBar").style.width = d.pct + "%";
      document.getElementById("progPct").textContent = d.pct + "%";
      document.getElementById("progCounts").textContent = d.done + " / " + d.total;

      // Coverage bar (top)
      if (d.total > 0) {
        const covPct = Math.round(d.done / d.total * 100);
        document.getElementById("coverageBar").style.width = covPct + "%";
        document.getElementById("coveragePct").textContent = covPct + "%";
      }

      // Now playing
      if (d.last_song) {
        document.getElementById("nowSong").textContent = d.last_song;
        let meta = [];
        if (d.last_bpm) meta.push("♩ " + d.last_bpm + " BPM");
        if (d.last_key) meta.push(d.last_key);
        if (d.last_mood) meta.push(d.last_mood);
        document.getElementById("nowMeta").textContent = meta.join("  ·  ");
      }

      // Log
      if (d.log && d.log.length) {
        const logEl = document.getElementById("analyzeLog");
        logEl.innerHTML = d.log.map(l => `<div class="log-line">${escHtml(l)}</div>`).join("");
        logEl.scrollTop = logEl.scrollHeight;
      }

      // Title
      if (d.running) {
        document.getElementById("progTitle").textContent =
          "Analyzing… " + (d.done > 0 ? `(${d.done} done)` : "");
      }

      // Finished
      if (!d.running && d.finished) {
        stopPolling();
        setRunning(false);
        document.getElementById("progressPanel").classList.add("hidden");
        document.getElementById("doneBanner").classList.remove("hidden");
        document.getElementById("doneSubtitle").textContent =
          `${d.done} songs analyzed · ${d.skipped} skipped · ${d.errors} errors`;
      }
    });
}

function escHtml(s) {
  return s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
}

// Whisper mode toggle
document.querySelectorAll('input[name="analyzeMode"]').forEach(r => {
  r.addEventListener("change", () => {
    const isWhisper = document.querySelector('input[name="analyzeMode"]:checked').value === "whisper";
    document.getElementById("whisperSizeGroup").style.display = isWhisper ? "block" : "none";
  });
});

// On load — check if already running
fetchStatus();
fetch("/api/analyze/status").then(r => r.json()).then(d => {
  if (d.running) {
    setRunning(true);
    startPolling();
  } else if (d.finished && d.done > 0) {
    document.getElementById("doneBanner").classList.remove("hidden");
    document.getElementById("doneSubtitle").textContent =
      `${d.done} songs analyzed · ${d.skipped} skipped · ${d.errors} errors`;
  }
});
</script>
{% endblock %}