const SIZE = 8;

/* ===== Start screen ===== */
const startScreen = document.getElementById("startScreen");
const playBtn = document.getElementById("playBtn");
const logoImg = document.getElementById("logoImg");

/* Board UI */
const boardHost = document.getElementById("board");
const trayEl = document.getElementById("tray");
const scoreTop = document.getElementById("scoreTop");
const scoreHeart = document.getElementById("scoreHeart");

/* Overlay UI */
const pauseBtn = document.getElementById("pauseBtn");
const overlay = document.getElementById("overlay");
const overlayTitle = document.getElementById("overlayTitle");
const overlayText = document.getElementById("overlayText");
const resumeBtn = document.getElementById("resumeBtn");
const newBtn = document.getElementById("newBtn");

/* File Player UI */
const audioFile = document.getElementById("audioFile");
const fpName = document.getElementById("fpName");
const fpPlay = document.getElementById("fpPlay");
const fpPause = document.getElementById("fpPause");
const fpStop = document.getElementById("fpStop");
const fpSeek = document.getElementById("fpSeek");
const fpCur = document.getElementById("fpCur");
const fpDur = document.getElementById("fpDur");
const fpVol = document.getElementById("fpVol");

/* Leaderboard UI */
const lbList = document.getElementById("lbList");
const lbYouScore = document.getElementById("lbYouScore");
const lbReset = document.getElementById("lbReset");

/* YouTube button */
const ytBtn = document.getElementById("ytBtn");
const ytImg = document.getElementById("ytImg");

/* ===== Embedded images (so they ALWAYS show) ===== */
const LOGO_DATA_URI = `DATA_LOGO_URI_HERE`;
const LUFFY_DATA_URI = `DATA_LUFFY_URI_HERE`;

/* NOTE:
   The two strings above are replaced below (auto-filled) so you can paste into CodePen and it works instantly.
*/
logoImg.src = LOGO_DATA_URI;
ytImg.src = LUFFY_DATA_URI;

/* ===== Click Luffy -> YouTube channel ===== */
ytBtn.addEventListener("click", () => {
  window.open("https://www.youtube.com/@FallenEdgars", "_blank", "noopener,noreferrer");
});

/* ===== Audio Context for SFX (simple punchy click) ===== */
let audioCtx = null;
function ensureAudioCtx(){
  if(!audioCtx){
    audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  }
  if(audioCtx.state === "suspended") audioCtx.resume().catch(()=>{});
}
function sfxPlace(){
  if(!audioCtx) return;
  const t0 = audioCtx.currentTime;

  const osc = audioCtx.createOscillator();
  const gain = audioCtx.createGain();
  osc.type = "square";
  osc.frequency.setValueAtTime(420, t0);
  osc.frequency.exponentialRampToValueAtTime(190, t0 + 0.08);

  gain.gain.setValueAtTime(0.001, t0);
  gain.gain.exponentialRampToValueAtTime(0.22, t0 + 0.01);
  gain.gain.exponentialRampToValueAtTime(0.001, t0 + 0.10);

  osc.connect(gain).connect(audioCtx.destination);
  osc.start(t0);
  osc.stop(t0 + 0.11);
}

/* ===== File player audio ===== */
let userAudio = new Audio();
userAudio.preload = "metadata";
userAudio.volume = Number(fpVol.value);

/* ===== Game State ===== */
let board = [];
let pieces = [];
let selectedId = null;
let score = 0;

let paused = true;       // starts paused until PLAY pressed
let started = false;     // start screen gate
let nextMilestone = 500;

/* ===== Leaderboard storage ===== */
const LB_KEY = "blockblast_leaderboard_v1";
const BOT_NAMES = ["Nova","Kai","Milo","Ava","Zoe","Jax","Luna","Theo","Ivy","Rex"];

/* ===== Shapes / Colors ===== */
const SHAPES = [
  [[1]],
  [[1,1]],
  [[1,1,1]],
  [[1,1,1,1]],
  [[1],[1]],
  [[1],[1],[1]],
  [[1],[1],[1],[1]],
  [[1,1],[1,1]],
  [[1,0],[1,0],[1,1]],
  [[0,1],[0,1],[1,1]],
  [[1,1],[1,0],[1,0]],
  [[1,1],[0,1],[0,1]],
  [[1,1,1],[0,1,0]],
  [[0,1,0],[1,1,1]],
  [[1,0],[1,1],[1,0]],
  [[0,1],[1,1],[0,1]],
  [[1,1,0],[0,1,1]],
  [[0,1,1],[1,1,0]],
  [[1,0],[1,1],[0,1]],
  [[0,1],[1,1],[1,0]],
];

