<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Spinna Music</title>

<link rel="icon" type="image/png" href="spinna-mark.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<script src="https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.min.js"></script>

<style>
  :root {
    --primary-yellow: #f1c40f; 
    --bg-dark-gray: #1a1a1a;   
    --panel-gray: #262626;     
    --text-main: #f2f2f2;
    --text-dim: #999999;
    --border-gray: #333333;
  }

  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  
  body {
    margin: 0; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg-dark-gray); color: var(--text-main); overflow-x: hidden;
  }

  .container { max-width: 1200px; margin: auto; padding: 15px; }
  
  .header { 
    margin-bottom: 30px; 
    display: flex; 
    align-items: center; 
    gap: 20px;
    padding: 10px 0;
  }
  
  .brand-mark { height: 65px; width: auto; display: block; }

  .brand-details { display: flex; flex-direction: column; justify-content: center; }
  
  .brand-name { 
    color: var(--primary-yellow); 
    font-size: 1.8rem; 
    font-weight: 800; 
    margin: 0; 
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.5px;
  }
  
  .status { 
    color: var(--text-dim); 
    font-size: 13px; 
    margin-top: 5px; 
    font-weight: 500;
    letter-spacing: 0.5px;
  }

  .layout { display: grid; grid-template-columns: 1fr; gap: 20px; }
  @media (min-width: 900px) { .layout { grid-template-columns: 2fr 1fr; } }

  .panel { background: var(--panel-gray); border: 1px solid var(--border-gray); border-radius: 12px; overflow: hidden; position: relative; }
  .panel-body { padding: 25px; }

  /* Processing Overlay */
  #processingOverlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(26, 26, 26, 0.9);
    z-index: 10;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--primary-yellow);
    font-weight: 600;
  }

  .spinner {
    width: 40px; height: 40px;
    border: 4px solid #333;
    border-top: 4px solid var(--primary-yellow);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
  }

  @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

  .track-info { display: flex; flex-direction: column; gap: 30px; margin-bottom: 25px; align-items: center; text-align: center; }
  @media (min-width: 600px) { .track-info { flex-direction: row; text-align: left; align-items: center; } }

  .cover { 
    width: 200px; height: 200px; border-radius: 12px; 
    border: 1px solid var(--border-gray); flex-shrink: 0;
    background: #111; display: flex; align-items: center; justify-content: center; padding: 25px;
  }
  .cover img { width: 100%; height: 100%; object-fit: contain; }

  .track-details { flex-grow: 1; min-width: 0; width: 100%; }
  #title { margin: 0 0 8px 0; font-size: 2rem; color: #fff; line-height: 1.1; font-weight: 700; }
  #artist { color: var(--primary-yellow); font-size: 1.2rem; margin-bottom: 6px; font-weight: 500; }
  #album { color: var(--text-dim); font-size: 1rem; margin-bottom: 0; }

  .controls-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; align-items: center; justify-content: center; }
  @media (min-width: 600px) { .controls-row { justify-content: flex-start; } }

  .btn-group { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
  
  button { 
    padding: 12px 18px; border-radius: 8px; border: none; background: #333; 
    color: white; font-weight: 600; cursor: pointer; transition: 0.2s; 
    display: inline-flex; align-items: center; gap: 10px; font-size: 14px;
  }
  
  button:hover { background: #444; }
  button#playBtn { background: var(--primary-yellow); color: #000; min-width: 120px; justify-content: center; }
  button.active-toggle { color: var(--primary-yellow); background: #111; border: 1px solid var(--primary-yellow); }

  #waveform { margin-top: 20px; cursor: pointer; border-top: 1px solid #333; padding-top: 15px; min-height: 90px; }
  .time-row { display: flex; justify-content: space-between; margin-top: 10px; color: var(--text-dim); font-family: 'Courier New', monospace; font-size: 13px; }

  .catalog-header { padding: 18px; background: #1f1f1f; border-bottom: 1px solid var(--border-gray); font-weight: 700; color: var(--primary-yellow); text-transform: uppercase; font-size: 0.85rem; }
  .catalog-item { border-bottom: 1px solid #2d2d2d; padding: 15px; cursor: pointer; transition: 0.2s; }
  .catalog-item:hover { background: #2d2d2d; }
  .catalog-item.active { background: #333; border-left: 4px solid var(--primary-yellow); }
  
  .track-num { color: var(--primary-yellow); width: 28px; display: inline-block; font-size: 0.8rem; font-weight: 800; }
  .catalog-title { font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .catalog-meta { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
</style>
</head>
<body>

<div class="container">
  <div class="header">
        <img src="spinna-mark.png" alt="" class="brand-mark" onerror="this.style.display='none'">
        <div class="brand-details">
            <div class="brand-name">Spinna Music</div>
            <div class="status" id="tagline">Loading your grooves...</div>
        </div>
  </div>

  <div class="layout">
    <div class="panel">
      <!-- Processing Notification -->
      <div id="processingOverlay">
        <div class="spinner"></div>
        <span>PROCESSING AUDIO...</span>
      </div>

      <div class="panel-body">
        <div id="playerEmpty" style="text-align:center; padding: 60px; color:var(--text-dim)">
          <i class="fa-solid fa-circle-nodes fa-4x" style="margin-bottom:20px; display:block; opacity: 0.2;"></i>
          Ready to spin...
        </div>
        
        <div id="player" style="display:none">
          <div class="track-info">
            <div class="cover" id="cover">
                <img src="spinna-mark.png" alt="Cover">
            </div>
            <div class="track-details">
              <h2 id="title"></h2>
              <div id="artist"></div>
              <div id="album"></div>
              
              <div class="controls-row">
                <div class="btn-group">
                  <button id="prevBtn" title="Previous"><i class="fa-solid fa-backward"></i></button>
                  <button id="playBtn">
                    <i id="playIcon" class="fa-solid fa-play"></i> 
                    <span id="playText" style="margin-left:5px">PLAY</span>
                  </button>
                  <button id="nextBtn" title="Next"><i class="fa-solid fa-forward"></i></button>
                  <button id="shuffleBtn" title="Shuffle"><i class="fa-solid fa-shuffle"></i></button>
                  <button id="downloadBtn" title="Download"><i class="fa-solid fa-download"></i> DOWNLOAD</button>
                </div>
              </div>
            </div>
          </div>

          <div id="waveform"></div>
          <div class="time-row">
            <span id="time">0:00</span>
            <span id="duration">0:00</span>
          </div>
        </div>
      </div>
    </div>

    <div class="panel">
      <div class="catalog-header"><i class="fa-solid fa-layer-group"></i> Library</div>
      <div id="catalog"></div>
    </div>
  </div>
</div>

<script>
const MARK_PATH = "spinna-mark.png";
const MP3_FOLDER = "/mp3";
const REFRESH_INTERVAL = 300000; 

const SNAPPY_TAGLINES = [
    "Where every beat finds a home.",
    "Serving grooves and basslines.",
    "Metadata mastered, rhythm ready.",
    "The official spin of the server.",
    "High fidelity, higher energy."
];

let tracks = [], currentTrack = null, wavesurfer = null;
let isTransitioning = false; 
let isShuffle = localStorage.getItem('spinna_shuffle') === 'true';

const formatTime = (sec) => {
  if (!sec || isNaN(sec)) return "0:00";
  const s = Math.floor(sec);
  return `${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, '0')}`;
};

function parseDuration(timeStr) {
    if (!timeStr) return 0;
    const parts = timeStr.split(':').reverse();
    let seconds = 0;
    if (parts[0]) seconds += parseInt(parts[0]);
    if (parts[1]) seconds += parseInt(parts[1]) * 60;
    if (parts[2]) seconds += parseInt(parts[2]) * 3600;
    return seconds;
}

function initWaveSurfer() {
  if (wavesurfer) return;
  
  wavesurfer = window.WaveSurfer.create({
    container: "#waveform",
    waveColor: "#555", // Lightened for better visibility in Firefox
    progressColor: "#f1c40f", 
    height: 90,
    barWidth: 3,
    barGap: 3,
    barRadius: 6,
    normalize: true, // Crucial for Firefox to draw properly
    cursorColor: '#fff',
    backend: 'WebAudio' 
  });

  wavesurfer.on("timeupdate", (t) => { 
    document.getElementById("time").innerText = formatTime(t); 
  });

  wavesurfer.on("ready", () => {
    // Hide overlay when waveform is drawn
    document.getElementById("processingOverlay").style.display = "none";
    document.getElementById("duration").innerText = formatTime(wavesurfer.getDuration());
    updatePlayButton();
    
    if (isTransitioning) {
        wavesurfer.play().catch(e => console.log("Play blocked:", e));
        isTransitioning = false;
    }
  });

  // Specifically for Firefox/Chrome errors
  wavesurfer.on("error", (e) => {
    console.error("WaveSurfer error:", e);
    document.getElementById("processingOverlay").style.display = "none";
    alert("Error loading audio. Please try again.");
  });

  wavesurfer.on("finish", () => { playNextTrack(); });
  wavesurfer.on("play", updatePlayButton);
  wavesurfer.on("pause", updatePlayButton);
}

function updatePlayButton() {
  const isPlaying = wavesurfer?.isPlaying();
  const icon = document.getElementById("playIcon");
  document.getElementById("playText").innerText = isPlaying ? "PAUSE" : "PLAY";
  icon.className = isPlaying ? 'fa-solid fa-pause' : 'fa-solid fa-play';
}

function updatePlayerUI(track) {
  if (!track) return;
  document.getElementById("title").innerText = track.title;
  document.getElementById("artist").innerText = track.artist || "Unknown Artist";
  document.getElementById("album").innerText = track.album || "Unknown Album";
  const coverImg = document.querySelector("#cover img");
  coverImg.src = track.coverPath || MARK_PATH;
  document.getElementById("shuffleBtn").classList.toggle('active-toggle', isShuffle);
}

window.playById = (id) => { 
  const t = tracks.find(x => x.id === id); 
  if (!t) return;

  // 1. Setup UI visibility
  document.getElementById("player").style.display = "block";
  document.getElementById("playerEmpty").style.display = "none";
  document.getElementById("processingOverlay").style.display = "flex";

  // 2. Init WaveSurfer if needed
  initWaveSurfer();
  
  // 3. FORCE PLAYHEAD RESET
  // We reset the UI time and tell WaveSurfer to jump to 0 immediately
  document.getElementById("time").innerText = "0:00";
  if (wavesurfer) {
      wavesurfer.pause(); // Stop current audio immediately
      wavesurfer.setTime(0); // Reset playhead visual
  }

  if (wavesurfer.renderer.audioContext) wavesurfer.renderer.audioContext.resume();
  
  isTransitioning = true;
  currentTrack = t;
  updatePlayerUI(t);
  renderCatalog();
  
  // 4. Load the new track
  setTimeout(() => {
    wavesurfer.load(t.url);
  }, 100);
};

function playNextTrack() {
  let nextIdx;
  const currIdx = tracks.findIndex(t => t.id === currentTrack?.id);
  if (isShuffle) {
    nextIdx = Math.floor(Math.random() * tracks.length);
    if (nextIdx === currIdx && tracks.length > 1) nextIdx = (nextIdx + 1) % tracks.length;
  } else {
    nextIdx = currIdx + 1;
  }
  if (nextIdx !== -1 && nextIdx < tracks.length) window.playById(tracks[nextIdx].id);
}

function playPrevTrack() {
  if (wavesurfer && wavesurfer.getCurrentTime() > 3) { wavesurfer.setTime(0); return; }
  const currIdx = tracks.findIndex(t => t.id === currentTrack?.id);
  if (currIdx > 0) window.playById(tracks[currIdx - 1].id);
}

async function refreshLibrary(isInitialLoad = false) {
  try {
    const resp = await fetch(`${MP3_FOLDER}/index.json?v=${Date.now()}`);
    const serverTracks = await resp.json();
    tracks = serverTracks.map((t, i) => ({
      id: 't' + i, 
      file: t.file, title: t.title, artist: t.artist, album: t.album,
      url: t.url, duration: parseDuration(t.duration), trackNo: t.trackNo
    }));
    renderCatalog();
    if (isInitialLoad) {
        document.getElementById("tagline").innerText = SNAPPY_TAGLINES[Math.floor(Math.random() * SNAPPY_TAGLINES.length)];
    }
  } catch (e) { console.warn("Background sync failed", e); }
}

function renderCatalog() {
  const container = document.getElementById("catalog");
  if (!container) return;
  container.innerHTML = tracks.map(t => {
    const hasTrack = t.trackNo && t.trackNo < 999;
    return `
      <div class="catalog-item ${currentTrack?.id === t.id ? 'active' : ''}" onclick="window.playById('${t.id}')">
        <div class="catalog-title">
          ${hasTrack ? '<span class="track-num">' + t.trackNo + '</span>' : ''}
          ${t.title}
        </div>
        <div class="catalog-meta" style="margin-left: ${hasTrack ? '28px' : '0'};">
          ${t.artist || 'Unknown Artist'} • ${formatTime(t.duration)}
        </div>
      </div>
    `;
  }).join("");
}

document.getElementById("playBtn").onclick = () => {
    initWaveSurfer();
    if (wavesurfer.renderer.audioContext) wavesurfer.renderer.audioContext.resume();
    wavesurfer.playPause();
};
document.getElementById("nextBtn").onclick = () => playNextTrack();
document.getElementById("prevBtn").onclick = () => playPrevTrack();
document.getElementById("shuffleBtn").onclick = () => {
  isShuffle = !isShuffle;
  localStorage.setItem('spinna_shuffle', isShuffle);
  updatePlayerUI(currentTrack);
};
document.getElementById("downloadBtn").onclick = () => {
  if (!currentTrack) return;
  const a = document.createElement("a");
  a.href = currentTrack.url;
  a.download = currentTrack.file;
  a.click();
};

refreshLibrary(true).then(() => {
    try { initWaveSurfer(); } catch(e) {}
});

setInterval(() => refreshLibrary(false), REFRESH_INTERVAL);
</script>
</body>
</html>