app.js

/**
 * SoundSwarm- Collaborative Music Creation
 * Main Application Logic
 *
 * A web-based collaborative music application using the Web Audio API.
 * Users can play notes from shared chord progressions and create
 * ambient drones together.
 */

// ============================================
// Constants & Configuration
// ============================================

/**
 * Note frequency lookup table (12-TET, A4 = 440Hz)
 * Contains all notes from C1 to C8 with both sharp and flat notations
 */
const NOTE_FREQUENCIES = {
  C1: 32.7,
  "C#1": 34.65,
  Db1: 34.65,
  D1: 36.71,
  "D#1": 38.89,
  Eb1: 38.89,
  E1: 41.2,
  F1: 43.65,
  "F#1": 46.25,
  Gb1: 46.25,
  G1: 49.0,
  "G#1": 51.91,
  Ab1: 51.91,
  A1: 55.0,
  "A#1": 58.27,
  Bb1: 58.27,
  B1: 61.74,
  C2: 65.41,
  "C#2": 69.3,
  Db2: 69.3,
  D2: 73.42,
  "D#2": 77.78,
  Eb2: 77.78,
  E2: 82.41,
  F2: 87.31,
  "F#2": 92.5,
  Gb2: 92.5,
  G2: 98.0,
  "G#2": 103.83,
  Ab2: 103.83,
  A2: 110.0,
  "A#2": 116.54,
  Bb2: 116.54,
  B2: 123.47,
  C3: 130.81,
  "C#3": 138.59,
  Db3: 138.59,
  D3: 146.83,
  "D#3": 155.56,
  Eb3: 155.56,
  E3: 164.81,
  F3: 174.61,
  "F#3": 185.0,
  Gb3: 185.0,
  G3: 196.0,
  "G#3": 207.65,
  Ab3: 207.65,
  A3: 220.0,
  "A#3": 233.08,
  Bb3: 233.08,
  B3: 246.94,
  C4: 261.63,
  "C#4": 277.18,
  Db4: 277.18,
  D4: 293.66,
  "D#4": 311.13,
  Eb4: 311.13,
  E4: 329.63,
  F4: 349.23,
  "F#4": 369.99,
  Gb4: 369.99,
  G4: 392.0,
  "G#4": 415.3,
  Ab4: 415.3,
  A4: 440.0,
  "A#4": 466.16,
  Bb4: 466.16,
  B4: 493.88,
  C5: 523.25,
  "C#5": 554.37,
  Db5: 554.37,
  D5: 587.33,
  "D#5": 622.25,
  Eb5: 622.25,
  E5: 659.25,
  F5: 698.46,
  "F#5": 739.99,
  Gb5: 739.99,
  G5: 783.99,
  "G#5": 830.61,
  Ab5: 830.61,
  A5: 880.0,
  "A#5": 932.33,
  Bb5: 932.33,
  B5: 987.77,
  C6: 1046.5,
  "C#6": 1108.73,
  Db6: 1108.73,
  D6: 1174.66,
  "D#6": 1244.51,
  Eb6: 1244.51,
  E6: 1318.51,
  F6: 1396.91,
  "F#6": 1479.98,
  Gb6: 1479.98,
  G6: 1567.98,
  "G#6": 1661.22,
  Ab6: 1661.22,
  A6: 1760.0,
  "A#6": 1864.66,
  Bb6: 1864.66,
  B6: 1975.53,
  C7: 2093.0,
  "C#7": 2217.46,
  Db7: 2217.46,
  D7: 2349.32,
  "D#7": 2489.02,
  Eb7: 2489.02,
  E7: 2637.02,
  F7: 2793.83,
  "F#7": 2959.96,
  Gb7: 2959.96,
  G7: 3135.96,
  "G#7": 3322.44,
  Ab7: 3322.44,
  A7: 3520.0,
  "A#7": 3729.31,
  Bb7: 3729.31,
  B7: 3951.07,
  C8: 4186.01,
};

/**
 * Chord presets - Collections of notes that sound good together
 */
const CHORD_PRESETS = {
  Test: ["G3", "B3", "D4", "A4", "B4", "D5"],
  BesideYouInTime: [
    "D3",
    "F3",
    "A3",
    "Bb3",
    "D4",
    "F4",
    "A4",
    "Bb4",
    "D5",
    "F5",
    "A5",
  ],
  CMajor: ["C3", "E3", "G3", "C4", "E4", "G4", "C5", "E5", "G5"],
  GMajor: ["G3", "B3", "D4", "G4", "B4", "D5", "G5", "B5"],
  DMajor: ["D3", "F#3", "A3", "D4", "F#4", "A4", "D5", "F#5", "A5"],
  AmMaj7: ["A3", "C4", "E4", "G#4", "A4", "C5", "E5", "G#5"],
  EmMaj7: ["E3", "G3", "B3", "D#4", "E4", "G4", "B4", "D#5"],
  Dsus2: ["D3", "E3", "A3", "D4", "E4", "A4", "D5", "E5", "A5"],
  Asus2: ["A2", "B2", "E3", "A3", "B3", "E4", "A4", "B4", "E5"],
  Esus4: ["E3", "A3", "B3", "E4", "A4", "B4", "E5", "A5", "B5"],
  Gmaj9: ["G3", "B3", "D4", "F#4", "A4", "G4", "B4", "D5", "F#5", "A5"],
};

