/* minigame-test.js — Test-Popup (preview) der Mini-Game-Module */
/* ══════════════════════════════════════════════
   INIT
══════════════════════════════════════════════ */
// ── Init wird nach Modulen ausgeführt (siehe unten) ──

/* ══════════════════════════════════════════════
   MINI-GAME TEST POPUP
══════════════════════════════════════════════ */
let mgTestLoop=null;
let mgTestActive=null;


function openMGTest(id, e){
  e&&e.stopPropagation();
  const mg=MINIGAMES.find(m=>m.id===id);if(!mg)return;
  closeMGTest();
  currentMGId=id;
  document.getElementById('mgTestEmoji').textContent=mg.e;
  document.getElementById('mgTestTitle').textContent=mg.n+' — Probespiel';
  // Beschreibung aus Modul oder MINIGAMES
  const mod=window['MG_'+id];
  document.getElementById('mgTestDesc').textContent=mod?mod.desc:(mg.desc||'');
  document.getElementById('mgTestMsg').textContent='';
  document.getElementById('mgTestMsg').className='';
  const ctrl=document.getElementById('mgTestControls');
  ctrl.innerHTML=renderMgSettings(id)+'<div style="display:flex;gap:8px;margin-top:4px"><button class="mg-ctrl-btn" onclick="restartMGTest()">🔄 Neu starten</button><button class="mg-ctrl-btn secondary" onclick="closeMGTest()">Schließen</button></div>';
  document.getElementById('mgTestOverlay').classList.add('open');
  document.body.style.overflow='hidden';
  // Modul-System: preview() aufrufen
  const wrap=document.getElementById('mgTestWrap');
  wrap.innerHTML='';
  if(mod && mod.preview){
    // Theme aus aktuellem ST-State
    const bg=BACKGROUNDS.find(b=>b.id===ST.background);
    const modCfg={
      theme: bg?{primary:bg.color||'#7c3aed',glow:bg.glow||'rgba(124,58,237,0.4)'}:{primary:'#7c3aed',glow:'rgba(124,58,237,0.4)'},
      quizData: ST.quizData||[],
      devName: ST.devName,
      gameName: ST.name,
      figure: (FIGURES.find(f=>f.id===ST.figure)||{}).e || '🐦',
    };
    Object.assign(modCfg, getMgSettings(id));
    // onResult-Handler
    window._mgOnResult=(won)=>{
      setMsg(won?'🏆 Gewonnen! 🎉':'💀 Verloren! Versuch es nochmal.', won?'win':'lose');
    };
    if(window.MGAPI) MGAPI.onResult=window._mgOnResult;
    // Bug 4 Fix: requestAnimationFrame stellt sicher dass der Browser das
    // Overlay gerendert hat und wrap.offsetWidth korrekt ist
    requestAnimationFrame(()=>{
      mgTestActive=mod.preview(wrap, Math.max(wrap.offsetWidth,360), Math.max(wrap.offsetHeight||0,560), modCfg);
    });
  } else {
    setMsg('Vorschau für dieses Mini-Game nicht verfügbar.', 'lose');
  }
}
function closeMGTest(){
  // Modul stoppen falls aktiv
  if(mgTestActive&&mgTestActive.stop){mgTestActive.stop();mgTestActive=null;}
  if(mgTestLoop){clearInterval(mgTestLoop);cancelAnimationFrame(mgTestLoop);mgTestLoop=null;}
  document.removeEventListener('keydown',mgKeyHandler);
  document.removeEventListener('mousemove',mgMouseHandler);
  document.getElementById('mgTestOverlay').classList.remove('open');
  document.body.style.overflow='';
  // Wrap leeren
  const wrap=document.getElementById('mgTestWrap');
  if(wrap)wrap.innerHTML='';
  const canvas=document.getElementById('mgTestCanvas');
  if(canvas){const ctx=canvas.getContext('2d');ctx.clearRect(0,0,canvas.width,canvas.height);}
  currentMGId=null;
}
let currentMGId=null;
function restartMGTest(){
  if(currentMGId)openMGTest(currentMGId,null);
}
let mgKeyHandler=null,mgMouseHandler=null;
function setMsg(txt,cls=''){const m=document.getElementById('mgTestMsg');m.textContent=txt;m.className=cls;}

