ui.js

// CodeQuest: Math Edition — UI System (blocks, zip, stars, drag-drop)

// ===== ZIP SPEECH BUBBLE =====
const ZipUI = (() => {
  let el = null;
  let hideTimer = null;

  function init() {
    el = document.getElementById('zip-bubble');
  }

  function say(msg, duration = 0) {
    if (!el) return;
    el.textContent = msg;
    el.classList.remove('hidden');
    if (hideTimer) clearTimeout(hideTimer);
    if (duration > 0) {
      hideTimer = setTimeout(() => el.classList.add('hidden'), duration);
    }
  }

  function hide() {
    if (!el) return;
    el.classList.add('hidden');
  }

  return { init, say, hide };
})();

// ===== STAR DISPLAY =====
const StarUI = (() => {
  let starsEl = null;
  let totalEl = null;

  function init() {
    starsEl = document.getElementById('puzzle-stars');
    totalEl = document.getElementById('total-stars');
  }

  function setPuzzleStars(n, max = 3) {
    if (!starsEl) return;
    const stars = '⭐'.repeat(n) + '☆'.repeat(max - n);
    starsEl.textContent = stars;
  }

  function setTotalStars(n) {
    if (!totalEl) return;
    totalEl.textContent = `Total: ${n}⭐`;
  }

  return { init, setPuzzleStars, setTotalStars };
})();