/**
 * Detune presets (in cents) for creating thicker sounds
 */
const DETUNE_PRESETS = {
  low: [0, 8, -12],
  medium: [0, 15, -20],
  high: [0, 25, -35],
  off: [0, 0, 0],
};

/**
 * Audio timing constants - CRITICAL FOR CLICK-FREE TRANSITIONS
 */
const AUDIO_CONFIG = {
  MIN_RAMP_TIME: 0.02, // Minimum time for any gain ramp to prevent clicks
  FADE_OUT_DURATION: 0.4, // Standard fade out duration
  FADE_IN_DURATION: 0.3, // Standard fade in duration
  CROSSFADE_DURATION: 0.6, // Crossfade overlap duration
  GLIDE_DURATION: 0.25, // Frequency glide duration
  NEAR_ZERO: 0.0001, // Very small value to use instead of 0 for exponential ramps
  OSC_ATTACK: 0.08, // Attack time for individual oscillators
  OSC_RELEASE: 0.1, // Release time for individual oscillators
};

// ============================================
// State Variables
// ============================================

// Audio nodes
let audioContext;
let oscillators = [];
let lfos = [];
let gainNode, filterNode;
let lfoGain, volumeLfoGain, filterLfoGain;
let delayNode, delayFeedbackGain, dryGain, wetGain;

// Playback state
let isPlaying = false;
let currentNote = null;
let currentFrequency = 0;
let volumeLfoStartTime = 0;
let volumeLfoFrequency = 0;

// Settings
let currentWaveform = "sine";
let detuneEnabled = false;
let detuneIntensity = "medium";
let delayEnabled = false;
let visualizationEnabled = false;
let transitionMode = "glide";

// Session state
let sessionId = null;
let usedNotes = new Set();
let chordNotes = [];
let chordName = "Beside You in Time (NIN)";
let minChordFreq = 0;
let maxChordFreq = 0;

// Transition flag
let isTransitioning = false;

// Arpeggiator state
let arpeggiatorEnabled = false;
let arpeggiatorInterval = 5;
let arpeggiatorTimer = null;

// Audio unlock state (for iOS)
let audioUnlocked = false;

// Canvas
let canvas, ctx;
let dpr = window.devicePixelRatio || 1;

// Mobile detection
const isMobileDevice =
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent,
  );

// DOM elements (cached for performance)
let noteDisplay, noteLabel, statusMessage, playButton, chordLabel;
let controlsSection, controlsOverlay, menuToggle, detuneDisplay;
let waveformButtons, detuneToggleButtons, detuneIntensityButtons;
let arpeggiatorToggleButtons, arpeggiatorIntervalButtons;
let visualizationToggleButtons, transitionButtons, shuffleNoteButton;

// Session save debounce
let saveSessionTimeout = null;

// ============================================
// Initialization
// ============================================

/**
 * Initialize the application
 */
function init() {
  // Cache DOM elements
  cacheDOM();

  // iOS Safari audio unlock - attach to MULTIPLE user interactions
  const interactionHandler = async (e) => {
    if (!audioUnlocked) {
      await unlockAudio();
    }
  };

  // Listen on multiple event types - iOS sometimes only responds to specific ones
  document.addEventListener("touchstart", interactionHandler, {
    capture: true,
  });
  document.addEventListener("touchend", interactionHandler, { capture: true });
  document.addEventListener("click", interactionHandler, { capture: true });
  document.addEventListener("mousedown", interactionHandler, { capture: true });

  // Also try to unlock on the play button specifically
  playButton.addEventListener("touchstart", interactionHandler, {
    capture: true,
  });
  playButton.addEventListener("touchend", interactionHandler, {
    capture: true,
  });

  parseURL();
  setupCanvas();
  setupControls();
  requestNote();
  window.addEventListener("resize", setupCanvas);
}

/**
 * Cache DOM elements for performance
 */
function cacheDOM() {
  canvas = document.getElementById("visualization");
  ctx = canvas.getContext("2d");

  noteDisplay = document.getElementById("noteDisplay");
  noteLabel = document.getElementById("noteLabel");
  statusMessage = document.getElementById("statusMessage");
  playButton = document.getElementById("playButton");
  chordLabel = document.getElementById("chordLabel");
  controlsSection = document.getElementById("controlsSection");
  controlsOverlay = document.getElementById("controlsOverlay");
  menuToggle = document.getElementById("menuToggle");
  detuneDisplay = document.getElementById("detuneDisplay");

  waveformButtons = document.querySelectorAll("[data-waveform]");
  detuneToggleButtons = document.querySelectorAll("[data-detune-toggle]");
  detuneIntensityButtons = document.querySelectorAll("[data-detune]");
  arpeggiatorToggleButtons = document.querySelectorAll(
    "[data-arpeggiator-toggle]",
  );
  arpeggiatorIntervalButtons = document.querySelectorAll(
    "[data-arpeggiator-interval]",
  );
  visualizationToggleButtons = document.querySelectorAll(
    "[data-visualization-toggle]",
  );
  transitionButtons = document.querySelectorAll("[data-transition]");
  shuffleNoteButton = document.getElementById("shuffleNoteButton");
}