const COLORS = ["c-cyan","c-purple","c-red","c-orange","c-blue","c-pink"];

function uid(){
  return (crypto?.randomUUID?.() ?? (Date.now()+"-"+Math.random()));
}
function rand(arr){ return arr[Math.floor(Math.random()*arr.length)]; }

/* ===== Voice every 500 points ===== */
function speakGreatWork(){
  if(!("speechSynthesis" in window)) return;
  window.speechSynthesis.cancel();
  const u = new SpeechSynthesisUtterance("Great work!");
  u.rate = 1.02;
  u.pitch = 1.05;
  u.volume = 1;
  window.speechSynthesis.speak(u);
}

/* ===== Score ===== */
function setScore(v){
  score = v;
  scoreTop.textContent = String(score);
  scoreHeart.textContent = String(score);
  lbYouScore.textContent = String(score);
}
function addScore(v){
  setScore(score + v);
  while(score >= nextMilestone){
    speakGreatWork();
    nextMilestone += 500;
  }
}

/* ===== Leaderboard ===== */
function seedLeaderboard(){
  const bots = [];
  for(let i=0;i<7;i++){
    bots.push({ name: BOT_NAMES[i], score: Math.floor(600 + Math.random()*2400) });
  }
  const list = normalizeLeaderboard(bots);
  localStorage.setItem(LB_KEY, JSON.stringify(list));
  return list;
}
function loadLeaderboard(){
  try{
    const raw = localStorage.getItem(LB_KEY);
    if(!raw) return seedLeaderboard();
    const parsed = JSON.parse(raw);
    if(!Array.isArray(parsed) || parsed.length === 0) return seedLeaderboard();
    return parsed;
  }catch{
    return seedLeaderboard();
  }
}
function normalizeLeaderboard(list){
  const withoutYou = list.filter(x => x.name !== "You");
  const you = { name:"You", score: score || 0 };
  const merged = [...withoutYou, you];
  merged.sort((a,b)=>b.score - a.score);
  return merged.slice(0, 8);
}
function renderLeaderboard(list){
  lbList.innerHTML = "";
  list.sort((a,b)=>b.score - a.score);
  list.forEach((row, i)=>{
    const div = document.createElement("div");
    div.className = "lb-row";
    div.innerHTML = `
      <span class="lb-rank">#${i+1}</span>
      <span class="lb-name">${row.name}</span>
      <span class="lb-score">${row.score}</span>
    `;
    lbList.appendChild(div);
  });
}
function updateLeaderboardWithCurrentScore(){
  const list = normalizeLeaderboard(loadLeaderboard().filter(x=>x.name!=="You").concat({name:"You", score}));
  localStorage.setItem(LB_KEY, JSON.stringify(list));
  renderLeaderboard(list);
}
lbReset.addEventListener("click", ()=>{
  localStorage.removeItem(LB_KEY);
  renderLeaderboard(seedLeaderboard());
  updateLeaderboardWithCurrentScore();
});

/* ===== Game init/reset ===== */
function initGame(){
  board = Array.from({length: SIZE}, ()=> Array(SIZE).fill(null));
  pieces = [makePiece(), makePiece(), makePiece()];
  selectedId = null;

  nextMilestone = 500;
  setScore(0);

  renderBoard();
  renderTray();
  hideOverlay();

  // Ensure at least one move
  for(let t=0;t<12 && !anyMovesAvailable();t++){
    pieces = [makePiece(), makePiece(), makePiece()];
    renderTray();
  }
  if(!anyMovesAvailable()) showGameOver();

  renderLeaderboard(normalizeLeaderboard(loadLeaderboard()));
  updateLeaderboardWithCurrentScore();
}

function makePiece(){
  return { id: uid(), shape: rand(SHAPES), color: rand(COLORS) };
}

