{% extends "quiz_base.html" %}
{% block quiz_content %}
  <div id="multiplayerBar" style="display:none;margin-bottom:15px;text-align:center;">
    <span id="multiplayerPlayers"></span>
  </div>
  <div style="text-align:center; margin-bottom: 10px;">
    <span id="progressInfo">{{ translations['songs_in_playlist'] }} {{ total_questions }}</span>
  </div>
  <div style="text-align:center; margin-bottom: 20px;">
    <a href="/reset_quiz/{{ playlist_id }}?local_multiplayer=1" class="btn btn-danger" style="margin-top:10px;">{{ translations['end_quiz'] }}</a>
  </div>
  <h2 id="question-text" style="color:#fff;">{{ translations['question_artist'] }}</h2>
  <input type="hidden" id="device_id" value="">
  <div class="game-modes" style="margin-bottom:20px;">
    <button class="btn {{ 'btn-success' if game_mode == 'artist' else 'btn-secondary' }}" onclick="switchGameMode('artist')">{{ translations['guess_artist'] }}</button>
    <button class="btn {{ 'btn-success' if game_mode == 'title' else 'btn-secondary' }}" onclick="switchGameMode('title')">{{ translations['guess_title'] }}</button>
    <button class="btn {{ 'btn-success' if game_mode == 'year' else 'btn-secondary' }}" onclick="switchGameMode('year')">{{ translations['guess_year'] }}</button>
  </div>
  <div class="game-options" style="margin-bottom:20px;">
    <label>{{ translations['play_duration'] }}:
      <select id="playDuration" onchange="onPlayDurationChange()">
        <option value="10">10s</option>
        <option value="15">15s</option>
        <option value="30">30s</option>
        <option value="0" selected>{{ translations['unlimited'] }}</option>
        <option value="custom">{{ translations['custom'] }}</option>
      </select>
      <input type="number" id="customDuration" min="1" max="600" style="width:60px;display:none;" placeholder="Sek." onchange="setOption('playDuration', this.value)">
      <span id="customDurationLabel" style="display:none;">s</span>
    </label>
    <label style="margin-left:20px;">{{ translations['start_position'] }}:
      <select id="startPosition" onchange="setOption('startPosition', this.value)">
        <option value="start" selected>{{ translations['start'] }}</option>
        <option value="random">{{ translations['random'] }}</option>
      </select>
    </label>
  </div>
  <div class="controls" style="text-align: center; margin-bottom:20px;">
    <button id="replayBtn" class="btn" onclick="replayDuration()">{{ translations['play_duration'] }} +</button>
  </div>
  <div style="text-align: center; margin-top: 10px;">
    <input type="text" id="answerInput" placeholder="{{ translations['input_artist'] }}" oninput="searchTracks()" style="background:#222; color:#fff;">
    <button class="btn" onclick="checkAnswer()">{{ translations['answer_button'] }}</button>
    <div id="searchResults" class="search-results"></div>
    <div id="resultContainer" class="result-container" style="background:#222; color:#fff; border:1px solid #444;"></div>
    <a id="nextQuestionBtn" href="/quiz/{{ playlist_id }}?mode={{ game_mode }}&local_multiplayer=1" class="btn" style="display: none;">{{ translations['next_question'] }}</a>
  </div>
  <div class="hint-container" style="color:#bdbdbd;">
    {% if game_mode == 'artist' %}
      <p>{{ translations['tip_artist'] }}</p>
    {% elif game_mode == 'title' %}
      <p>{{ translations['tip_title'] }}</p>
    {% elif game_mode == 'year' %}
      <p>{{ translations['tip_year'] }}</p>
    {% endif %}
  </div>
{% endblock %}
{% block extra_body %}
{% if local_multiplayer %}
<div id="multiplayerPopup" style="position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:2000;">
  <div style="background:#191414;padding:30px 40px;border-radius:18px;box-shadow:0 8px 32px 0 rgba(0,0,0,0.37);min-width:320px;text-align:center;">
    <h3>Lokaler Multiplayer</h3>
    <p>Gib bis zu 4 Spielernamen ein:</p>
    <form id="multiplayerForm" onsubmit="startMultiplayer(event)">
      <input type="text" id="player1" placeholder="Spieler 1" required style="margin:5px;width:80%"><br>
      <input type="text" id="player2" placeholder="Spieler 2" style="margin:5px;width:80%"><br>
      <input type="text" id="player3" placeholder="Spieler 3" style="margin:5px;width:80%"><br>
      <input type="text" id="player4" placeholder="Spieler 4" style="margin:5px;width:80%"><br>
      <button class="btn" type="submit" style="margin-top:10px;">Starten</button>
    </form>
  </div>