// ============================================
// iOS Audio Unlock
// ============================================

/**
 * Show debug info (helpful for iOS testing)
 */
function updateDebugInfo() {
  const state = audioContext ? audioContext.state : "no context";
  const unlocked = audioUnlocked ? "yes" : "no";
  console.log(`Debug: state=${state}, unlocked=${unlocked}`);
  // Uncomment the line below to show debug info on screen:
  // statusMessage.textContent = `Audio: ${state} | Unlocked: ${unlocked}`;
}

/**
 * Unlock audio for iOS Safari - must happen during user gesture
 * Returns a promise that resolves when audio is ready
 */
async function unlockAudio() {
  console.log("Attempting audio unlock...");

  try {
    // Create AudioContext if needed
    if (!audioContext) {
      const AudioContextClass =
        window.AudioContext || window.webkitAudioContext;
      if (!AudioContextClass) {
        console.error("No AudioContext support");
        return false;
      }
      audioContext = new AudioContextClass();
      console.log("AudioContext created, state:", audioContext.state);
    }

    // Resume if suspended
    if (audioContext.state === "suspended") {
      console.log("Resuming suspended AudioContext...");
      await audioContext.resume();
      console.log("AudioContext resumed, state:", audioContext.state);
    }

    // iOS may need an oscillator to be started during user gesture
    if (audioContext.state === "running" && !audioUnlocked) {
      // Method 1: Silent oscillator
      const oscillator = audioContext.createOscillator();
      const silentGain = audioContext.createGain();
      silentGain.gain.value = 0;
      oscillator.connect(silentGain);
      silentGain.connect(audioContext.destination);
      oscillator.start(0);
      oscillator.stop(audioContext.currentTime + 0.001);

      // Method 2: Also try buffer source as backup
      try {
        const silentBuffer = audioContext.createBuffer(
          1,
          1,
          audioContext.sampleRate,
        );
        const source = audioContext.createBufferSource();
        source.buffer = silentBuffer;
        source.connect(audioContext.destination);
        source.start(0);
      } catch (e) {
        // Buffer method failed, but oscillator might have worked
      }

      audioUnlocked = true;
      console.log("Audio unlocked successfully!");
      updateDebugInfo();
    }

    return audioContext.state === "running";
  } catch (e) {
    console.error("Audio unlock error:", e);
    updateDebugInfo();
    return false;
  }
}

// ============================================
// URL Parsing & Session Management
// ============================================

/**
 * Parse URL parameters for session and chord configuration
 */
function parseURL() {
  const params = new URLSearchParams(window.location.search);

  // Session ID
  sessionId = params.get("sid");
  if (!sessionId) {
    sessionId = "sess_" + Math.random().toString(36).substr(2, 9);
  }

  // Chord selection
  const notesParam = params.get("notes");
  const chordParam = params.get("chord");

  if (notesParam) {
    const notesList = notesParam
      .split(",")
      .map((n) => n.trim().replace("-sharp", "#").replace("-flat", "b"))
      .filter((n) => NOTE_FREQUENCIES[n]);

    if (notesList.length > 0) {
      chordNotes = notesList;
      chordName = "Custom";
    } else {
      chordNotes = CHORD_PRESETS["BesideYouInTime"];
    }
  } else if (chordParam && CHORD_PRESETS[chordParam]) {
    chordNotes = CHORD_PRESETS[chordParam];
    chordName = chordParam;
  } else {
    chordNotes = CHORD_PRESETS["Test"];
    chordName = "Test";
  }

  chordLabel.textContent = `Chord: ${chordName}`;

  // Calculate frequency range
  const freqs = chordNotes.map((n) => NOTE_FREQUENCIES[n]);
  minChordFreq = Math.min(...freqs);
  maxChordFreq = Math.max(...freqs);

  loadSession();
}

/**
 * Load session data from localStorage
 */
function loadSession() {
  const key = `soundswarm_${sessionId}`;
  const stored = localStorage.getItem(key);
  if (stored) {
    try {
      const data = JSON.parse(stored);
      if (Array.isArray(data.usedNotes)) {
        data.usedNotes.forEach((n) => usedNotes.add(n));
      }
    } catch (e) {
      console.error("Failed to parse session:", e);
    }
  }

  loadUserPreferences();
}

/**
 * Load user preferences from localStorage
 */
function loadUserPreferences() {
  const prefsKey = "soundswarm_preferences";
  const stored = localStorage.getItem(prefsKey);
  if (stored) {
    try {
      const prefs = JSON.parse(stored);
      if (prefs.waveform) currentWaveform = prefs.waveform;
      if (prefs.detuneEnabled !== undefined)
        detuneEnabled = prefs.detuneEnabled;
      if (prefs.detuneIntensity) detuneIntensity = prefs.detuneIntensity;
      if (prefs.arpeggiatorEnabled !== undefined)
        arpeggiatorEnabled = prefs.arpeggiatorEnabled;
      if (prefs.arpeggiatorInterval)
        arpeggiatorInterval = prefs.arpeggiatorInterval;
      if (prefs.visualizationEnabled !== undefined)
        visualizationEnabled = prefs.visualizationEnabled;
      if (prefs.transitionMode) transitionMode = prefs.transitionMode;
    } catch (e) {
      console.error("Failed to parse preferences:", e);
    }
  }
  updateUIFromPreferences();
}

