/**
 * Wal Task-Overlay — Mission-System fuer Wal-Sim.
 */
(function(){
  'use strict';
  var BASE = (window.WAL_BASE || '/geograsim/App/sims/wal/');
  var TASKS = null;
  var currentIdx = 0;

  var css = `
  #wal-overlay { position: fixed; inset: 0; background: rgba(26, 38, 32, 0.88); backdrop-filter: blur(8px); z-index: 9000; display: none; align-items: center; justify-content: center; padding: 20px; font-family: 'Hanken Grotesk', system-ui, sans-serif; }
  #wal-overlay.show { display: flex; }
  #wal-modal { background: linear-gradient(145deg, #e8ddc5, #f4ede0); color: #1a2620; border-radius: 16px; padding: 28px 32px; max-width: 580px; width: 100%; max-height: 86vh; overflow-y: auto; border: 2px solid #2d4a3e; box-shadow: 0 16px 48px rgba(0,0,0,0.4); }
  #wal-modal h2 { font-family: 'Bricolage Grotesque', system-ui, sans-serif; color: #2d4a3e; font-size: 22px; margin-bottom: 14px; font-weight: 800; }
  #wal-modal h3 { color: #4a6f5e; font-size: 16px; margin: 14px 0 8px; }
  #wal-modal p, #wal-modal li { font-size: 14px; line-height: 1.6; margin-bottom: 6px; }
  #wal-modal ul { padding-left: 22px; margin-bottom: 10px; }
  #wal-modal .expect { background: rgba(74, 124, 74, 0.15); padding: 10px 14px; border-left: 3px solid #4a7c4a; border-radius: 4px; margin: 10px 0; font-size: 13px; }
  #wal-modal .didaktik { background: rgba(184, 104, 64, 0.12); padding: 10px 14px; border-left: 3px solid #b86840; border-radius: 4px; margin: 10px 0; font-size: 13px; color: #4a3520; }
  #wal-modal button.next { background: linear-gradient(135deg, #2d4a3e, #1f3329); color: #f4ede0; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 700; cursor: pointer; font-family: inherit; font-size: 15px; margin-top: 12px; }
  #wal-modal button.next:hover { background: linear-gradient(135deg, #1f3329, #1a2620); }
  #wal-modal .quiz-q { background: rgba(255,255,255,0.6); padding: 14px; border-radius: 8px; margin-bottom: 12px; }
  #wal-modal .quiz-q .q-text { font-weight: 700; margin-bottom: 8px; color: #2d4a3e; }
  #wal-modal .quiz-q button.opt { display: block; width: 100%; text-align: left; background: #fff; color: #1a2620; border: 1px solid #b8a987; padding: 8px 12px; border-radius: 6px; margin-bottom: 5px; cursor: pointer; font-family: inherit; font-size: 13px; }
  #wal-modal .quiz-q button.opt:hover { background: #f4ede0; border-color: #2d4a3e; }
  #wal-modal .quiz-q button.opt.correct { background: rgba(74, 124, 74, 0.2); border-color: #4a7c4a; }
  #wal-modal .quiz-q button.opt.wrong { background: rgba(160, 64, 48, 0.2); border-color: #a04030; }

  #wal-tasklist { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); background: rgba(26, 38, 32, 0.92); backdrop-filter: blur(14px); border: 1px solid #4a6f5e; border-radius: 10px; padding: 8px 14px; color: #f4ede0; font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 13px; z-index: 100; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
  #wal-tasklist.show { display: flex; gap: 14px; align-items: center; }
  #wal-tasklist .lbl { font-weight: 700; color: #c9b794; }
  #wal-tasklist button { background: #2d4a3e; color: #f4ede0; border: 1px solid #4a6f5e; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 11px; }
  #wal-tasklist button:hover { background: #4a6f5e; }
  `;
  var s = document.createElement('style'); s.textContent = css; document.head.appendChild(s);

  function el(tag, cls, html) { var e = document.createElement(tag); if (cls) e.className = cls; if (html != null) e.innerHTML = html; return e; }

  function showModal(title, body, btnLabel, btnFn) {
    var overlay = document.getElementById('wal-overlay') || (function(){ var o = el('div'); o.id = 'wal-overlay'; document.body.appendChild(o); return o; })();
    overlay.innerHTML = '';
    var modal = el('div'); modal.id = 'wal-modal';
    modal.appendChild(el('h2', null, title));
    modal.appendChild(el('div', null, body));
    var btn = el('button', 'next', btnLabel);
    btn.onclick = function() { overlay.classList.remove('show'); if (btnFn) btnFn(); };
    modal.appendChild(btn);
    overlay.appendChild(modal);
    overlay.classList.add('show');
  }

  function showTask(idx) {
    if (!TASKS || !TASKS.tasks[idx]) return endGame();
    var t = TASKS.tasks[idx];
    var body = '';
    // Mode-Switch bei Bedarf (krill vs. fracht)
    if (t.mode && window.setMode) window.setMode(t.mode);
    if (t.mode) body += '<div style="background:rgba(74,124,74,0.15);padding:8px 12px;border-radius:6px;margin-bottom:10px;font-size:12px"><b>Modus:</b> ' + (t.mode === 'krill' ? '🦐 Nahrungssuche' : '🚢 Frachtroute') + '</div>';
    if (t.goal) body += '<p><b>Ziel:</b> ' + t.goal + '</p>';
    if (t.expect) body += '<div class="expect">' + t.expect + '</div>';
    if (t.quiz) {
      body += '<h3>Quiz</h3>';
      t.quiz.forEach(function(q, qi) {
        body += '<div class="quiz-q" data-q="' + qi + '"><div class="q-text">' + q.q + '</div>';
        q.a.forEach(function(opt, ai) { body += '<button class="opt" data-q="' + qi + '" data-a="' + ai + '">' + opt + '</button>'; });
        body += '</div>';
      });
    }
    if (t.didaktik) body += '<div class="didaktik">💡 ' + t.didaktik + '</div>';
    showModal(t.title, body, 'Verstanden — los!', function() {
      currentIdx = idx;
      updateTaskList();
    });
    setTimeout(function() {
      document.querySelectorAll('#wal-modal .opt').forEach(function(btn) {
        btn.onclick = function(e) {
          e.stopPropagation();
          var qi = +btn.dataset.q, ai = +btn.dataset.a;
          var correct = t.quiz[qi].correct;
          document.querySelectorAll('#wal-modal .quiz-q[data-q="' + qi + '"] .opt').forEach(function(b, i) {
            if (i === correct) b.classList.add('correct');
            else if (i === ai) b.classList.add('wrong');
            b.disabled = true;
          });
        };
      });
    }, 50);
  }

  function nextTask() {
    if (currentIdx < TASKS.tasks.length - 1) { currentIdx++; showTask(currentIdx); }
    else endGame();
  }

  function endGame() {
    showModal(TASKS.ende.title, TASKS.ende.body, '✓ Fertig', function() {
      document.getElementById('wal-tasklist').classList.remove('show');
    });
  }

  function updateTaskList() {
    var list = document.getElementById('wal-tasklist') || (function(){ var l = el('div'); l.id = 'wal-tasklist'; document.body.appendChild(l); return l; })();
    var t = TASKS.tasks[currentIdx];
    list.innerHTML =
      '<span class="lbl">🐋 ' + (currentIdx + 1) + '/' + TASKS.tasks.length + '</span>' +
      '<span>' + (t.title || '').replace(/^Mission \d+ — /, '') + '</span>' +
      '<button id="wal-show">ansehen</button>' +
      '<button id="wal-next">weiter →</button>';
    list.classList.add('show');
    document.getElementById('wal-show').onclick = function() { showTask(currentIdx); };
    document.getElementById('wal-next').onclick = nextTask;
  }

  function startOnboarding() {
    if (!TASKS) return;
    showModal(TASKS.onboarding.title, TASKS.onboarding.body, '🌊 Los geht\'s', function() {
      currentIdx = 0;
      showTask(0);
    });
  }

  fetch(BASE + 'tasks.json').then(function(r){ return r.json(); }).then(function(j) {
    TASKS = j;
    setTimeout(startOnboarding, 800);
  }).catch(function(e){ console.warn('[wal-tasks] load failed', e); });
})();