function promptManualSearch() {
  const query = prompt("Enter track name and artist manually (e.g. 'Alphaville Big in Japan'):");
  if (query && query.trim()) {
    simulateRecognition(query.trim());
  }
}

function renderSuggestions(currentKey) {
  const sugContainer = document.getElementById('suggestions');
  sugContainer.innerHTML = '';
  
  if (!currentKey || !window.mixingRules[currentKey]) {
    sugContainer.innerHTML = '<div style="color:var(--text-dim);font-size:12px;">No suggestions available.</div>';
    return;
  }
  
  // Create some dummy suggestions based on the rules for the mockup
  const compatKeys = window.mixingRules[currentKey].slice(1);
  const dummySuggestions = compatKeys.map((c, i) => {
    return {
      c: c,
      m: window.camelotToMusicKey[c],
      color: window.colorMatrix[c],
      title: `Dummy Track ${i+1}`,
      artist: `Artist ${c}`,
      bpm: 120 + Math.floor(Math.random() * 10 - 5),
      compat: i + 1 // 1=Quinte-1, 2=Quinte+1, etc.
    };
  });
  
  dummySuggestions.forEach(s => {
    const div = document.createElement('div');
    div.className = 'sug';
    const idSafe = `sug-cover-${s.c.replace(/\s/g,'_')}-${s.title.replace(/[^A-Za-z0-9]/g,'')}`;
    div.innerHTML = `
      <div class="sug-cover" id="${idSafe}">
        <div class="sug-cover-placeholder">♪</div>
      </div>
      <div class="sug-meta">
        <div class="sug-key" style="background:${s.color}">${s.c}</div>
        <div class="sug-bpm">${s.bpm} BPM</div>
      </div>
      <div>
        <div class="sug-title">${s.title}</div>
        <div class="sug-artist">${s.artist} · ${s.m}</div>
      </div>
      <div class="sug-compat">${window.compatLabels[s.compat]}</div>
    `;
    sugContainer.appendChild(div);
    window.fetchCover(`${s.artist} ${s.title}`, div.querySelector('.sug-cover'));
  });
}

// Temporary simulation function to show the UI working
function simulateRecognition(query) {
  // Try to extract artist and title simply
  const parts = query.split(' ');
  const title = parts.slice(0, Math.max(1, parts.length - 1)).join(' ');
  const artist = parts[parts.length - 1] || 'Unknown';
  
  // Pick a random key for the demo
  const keysArr = Object.keys(window.colorMatrix);
  const randomKey = keysArr[Math.floor(Math.random() * keysArr.length)];
  const bpm = 110 + Math.floor(Math.random() * 30);
  
  updateHero({
    title,
    artist,
    key: randomKey,
    bpm: bpm,
    match: '99%',
    tags: [randomKey, 'Electronic', 'Pop']
  });
}

function updateHero(track) {
  window.currentTrack = track;
  
  document.getElementById('track-title').textContent = track.title;
  document.getElementById('track-artist').textContent = track.artist;
  
  document.getElementById('stat-key').textContent = track.key;
  document.getElementById('stat-key').style.color = window.colorMatrix[track.key];
  document.getElementById('stat-key-sub').textContent = window.camelotToMusicKey[track.key];
  
  document.getElementById('stat-bpm').textContent = track.bpm;
  document.getElementById('stat-match').textContent = track.match;
  
  // Update tags
  const tagsRow = document.getElementById('tags-row');
  tagsRow.innerHTML = '';
  track.tags.forEach(tag => {
    const span = document.createElement('span');
    span.className = 'tag ' + (tag === track.key ? 'tag-key' : 'tag-genre');
    if (tag === track.key) {
      span.style.background = window.colorMatrix[track.key];
    }
    span.textContent = tag;
    tagsRow.appendChild(span);
  });
  
  // Update Hero Border
  document.documentElement.style.setProperty('--key-current', window.colorMatrix[track.key]);
  
  // Update Wheel
  window.updateWheel(track.key);
  
  // Fetch Cover
  window.fetchCover(`${track.artist} ${track.title}`, document.getElementById('cover'));
  
  // Update Suggestions
  renderSuggestions(track.key);
}

// Set initial mock state for preview
setTimeout(() => {
  simulateRecognition("Alphaville Made in Japan");
}, 500);