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

<div class="page-header">
  <h1>Match a Brief</h1>
  <p class="page-subtitle">Paste any brief, description, or artist reference. Pitchkit finds your best-fit songs.</p>
</div>

<div class="match-layout">
  <div class="match-input-col">
    <form method="POST" action="/match" id="match-form" enctype="multipart/form-data">

      <!-- Tab switcher -->
      <div class="brief-tabs" role="tablist">
        <button type="button" class="brief-tab active" id="tab-paste" role="tab"
                onclick="switchBriefTab('paste')">✏️ Paste Brief</button>
        <button type="button" class="brief-tab" id="tab-upload" role="tab"
                onclick="switchBriefTab('upload')">📄 Upload Document</button>
      </div>

      <!-- Paste pane -->
      <div id="pane-paste" class="brief-pane">
        <div class="form-group">
          <label for="brief">Brief / Description</label>
          <textarea id="brief" name="brief" class="form-input brief-textarea"
            placeholder="Paste the brief here — artist references, genre direction, mood, BPM targets, themes, anything.

Example: Looking for something upbeat and danceable, Dua Lipa vibes, around 120 BPM, female empowerment themes, could work for a luxury fashion campaign..."
            rows="11">{{ brief_text }}</textarea>
        </div>
      </div>

      <!-- Upload pane -->
      <div id="pane-upload" class="brief-pane" style="display:none">
        <div class="form-group">
          <label>Upload Brief Document</label>
          <div class="upload-drop-zone" id="upload-zone">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#888" stroke-width="1.5"><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"/><polyline points="10 9 9 9 8 9"/></svg>
            <p class="upload-hint">Drop a <strong>.txt</strong>, <strong>.pdf</strong>, <strong>.docx</strong>, or <strong>.rtf</strong> file here</p>
            <label class="btn btn-outline btn-sm upload-label" for="brief_file">Choose File</label>
            <input type="file" id="brief_file" name="brief_file"
                   accept=".txt,.pdf,.docx,.rtf,text/plain,application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/rtf,text/rtf"
                   class="upload-file-input" onchange="onFileChosen(this)">
          </div>
          {% if upload_filename %}
          <div class="upload-chosen">📎 {{ upload_filename }}</div>
          {% endif %}
          <p class="form-hint">Pitchkit extracts the text and uses it exactly like a pasted brief.</p>
        </div>
      </div>

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

      {% if notice %}
      <!-- Informational (e.g. an artist reference we couldn't resolve) — not a failure. -->
      <div class="alert alert-info">{{ notice }}</div>
      {% endif %}

      {% if catalog_total and catalog_analyzed < catalog_total %}
      <!-- Matching only searches analyzed songs — say so before the user runs a brief. -->
      <div class="alert alert-info">
        <strong>{{ catalog_analyzed }} of {{ catalog_total }} songs analyzed.</strong>
        Matching only searches analyzed songs — more will appear as analysis continues.
        <a href="/analyze">View analysis progress →</a>
      </div>
      {% endif %}

      <div style="display:flex;gap:8px;align-items:stretch;">
        <button type="submit" class="btn btn-primary btn-full" id="match-btn" style="flex:1">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
          Find Matching Songs
        </button>
        <button type="button" class="btn btn-ghost" id="clear-btn" title="Clear brief and start fresh"
           onclick="clearBrief()"
           style="padding:0 14px;display:none;align-items:center;gap:5px;white-space:nowrap;">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
          Clear
        </button>
      </div>
    </form>

    {% if brief_text and results %}
    <div class="match-summary">
      Found <strong>{{ results|length }}</strong> matching song{% if results|length != 1 %}s{% endif %}
    </div>
    {% endif %}
  </div>

  <div class="match-results-col">
    {% if results %}
    <div class="results-header">
      <span class="results-count">{{ results|length }} matches</span>
      <button class="btn btn-outline btn-sm" id="create-folder-btn" onclick="openFolderModal()">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
        Save as Pitch Folder
      </button>
    </div>

    <div class="results-list" id="results-list">
      {% for score, reasons, row in results %}
      {% if row|length >= 20 %}
        {% set song_id, filename, title, artist, album, duration, bpm, key_, energy, brightness, danceability, lyrics, lyrics_source, themes, genre_tags, mood_tags, sound_desc, notes, vocal_gender, has_vocals = row %}
      {% else %}
        {% set song_id, filename, title, artist, album, duration, bpm, key_, energy, brightness, danceability, lyrics, lyrics_source, themes, genre_tags, mood_tags, sound_desc, notes = row %}
        {% set vocal_gender = none %}
      {% endif %}
      <div class="result-card" data-id="{{ song_id }}" data-selected="false">
        <div class="result-check">
          <input type="checkbox" class="song-check" value="{{ song_id }}"
                 data-title="{{ title or filename }}" data-artist="{{ artist or 'Unknown' }}">
        </div>
        <div class="result-body">
          <div class="result-title">{{ title or filename|replace('.mp3','')|replace('.wav','')|replace('.aif','') }}</div>
          <div class="result-artist">{{ artist or "—" }}</div>
          {% if genre_tags or mood_tags or vocal_gender %}
          <div class="result-tags">
            {% if genre_tags %}{% for t in genre_tags.split(',')[:3] %}<span class="tag tag-genre">{{ t.strip() }}</span>{% endfor %}{% endif %}
            {% if mood_tags %}{% for t in mood_tags.split(',')[:2] %}<span class="tag tag-mood">{{ t.strip() }}</span>{% endfor %}{% endif %}
            {% if vocal_gender == 'female' %}<span class="tag tag-vocal tag-female">♀ female vocal</span>{% endif %}
            {% if vocal_gender == 'male' %}<span class="tag tag-vocal tag-male">♂ male vocal</span>{% endif %}
          </div>
          {% endif %}
          {% if reasons %}
          <div class="result-reasons">
            {% for r in reasons[:3] %}<span class="reason">{{ r }}</span>{% endfor %}
          </div>
          {% endif %}
        </div>
        <div class="result-meta">
          {% if bpm %}<div class="meta-pill">{{ bpm|int }} BPM</div>{% endif %}
          {% if key_ %}<div class="meta-pill">{{ key_ }}</div>{% endif %}
          <div class="score-bar">
            <div class="score-fill" style="width: {{ [100, score * 8]|min }}%"></div>
          </div>
          <button class="play-btn result-play-btn" data-song-id="{{ song_id }}" title="Play preview">
            <svg class="icon-play" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="5,3 19,12 5,21"/></svg>
            <svg class="icon-pause" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" style="display:none"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
          </button>
          <a href="/song/{{ song_id }}" class="result-detail-link" title="View lyrics &amp; details" target="_blank">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
          </a>
        </div>
      </div>
      {% endfor %}
    </div>

    {% elif brief_text %}
    {% if catalog_total and catalog_analyzed == 0 %}
    <!-- Nothing analyzed yet: this is a progress state, not "your catalog doesn't fit". -->
    <div class="empty-state empty-state-info">
      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#6c63ff" stroke-width="1.5"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
      <p><strong>None of your {{ catalog_total }} songs have been analyzed yet.</strong></p>
      <p>Matching reads BPM, energy, mood and genre from analysis, so there's nothing
         to search against yet. Results will start appearing as soon as songs are processed.</p>
      <p><a href="/analyze" class="btn btn-primary btn-sm">Start analysis →</a></p>
    </div>
    {% elif catalog_total and catalog_analyzed < catalog_total %}
    <div class="empty-state empty-state-info">
      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#6c63ff" stroke-width="1.5"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
      <p><strong>{{ catalog_analyzed }} of {{ catalog_total }} songs are ready so far.</strong></p>
      <p>Matching only searches analyzed songs, and none of the
         {{ catalog_analyzed }} analyzed so far fit this brief. More songs will appear
         here as analysis continues — try again in a few minutes.</p>
      <p><a href="/analyze" class="btn btn-primary btn-sm">View analysis progress →</a></p>
    </div>
    {% else %}
    <div class="empty-state">
      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#555570" stroke-width="1.5"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
      <p>No matches found. Try rephrasing the brief or using different genre/mood keywords.</p>
    </div>
    {% endif %}

    {% else %}
    <div class="empty-state">
      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#555570" stroke-width="1.5"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/><path d="M8 11h6M11 8v6"/></svg>
      <p>Paste a brief on the left and hit <strong>Find Matching Songs</strong>.</p>
    </div>
    {% endif %}
  </div>
</div>

<!-- Create Folder Modal -->
<div class="modal-overlay" id="folder-modal" style="display:none">
  <div class="modal">
    <div class="modal-header">
      <h3>Save as Pitch Folder</h3>
      <button onclick="closeFolderModal()" class="modal-close">×</button>
    </div>
    <div class="modal-body">
      <p class="modal-desc">Creates a folder with copies of the selected songs (or all matches if none selected).</p>
      <div class="form-group">
        <label>Folder Name</label>
        <input type="text" id="folder-name" class="form-input" placeholder="e.g. tripleS — Fujipacific (Due May 5)">
      </div>
      <div id="selected-count" class="form-hint"></div>
    </div>
    <div class="modal-footer">
      <button onclick="closeFolderModal()" class="btn btn-ghost">Cancel</button>
      <button onclick="createFolder()" class="btn btn-primary">Create Folder</button>
    </div>
  </div>
</div>

{% endblock %}

{% block scripts %}
<style>
/* ── Brief tabs ─────────────────────────────────────────── */
.brief-tabs { display:flex; gap:4px; margin-bottom:12px; border-bottom:1px solid rgba(255,255,255,.08); }
.brief-tab { background:none; border:none; color:#888; font-size:.85rem; padding:7px 14px 9px;
             cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s,border-color .15s; }
.brief-tab.active { color:#d4a0ff; border-bottom-color:#d4a0ff; }
.brief-tab:hover:not(.active) { color:#ccc; }
.brief-pane { }

/* ── Upload zone ─────────────────────────────────────────── */
.upload-drop-zone { border:2px dashed rgba(255,255,255,.15); border-radius:10px;
  padding:36px 20px 28px; text-align:center; cursor:pointer; transition:border-color .2s;
  position:relative; }
.upload-drop-zone:hover { border-color:rgba(255,255,255,.3); }
.upload-drop-zone.drag-over { border-color:#d4a0ff; background:rgba(212,160,255,.05); }
.upload-hint { color:#888; margin:10px 0 16px; font-size:.9rem; }
.upload-label { cursor:pointer; position:relative; z-index:2; }
.upload-file-input { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.upload-chosen { margin-top:8px; font-size:.85rem; color:#b8f0b0; background:rgba(184,240,176,.1);
  border-radius:6px; padding:5px 10px; display:inline-block; }
.form-hint { color:#666; font-size:.8rem; margin-top:8px; }
.alert { padding:10px 14px; border-radius:8px; margin-bottom:12px; font-size:.88rem; }
.alert-error { background:rgba(255,80,80,.12); color:#ff9090; border:1px solid rgba(255,80,80,.2); }
/* Informational state — analysis still running, unresolved artist ref, etc. Not a failure. */
.alert-info { background:rgba(108,99,255,.12); color:#b7b2ff; border:1px solid rgba(108,99,255,.25); line-height:1.5; }
.alert-info a { color:#b7b2ff; text-decoration:underline; }
.empty-state-info p { margin:6px 0; line-height:1.55; }
.empty-state-info { color:#c9c6e8; }
/* ── Vocal gender tags ───────────────────────────────────── */
.tag-female { background:rgba(255,160,200,.15); color:#ffb0d0; border:1px solid rgba(255,160,200,.2); }
.tag-male   { background:rgba(100,160,255,.15); color:#90c0ff; border:1px solid rgba(100,160,255,.2); }
.tag-vocal  { font-size:.75rem; padding:2px 7px; border-radius:4px; }
</style>
<script>
function switchBriefTab(tab) {
  document.getElementById('pane-paste').style.display   = tab === 'paste'  ? '' : 'none';
  document.getElementById('pane-upload').style.display  = tab === 'upload' ? '' : 'none';
  document.getElementById('tab-paste').classList.toggle('active',  tab === 'paste');
  document.getElementById('tab-upload').classList.toggle('active', tab === 'upload');
  // When switching to paste tab, clear the file input so it doesn't override
  if (tab === 'paste') {
    try { document.getElementById('brief_file').value = ''; } catch(e) {}
  }
}

function onFileChosen(fileOrInput) {
  // Accepts either a File object or an <input> element
  const file = (fileOrInput instanceof File) ? fileOrInput
               : (fileOrInput.files && fileOrInput.files[0]);
  if (!file) return;
  const zone = document.getElementById('upload-zone');
  zone.querySelector('.upload-hint').textContent = '📎 ' + file.name;
  zone.style.borderColor = '#d4a0ff';
}

// Make the entire drop zone trigger the file picker when clicked.
// The native label→input click handles the "Choose File" button itself
// (we let it bubble so we don't double-fire on label clicks).
document.getElementById('upload-zone').addEventListener('click', function(e) {
  if (e.target.tagName === 'INPUT') return;                    // already the input
  if (e.target.closest('.upload-label')) return;               // native label handles it
  document.getElementById('brief_file').click();
});

// Drag-and-drop support — uses DataTransfer to properly assign files to the input
(function() {
  const zone  = document.getElementById('upload-zone');
  const input = document.getElementById('brief_file');
  if (!zone || !input) return;

  zone.addEventListener('dragover',  e => { e.preventDefault(); zone.classList.add('drag-over'); });
  zone.addEventListener('dragleave', () => zone.classList.remove('drag-over'));
  zone.addEventListener('drop', e => {
    e.preventDefault();
    zone.classList.remove('drag-over');
    const files = e.dataTransfer.files;
    if (!files.length) return;

    // Use DataTransfer API to properly set the file input's files property
    try {
      const dt = new DataTransfer();
      dt.items.add(files[0]);
      input.files = dt.files;
    } catch (_) {
      // Older browsers: DataTransfer constructor may not be available
      // Fall back to reading the file via FileReader for .txt files
    }
    switchBriefTab('upload');
    onFileChosen(files[0]);
  });
})();

// If returning from a file upload submission, stay on upload tab
{% if upload_filename %}switchBriefTab('upload');{% endif %}

// ── Clear / reset brief: wipes textarea, file input, and any existing results ─
function clearBrief() {
  const ta = document.getElementById('brief');
  if (ta) ta.value = '';
  const fileInput = document.getElementById('brief_file');
  if (fileInput) {
    try { fileInput.value = ''; } catch(e) {}
  }
  // Reset upload zone visuals (hint text + border)
  const zone = document.getElementById('upload-zone');
  if (zone) {
    const hint = zone.querySelector('.upload-hint');
    if (hint) hint.innerHTML = 'Drop a <strong>.txt</strong>, <strong>.pdf</strong>, <strong>.docx</strong>, or <strong>.rtf</strong> file here';
    zone.style.borderColor = '';
  }
  // If we're showing prior results, navigate back to a clean /match
  const hasResults = document.getElementById('results-list');
  if (hasResults) {
    window.location.href = '/match';
    return;
  }
  // Otherwise hide the clear button until something is typed again
  const btn = document.getElementById('clear-btn');
  if (btn) btn.style.display = 'none';
  if (ta) ta.focus();
}

// Show the Clear button whenever there's anything to clear:
//   • text typed/pasted into the brief textarea, OR
//   • a file chosen in the upload pane.
(function() {
  const ta   = document.getElementById('brief');
  const file = document.getElementById('brief_file');
  const btn  = document.getElementById('clear-btn');
  if (!btn) return;

  function refresh() {
    const hasText = ta && ta.value.trim().length > 0;
    const hasFile = file && file.files && file.files.length > 0;
    btn.style.display = (hasText || hasFile) ? 'flex' : 'none';
  }

  if (ta) {
    ta.addEventListener('input', refresh);
    ta.addEventListener('paste', () => setTimeout(refresh, 0));
  }
  if (file) file.addEventListener('change', refresh);

  // Initial state: only matters when re-rendered after a submit
  refresh();
})();
</script>
<script>
function openFolderModal() {
  const checked = document.querySelectorAll('.song-check:checked');
  const total   = document.querySelectorAll('.song-check').length;
  const count   = checked.length || total;
  document.getElementById('selected-count').textContent =
    checked.length > 0 ? `${count} songs selected` : `All ${total} results will be included`;
  document.getElementById('folder-modal').style.display = 'flex';
}

function closeFolderModal() {
  document.getElementById('folder-modal').style.display = 'none';
}

async function createFolder() {
  const name = document.getElementById('folder-name').value.trim();
  if (!name) { alert('Please enter a folder name.'); return; }

  const checked = document.querySelectorAll('.song-check:checked');
  let ids;
  if (checked.length > 0) {
    ids = Array.from(checked).map(c => parseInt(c.value));
  } else {
    ids = Array.from(document.querySelectorAll('.song-check')).map(c => parseInt(c.value));
  }

  const btn = document.querySelector('.modal-footer .btn-primary');
  btn.textContent = 'Creating…';
  btn.disabled = true;

  const resp = await fetch('/api/create-folder', {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({name, song_ids: ids})
  });
  const data = await resp.json();

  if (data.error) {
    alert('Error: ' + data.error);
  } else {
    closeFolderModal();
    if (confirm(`✅ Folder created with ${data.copied.length} songs.\n\nOpen it in Finder?`)) {
      await fetch('/api/open-folder', {
        method: 'POST',
        headers: {'Content-Type':'application/json'},
        body: JSON.stringify({path: data.folder})
      });
    }
  }
  btn.textContent = 'Create Folder';
  btn.disabled = false;
}

// Highlight selected cards
document.addEventListener('change', e => {
  if (e.target.classList.contains('song-check')) {
    const card = e.target.closest('.result-card');
    if (e.target.checked) card.classList.add('selected');
    else card.classList.remove('selected');
  }
});

// ── Mini audio player ──────────────────────────────────────────
(function() {
  var audio = document.createElement('audio');
  audio.preload = 'none';
  document.body.appendChild(audio);
  var currentBtn = null;

  function setPlaying(btn, playing) {
    btn.querySelector('.icon-play').style.display  = playing ? 'none' : '';
    btn.querySelector('.icon-pause').style.display = playing ? ''     : 'none';
    if (playing) btn.classList.add('playing');
    else         btn.classList.remove('playing');
  }

  document.querySelectorAll('.play-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var songId = this.dataset.songId;
      if (currentBtn === this && !audio.paused) {
        audio.pause();
        setPlaying(this, false);
        return;
      }
      if (currentBtn && currentBtn !== this) { setPlaying(currentBtn, false); }
      audio.src = '/audio/' + songId;
      audio.play().catch(function(){});
      setPlaying(btn, true);
      currentBtn = btn;
    });
  });

  audio.addEventListener('ended', function() {
    if (currentBtn) { setPlaying(currentBtn, false); currentBtn = null; }
  });
  audio.addEventListener('error', function() {
    if (currentBtn) { setPlaying(currentBtn, false); currentBtn = null; }
  });
})();
</script>
{% endblock %}