</div>
<script>
function startMultiplayer(e) {
  e.preventDefault();
  const names = [];
  for(let i=1;i<=4;i++) {
    const val = document.getElementById('player'+i).value.trim();
    if(val) names.push(val);
  }
  if(names.length < 2) {
    alert("Bitte mindestens 2 Namen eingeben!");
    return;
  }
  localStorage.setItem('quizify_multiplayer_names', JSON.stringify(names));
  localStorage.setItem('quizify_multiplayer_scores', JSON.stringify(Array(names.length).fill(0)));
  localStorage.setItem('quizify_multiplayer_current', 0);
  document.getElementById('multiplayerPopup').style.display = 'none';
  updateMultiplayerUI();
  quizifyReady();
}
</script>
{% endif %}
<script>
let allTracks = {{ all_tracks|tojson }};
let currentGameMode = "{{ game_mode }}";
let correctAnswer = "";
const i18n = {{ translations|tojson }};

window.onSpotifyWebPlaybackSDKReady = () => {
  const token = '{{ access_token }}';
  const player = new Spotify.Player({
    name: 'Musik Quiz Player',
    getOAuthToken: cb => { cb(token); },
    volume: 0.5
  });

  player.addListener('ready', ({ device_id }) => {
    document.getElementById('device_id').value = device_id;
    const playDuration = getPlayDuration();
    const startPosition = getOption('startPosition', 'start');
    let position_ms = 0;
    if (startPosition === 'random') {
      const duration = {{ track.duration_ms if track.duration_ms else 180000 }};
      position_ms = Math.floor(Math.random() * (duration - 30000));
    }
    fetch(`/play_track?device_id=${device_id}&track_uri={{ track.uri }}&position_ms=${position_ms}`, { method: 'POST' });
    if (playDuration > 0) {
      window.quizifyTimeout = setTimeout(() => { player.pause(); }, playDuration * 1000);
    }
    setCorrectAnswer();
  });

  player.connect();
  window.spotifyPlayer = player;
};

function setCorrectAnswer() {
  if (currentGameMode === 'artist') {
    correctAnswer = "{{ track.artists[0].name }}";
    document.getElementById('question-text').innerText = i18n.question_artist;
    document.getElementById('answerInput').placeholder = i18n.input_artist;
  } else if (currentGameMode === 'title' ) {
    correctAnswer = "{{ track.name }}";
    document.getElementById('question-text').innerText = i18n.question_title;
    document.getElementById('answerInput').placeholder = i18n.input_title;
  } else if (currentGameMode === 'year' ) {
    correctAnswer = "{{ track.album.release_date[:4] }}";
    document.getElementById('question-text').innerText = i18n.question_year;
    document.getElementById('answerInput').placeholder = i18n.input_year;
    document.getElementById('answerInput').type = "number";
  }
}

function searchTracks() {
  const query = document.getElementById('answerInput').value;
  if (query.length < 2) {
    document.getElementById('searchResults').style.display = 'none';
    return;
  }
  fetch('/search_track', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ query: query, all_tracks: allTracks })
  })
  .then(response => response.json())
  .then(data => {
    const resultsContainer = document.getElementById('searchResults');
    resultsContainer.innerHTML = '';
    if (data.results.length === 0) {
      resultsContainer.style.display = 'none';
      return;
    }
    data.results.forEach(result => {
      const item = document.createElement('div');
      item.className = 'search-item';
      item.innerHTML = `<strong>${result.name}</strong> - ${result.artist}`;
      item.onclick = function() {
        document.getElementById('answerInput').value = 
          currentGameMode === 'artist' ? result.artist : result.name;
        resultsContainer.style.display = 'none';
      };
      resultsContainer.appendChild(item);
    });
    resultsContainer.style.display = 'block';
  });
}

function updateMultiplayerUI() {
  const names = JSON.parse(localStorage.getItem('quizify_multiplayer_names') || "[]");
  const scores = JSON.parse(localStorage.getItem('quizify_multiplayer_scores') || "[]");
  const current = parseInt(localStorage.getItem('quizify_multiplayer_current') || "0");
  if(names.length > 1) {
    document.getElementById('multiplayerBar').style.display = '';
    let html = '';
    names.forEach((n,i) => {
      html += `<span style="margin:0 10px;${i===current?'font-weight:bold;text-decoration:underline;':''}">${n}: ${scores[i]}</span>`;
    });
    html += `<br><span style="font-size:0.95em;color:#bdbdbd;">Am Zug: <b>${names[current]}</b></span>`;
    document.getElementById('multiplayerPlayers').innerHTML = html;
    document.getElementById('answerInput').placeholder = "Antwort für " + names[current];
  }
}