/* ══════════════════════════════════════════════
   SCHWIERIGKEITS-EINSTELLUNGEN je Mini-Game
   Werte landen in ST.mgSettings[id] → werden exportiert (Teilen-URL)
   und im fertigen Spiel angewandt.
══════════════════════════════════════════════ */
const MG_SETTINGS_DEF={
  flappy:[
    {key:'win',  label:'Hindernisse bis Sieg', min:5,  max:30,  step:1,   def:15},
    {key:'speed',label:'Start-Tempo',          min:1.8,max:4.5, step:0.1, def:2.7, fmt:v=>(+v).toFixed(1)},
    {key:'gap',  label:'Start-Größe Durchgang',min:110,max:210, step:5,   def:168, fmt:v=>v+' px'},
    {key:'rampSpeed',type:'toggle',label:'Tempo steigt pro Durchgang',def:true},
    {key:'shrinkGap',type:'toggle',label:'Durchgänge werden enger',   def:true},
  ],
  flappy2p:[
    {key:'bestOf', label:'Best of',             min:2,  max:5,   step:1,   def:3,   fmt:v=>'Best of '+v},
    {key:'speed',  label:'Start-Tempo',         min:1.8,max:4.5, step:0.1, def:2.7, fmt:v=>(+v).toFixed(1)},
    {key:'gap',    label:'Start-Größe Durchgang',min:110,max:210, step:5,   def:168, fmt:v=>v+' px'},
    {key:'rampSpeed',type:'toggle',label:'Tempo steigt pro Durchgang',def:true},
    {key:'shrinkGap',type:'toggle',label:'Durchgänge werden enger',   def:true},
  ],
};

// Liefert (und initialisiert mit Defaults) die Einstellungen eines Mini-Games
function getMgSettings(id){
  if(!ST.mgSettings)ST.mgSettings={};
  const defs=MG_SETTINGS_DEF[id];
  if(!defs)return {};
  if(!ST.mgSettings[id])ST.mgSettings[id]={};
  defs.forEach(d=>{ if(ST.mgSettings[id][d.key]==null)ST.mgSettings[id][d.key]=d.def; });
  return ST.mgSettings[id];
}

// Einstellungs-Panel im Test-Popup (Slider = Startwerte, Toggles = Steigerung obendrauf)
function renderMgSettings(id){
  const defs=MG_SETTINGS_DEF[id]; if(!defs)return '';
  const s=getMgSettings(id);
  const rows=defs.filter(d=>d.type!=='toggle').map(d=>{
    const v=s[d.key], disp=d.fmt?d.fmt(v):v;
    return `<div style="display:flex;align-items:center;gap:10px;margin:7px 0;font-size:13px;color:#cdc9e6">
      <span style="flex:0 0 150px">${d.label}</span>
      <input type="range" min="${d.min}" max="${d.max}" step="${d.step}" value="${v}" style="flex:1;accent-color:#7c3aed;cursor:pointer"
        oninput="mgSetLabel('${id}','${d.key}',this.value)" onchange="mgSetApply('${id}','${d.key}',this.value)">
      <b id="mgset-${id}-${d.key}" style="flex:0 0 56px;text-align:right;color:#a78bfa">${disp}</b>
    </div>`;
  }).join('');
  const toggles=defs.filter(d=>d.type==='toggle');
  let tg='';
  if(toggles.length){
    tg='<div style="display:flex;gap:8px;margin-top:9px">'+toggles.map(d=>{
      const on=!!s[d.key];
      return `<div onclick="mgToggle('${id}','${d.key}')" style="flex:1;cursor:pointer;user-select:none;border-radius:9px;padding:8px 10px;font-size:12px;line-height:1.25;text-align:center;transition:all 0.12s;border:1.5px solid ${on?'#7c3aed':'#2e2b4a'};background:${on?'rgba(124,58,237,0.22)':'#13111f'};color:${on?'#c4b5fd':'#7c7596'}">
        <div style="font-size:15px;margin-bottom:1px">${on?'✓':'○'}</div>${d.label}</div>`;
    }).join('')+'</div>';
  }
  return `<div style="background:#13111f;border:1px solid #2e2b4a;border-radius:10px;padding:8px 12px;margin-bottom:10px">
    <div style="font-size:12px;color:#7c7596;margin-bottom:2px">⚙️ Schwierigkeit — wird im geteilten Spiel übernommen</div>${rows}${tg}</div>`;
}

// Live: nur Anzeige aktualisieren (beim Ziehen)
function mgSetLabel(id,key,val){
  const d=(MG_SETTINGS_DEF[id]||[]).find(x=>x.key===key); if(!d)return;
  const el=document.getElementById('mgset-'+id+'-'+key);
  if(el)el.textContent=d.fmt?d.fmt(val):val;
}
// Übernehmen (beim Loslassen): speichern + Vorschau neu starten
function mgSetApply(id,key,val){
  getMgSettings(id)[key]=Number(val);
  save();
  restartMGTest();
}
// Anklickbares Feld umschalten (Steigerung an/aus)
function mgToggle(id,key){
  const s=getMgSettings(id); s[key]=!s[key];
  save();
  restartMGTest();
}