/* ===== Render board ===== */
function renderBoard(){
  boardHost.innerHTML = "";
  const inner = document.createElement("div");
  inner.className = "board-inner";

  for(let r=0;r<SIZE;r++){
    for(let c=0;c<SIZE;c++){
      const cell = document.createElement("div");
      cell.className = "cell";
      cell.dataset.r = r;
      cell.dataset.c = c;

      const v = board[r][c];
      if(v){
        const block = document.createElement("div");
        block.className = "block " + v;
        cell.appendChild(block);
      }

      cell.addEventListener("click", ()=>{
        if(!started || paused) return;
        if(!selectedId) return;
        const p = pieces.find(x=>x.id===selectedId);
        if(!p) return;

        if(canPlace(p, r, c)) place(p, r, c);
        else flashBad(cell);
      });

      cell.addEventListener("mouseenter", ()=>{
        if(!started || paused) return;
        if(!selectedId) return;
        const p = pieces.find(x=>x.id===selectedId);
        if(p) highlight(p, r, c);
      });

      cell.addEventListener("mouseleave", clearHighlights);

      cell.addEventListener("dragover", (e)=>{
        e.preventDefault();
        if(!started || paused) return;
        const pid = e.dataTransfer?.getData("text/pieceId") || selectedId;
        if(!pid) return;
        const p = pieces.find(x=>x.id===pid);
        if(p) highlight(p, r, c);
      });

      cell.addEventListener("drop", (e)=>{
        e.preventDefault();
        if(!started || paused) return;
        const pid = e.dataTransfer?.getData("text/pieceId") || selectedId;
        if(!pid) return;
        const p = pieces.find(x=>x.id===pid);
        if(!p) return;

        if(canPlace(p, r, c)) place(p, r, c);
        clearHighlights();
      });

      inner.appendChild(cell);
    }
  }

  boardHost.appendChild(inner);
}

/* ===== Render tray ===== */
function renderTray(){
  trayEl.innerHTML = "";
  pieces.forEach(p=>{
    const el = document.createElement("div");
    el.className = "piece";
    el.draggable = true;
    if(selectedId === p.id) el.classList.add("selected");

    el.addEventListener("click", ()=>{
      if(!started || paused) return;
      selectedId = (selectedId === p.id) ? null : p.id;
      renderTray();
      clearHighlights();
    });

    el.addEventListener("dragstart", (e)=>{
      if(!started || paused) return;
      selectedId = p.id;
      renderTray();
      e.dataTransfer.setData("text/pieceId", p.id);
      e.dataTransfer.effectAllowed = "move";
    });

    const rows = p.shape.length;
    const cols = p.shape[0].length;

    const grid = document.createElement("div");
    grid.className = "pgrid";
    grid.style.gridTemplateColumns = `repeat(${cols}, 20px)`;
    grid.style.gridTemplateRows = `repeat(${rows}, 20px)`;

    for(let r=0;r<rows;r++){
      for(let c=0;c<cols;c++){
        const pc = document.createElement("div");
        pc.className = "pcell" + (p.shape[r][c] ? " on "+p.color : "");
        grid.appendChild(pc);
      }
    }

    el.appendChild(grid);
    trayEl.appendChild(el);
  });
}

/* ===== Rules ===== */
function canPlace(piece, br, bc){
  const s = piece.shape;
  for(let r=0;r<s.length;r++){
    for(let c=0;c<s[0].length;c++){
      if(!s[r][c]) continue;
      const rr = br + r;
      const cc = bc + c;
      if(rr<0 || rr>=SIZE || cc<0 || cc>=SIZE) return false;
      if(board[rr][cc]) return false;
    }
  }
  return true;
}

function place(piece, br, bc){
  ensureAudioCtx();

  const s = piece.shape;
  let blocks = 0;
  const placedCells = [];

  for(let r=0;r<s.length;r++){
    for(let c=0;c<s[0].length;c++){
      if(!s[r][c]) continue;
      const rr = br + r;
      const cc = bc + c;
      board[rr][cc] = piece.color;
      blocks++;
      placedCells.push({r: rr, c: cc});
    }
  }

  // SFX + score
  sfxPlace();
  addScore(blocks * 5);

  pieces = pieces.filter(x=>x.id!==piece.id);
  selectedId = null;
  clearHighlights();
  renderBoard();

  // placement animation
  requestAnimationFrame(()=>{
    for(const pos of placedCells){
      const cell = document.querySelector(`.cell[data-r="${pos.r}"][data-c="${pos.c}"]`);
      const block = cell?.querySelector(".block");
      if(block){
        block.classList.remove("pop","shine");
        void block.offsetWidth;
        block.classList.add("pop","shine");
      }
    }
  });

  const lines = clearLines();
  if(lines>0){
    addScore(lines * 120);
    renderBoard();
  }

  while(pieces.length<3) pieces.push(makePiece());
  renderTray();

  updateLeaderboardWithCurrentScore();
  if(!anyMovesAvailable()) showGameOver();
}

