// Shared Aero JS: bubbles, sparkle cursor, music toggle, drag windows, theme switcher, helpers.

function spawnBubbles(host, count = 22) {
  const f = document.createElement('div');
  f.className = 'bubble-field';
  for (let i = 0; i < count; i++) {
    const b = document.createElement('div');
    b.className = 'bubble';
    const size = 18 + Math.random() * 90;
    b.style.width = b.style.height = size + 'px';
    b.style.left = Math.random() * 100 + '%';
    b.style.setProperty('--drift', ((Math.random() - 0.5) * 120) + 'px');
    b.style.animationDuration = (14 + Math.random() * 16) + 's';
    b.style.animationDelay = (-Math.random() * 20) + 's';
    f.appendChild(b);
  }
  host.appendChild(f);
}

function makeClouds(host) {
  const svg = `<svg viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice" style="width:100%;height:100%;">
    <defs>
      <radialGradient id="cg" cx="50%" cy="40%" r="60%">
        <stop offset="0%" stop-color="white" stop-opacity="0.95"/>
        <stop offset="55%" stop-color="white" stop-opacity="0.6"/>
        <stop offset="100%" stop-color="white" stop-opacity="0"/>
      </radialGradient>
    </defs>
    <g fill="url(#cg)">
      <ellipse cx="180" cy="200" rx="260" ry="50"/>
      <ellipse cx="900" cy="120" rx="320" ry="55"/>
      <ellipse cx="1300" cy="320" rx="220" ry="42"/>
      <ellipse cx="500" cy="640" rx="380" ry="60" opacity="0.7"/>
      <ellipse cx="1150" cy="720" rx="260" ry="48" opacity="0.7"/>
    </g>
  </svg>`;
  const w = document.createElement('div');
  w.className = 'clouds';
  w.innerHTML = svg;
  host.appendChild(w);
}

function sparkleCursor() {
  let last = 0;
  window.addEventListener('mousemove', (e) => {
    const now = performance.now();
    if (now - last < 40) return;
    last = now;
    const s = document.createElement('div');
    s.className = 'sparkle';
    s.style.left = e.clientX + 'px';
    s.style.top = e.clientY + 'px';
    const theme = document.body.dataset.theme;
    // chrome: iridescent / holographic palette (cyan→magenta→pink)
    // aero:   warm-cool rainbow as before
    const hue = theme === 'chrome'
      ? 200 + Math.random() * 160
      : 30 + Math.random() * 200;
    const chroma = theme === 'chrome' ? 0.22 : 0.18;
    s.style.background = `radial-gradient(circle, oklch(96% 0.10 ${hue}) 0%, oklch(82% ${chroma} ${hue} / 0.6) 40%, transparent 70%)`;
    document.body.appendChild(s);
    setTimeout(() => s.remove(), 900);
  });
}

function makeDraggable(el, handle) {
  let sx = 0, sy = 0, ox = 0, oy = 0, dragging = false;
  (handle || el).addEventListener('mousedown', (e) => {
    if (e.target.closest('.no-drag')) return;
    dragging = true;
    sx = e.clientX; sy = e.clientY;
    const r = el.getBoundingClientRect();
    const p = el.offsetParent.getBoundingClientRect();
    ox = r.left - p.left; oy = r.top - p.top;
    el.style.zIndex = (++window.__zTop || (window.__zTop = 100));
    e.preventDefault();
  });
  window.addEventListener('mousemove', (e) => {
    if (!dragging) return;
    el.style.left = (ox + e.clientX - sx) + 'px';
    el.style.top = (oy + e.clientY - sy) + 'px';
  });
  window.addEventListener('mouseup', () => { dragging = false; });
}

function counterHTML(val = 42137, label = "visitors") {
  const digits = String(val).padStart(7, '0').split('').map(d => `<div class="d">${d}</div>`).join('');
  return `<div class="counter"><div class="digits">${digits}</div><div class="label">${label}</div></div>`;
}