/**
 * Update UI elements to reflect current preferences
 */
function updateUIFromPreferences() {
  // Update waveform button
  waveformButtons.forEach((btn) => {
    btn.classList.toggle("active", btn.dataset.waveform === currentWaveform);
  });

  // Update detune toggle button
  detuneToggleButtons.forEach((btn) => {
    const btnState = btn.dataset.detuneToggle === "on";
    btn.classList.toggle("active", btnState === detuneEnabled);
  });

  // Update detune intensity button
  detuneIntensityButtons.forEach((btn) => {
    btn.classList.toggle("active", btn.dataset.detune === detuneIntensity);
  });

  // Update arpeggiator toggle button
  arpeggiatorToggleButtons.forEach((btn) => {
    const btnState = btn.dataset.arpeggiatorToggle === "on";
    btn.classList.toggle("active", btnState === arpeggiatorEnabled);
  });

  // Update arpeggiator interval button
  arpeggiatorIntervalButtons.forEach((btn) => {
    const btnInterval = parseInt(btn.dataset.arpeggiatorInterval);
    btn.classList.toggle("active", btnInterval === arpeggiatorInterval);
  });

  // Update visualization toggle button
  visualizationToggleButtons.forEach((btn) => {
    const btnState = btn.dataset.visualizationToggle === "on";
    btn.classList.toggle("active", btnState === visualizationEnabled);
  });

  // Update transition mode button
  transitionButtons.forEach((btn) => {
    btn.classList.toggle("active", btn.dataset.transition === transitionMode);
  });

  updateDetuneDisplay();
  detuneIntensityButtons.forEach((b) => (b.disabled = !detuneEnabled));
}

/**
 * Save user preferences to localStorage
 */
function saveUserPreferences() {
  const prefsKey = "soundswarm_preferences";
  const prefs = {
    waveform: currentWaveform,
    detuneEnabled,
    detuneIntensity,
    arpeggiatorEnabled,
    arpeggiatorInterval,
    visualizationEnabled,
    transitionMode,
  };
  localStorage.setItem(prefsKey, JSON.stringify(prefs));
}

/**
 * Save session data (debounced)
 */
function saveSession() {
  if (saveSessionTimeout) clearTimeout(saveSessionTimeout);
  saveSessionTimeout = setTimeout(() => {
    const key = `soundswarm_${sessionId}`;
    const data = { usedNotes: Array.from(usedNotes) };
    localStorage.setItem(key, JSON.stringify(data));
    saveSessionTimeout = null;
  }, 500);
}

// ============================================
// Note Assignment
// ============================================

/**
 * Request a note assignment from the backend or assign locally
 */
async function requestNote() {
  statusMessage.textContent = "Requesting your note…";

  try {
    const response = await fetch("/api/get-note", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        chord: chordNotes,
        usedNotes: Array.from(usedNotes),
      }),
    });

    if (response.ok) {
      const data = await response.json();
      assignNote(data.note);
      statusMessage.textContent = "";
    } else {
      throw new Error("Backend unavailable");
    }
  } catch (e) {
    console.log("Backend unavailable, using local assignment");
    const note = assignComplementaryNote(chordNotes, Array.from(usedNotes));
    assignNote(note);
    statusMessage.textContent = "Offline mode – notes distributed locally";
  }
}

/**
 * Assign a note to the current user
 */
function assignNote(note) {
  currentNote = note;
  usedNotes.add(note);
  saveSession();

  noteDisplay.textContent = note;
  noteLabel.textContent = "Tap to play your note";
  playButton.textContent = "Play";
  playButton.disabled = false;
}

/**
 * Assign a complementary note based on music theory
 */
function assignComplementaryNote(chord, used) {
  if (used.length >= chord.length) {
    usedNotes.clear();
    saveSession();
    return chord[0];
  }

  if (used.length === 0) {
    return chord[Math.floor(Math.random() * chord.length)];
  }

  const usedSet = new Set(used);
  const usedFreqs = used.map((n) => NOTE_FREQUENCIES[n]).filter((f) => f);
  const minUsed = Math.min(...usedFreqs);
  const maxUsed = Math.max(...usedFreqs);
  const consonance = [1, 1.125, 1.2, 1.25, 1.333, 1.5, 1.667, 1.875, 2];

  let bestNote = chord[0];
  let bestScore = -Infinity;

  for (let i = 0; i < chord.length; i++) {
    const note = chord[i];
    let score = 0;
    const freq = NOTE_FREQUENCIES[note];

    if (i === 0) score += 10;
    if (i === 2) score += 5;
    if (freq < minUsed || freq > maxUsed) score += 8;

    for (const usedFreq of usedFreqs) {
      const ratio = freq / usedFreq;
      let minDiff = Math.abs(consonance[0] - ratio);
      for (let j = 1; j < consonance.length; j++) {
        const diff = Math.abs(consonance[j] - ratio);
        if (diff < minDiff) minDiff = diff;
      }
      if (minDiff < 0.05) score += 3;
    }

    if (usedSet.has(note)) score -= 15;

    if (score > bestScore) {
      bestScore = score;
      bestNote = note;
    }
  }

  return bestNote;
}