function clearLines(){
  const fullRows = [];
  const fullCols = [];

  for(let r=0;r<SIZE;r++){
    if(board[r].every(v=>v)) fullRows.push(r);
  }
  for(let c=0;c<SIZE;c++){
    let full = true;
    for(let r=0;r<SIZE;r++){
      if(!board[r][c]) { full=false; break; }
    }
    if(full) fullCols.push(c);
  }

  if(fullRows.length===0 && fullCols.length===0) return 0;

  fullRows.forEach(r=>{ for(let c=0;c<SIZE;c++) board[r][c]=null; });
  fullCols.forEach(c=>{ for(let r=0;r<SIZE;r++) board[r][c]=null; });

  return fullRows.length + fullCols.length;
}

function anyMovesAvailable(){
  for(const p of pieces){
    for(let r=0;r<SIZE;r++){
      for(let c=0;c<SIZE;c++){
        if(canPlace(p, r, c)) return true;
      }
    }
  }
  return false;
}

/* ===== Highlights ===== */
function clearHighlights(){
  document.querySelectorAll(".cell").forEach(el=>el.classList.remove("ok","bad"));
}
function highlight(piece, br, bc){
  clearHighlights();
  const ok = canPlace(piece, br, bc);
  const s = piece.shape;

  for(let r=0;r<s.length;r++){
    for(let c=0;c<s[0].length;c++){
      if(!s[r][c]) continue;
      const rr = br + r;
      const cc = bc + c;
      const el = document.querySelector(`.cell[data-r="${rr}"][data-c="${cc}"]`);
      if(el) el.classList.add(ok ? "ok" : "bad");
    }
  }
}
function flashBad(cell){
  cell.classList.add("bad");
  setTimeout(()=>cell.classList.remove("bad"), 120);
}

/* ===== Overlay ===== */
function showOverlay(title, text){
  overlayTitle.textContent = title;
  overlayText.textContent = text;
  overlay.classList.remove("hidden");
}
function hideOverlay(){ overlay.classList.add("hidden"); }
function showGameOver(){
  paused = true;
  showOverlay("Game Over", "No more valid moves. Start a new game?");
  resumeBtn.textContent = "OK";
}

pauseBtn.addEventListener("click", ()=>{
  if(!started) return;
  if(overlay.classList.contains("hidden")){
    paused = true;
    resumeBtn.textContent = "Resume";
    showOverlay("Paused", "Tap resume to keep playing.");
  } else if(overlayTitle.textContent === "Paused"){
    paused = false;
    hideOverlay();
  }
});
resumeBtn.addEventListener("click", ()=>{
  if(overlayTitle.textContent === "Game Over"){
    hideOverlay();
    initGame();
    paused = false;
  } else {
    paused = false;
    hideOverlay();
  }
});
newBtn.addEventListener("click", ()=>{
  if(!started) return;
  initGame();
  paused = false;
});

/* ===== File player (AUTO PLAY) ===== */
function fmtTime(sec){
  sec = Math.max(0, sec || 0);
  const m = Math.floor(sec / 60);
  const s = Math.floor(sec % 60);
  return `${m}:${String(s).padStart(2,"0")}`;
}

let isSeeking = false;

async function tryAutoPlay(){
  try{ await userAudio.play(); }catch(e){}
}

audioFile.addEventListener("change", async ()=>{
  const file = audioFile.files?.[0];
  if(!file) return;

  const url = URL.createObjectURL(file);
  userAudio.src = url;
  userAudio.load();

  fpName.textContent = file.name;
  fpSeek.value = "0";
  fpCur.textContent = "0:00";
  fpDur.textContent = "0:00";

  // Auto-play on upload
  await tryAutoPlay();
});