function nowPlayingHTML(compact, track) {
  const sz = compact ? 48 : 72;
  const hasTrack = track && track.name;
  const title = hasTrack ? track.name : 'Naima';
  const artist = hasTrack ? track.artist : 'John Coltrane';
  const album = hasTrack ? (track.album || '') : 'Giant Steps';
  let header = '♪ now playing · last.fm';
  if (hasTrack && !track.nowplaying) {
    const now = Date.now();
    const ago = Math.floor((now - track.when) / 1000);
    const mins = Math.floor(ago / 60);
    header = `♪ last played ${mins}m ago`;
  }

  let bgStyle = `linear-gradient(135deg,oklch(75% 0.16 55),oklch(60% 0.18 30) 50%,oklch(45% 0.12 280))`;
  if (hasTrack && track.art) {
    const safeArt = track.art.replace(/'/g, "%27").replace(/"/g, "%22");
    bgStyle = `url('${safeArt}') center / cover`;
  }

  return `<div style="display:flex;gap:12px;align-items:center">
    <div style="width:${sz}px;height:${sz}px;border-radius:10px;background:${bgStyle};box-shadow:inset 0 1px 0 rgba(255,255,255,0.5),0 3px 8px rgba(0,0,0,0.2);position:relative;overflow:hidden">
      <div style="position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,0.4),transparent 40%)"></div>
    </div>
    <div style="flex:1;min-width:0">
      <div style="font-size:10px;color:oklch(40% 0.10 240);text-transform:uppercase;letter-spacing:1px">${header}</div>
      <div style="font-size:${compact?13:15}px;font-weight:700;color:oklch(25% 0.05 240)">${title}</div>
      <div style="font-size:${compact?11:13}px;color:oklch(35% 0.04 240)">${artist}${album ? ' — ' + album : ''}</div>
      <div class="eq" style="display:flex;gap:2px;align-items:flex-end;height:12px;margin-top:4px">
        ${[0,1,2,3,4].map(i => `<div data-i="${i}" style="width:3px;height:6px;border-radius:1px;background:linear-gradient(to top,oklch(60% 0.15 240),oklch(80% 0.14 60));transition:height 280ms"></div>`).join('')}
      </div>
    </div>
  </div>`;
}

function animateEq(root) {
  setInterval(() => {
    root.querySelectorAll('.eq div').forEach(d => {
      d.style.height = (3 + Math.random() * 10) + 'px';
    });
  }, 280);
}

function musicToggleHTML() {
  return `<div class="music-toggle" style="display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:linear-gradient(to bottom,rgba(255,255,255,0.78),rgba(200,225,255,0.55));border:1px solid rgba(255,255,255,0.85);box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 3px 10px rgba(80,130,180,0.25);font-family:'Segoe UI',Tahoma,sans-serif;font-size:12px;color:oklch(30% 0.05 240)">
    <button class="mt-btn no-drag" style="width:26px;height:26px;border-radius:50%;border:1px solid oklch(45% 0.13 240);background:radial-gradient(circle at 30% 25%,white,oklch(82% 0.12 220) 60%,oklch(50% 0.13 240));color:white;cursor:pointer;font-size:11px;padding:0;box-shadow:inset 0 1px 0 rgba(255,255,255,0.9)">▶</button>
    <span class="mt-label" style="min-width:120px">music off</span>
  </div>`;
}

function bindMusicToggle(root) {
  const btn = root.querySelector('.mt-btn');
  const lbl = root.querySelector('.mt-label');
  if (!btn) return;
  let on = false;
  btn.addEventListener('click', () => {
    on = !on;
    btn.textContent = on ? '❚❚' : '▶';
    lbl.textContent = on ? '♪ kero kero bonito — flamingo' : 'music off';
    btn.style.background = on
      ? 'radial-gradient(circle at 30% 25%,white,oklch(75% 0.14 55) 60%,oklch(55% 0.15 35))'
      : 'radial-gradient(circle at 30% 25%,white,oklch(82% 0.12 220) 60%,oklch(50% 0.13 240))';
  });
}

// THEME SWITCHER — Aero (Frutiger) ↔ Chrome (Y2K)
const THEME_KEY = 'tyler.theme';
const THEMES = ['aero', 'chrome'];

function getTheme() {
  const t = localStorage.getItem(THEME_KEY);
  return THEMES.includes(t) ? t : 'aero';
}
function setTheme(t) {
  if (!THEMES.includes(t)) t = 'aero';
  document.body.setAttribute('data-theme', t);
  localStorage.setItem(THEME_KEY, t);
  document.querySelectorAll('.theme-switcher button').forEach(b => {
    b.classList.toggle('active', b.dataset.theme === t);
  });
  try { window.dispatchEvent(new CustomEvent('themechange', { detail: t })); } catch(_){}
}
function mountThemeSwitcher(host) {
  host = host || document.body;
  const wrap = document.createElement('div');
  wrap.className = 'theme-switcher no-drag';
  wrap.innerHTML = THEMES.map(t => `
    <button data-theme="${t}" title="${t}" class="no-drag">
      <span class="ts-dot ${t}"></span>${t}
    </button>
  `).join('');
  host.appendChild(wrap);
  wrap.querySelectorAll('button').forEach(b => {
    b.addEventListener('click', () => setTheme(b.dataset.theme));
  });
  setTheme(getTheme());
  return wrap;
}
function initTheme() {
  document.body.setAttribute('data-theme', getTheme());
}

// REAL API INTEGRATIONS

async function fetchLastFm(user = 'trollshotlol', key = 'e4d5c973811037717f7603f616259cdf', limit = 4) {
  const url = `https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=${user}&api_key=${key}&format=json&limit=${limit}`;
  const r = await fetch(url);
  if (!r.ok) throw new Error('lastfm ' + r.status);
  const j = await r.json();
  const tracks = (j.recenttracks && j.recenttracks.track) || [];
  return tracks.map(t => ({
    name: t.name,
    artist: t.artist && (t.artist['#text'] || t.artist.name),
    album: t.album && t.album['#text'],
    art: (t.image && t.image[t.image.length - 1] && t.image[t.image.length - 1]['#text']) || null,
    nowplaying: t['@attr'] && t['@attr'].nowplaying === 'true',
    when: t.date && t.date.uts ? Number(t.date.uts) * 1000 : null,
  }));
}

async function fetchFilms() {
  const r = await fetch('https://films.tylerhoang.xyz/tyler/api/recent');
  if (!r.ok) throw new Error('films ' + r.status);
  return await r.json();
}

async function fetchVisitorCount() {
  const r = await fetch('/counter.php');
  if (!r.ok) throw new Error('counter ' + r.status);
  const j = await r.json();
  return j.count;
}

async function fetchReelMouthFeed(limit = 6) {
  const r = await fetch(`/podcast.php?limit=${limit}`);
  if (!r.ok) throw new Error('podcast.php ' + r.status);
  return await r.json();
}

window.Aero = {
  spawnBubbles, makeClouds, sparkleCursor, makeDraggable,
  counterHTML, nowPlayingHTML, animateEq, musicToggleHTML, bindMusicToggle,
  // theme api
  getTheme, setTheme, mountThemeSwitcher, initTheme, THEMES,
  // real api integrations
  fetchLastFm, fetchFilms, fetchVisitorCount, fetchReelMouthFeed,
};