/**
 * Shuffle to a new random note
 */
function shuffleNote() {
  const availableNotes = chordNotes.filter((note) => note !== currentNote);

  let newNote;
  if (availableNotes.length === 0) {
    newNote = chordNotes[Math.floor(Math.random() * chordNotes.length)];
  } else {
    newNote = availableNotes[Math.floor(Math.random() * availableNotes.length)];
  }

  usedNotes.add(newNote);
  saveSession();

  if (isPlaying && !isTransitioning) {
    if (transitionMode === "glide") {
      glideToNote(newNote);
    } else {
      crossfadeToNote(newNote);
    }
  } else if (!isPlaying) {
    currentNote = newNote;
    currentFrequency = NOTE_FREQUENCIES[newNote];
    noteDisplay.textContent = newNote;
  }
}

// ============================================
// Audio Engine
// ============================================

/**
 * Safely ramp a gain parameter using exponential ramp
 */
function safeGainRamp(gainParam, targetValue, duration, startTime = null) {
  const now = startTime || audioContext.currentTime;
  const safeTarget = targetValue <= 0 ? AUDIO_CONFIG.NEAR_ZERO : targetValue;
  const safeDuration = Math.max(duration, AUDIO_CONFIG.MIN_RAMP_TIME);

  gainParam.cancelScheduledValues(now);
  gainParam.setValueAtTime(
    Math.max(gainParam.value, AUDIO_CONFIG.NEAR_ZERO),
    now,
  );
  gainParam.exponentialRampToValueAtTime(safeTarget, now + safeDuration);
}

/**
 * Glide smoothly to a new note (frequency change only)
 */
async function glideToNote(newNote) {
  if (!isPlaying || !oscillators.length) return;
  if (!audioContext || audioContext.state !== "running") return;

  const newFrequency = NOTE_FREQUENCIES[newNote];
  if (!newFrequency) return;

  const now = audioContext.currentTime;
  const glideDuration = AUDIO_CONFIG.GLIDE_DURATION;
  const detuneValues = detuneEnabled ? DETUNE_PRESETS[detuneIntensity] : [0];

  oscillators.forEach(({ osc }, index) => {
    const detuneCents = detuneValues[index] || 0;
    const targetFreq = newFrequency * Math.pow(2, detuneCents / 1200);

    osc.frequency.cancelScheduledValues(now);
    osc.frequency.setValueAtTime(osc.frequency.value, now);
    osc.frequency.exponentialRampToValueAtTime(targetFreq, now + glideDuration);
  });

  currentFrequency = newFrequency;
  currentNote = newNote;
  noteDisplay.textContent = newNote;
}

/**
 * Crossfade to a new note (full sound chain replacement)
 */
async function crossfadeToNote(newNote) {
  if (!isPlaying || isTransitioning) return;

  if (!audioContext || audioContext.state !== "running") {
    try {
      if (!audioContext) {
        audioContext = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioContext.state === "suspended") {
        await audioContext.resume();
      }
    } catch (e) {
      console.error("Crossfade: AudioContext not available");
      return;
    }
  }

  isTransitioning = true;

  const now = audioContext.currentTime;
  const crossfadeDuration = AUDIO_CONFIG.CROSSFADE_DURATION;

  const oldGainNode = gainNode;
  const oldOscillators = oscillators;
  const oldLfos = lfos;
  const oldFilterNode = filterNode;
  const oldDelayNode = delayNode;
  const oldDelayFeedbackGain = delayFeedbackGain;
  const oldDryGain = dryGain;
  const oldWetGain = wetGain;

  if (oldGainNode) {
    safeGainRamp(oldGainNode.gain, 0, crossfadeDuration, now);
  }

  if (oldWetGain) {
    safeGainRamp(oldWetGain.gain, 0, crossfadeDuration * 0.5, now);
  }

  currentNote = newNote;
  currentFrequency = NOTE_FREQUENCIES[newNote];
  noteDisplay.textContent = newNote;

  createNewSoundChain();

  setTimeout(
    () => {
      cleanupAudioNodes(
        oldOscillators,
        oldLfos,
        oldGainNode,
        oldFilterNode,
        oldDelayNode,
        oldDelayFeedbackGain,
        oldDryGain,
        oldWetGain,
      );
      isTransitioning = false;
    },
    crossfadeDuration * 1000 + 100,
  );
}

/**
 * Clean up audio nodes safely
 */