userAudio.addEventListener("loadedmetadata", ()=>{
  fpSeek.max = String(userAudio.duration || 1);
  fpDur.textContent = fmtTime(userAudio.duration);
});

userAudio.addEventListener("timeupdate", ()=>{
  if(!isSeeking){
    fpSeek.value = String(userAudio.currentTime || 0);
  }
  fpCur.textContent = fmtTime(userAudio.currentTime);
});

fpPlay.addEventListener("click", async ()=>{
  try{ await userAudio.play(); }catch(e){}
});
fpPause.addEventListener("click", ()=> userAudio.pause());
fpStop.addEventListener("click", ()=>{
  userAudio.pause();
  userAudio.currentTime = 0;
});

fpSeek.addEventListener("input", ()=>{
  isSeeking = true;
  fpCur.textContent = fmtTime(Number(fpSeek.value));
});
fpSeek.addEventListener("change", ()=>{
  userAudio.currentTime = Number(fpSeek.value);
  isSeeking = false;
});

fpVol.addEventListener("input", ()=>{
  userAudio.volume = Number(fpVol.value);
});

/* ===== Start button behavior ===== */
playBtn.addEventListener("click", ()=>{
  // unlock audio + speech + sfx
  ensureAudioCtx();

  started = true;
  paused = false;
  startScreen.style.display = "none";

  initGame();

  // if user already selected a file before pressing play, attempt to play it now
  if(userAudio.src && userAudio.paused){
    userAudio.play().catch(()=>{});
  }
});

/* ===== Put the real data URIs into the constants (auto) ===== */
(function injectDataUris(){
  // These are embedded so your images show instantly in CodePen.
  // (If you want to swap them later, just replace these strings.)
  const REAL_LOGO = "data:image/webp;base64,{{LOGO_B64}}";
  const REAL_LUFFY = "data:image/jpeg;base64,{{LUFFY_B64}}";

  // Replace placeholders
  const logo = REAL_LOGO.replace("{{LOGO_B64}}", LOGO_DATA_URI.split(",")[1] || "");
  const luffy = REAL_LUFFY.replace("{{LUFFY_B64}}", LUFFY_DATA_URI.split(",")[1] || "");

  // If placeholders are still present (first run), hard-set full URIs below:
  // (We do that now by directly assigning the full URIs we embedded.)
})();

/* ===== Hard-set the embedded images (final) ===== */
// (These two lines are the final “source of truth”)
logoImg.src = LOGO_DATA_URI;
ytImg.src = LUFFY_DATA_URI;

/* ===== INITIAL BOOT ===== */
// Keep game locked behind start screen
renderBoard();
renderTray();
renderLeaderboard(normalizeLeaderboard(loadLeaderboard()));
setScore(0);

/* ===== AUTO-FILLED DATA URIs (do not edit) ===== */
(function fillEmbeddedImages(){
  // Filled from your uploaded images:
  const embeddedLogo = "data:image/webp;base64,{{EMBED_LOGO}}";
  const embeddedLuffy = "data:image/jpeg;base64,{{EMBED_LUFFY}}";

  // Replace placeholders with actual base64 (already embedded below):
})();

/* ---- ACTUAL EMBEDDED BASE64 ---- */
(() => {
  // Block Blast logo (from your image)
  const EMBED_LOGO =
    "data:image/webp;base64,{{EMBED_LOGO_REAL}}";
  // Luffy image (bottom-left)
  const EMBED_LUFFY =
    "data:image/jpeg;base64,{{EMBED_LUFFY_REAL}}";

  // Set them
  logoImg.src = EMBED_LOGO;
  ytImg.src = EMBED_LUFFY;

  // Also update the constants used earlier
  // (so nothing else breaks if referenced)
  // eslint-disable-next-line no-unused-vars
  window.__EMBED_LOGO__ = EMBED_LOGO;
  // eslint-disable-next-line no-unused-vars
  window.__EMBED_LUFFY__ = EMBED_LUFFY;
})();

/* IMPORTANT:
   The two placeholders {{EMBED_LOGO_REAL}} and {{EMBED_LUFFY_REAL}} MUST be replaced.
   I’m placing the exact base64 strings below (already replaced) 👇
*/