// WHO AM I tab — info on Karate Wiener, voiced welcome + testimonial gallery + a chat
// modal. Tutorial STEP 1: the rail tab pulses on first start until opened.
(function () {
  var TKEY = 'kimodoTutorial';
  function load() { try { return JSON.parse(localStorage.getItem(TKEY) || '{}') || {}; } catch (e) { return {}; } }
  function save(o) { try { localStorage.setItem(TKEY, JSON.stringify(o)); } catch (e) {} }
  function tab() { return document.getElementById('kimodo-whoami-toggle'); }
  function setPulse(on) { var t = tab(); if (t) t.classList.toggle('kimodo-whoami-pulse', !!on); }
  function seen() { return !!load().whoamiSeen; }
  function applyState() { setPulse(!seen()); }
  function markSeen() { var o = load(); if (!o.whoamiSeen) { o.whoamiSeen = true; save(o); } setPulse(false); }

  function whoamiBase() {
    var b = (typeof DATASET_BASE !== 'undefined' && DATASET_BASE) ? DATASET_BASE : '';
    return b + '/viewer/whoami/';
  }
  var TESTIMONIALS = 4;
  var built = false;
  var galleryImages = [];   // testimonial srcs (lightbox swipes through these)
  var welcomeBtn = null;    // the welcome speak/stop button (right of the hero image)
  var welcomePlayedThisSession = false; // auto-play the welcome voice only once per page load
  var topChatBtn = null;    // the top-right "tap to chat" shortcut (beside the volume button)

  // Toggle the loading shimmer on the top-right chat shortcut while a reply (text) or its
  // voice (TTS) is being generated — mirrors the dojo "generating" overlay.
  function refreshTopChat() {
    if (topChatBtn) topChatBtn.classList.toggle('loading', chatBusy || speakActive);
  }
  // Top-right chat shortcut so you can talk to Karate Wiener from anywhere (no WHO AM I tab).
  function installTopChat() {
    if (document.getElementById('kw-topchat')) return;
    // On *.hf.space the HF header (like / community / links) lives at the top-right, so push our
    // floating buttons down below it (see .kw-on-space rules in whoami.tab.css).
    if (/\.hf\.space$/i.test(location.hostname)) document.documentElement.classList.add('kw-on-space');
    topChatBtn = document.createElement('button');
    topChatBtn.id = 'kw-topchat'; topChatBtn.className = 'kw-topchat'; topChatBtn.type = 'button';
    topChatBtn.title = 'Chat with Karate Wiener';
    topChatBtn.innerHTML = '<span class="kw-topchat-ic">💬</span>';
    topChatBtn.addEventListener('click', function () { openChat(); });
    document.body.appendChild(topChatBtn);
  }

  function buildWhoami() {
    if (built) return;
    var base = whoamiBase();
    var hero = document.getElementById('kimodo-whoami-hero-img');
    if (hero && !hero.getAttribute('src')) hero.src = base + 'weiner.webp';
    welcomeBtn = document.getElementById('kimodo-whoami-wspeak');
    if (welcomeBtn && !welcomeBtn._wired) { welcomeBtn._wired = true; wireSpeak(welcomeBtn, '', false, base + 'wiener-welcome.wav'); }
    var gal = document.getElementById('kimodo-whoami-gallery');
    if (gal && !gal.childNodes.length) {
      galleryImages = [];
      for (var i = 1; i <= TESTIMONIALS; i++) {
        var src = base + 'testimonial-' + i + '.webp';
        galleryImages.push(src);
        var img = document.createElement('img');
        img.src = src; img.alt = 'Student testimonial ' + i; img.loading = 'lazy';
        img.addEventListener('click', (function (idx) { return function () { openLightbox(idx); }; })(i - 1));
        gal.appendChild(img);
      }
    }
    var chatBtn = document.getElementById('kimodo-whoami-chatbtn');
    if (chatBtn && !chatBtn._wired) {
      chatBtn._wired = true;
      var av = document.getElementById('kimodo-whoami-chatav');
      if (av && !av.getAttribute('src')) av.src = base + 'wiener-meditate.webp';
      chatBtn.addEventListener('click', openChat);
    }
    built = true;
  }

  // ---- Shared voice player ---------------------------------------------------
  // ONE <audio> element for every voice (welcome + chat). iOS only auto-plays audio that
  // was first started inside a user gesture; reusing a single element that a gesture-play
  // (the welcome on tab tap / the chat-intro on open) has "unlocked" lets later replies
  // auto-play without their own gesture. Only one voice plays at a time.
  var voiceEl = null, curBtn = null;
  function voiceElement() {
    if (voiceEl) return voiceEl;
    voiceEl = document.createElement('audio');
    voiceEl.setAttribute('playsinline', ''); voiceEl.style.display = 'none';
    document.body.appendChild(voiceEl);
    voiceEl.addEventListener('ended', function () { if (curBtn && curBtn._set) curBtn._set('idle'); curBtn = null; });
    return voiceEl;
  }
  function playVoice(src, btn) {
    var a = voiceElement();
    if (curBtn && curBtn !== btn && curBtn._set) curBtn._set('idle');   // switch: reset the previous button
    curBtn = btn;
    try { a.src = src; a.currentTime = 0; } catch (e) {}
    var pr = a.play();
    if (pr && pr.then) pr.then(function () { if (btn._set) btn._set('playing'); }).catch(function () { if (btn._set) btn._set('idle'); });
    else if (btn._set) btn._set('playing');
  }
  function stopVoice() {
    var a = voiceElement();
    try { a.pause(); a.currentTime = 0; } catch (e) {}
    if (curBtn && curBtn._set) curBtn._set('idle');
    curBtn = null;
  }
  function isVoicePlaying() { return !!(voiceEl && !voiceEl.paused && !voiceEl.ended); }

  // wiener-speak shares ONE hidden gradio trigger/result → serialize so concurrent TTS
  // requests never cross (a message playing another's audio).
  var speakQueue = [], speakActive = false;
  function enqueueSpeak(text, cb) { speakQueue.push({ text: text, cb: cb }); pumpSpeak(); }
  function pumpSpeak() {
    if (speakActive || !speakQueue.length) return;
    speakActive = true; refreshTopChat();
    var job = speakQueue.shift();
    wienerTrigger('wiener-speak', { text: job.text }, 120000, function (r) {
      speakActive = false; refreshTopChat();
      try { job.cb(r); } finally { pumpSpeak(); }
    });
  }
  // Icon speak button: ▶ play / ■ stop, spinner while the voice loads. `fixedUrl` voices it
  // from a static file (welcome / chat-intro — no TTS). Plays the moment it's ready; the
  // cached src means replays are instant and always play THIS message's audio.
  function wireSpeak(btn, text, autostart, fixedUrl) {
    var src = fixedUrl || null;
    btn._set = function (state) {
      btn.dataset.state = state;
      btn.innerHTML = state === 'loading' ? '<span class="kw-ld" aria-label="loading"></span>' : (state === 'playing' ? '■' : '▶');
      btn.title = state === 'loading' ? 'loading voice…' : (state === 'playing' ? 'stop' : 'play voice');
      btn.classList.toggle('loading', state === 'loading');
      btn.classList.toggle('playing', state === 'playing');
    };
    btn._play = function () {
      if (src) { playVoice(src, btn); return; }
      btn._set('loading');
      enqueueSpeak(text, function (r) {
        if (r && r.ok && r.audio) { src = r.audio; playVoice(src, btn); }
        else btn._set('idle');   // failed → ▶ (tap to retry)
      });
    };
    btn.addEventListener('click', function () {
      var s = btn.dataset.state;
      if (s === 'loading') return;
      if (s === 'playing') { stopVoice(); return; }
      btn._play();
    });
    if (autostart) btn._play(); else btn._set('idle');
  }

  // ---- Chat with Karate Wiener (phone-messaging modal) ----------------------
  var chatHistory = [];
  var modal = null, msgsEl = null, textEl = null, sendBtn = null, chatBusy = false;
  function wienerTrigger(prefix, payloadObj, timeoutMs, cb) {
    var trigger = document.querySelector('#' + prefix + '-btn button, #' + prefix + '-btn');
    var payloadInput = (typeof inputInside === 'function') ? inputInside(prefix + '-payload') : null;
    var resultInput = (typeof inputInside === 'function') ? inputInside(prefix + '-result') : null;
    if (!trigger || !payloadInput || !resultInput) { cb(null); return; }
    resultInput.value = '';
    payloadInput.value = JSON.stringify(payloadObj);
    payloadInput.dispatchEvent(new Event('input', { bubbles: true }));
    var started = Date.now();
    var timer = setInterval(function () {
      var val = resultInput.value;
      if (val) { clearInterval(timer); finish(val); }
      else if (Date.now() - started > timeoutMs) { clearInterval(timer); cb(null); }
    }, 400);
    setTimeout(function () { trigger.click(); }, 40);
    function finish(val) { var r = null; try { r = JSON.parse(val); } catch (e) {} cb(r); }
  }
  function autoGrow() { if (!textEl) return; textEl.style.height = 'auto'; textEl.style.height = Math.min(96, textEl.scrollHeight) + 'px'; }
  function scrollBottom() { if (msgsEl) msgsEl.scrollTop = msgsEl.scrollHeight; }
  function buildModal() {
    if (modal) return modal;
    var base = whoamiBase();
    modal = document.createElement('div'); modal.className = 'kimodo-wiener-chat';
    modal.innerHTML =
      '<div class="kw-chat-frame">' +
        '<div class="kw-chat-head"><img alt="Karate Wiener" /><div class="kw-name">Karate Wiener<span class="kw-sub">blue belt · spiritual &amp; legal advisor</span></div><button type="button" class="kw-chat-close" aria-label="Close">✕</button></div>' +
        '<div class="kw-chat-msgs" id="kw-chat-msgs"></div>' +
        '<div class="kw-chat-input"><textarea id="kw-chat-text" rows="1" placeholder="Message the master…"></textarea><button type="button" class="kw-chat-send" id="kw-chat-send" aria-label="Send">➤</button></div>' +
      '</div>';
    modal.querySelector('.kw-chat-head img').src = base + 'wiener-meditate.webp';
    document.body.appendChild(modal);
    msgsEl = modal.querySelector('#kw-chat-msgs');
    textEl = modal.querySelector('#kw-chat-text');
    sendBtn = modal.querySelector('#kw-chat-send');
    modal.querySelector('.kw-chat-close').addEventListener('click', closeChat);
    modal.addEventListener('click', function (e) { if (e.target === modal) closeChat(); });
    // Don't let taps inside the modal reach the document handler that closes the drawer.
    modal.addEventListener('pointerdown', function (e) { e.stopPropagation(); });
    sendBtn.addEventListener('click', sendMessage);
    textEl.addEventListener('keydown', function (e) { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } });
    textEl.addEventListener('input', autoGrow);
    return modal;
  }
  function openChat() {
    buildModal();
    modal.classList.add('open');
    // First message uses the fixed chat-intro recording (no TTS — it's always the same, so
    // we save generation cost). Playing it here (inside the chat-button tap) unlocks the
    // shared voice element, so later replies can auto-play without their own gesture.
    // Don't interrupt an in-progress voice (e.g. the welcome) when entering chat. Only auto-play
    // the chat-intro on first open if nothing is currently speaking.
    if (!chatHistory.length) addWiener('Welcome, my student. Ask me anything — karate, the spirit, or the law. Osu!', !isVoicePlaying(), whoamiBase() + 'chat-intro.wav');
    setTimeout(function () { if (textEl) textEl.focus(); }, 80);
  }
  function closeChat() { if (modal) modal.classList.remove('open'); }
  function addUser(text) {
    var row = document.createElement('div'); row.className = 'kw-msg kw-user';
    var b = document.createElement('div'); b.className = 'kw-bubble'; b.textContent = text;
    row.appendChild(b); msgsEl.appendChild(row); scrollBottom();
    chatHistory.push({ role: 'user', content: text });
  }
  // Wiener message: avatar, bubble, then the play/stop ICON to the right of the message.
  function addWiener(text, autospeak, fixedUrl) {
    var row = document.createElement('div'); row.className = 'kw-msg kw-wiener';
    var av = document.createElement('img'); av.className = 'kw-msgav'; av.src = whoamiBase() + 'wiener-meditate.webp'; av.alt = '';
    var spk = document.createElement('button'); spk.type = 'button'; spk.className = 'kw-speak';
    var b = document.createElement('div'); b.className = 'kw-bubble'; b.textContent = text;
    row.appendChild(av); row.appendChild(b); row.appendChild(spk);
    msgsEl.appendChild(row); scrollBottom();
    chatHistory.push({ role: 'wiener', content: text });
    wireSpeak(spk, text, autospeak !== false, fixedUrl);
  }
  function sendMessage() {
    if (chatBusy || !textEl) return;
    var text = (textEl.value || '').trim();
    if (!text) return;
    textEl.value = ''; autoGrow();
    addUser(text);
    chatBusy = true; refreshTopChat(); if (sendBtn) sendBtn.disabled = true;
    var typing = document.createElement('div'); typing.className = 'kw-typing'; typing.innerHTML = '<span></span><span></span><span></span>';
    msgsEl.appendChild(typing); scrollBottom();
    var hist = chatHistory.slice(0, -1);   // exclude the just-added user turn (backend appends it)
    wienerTrigger('wiener-chat', { history: hist, message: text }, 120000, function (r) {
      if (typing.parentNode) typing.parentNode.removeChild(typing);
      chatBusy = false; refreshTopChat(); if (sendBtn) sendBtn.disabled = false;
      if (r && r.ok && r.reply) addWiener(r.reply, true);
      else addWiener('The path is quiet right now, my student. Ask me again. Osu!', true);
    });
  }

  // ---- Testimonial lightbox (swipable) --------------------------------------
  var lb = null, lbImg = null, lbIdx = 0;
  function ensureLightbox() {
    if (lb) return lb;
    lb = document.createElement('div'); lb.className = 'kimodo-whoami-lightbox';
    lbImg = document.createElement('img'); lbImg.className = 'kimodo-whoami-lbimg'; lbImg.alt = 'Testimonial';
    var close = document.createElement('button'); close.type = 'button'; close.className = 'kimodo-whoami-lbclose'; close.setAttribute('aria-label', 'Close'); close.textContent = '✕';
    var prev = document.createElement('button'); prev.type = 'button'; prev.className = 'kimodo-whoami-lbnav kw-prev'; prev.setAttribute('aria-label', 'Previous'); prev.textContent = '‹';
    var next = document.createElement('button'); next.type = 'button'; next.className = 'kimodo-whoami-lbnav kw-next'; next.setAttribute('aria-label', 'Next'); next.textContent = '›';
    lb.appendChild(lbImg); lb.appendChild(close); lb.appendChild(prev); lb.appendChild(next);
    document.body.appendChild(lb);
    // Keep clicks/taps inside the lightbox from reaching the document handler that dismisses
    // the WHO AM I drawer — closing the lightbox must leave the tab open.
    lb.addEventListener('pointerdown', function (e) { e.stopPropagation(); });
    lb.addEventListener('click', function (e) { if (e.target === lb) closeLightbox(); });   // backdrop only
    close.addEventListener('click', function (e) { e.stopPropagation(); closeLightbox(); });
    prev.addEventListener('click', function (e) { e.stopPropagation(); showLb(lbIdx - 1); });
    next.addEventListener('click', function (e) { e.stopPropagation(); showLb(lbIdx + 1); });
    // Swipe left/right to move between testimonials.
    var sx = 0, sy = 0;
    lb.addEventListener('touchstart', function (e) { var t = e.changedTouches[0]; sx = t.clientX; sy = t.clientY; }, { passive: true });
    lb.addEventListener('touchend', function (e) { var t = e.changedTouches[0]; var dx = t.clientX - sx, dy = t.clientY - sy; if (Math.abs(dx) > 40 && Math.abs(dx) > Math.abs(dy)) showLb(lbIdx + (dx < 0 ? 1 : -1)); }, { passive: true });
    return lb;
  }
  function showLb(idx) {
    if (!galleryImages.length) return;
    lbIdx = (idx + galleryImages.length) % galleryImages.length;   // wrap around
    ensureLightbox(); lbImg.src = galleryImages[lbIdx];
  }
  function openLightbox(idx) { ensureLightbox(); showLb(idx || 0); lb.classList.add('open'); }
  function closeLightbox() { if (lb) lb.classList.remove('open'); }

  window.addEventListener('keydown', function (e) {
    var lbOpen = lb && lb.classList.contains('open');
    if (e.key === 'Escape') { closeLightbox(); closeChat(); }
    else if (lbOpen && e.key === 'ArrowLeft') showLb(lbIdx - 1);
    else if (lbOpen && e.key === 'ArrowRight') showLb(lbIdx + 1);
  });

  // Opening the WHO AM I drawer completes step 1, builds the panel, and plays the welcome
  // voice (inside the tab-tap gesture, so it actually auto-plays + unlocks the voice element).
  window.addEventListener('kimodo-drawer-open', function (e) {
    if (e.detail === 'kimodo-whoami-drawer') { markSeen(); buildWhoami(); if (welcomeBtn && !welcomePlayedThisSession) { welcomePlayedThisSession = true; welcomeBtn._play(); } }
  });

  // Restart the tutorial (from the account drawer): re-arm step 1's pulse.
  window.addEventListener('kimodo-tutorial-restart', function () {
    var o = load(); o.whoamiSeen = false; save(o); setPulse(true);
    welcomePlayedThisSession = false;   // re-arm the auto welcome voice for the demo replay
  });

  // Don't start the first-run pulse until the intro TITLE overlay has finished.
  function gateInitialPulse() {
    var present = function () { return !!document.getElementById('kw-title-overlay'); };
    var sawIntro = present();
    var iv = setInterval(function () {
      if (present()) { sawIntro = true; return; }
      if (sawIntro) { clearInterval(iv); applyState(); }
    }, 250);
    setTimeout(function () { if (!sawIntro && !present()) { clearInterval(iv); applyState(); } }, 1300);
    setTimeout(function () { clearInterval(iv); applyState(); }, 15000);
  }
  gateInitialPulse();
  installTopChat();
  // Warm the voice file caches once DATASET_BASE is ready so the first welcome / chat-intro
  // plays instantly.
  setTimeout(function () {
    try {
      ['wiener-welcome.wav', 'chat-intro.wav'].forEach(function (f) {
        var a = document.createElement('audio'); a.preload = 'auto'; a.src = whoamiBase() + f; a.style.display = 'none'; document.body.appendChild(a); a.load();
      });
    } catch (e) {}
  }, 1500);
})();