function cleanupAudioNodes(
  oscs,
  lfoList,
  gain,
  filter,
  delay,
  delayFb,
  dry,
  wet,
) {
  if (oscs) {
    oscs.forEach(({ osc, pitchLfo }) => {
      try {
        osc.stop();
        pitchLfo.stop();
        osc.disconnect();
        pitchLfo.disconnect();
      } catch (e) {}
    });
  }

  if (lfoList) {
    lfoList.forEach((lfo) => {
      try {
        lfo.stop();
        lfo.disconnect();
      } catch (e) {}
    });
  }

  [gain, filter, delay, delayFb, dry, wet].forEach((node) => {
    if (node) {
      try {
        node.disconnect();
      } catch (e) {}
    }
  });
}

/**
 * Create a new sound chain
 */
function createNewSoundChain() {
  const now = audioContext.currentTime;

  const newGainNode = audioContext.createGain();
  newGainNode.gain.setValueAtTime(AUDIO_CONFIG.NEAR_ZERO, now);
  newGainNode.gain.exponentialRampToValueAtTime(
    0.3,
    now + AUDIO_CONFIG.FADE_IN_DURATION,
  );

  const newFilterNode = audioContext.createBiquadFilter();
  newFilterNode.type = "lowpass";
  newFilterNode.frequency.value = 2000;
  newFilterNode.Q.value = 1;

  let newDelayNode = null;
  let newDelayFeedbackGain = null;
  let newDryGain = null;
  let newWetGain = null;

  if (delayEnabled) {
    newDelayNode = audioContext.createDelay(5.0);
    newDelayNode.delayTime.value = 0.15;

    newDelayFeedbackGain = audioContext.createGain();
    newDelayFeedbackGain.gain.value = isMobileDevice ? 0.15 : 0.4;

    newDryGain = audioContext.createGain();
    newWetGain = audioContext.createGain();
    newDryGain.gain.value = 0.8;
    newWetGain.gain.value = isMobileDevice ? 0.08 : 0.2;

    newFilterNode.connect(newDryGain);
    newDryGain.connect(audioContext.destination);

    newFilterNode.connect(newDelayNode);
    newDelayNode.connect(newWetGain);
    newWetGain.connect(audioContext.destination);
    newDelayNode.connect(newDelayFeedbackGain);
    newDelayFeedbackGain.connect(newDelayNode);
  } else {
    newFilterNode.connect(audioContext.destination);
  }

  newGainNode.connect(newFilterNode);

  const detuneValues = detuneEnabled ? DETUNE_PRESETS[detuneIntensity] : [0];
  const numVoices = detuneValues.length;

  const newOscillators = [];
  const newLfos = [];

  const amplitudeLfoFreq = 0.35 * (0.85 + Math.random() * 0.3);
  const filterLfoFreq = 0.25 * (0.85 + Math.random() * 0.3);

  detuneValues.forEach((detune) => {
    const osc = audioContext.createOscillator();
    osc.type = currentWaveform;

    const detuneMultiplier = Math.pow(2, detune / 1200);
    osc.frequency.value = currentFrequency * detuneMultiplier;

    const oscGain = audioContext.createGain();
    oscGain.gain.setValueAtTime(AUDIO_CONFIG.NEAR_ZERO, now);
    oscGain.gain.exponentialRampToValueAtTime(
      1 / numVoices,
      now + AUDIO_CONFIG.OSC_ATTACK,
    );

    const pitchLfo = audioContext.createOscillator();
    pitchLfo.frequency.value = 0.1;
    const pitchLfoGainNode = audioContext.createGain();
    pitchLfoGainNode.gain.value = 2;

    pitchLfo.connect(pitchLfoGainNode);
    pitchLfoGainNode.connect(osc.frequency);

    osc.connect(oscGain);
    oscGain.connect(newGainNode);

    osc.start(now);
    pitchLfo.start(now);

    newOscillators.push({ osc, oscGain, pitchLfo, pitchLfoGainNode, detune });
  });

  const volumeLfo = audioContext.createOscillator();
  volumeLfo.frequency.value = amplitudeLfoFreq;
  const newVolumeLfoGain = audioContext.createGain();
  newVolumeLfoGain.gain.value = 0.15;

  volumeLfo.connect(newVolumeLfoGain);
  newVolumeLfoGain.connect(newGainNode.gain);
  volumeLfo.start(now);
  newLfos.push(volumeLfo);

  volumeLfoStartTime = now;
  volumeLfoFrequency = amplitudeLfoFreq;

  const filterLfo = audioContext.createOscillator();
  filterLfo.frequency.value = filterLfoFreq;
  const newFilterLfoGain = audioContext.createGain();
  newFilterLfoGain.gain.value = 1500;

  filterLfo.connect(newFilterLfoGain);
  newFilterLfoGain.connect(newFilterNode.frequency);
  filterLfo.start(now);
  newLfos.push(filterLfo);

  oscillators = newOscillators;
  lfos = newLfos;
  gainNode = newGainNode;
  filterNode = newFilterNode;
  delayNode = newDelayNode;
  delayFeedbackGain = newDelayFeedbackGain;
  dryGain = newDryGain;
  wetGain = newWetGain;
  volumeLfoGain = newVolumeLfoGain;
  filterLfoGain = newFilterLfoGain;
}

/**
 * Start playing sound
 */
