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

<style>
  .ai-keys { margin-top: 2rem; text-align: left; }
  .ai-keys-head h3 { font-size: 15px; margin: 0 0 4px; color: #eee; }
  .ai-keys-head p { font-size: 13px; color: #888; margin: 0 0 1rem; }
  .key-card {
    border: 1px solid rgba(255,255,255,0.09); border-radius: 10px;
    padding: 14px 16px; margin-bottom: 12px; background: rgba(255,255,255,0.02);
  }
  .key-card.key-on { border-color: rgba(108,99,255,0.45); background: rgba(108,99,255,0.07); }
  .key-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
  .key-title { font-size: 14px; font-weight: 600; color: #fff; }
  .key-badge {
    font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
    border: 1px solid rgba(255,255,255,0.2); color: #999;
    border-radius: 999px; padding: 2px 8px; font-weight: 700;
  }
  .key-badge.on { border-color: #6c63ff; color: #a9a3ff; }
  .key-desc { font-size: 13px; color: #aaa; line-height: 1.55; margin: 0 0 10px; }
  .key-form { display: flex; gap: 8px; }
  .key-input { flex: 1; font-family: 'SF Mono', Monaco, monospace; font-size: 12px; }
  .key-link { display: inline-block; margin-top: 8px; font-size: 12px; color: #6c63ff; text-decoration: none; }
  .key-link:hover { text-decoration: underline; }
  .btn-link-sm {
    background: none; border: none; color: #888; font-size: 12px;
    cursor: pointer; padding: 0; text-decoration: underline;
  }
  .key-privacy { font-size: 12px; color: #666; line-height: 1.5; margin-top: 14px; }
</style>


<div class="setup-page">
  <div class="setup-card">
    <div class="setup-icon">
      <svg width="40" height="40" viewBox="0 0 28 28" fill="none">
        <rect width="28" height="28" rx="7" fill="#6c63ff"/>
        <circle cx="14" cy="12" r="5" stroke="white" stroke-width="1.8" fill="none"/>
        <path d="M19 12 L22 19" stroke="white" stroke-width="1.8" stroke-linecap="round"/>
        <circle cx="14" cy="12" r="2" fill="white"/>
      </svg>
    </div>
    <h2>Connect Your Music Folder</h2>
    <p class="setup-desc">Point Pitchkit at the folder where your music lives. We'll scan it for songs and build your searchable catalog automatically.</p>

    {% if error %}
    <div class="alert alert-error">{{ error }}</div>
    {% endif %}

    <button id="pickFolderBtn" type="button" class="btn btn-primary btn-full" style="margin-bottom: 1rem;">
      Choose Music Folder…
    </button>

    <details style="margin-top: 1rem;">
      <summary style="cursor: pointer; color: #888; font-size: 13px;">Prefer to type the path?</summary>
      <form method="POST" action="/setup" style="margin-top: 0.75rem;">
        <div class="form-group">
          <input type="text" id="catalog_dir" name="catalog_dir"
                 placeholder="/Users/yourname/Music/My Songs"
                 class="form-input" required>
          <div class="form-hint">In Finder, right-click your music folder, hold Option, choose "Copy as Pathname".</div>
        </div>
        <button type="submit" class="btn btn-primary btn-full">Connect Catalog →</button>
      </form>
    </details>

    <div class="ai-keys">
      <div class="ai-keys-head">
        <h3>Optional: turn on the AI features</h3>
        <p>Pitchkit works fully without these. Each one makes matching noticeably better, and both have free tiers.</p>
      </div>

      <!-- Anthropic — this is the one that makes artist references real -->
      <div class="key-card {% if has_anthropic %}key-on{% endif %}">
        <div class="key-card-top">
          <span class="key-title">Artist references</span>
          {% if has_anthropic %}<span class="key-badge on">On</span>{% else %}<span class="key-badge">Off</span>{% endif %}
        </div>
        <p class="key-desc">
          {% if has_anthropic %}
            Briefs saying &ldquo;something like Phoebe Bridgers&rdquo; are looked up and translated into real musical characteristics before matching — any artist, not just well-known ones.
          {% else %}
            Right now Pitchkit recognises about 200 well-known artists. Add an Anthropic key and it can look up <em>any</em> artist named in a brief and turn it into BPM range, energy, mood and genre before matching. This is the single biggest upgrade to match quality.
          {% endif %}
        </p>
        {% if has_anthropic %}
        <form method="POST" action="/setup/clear-key">
          <input type="hidden" name="which" value="anthropic_api_key">
          <button type="submit" class="btn-link-sm">Remove key</button>
        </form>
        {% else %}
        <form method="POST" action="/setup/save-anthropic-key" class="key-form">
          <input type="password" name="anthropic_api_key" placeholder="sk-ant-..." class="form-input key-input" autocomplete="off">
          <button type="submit" class="btn btn-primary">Save</button>
        </form>
        <a href="https://console.anthropic.com/settings/keys" target="_blank" rel="noopener" class="key-link">Get an Anthropic key →</a>
        {% endif %}
      </div>

      <!-- Gemini — better tags on your own songs -->
      <div class="key-card {% if has_gemini %}key-on{% endif %}">
        <div class="key-card-top">
          <span class="key-title">Smarter song tagging</span>
          {% if has_gemini %}<span class="key-badge on">On</span>{% else %}<span class="key-badge">Off</span>{% endif %}
        </div>
        <p class="key-desc">
          {% if has_gemini %}
            Your songs are being tagged with AI-generated genre, mood and theme tags instead of the built-in heuristics.
          {% else %}
            Without a key, genre and mood tags come from BPM and energy heuristics — workable, but blunt. A Gemini key produces far more accurate tags, which is what most matching scores against. Free tier covers hundreds of songs.
          {% endif %}
        </p>
        {% if has_gemini %}
        <form method="POST" action="/setup/clear-key">
          <input type="hidden" name="which" value="gemini_api_key">
          <button type="submit" class="btn-link-sm">Remove key</button>
        </form>
        {% else %}
        <form method="POST" action="/setup/save-gemini-key" class="key-form">
          <input type="password" name="gemini_api_key" placeholder="AIza..." class="form-input key-input" autocomplete="off">
          <button type="submit" class="btn btn-primary">Save</button>
        </form>
        <a href="https://aistudio.google.com/apikey" target="_blank" rel="noopener" class="key-link">Get a free Gemini key →</a>
        {% endif %}
      </div>

      <p class="key-privacy">Keys are stored on this Mac only, in Pitchkit&rsquo;s config file. Your audio is never sent anywhere — only an artist name, and only when a brief mentions one.</p>
    </div>

    <div class="setup-block" id="license">
      <h3 class="setup-block-title">Licence</h3>

      {% if request.args.get('lic') == 'ok' %}
      <p class="lic-msg ok">Unlocked. Your full catalog is being indexed now.</p>
      {% elif request.args.get('lic') == 'bad' %}
      <p class="lic-msg bad">That key doesn&rsquo;t match that email address. Use the same email you bought with, and paste the key exactly as it appears on your receipt.</p>
      {% elif request.args.get('lic') == 'removed' %}
      <p class="lic-msg ok">Licence removed from this Mac.</p>
      {% endif %}

      <div class="lic-card {% if lic.licensed %}lic-on{% endif %}">
        <div class="lic-head">
          <h3>{% if lic.licensed %}Full version{% else %}Free version{% endif %}</h3>
          {% if lic.licensed %}<span class="lic-badge on">Unlocked</span>{% else %}<span class="lic-badge">{{ lic.free_limit }}-song limit</span>{% endif %}
        </div>

        {% if lic.licensed %}
        <p class="lic-desc">Licensed to <strong>{{ lic.license_email }}</strong>. Unlimited catalog size, and every future update is included.</p>
        <form method="POST" action="/setup/deactivate" onsubmit="return confirm('Remove the licence from this Mac? You can re-enter your key any time.');">
          <button type="submit" class="btn btn-ghost">Remove licence from this Mac</button>
        </form>
        {% else %}
        <p class="lic-desc">The free version indexes your first {{ lic.free_limit }} songs. Everything else works normally &mdash; brief matching, artist references, lyric transcription, pitch folders. A one-time $49 licence removes the cap.</p>
        <form method="POST" action="/setup/activate" class="lic-form">
          <input type="email" name="license_email" placeholder="Email you bought with" class="form-input" autocomplete="email" required>
          <input type="text" name="license_key" placeholder="PK2-XXXX-XXXX-XXXX-XXXX" class="form-input" autocomplete="off" spellcheck="false" required>
          <button type="submit" class="btn btn-primary">Unlock</button>
        </form>
        <p class="lic-note">Don&rsquo;t have a key yet? <a href="https://musicpitchkit.com/#pricing" target="_blank" rel="noopener">Get Pitchkit &mdash; $49, one time &rarr;</a><br>Lost your key? Email musicpitchkit@gmail.com from the address you bought with.</p>
        {% endif %}
      </div>
    </div>

  </div>
</div>

<script>
document.getElementById('pickFolderBtn').addEventListener('click', async function() {
  const btn = this;
  btn.disabled = true;
  btn.textContent = 'Opening folder picker…';
  try {
    const res = await fetch('/setup/pick', { method: 'POST' });
    const data = await res.json();
    if (data.ok) {
      btn.textContent = `Found ${data.added} songs — loading…`;
      window.location.href = '/analyze';
    } else {
      btn.disabled = false;
      btn.textContent = 'Choose Music Folder…';
    }
  } catch (e) {
    btn.disabled = false;
    btn.textContent = 'Choose Music Folder…';
    alert('Something went wrong. Please try again or use the manual path option below.');
  }
});
</script>

{% endblock %}