function checkAnswer() {
  const names = JSON.parse(localStorage.getItem('quizify_multiplayer_names') || "[]");
  const scores = JSON.parse(localStorage.getItem('quizify_multiplayer_scores') || "[]");
  const current = parseInt(localStorage.getItem('quizify_multiplayer_current') || "0");
  const guess = document.getElementById('answerInput').value;
  if (!guess) return;

  fetch('/check_answer', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      guess: guess,
      correct_answer: correctAnswer,
      game_mode: currentGameMode,
      playlist_id: "{{ playlist_id }}"
    })
  })
  .then(response => response.json())
  .then(data => {
    const resultContainer = document.getElementById('resultContainer');
    resultContainer.style.display = 'block';
    if (data.correct) {
      resultContainer.className = 'result-container correct';
      resultContainer.innerHTML = `<h3>${i18n.correct}</h3>`;
      scores[current] = (scores[current] || 0) + 1;
      localStorage.setItem('quizify_multiplayer_scores', JSON.stringify(scores));
    } else {
      resultContainer.className = 'result-container incorrect';
      resultContainer.innerHTML = `<h3>${i18n.wrong}</h3>
        <p>${i18n.right_answer} <strong>${data.correct_answer}</strong></p>`;
    }
    // Song-Infos ergänzen
    resultContainer.innerHTML += `
      <div style="margin-top:10px;">
        <img src="{{ track.album.images[0].url }}" alt="Cover" style="width:80px;border-radius:8px;"><br>
        <strong>${i18n.song}:</strong> {{ track.name }}<br>
        <strong>${i18n.artist}:</strong> {{ track.artists[0].name }}<br>
        <strong>${i18n.album}:</strong> {{ track.album.name }}<br>
        <strong>${i18n.year}:</strong> {{ track.album.release_date[:4] }}<br>
        <a href="{{ track.external_urls.spotify }}" target="_blank" style="color:#1DB954;">${i18n.open_on_spotify}</a>
      </div>
    `;
    // Nächster Spieler
    let next = (current + 1) % names.length;
    localStorage.setItem('quizify_multiplayer_current', next);
    updateMultiplayerUI();
    document.getElementById('nextQuestionBtn').style.display = 'inline-block';
  });
}

function switchGameMode(mode) {
  // Beim Moduswechsel Multiplayer-Daten löschen
  localStorage.removeItem('quizify_multiplayer_names');
  localStorage.removeItem('quizify_multiplayer_scores');
  localStorage.removeItem('quizify_multiplayer_current');
  window.location.href = `/reset_quiz/{{ playlist_id }}?next_mode=${mode}&local_multiplayer=1`;
}

function setOption(key, value) { localStorage.setItem(key, value); }
function getOption(key, defaultValue) { return localStorage.getItem(key) || defaultValue; }

window.onload = function() {
  const playDuration = getOption('playDuration', '0');
  const sel = document.getElementById('playDuration');
  const custom = document.getElementById('customDuration');
  const label = document.getElementById('customDurationLabel');
  if (['10','15','30','0'].includes(playDuration)) {
    sel.value = playDuration;
    custom.style.display = 'none';
    label.style.display = 'none';
  } else {
    sel.value = 'custom';
    custom.value = playDuration;
    custom.style.display = '';
    label.style.display = '';
  }
  document.getElementById('startPosition').value = getOption('startPosition', 'start');

  // Prüfe, ob Namen im LocalStorage sind
  const names = JSON.parse(localStorage.getItem('quizify_multiplayer_names') || "[]");
  if (names.length < 2) {
    // Popup anzeigen
    if (document.getElementById('multiplayerPopup')) {
      document.getElementById('multiplayerPopup').style.display = 'flex';
    }
  } else {
    updateMultiplayerUI();
    quizifyReady();
  }
};

function quizifyReady() {
  // Hier alles, was nach dem Schließen des Popups passieren soll
  if (window.onSpotifyWebPlaybackSDKReady) {
    window.onSpotifyWebPlaybackSDKReady();
  }
  setCorrectAnswer();
}

function onPlayDurationChange() {
  const sel = document.getElementById('playDuration');
  const custom = document.getElementById('customDuration');
  const label = document.getElementById('customDurationLabel');
  if (sel.value === 'custom') {
    custom.style.display = '';
    label.style.display = '';
    setOption('playDuration', custom.value || '10');
  } else {
    custom.style.display = 'none';
    label.style.display = 'none';
    setOption('playDuration', sel.value);
  }
}

function getPlayDuration() {
  const sel = document.getElementById('playDuration');
  if (sel.value === 'custom') {
    return parseInt(document.getElementById('customDuration').value) || 10;
  }
  return parseInt(sel.value);
}

function replayDuration() {
  const playDuration = getPlayDuration();
  if (window.spotifyPlayer) {
    window.spotifyPlayer.resume();
    if (window.quizifyTimeout) clearTimeout(window.quizifyTimeout);
    window.quizifyTimeout = setTimeout(() => {
      window.spotifyPlayer.pause();
    }, playDuration * 1000);
  }
}
</script>
{% endblock %}