async function playSound() {
  if (!currentNote) {
    console.log("playSound: No current note");
    return;
  }

  console.log("playSound: Starting...");
  statusMessage.textContent = "Starting audio...";

  const unlocked = await unlockAudio();
  console.log(
    "playSound: Unlock result:",
    unlocked,
    "State:",
    audioContext?.state,
  );

  if (!unlocked || !audioContext || audioContext.state !== "running") {
    console.error("playSound: AudioContext not running");
    statusMessage.textContent = "Tap the Play button again";
    return;
  }

  statusMessage.textContent = "";
  currentFrequency = NOTE_FREQUENCIES[currentNote];

  createNewSoundChain();

  isPlaying = true;
  playButton.textContent = "Stop";
  noteLabel.textContent = "Playing…";

  if (arpeggiatorEnabled) {
    startArpeggiator();
  }

  visualize();
}

/**
 * Stop playing sound
 */
function stopSound() {
  if (!isPlaying) return;

  if (!audioContext) {
    isPlaying = false;
    playButton.textContent = "Play";
    noteLabel.textContent = "Tap to play your note";
    return;
  }

  const now = audioContext.currentTime;

  if (gainNode) {
    safeGainRamp(gainNode.gain, 0, AUDIO_CONFIG.FADE_OUT_DURATION, now);
  }

  if (wetGain) {
    safeGainRamp(wetGain.gain, 0, AUDIO_CONFIG.FADE_OUT_DURATION * 0.3, now);
  }

  const cleanupDelay = AUDIO_CONFIG.FADE_OUT_DURATION * 1000 + 50;

  const oscsToClean = oscillators;
  const lfosToClean = lfos;
  const nodesToClean = {
    gainNode,
    filterNode,
    delayNode,
    delayFeedbackGain,
    dryGain,
    wetGain,
  };

  setTimeout(() => {
    cleanupAudioNodes(
      oscsToClean,
      lfosToClean,
      nodesToClean.gainNode,
      nodesToClean.filterNode,
      nodesToClean.delayNode,
      nodesToClean.delayFeedbackGain,
      nodesToClean.dryGain,
      nodesToClean.wetGain,
    );
  }, cleanupDelay);

  oscillators = [];
  lfos = [];
  gainNode = null;
  filterNode = null;
  delayNode = null;
  delayFeedbackGain = null;
  dryGain = null;
  wetGain = null;

  isPlaying = false;
  isTransitioning = false;

  stopArpeggiator();

  playButton.textContent = "Play";
  noteLabel.textContent = "Tap to play your note";
}

// ============================================
// Arpeggiator
// ============================================

/**
 * Start the arpeggiator
 */
function startArpeggiator() {
  if (arpeggiatorTimer) {
    clearInterval(arpeggiatorTimer);
  }

  arpeggiatorTimer = setInterval(() => {
    if (arpeggiatorEnabled && isPlaying && !isTransitioning) {
      shuffleNote();
    }
  }, arpeggiatorInterval * 1000);
}

/**
 * Stop the arpeggiator
 */
function stopArpeggiator() {
  if (arpeggiatorTimer) {
    clearInterval(arpeggiatorTimer);
    arpeggiatorTimer = null;
  }
}

// ============================================
// Canvas & Visualization
// ============================================

/**
 * Setup canvas for visualization
 */
function setupCanvas() {
  const currentDpr = window.devicePixelRatio || 1;
  if (currentDpr !== dpr) {
    dpr = currentDpr;
  }
  const rect = canvas.getBoundingClientRect();

  canvas.width = rect.width * dpr;
  canvas.height = rect.height * dpr;

  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  canvas.style.width = rect.width + "px";
  canvas.style.height = rect.height + "px";
}

/**
 * Visualization animation loop
 */
function visualize() {
  if (!isPlaying || !visualizationEnabled) {
    if (isPlaying) {
      requestAnimationFrame(visualize);
    }
    return;
  }

  const rect = canvas.getBoundingClientRect();
  const w = rect.width;
  const h = rect.height;

  const now = Date.now();
  const cycleProgress = (now % 2000) / 2000;
  const sineWave = Math.sin(cycleProgress * Math.PI * 2);
  const freqRange = maxChordFreq - minChordFreq || 1;
  const freqNorm = (currentFrequency - minChordFreq) / freqRange;
  const hue = 360 - freqNorm * 200;

  const minDim = Math.min(w, h);
  const baseRadius = minDim * 0.25;
  const radius = Math.max(20, baseRadius + sineWave * 30);
  const glowRadius = Math.max(radius * 2, 40);
  const opacity = Math.max(0.3, Math.min(1, 0.6 + sineWave * 0.3));
  const opacityMult = opacity * 0.3;

  // Clear with trail effect - matching background color
  ctx.fillStyle = "rgba(10, 50, 50, 0.1)";
  ctx.fillRect(0, 0, w, h);

  // Draw glow
  const gradient = ctx.createRadialGradient(
    w / 2,
    h / 2,
    0,
    w / 2,
    h / 2,
    glowRadius,
  );
  gradient.addColorStop(0, `hsla(${hue}, 70%, 60%, ${opacityMult})`);
  gradient.addColorStop(0.5, `hsla(${hue}, 70%, 50%, ${opacity * 0.15})`);
  gradient.addColorStop(1, "transparent");

  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, w, h);

  // Draw core circle
  ctx.beginPath();
  ctx.arc(w / 2, h / 2, radius, 0, Math.PI * 2);
  ctx.fillStyle = `hsla(${hue}, 80%, 65%, ${opacity})`;
  ctx.fill();

  requestAnimationFrame(visualize);
}