// ===== BLOCK BUILDER (palette blocks) =====
const BlocksUI = (() => {
  let palette = null;
  let programSlot = null;
  let programBlocks = [];
  let kbSelected = null; // keyboard-selected palette block index
  let dragSrc = null;
  let onProgramChange = null;
  let currentAvailable = [];

  function init(paletteEl, slotEl, onChange) {
    palette = paletteEl;
    programSlot = slotEl;
    onProgramChange = onChange;
    setupSlotDrop();
    setupKeyboard();
  }

  function buildPalette(available) {
    currentAvailable = available;
    palette.innerHTML = '';
    const label = document.createElement('div');
    label.className = 'blocks-palette-label';
    label.textContent = '📦 Drag blocks here ↓';
    palette.appendChild(label);

    available.forEach((type, i) => {
      const def = BLOCK_DEFS[type];
      if (!def) return;
      const block = document.createElement('div');
      block.className = `block ${def.color}`;
      block.tabIndex = 0;
      block.dataset.type = type;
      block.dataset.paletteIdx = i;

      const iconSpan = document.createElement('span');
      iconSpan.className = 'block-icon';
      iconSpan.textContent = def.icon;
      block.appendChild(iconSpan);

      const labelSpan = document.createElement('span');
      labelSpan.textContent = def.label;
      block.appendChild(labelSpan);

      if (def.hasNum) {
        const num = document.createElement('input');
        num.type = 'number';
        num.className = 'block-num-input';
        num.value = def.defaultN;
        num.min = 1;
        num.max = 99;
        num.addEventListener('click', e => e.stopPropagation());
        num.addEventListener('mousedown', e => e.stopPropagation());
        block.appendChild(num);
      }

      // Drag
      block.draggable = true;
      block.addEventListener('dragstart', e => {
        dragSrc = { source: 'palette', type, block };
        block.classList.add('dragging');
        const numInput = block.querySelector('.block-num-input');
        const n = numInput ? parseInt(numInput.value) || 1 : 1;
        e.dataTransfer.setData('text/plain', JSON.stringify({ type, n }));
      });
      block.addEventListener('dragend', () => block.classList.remove('dragging'));

      // Click to select/add (keyboard fallback)
      block.addEventListener('click', () => addBlockFromPalette(type, block));
      block.addEventListener('keydown', e => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          addBlockFromPalette(type, block);
        }
      });

      palette.appendChild(block);
    });
  }

  function addBlockFromPalette(type, paletteBlock) {
    const def = BLOCK_DEFS[type];
    if (!def) return;
    const numInput = paletteBlock ? paletteBlock.querySelector('.block-num-input') : null;
    const n = numInput ? parseInt(numInput.value) || 1 : (def.defaultN || 1);
    const cmd = { type, n };
    if (def.hasBody) cmd.body = [];
    addToProgram(cmd);
  }

  function setupSlotDrop() {
    programSlot.addEventListener('dragover', e => {
      e.preventDefault();
      programSlot.classList.add('drag-over');
    });
    programSlot.addEventListener('dragleave', () => {
      programSlot.classList.remove('drag-over');
    });
    programSlot.addEventListener('drop', e => {
      e.preventDefault();
      programSlot.classList.remove('drag-over');
      try {
        const data = JSON.parse(e.dataTransfer.getData('text/plain'));
        const def = BLOCK_DEFS[data.type];
        if (!def) return;
        const cmd = { type: data.type, n: data.n };
        if (def.hasBody) cmd.body = [];
        addToProgram(cmd);
      } catch {}
    });
  }

  function addToProgram(cmd) {
    programBlocks.push(cmd);
    renderProgram();
    if (onProgramChange) onProgramChange(programBlocks);
  }

  function renderProgram() {
    // Keep placeholder
    const placeholder = programSlot.querySelector('.slot-placeholder');
    if (placeholder) placeholder.style.display = programBlocks.length ? 'none' : '';

    // Remove old rendered blocks
    Array.from(programSlot.querySelectorAll('.program-block')).forEach(el => el.remove());

    programBlocks.forEach((cmd, idx) => {
      const el = buildProgramBlock(cmd, idx);
      programSlot.appendChild(el);
    });
  }

  function buildProgramBlock(cmd, idx) {
    const def = BLOCK_DEFS[cmd.type];
    if (!def) return document.createElement('div');

    const el = document.createElement('div');
    el.className = `program-block pb-${def.color.replace('block-','')}`;
    el.dataset.idx = idx;

    const icon = document.createElement('span');
    icon.textContent = def.icon + ' ';
    el.appendChild(icon);

    const lbl = document.createElement('span');
    lbl.textContent = def.label;
    el.appendChild(lbl);

    if (def.hasNum) {
      const num = document.createElement('input');
      num.type = 'number';
      num.className = 'pb-num-input';
      num.value = cmd.n || def.defaultN;
      num.min = 1;
      num.max = 99;
      num.addEventListener('change', () => {
        programBlocks[idx].n = parseInt(num.value) || 1;
        if (onProgramChange) onProgramChange(programBlocks);
      });
      num.addEventListener('click', e => e.stopPropagation());
      num.addEventListener('mousedown', e => e.stopPropagation());
      el.appendChild(num);
    }

    if (def.hasBody) {
      const bodyWrap = document.createElement('div');
      bodyWrap.className = 'program-block-body';
      bodyWrap.style.cssText = 'margin-top:6px; margin-left:20px; display:flex; flex-direction:column; gap:4px;';

      const bodySlot = document.createElement('div');
      bodySlot.className = 'program-slot';
      bodySlot.style.cssText = 'min-height:40px; border:2px dashed rgba(255,255,255,0.3);';
      bodySlot.dataset.parentIdx = idx;

      // Render body blocks
      if (cmd.body && cmd.body.length) {
        cmd.body.forEach((bc, bi) => {
          const bel = buildProgramBlock(bc, -1);
          bel.className += ' indent-1';
          const bdel = bel.querySelector('.delete-btn');
          if (bdel) bdel.addEventListener('click', ev => {
            ev.stopPropagation();
            programBlocks[idx].body.splice(bi, 1);
            renderProgram();
            if (onProgramChange) onProgramChange(programBlocks);
          });
          bodySlot.appendChild(bel);
        });
      } else {
        const ph = document.createElement('div');
        ph.className = 'slot-placeholder';
        ph.style.fontSize = '13px';
        ph.textContent = 'Drop blocks here';
        bodySlot.appendChild(ph);
      }

      // Drop on body slot
      bodySlot.addEventListener('dragover', e => { e.preventDefault(); e.stopPropagation(); bodySlot.style.borderColor = 'var(--yellow)'; });
      bodySlot.addEventListener('dragleave', () => { bodySlot.style.borderColor = ''; });
      bodySlot.addEventListener('drop', e => {
        e.preventDefault();
        e.stopPropagation();
        bodySlot.style.borderColor = '';
        try {
          const data = JSON.parse(e.dataTransfer.getData('text/plain'));
          const bdef = BLOCK_DEFS[data.type];
          if (!bdef) return;
          if (!programBlocks[idx].body) programBlocks[idx].body = [];
          programBlocks[idx].body.push({ type: data.type, n: data.n });
          renderProgram();
          if (onProgramChange) onProgramChange(programBlocks);
        } catch {}
      });

      bodyWrap.appendChild(bodySlot);
      el.appendChild(bodyWrap);
    }

    // Delete button
    const del = document.createElement('button');
    del.className = 'delete-btn';
    del.textContent = '✕';
    del.title = 'Remove this block';
    del.addEventListener('click', e => {
      e.stopPropagation();
      programBlocks.splice(idx, 1);
      renderProgram();
      if (onProgramChange) onProgramChange(programBlocks);
    });
    el.appendChild(del);

    return el;
  }

  function clearProgram() {
    programBlocks = [];
    renderProgram();
    if (onProgramChange) onProgramChange(programBlocks);
  }

  function getProgram() {
    return JSON.parse(JSON.stringify(programBlocks));
  }

  function setProgram(blocks) {
    programBlocks = JSON.parse(JSON.stringify(blocks));
    renderProgram();
  }

  function highlightBlock(idx) {
    Array.from(programSlot.querySelectorAll('.program-block')).forEach(el => {
      el.classList.toggle('executing', parseInt(el.dataset.idx) === idx);
    });
  }

  function clearHighlights() {
    Array.from(programSlot.querySelectorAll('.program-block')).forEach(el => {
      el.classList.remove('executing');
    });
  }

  function setupKeyboard() {
    document.addEventListener('keydown', e => {
      if (e.key === 'Delete' || e.key === 'Backspace') {
        // Delete last program block if focused on slot
        if (document.activeElement === document.body && programBlocks.length) {
          programBlocks.pop();
          renderProgram();
          if (onProgramChange) onProgramChange(programBlocks);
        }
      }
    });
  }

  return { init, buildPalette, clearProgram, getProgram, setProgram, highlightBlock, clearHighlights };
})();