// ============================================
// UI Controls
// ============================================

/**
 * Update detune display text
 */
function updateDetuneDisplay() {
  const values = DETUNE_PRESETS[detuneIntensity];
  const nonZero = values.filter((v) => v !== 0).map((v) => Math.abs(v));
  if (nonZero.length > 0) {
    detuneDisplay.textContent = `±${nonZero[0]}¢ / ±${nonZero[1] || nonZero[0]}¢`;
  } else {
    detuneDisplay.textContent = "No detune";
  }
}

/**
 * Setup all UI control event listeners
 */
function setupControls() {
  // Play button
  playButton.addEventListener("click", async (e) => {
    console.log("Play button clicked, isPlaying:", isPlaying);

    if (isPlaying) {
      stopSound();
    } else {
      if (!audioContext) {
        const AudioContextClass =
          window.AudioContext || window.webkitAudioContext;
        audioContext = new AudioContextClass();
        console.log("Created AudioContext in click handler");
      }

      if (audioContext.state === "suspended") {
        audioContext.resume().then(() => {
          console.log("AudioContext resumed in click handler");
        });
      }

      await playSound();
    }
  });

  // Waveform buttons
  waveformButtons.forEach((btn) => {
    btn.addEventListener("click", () => {
      waveformButtons.forEach((b) => b.classList.remove("active"));
      btn.classList.add("active");
      currentWaveform = btn.dataset.waveform;
      saveUserPreferences();
      if (isPlaying) crossfadeToNote(currentNote);
    });
  });

  // Detune toggle
  detuneToggleButtons.forEach((btn) => {
    btn.addEventListener("click", () => {
      detuneToggleButtons.forEach((b) => b.classList.remove("active"));
      btn.classList.add("active");
      detuneEnabled = btn.dataset.detuneToggle === "on";
      saveUserPreferences();
      detuneIntensityButtons.forEach((b) => (b.disabled = !detuneEnabled));
      if (isPlaying) crossfadeToNote(currentNote);
    });
  });

  // Detune intensity
  detuneIntensityButtons.forEach((btn) => {
    btn.addEventListener("click", () => {
      detuneIntensityButtons.forEach((b) => b.classList.remove("active"));
      btn.classList.add("active");
      detuneIntensity = btn.dataset.detune;
      saveUserPreferences();
      updateDetuneDisplay();
      if (isPlaying) crossfadeToNote(currentNote);
    });
  });

  updateDetuneDisplay();
  detuneIntensityButtons.forEach((b) => (b.disabled = true));

  // Shuffle note button
  shuffleNoteButton.addEventListener("click", () => {
    shuffleNote();
  });

  // Transition mode buttons
  transitionButtons.forEach((btn) => {
    btn.addEventListener("click", () => {
      transitionButtons.forEach((b) => b.classList.remove("active"));
      btn.classList.add("active");
      transitionMode = btn.dataset.transition;
      saveUserPreferences();
    });
  });

  // Arpeggiator toggle
  arpeggiatorToggleButtons.forEach((btn) => {
    btn.addEventListener("click", () => {
      arpeggiatorToggleButtons.forEach((b) => b.classList.remove("active"));
      btn.classList.add("active");
      arpeggiatorEnabled = btn.dataset.arpeggiatorToggle === "on";
      saveUserPreferences();
      if (arpeggiatorEnabled && isPlaying) {
        startArpeggiator();
      } else {
        stopArpeggiator();
      }
    });
  });

  // Arpeggiator interval
  arpeggiatorIntervalButtons.forEach((btn) => {
    btn.addEventListener("click", () => {
      arpeggiatorIntervalButtons.forEach((b) => b.classList.remove("active"));
      btn.classList.add("active");
      arpeggiatorInterval = parseInt(btn.dataset.arpeggiatorInterval);
      saveUserPreferences();
      if (arpeggiatorEnabled) {
        stopArpeggiator();
        startArpeggiator();
      }
    });
  });

  // Visualization toggle
  visualizationToggleButtons.forEach((btn) => {
    btn.addEventListener("click", () => {
      visualizationToggleButtons.forEach((b) => b.classList.remove("active"));
      btn.classList.add("active");
      visualizationEnabled = btn.dataset.visualizationToggle === "on";
      saveUserPreferences();
    });
  });

  // Menu toggle
  menuToggle.addEventListener("click", () => {
    controlsSection.classList.toggle("open");
    controlsOverlay.classList.toggle("open");
    menuToggle.classList.toggle("open");
  });

  // Overlay click
  controlsOverlay.addEventListener("click", (e) => {
    if (e.target === controlsOverlay) {
      controlsSection.classList.remove("open");
      controlsOverlay.classList.remove("open");
      menuToggle.classList.remove("open");
    }
  });
}

// ============================================
// Start Application
// ============================================

// Initialize when DOM is ready
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", init);
} else {
  init();
}