// ===== CONFETTI =====
const Confetti = (() => {
  let canvas, ctx, particles = [], running = false;

  function init() {
    canvas = document.getElementById('confetti-canvas');
    ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }

  function start() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    particles = [];
    for (let i = 0; i < 120; i++) {
      particles.push({
        x: Math.random() * canvas.width,
        y: -20 - Math.random() * 100,
        vx: (Math.random() - 0.5) * 4,
        vy: 2 + Math.random() * 4,
        size: 8 + Math.random() * 12,
        color: ['#f5c518','#27ae60','#2563a8','#e74c3c','#8e44ad','#e67e22'][Math.floor(Math.random()*6)],
        rot: Math.random() * 360,
        rotV: (Math.random() - 0.5) * 10,
        shape: Math.random() > 0.5 ? 'rect' : 'circle',
      });
    }
    running = true;
    animate();
  }

  function stop() {
    running = false;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  }

  function animate() {
    if (!running) return;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    particles.forEach(p => {
      p.x += p.vx;
      p.y += p.vy;
      p.rot += p.rotV;
      p.vy += 0.1;
      ctx.save();
      ctx.translate(p.x, p.y);
      ctx.rotate((p.rot * Math.PI) / 180);
      ctx.fillStyle = p.color;
      ctx.globalAlpha = p.y < canvas.height ? 1 : 1 - (p.y - canvas.height) / 100;
      if (p.shape === 'rect') {
        ctx.fillRect(-p.size/2, -p.size/4, p.size, p.size/2);
      } else {
        ctx.beginPath();
        ctx.arc(0, 0, p.size/3, 0, Math.PI*2);
        ctx.fill();
      }
      ctx.restore();
    });
    particles = particles.filter(p => p.y < canvas.height + 50);
    if (particles.length) requestAnimationFrame(animate);
    else running = false;
  }

  return { init, start, stop };
})();

// ===== SOUND (Web Audio API) =====
const SoundFX = (() => {
  let ctx = null;

  function init() {
    try {
      ctx = new (window.AudioContext || window.webkitAudioContext)();
    } catch(e) {}
  }

  function beep(freq = 440, duration = 0.15, type = 'sine', vol = 0.3) {
    if (!ctx) return;
    try {
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.connect(gain);
      gain.connect(ctx.destination);
      osc.frequency.value = freq;
      osc.type = type;
      gain.gain.setValueAtTime(vol, ctx.currentTime);
      gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration);
      osc.start(ctx.currentTime);
      osc.stop(ctx.currentTime + duration);
    } catch(e) {}
  }

  function celebrate() {
    [523, 659, 784, 1047].forEach((f, i) => {
      setTimeout(() => beep(f, 0.2, 'square', 0.25), i * 120);
    });
  }

  function error() {
    beep(220, 0.3, 'sawtooth', 0.2);
  }

  function step() {
    beep(440 + Math.random() * 200, 0.08, 'sine', 0.15);
  }

  function resume() {
    if (ctx && ctx.state === 'suspended') ctx.resume();
  }

  return { init, celebrate, error, step, resume };
})();

// ===== CELEBRATION OVERLAY =====
const CelebUI = (() => {
  let overlay, titleEl, msgEl, starsEl, nextBtn;

  function init(onNext) {
    overlay = document.getElementById('celebration-overlay');
    titleEl = document.getElementById('celeb-title');
    msgEl = document.getElementById('celeb-msg');
    starsEl = document.getElementById('celeb-stars');
    nextBtn = document.getElementById('celeb-next');
    nextBtn.addEventListener('click', () => {
      overlay.classList.add('hidden');
      Confetti.stop();
      if (onNext) onNext();
    });
  }

  function show(stars, msg, isLast = false) {
    starsEl.textContent = '⭐'.repeat(stars) + '☆'.repeat(3 - stars);
    titleEl.textContent = stars === 3 ? '🎉 Perfect!' : stars === 2 ? '🌟 Great Job!' : '⭐ Well Done!';
    msgEl.textContent = msg;
    nextBtn.textContent = isLast ? '🗺️ World Map' : '➡️ Next Puzzle';
    overlay.classList.remove('hidden');
    Confetti.start();
    SoundFX.celebrate();
  }

  return { init, show };
})();