import * as THREE from "https://esm.sh/three@0.175.0";
import { OrbitControls } from "https://esm.sh/three@0.175.0/examples/jsm/controls/OrbitControls.js";
document.addEventListener("DOMContentLoaded", function () {
  setupExpandingCirclesPreloader();
  let audioContext = null;
  let audioAnalyser = null;
  let audioSource = null;
  let audioData;
  let frequencyData;
  let audioReactivity = 1.0;
  let audioSensitivity = 5.0;
  let isAudioInitialized = false;
  let isAudioPlaying = false;
  let lastUserActionTime = Date.now();
  let updateGlow;
  let crypticMessageTimeout;
  let audioContextStarted = false;
  let audioSourceConnected = false;
  let currentAudioElement = null;
  let floatingParticles = [];
  let currentAudioSrc = null;
  let currentMessageIndex = 0;

  function setupExpandingCirclesPreloader() {
    const canvas = document.getElementById("preloader-canvas");
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    let time = 0;
    let lastTime = 0;
    const maxRadius = 80;
    const circleCount = 5;
    const dotCount = 24;

    function animate(timestamp) {
      if (!lastTime) lastTime = timestamp;
      const deltaTime = timestamp - lastTime;
      lastTime = timestamp;
      time += deltaTime * 0.001;
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.beginPath();
      ctx.arc(centerX, centerY, 3, 0, Math.PI * 2);
      ctx.fillStyle = "rgba(255, 78, 66, 0.9)";
      ctx.fill();
      for (let c = 0; c < circleCount; c++) {
        const circlePhase = (time * 0.3 + c / circleCount) % 1;
        const radius = circlePhase * maxRadius;
        const opacity = 1 - circlePhase;
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
        ctx.strokeStyle = `rgba(255, 78, 66, ${opacity * 0.2})`;
        ctx.lineWidth = 1;
        ctx.stroke();
        for (let i = 0; i < dotCount; i++) {
          const angle = (i / dotCount) * Math.PI * 2;
          const x = centerX + Math.cos(angle) * radius;
          const y = centerY + Math.sin(angle) * radius;
          const size = 2 * (1 - circlePhase * 0.5);
          ctx.beginPath();
          ctx.moveTo(centerX, centerY);
          ctx.lineTo(x, y);
          ctx.strokeStyle = `rgba(255, 78, 66, ${opacity * 0.1})`;
          ctx.lineWidth = 1;
          ctx.stroke();
          ctx.beginPath();
          ctx.arc(x, y, size, 0, Math.PI * 2);
          ctx.fillStyle = `rgba(255, 78, 66, ${opacity * 0.9})`;
          ctx.fill();
        }
      }
      if (document.getElementById("loading-overlay").style.display !== "none") {
        requestAnimationFrame(animate);
      }
    }
    requestAnimationFrame(animate);
  }
  function initFloatingParticles() {
    const container = document.getElementById("floating-particles");
    const numParticles = 1000;

    // Clear any existing particles
    container.innerHTML = "";
    floatingParticles = [];

    // Get window dimensions for better positioning
    const windowWidth = window.innerWidth;
    const windowHeight = window.innerHeight;
    const centerX = windowWidth / 2;
    const centerY = windowHeight / 2;

    for (let i = 0; i < numParticles; i++) {
      const particle = document.createElement("div");
      particle.className = "particle";
      particle.style.position = "absolute";

      // Make all particles the same small size
      particle.style.width = "1.5px";
      particle.style.height = "1.5px";
      particle.style.backgroundColor = `rgba(255, ${
        Math.floor(Math.random() * 100) + 78
      }, ${Math.floor(Math.random() * 100) + 66}, ${
        Math.random() * 0.5 + 0.2
      })`;
      particle.style.borderRadius = "50%";

      // Create a large hollow area in the center
      const minDistance = 200; // Minimum distance from center
      const maxDistance = Math.max(windowWidth, windowHeight) * 0.8; // Use 80% of the larger dimension

      // Use polar coordinates for even distribution
      const angle = Math.random() * Math.PI * 2;

      // Use square root distribution for more even radial distribution
      // (prevents clustering at the center that happens with linear distribution)
      const distanceFactor = Math.sqrt(Math.random());
      const distance =
        minDistance + distanceFactor * (maxDistance - minDistance);

      // Calculate position
      const x = Math.cos(angle) * distance + centerX;
      const y = Math.sin(angle) * distance + centerY;

      particle.style.left = x + "px";
      particle.style.top = y + "px";

      // Store particle properties for animation
      const particleObj = {
        element: particle,
        x: x,
        y: y,
        speed: Math.random() * 0.5 + 0.1,
        angle: Math.random() * Math.PI * 2,
        angleSpeed: (Math.random() - 0.5) * 0.02,
        amplitude: Math.random() * 50 + 20, // Increased amplitude for wider movement
        size: 1.5, // Fixed size
        pulseSpeed: Math.random() * 0.04 + 0.01,
        pulsePhase: Math.random() * Math.PI * 2
      };

      floatingParticles.push(particleObj);
      container.appendChild(particle);
    }

    // Start animation
    animateFloatingParticles();
  }

  // Animate floating particles
  function animateFloatingParticles() {
    const centerX = window.innerWidth / 2;
    const centerY = window.innerHeight / 2;
    let time = 0;

    function updateParticles() {
      time += 0.01;

      floatingParticles.forEach((particle) => {
        // Update angle
        particle.angle += particle.angleSpeed;

        // Calculate orbit around center with some drift
        const orbitX = centerX + Math.cos(particle.angle) * particle.amplitude;
        const orbitY = centerY + Math.sin(particle.angle) * particle.amplitude;

        // Add some noise movement
        const noiseX = Math.sin(time * particle.speed + particle.angle) * 5;
        const noiseY =
          Math.cos(time * particle.speed + particle.angle * 0.7) * 5;

        // Apply movement without audio reactivity
        const newX = orbitX + noiseX;
        const newY = orbitY + noiseY;

        // Update position
        particle.element.style.left = newX + "px";
        particle.element.style.top = newY + "px";

        // Pulse size slightly without audio
        const pulseFactor =
          1 + Math.sin(time * particle.pulseSpeed + particle.pulsePhase) * 0.3;
        const newSize = particle.size * pulseFactor;

        particle.element.style.width = newSize + "px";
        particle.element.style.height = newSize + "px";

        // Adjust opacity based on pulse
        const baseOpacity =
          0.2 +
          Math.sin(time * particle.pulseSpeed + particle.pulsePhase) * 0.1;
        particle.element.style.opacity = Math.min(0.8, baseOpacity);
      });

      requestAnimationFrame(updateParticles);
    }

    requestAnimationFrame(updateParticles);
  }

  function initAudio() {
    if (isAudioInitialized) return true;
    try {
      audioContext = new (window.AudioContext || window.webkitAudioContext)();
      audioAnalyser = audioContext.createAnalyser();
      audioAnalyser.fftSize = 2048;
      audioAnalyser.smoothingTimeConstant = 0.8;
      audioData = new Uint8Array(audioAnalyser.frequencyBinCount);
      frequencyData = new Uint8Array(audioAnalyser.frequencyBinCount);
      audioAnalyser.connect(audioContext.destination);
      isAudioInitialized = true;
      addTerminalMessage("AUDIO ANALYSIS SYSTEM INITIALIZED.");
      showNotification("AUDIO ANALYSIS SYSTEM ONLINE");
      return true;
    } catch (error) {
      console.error("Audio initialization error:", error);
      addTerminalMessage("ERROR: AUDIO SYSTEM INITIALIZATION FAILED.");
      showNotification("AUDIO SYSTEM ERROR");
      return false;
    }
  }

  function ensureAudioContextStarted() {
    if (!audioContext) {
      if (!initAudio()) return false;
    }
    if (audioContext.state === "suspended") {
      audioContext
        .resume()
        .then(() => {
          if (!audioContextStarted) {
            audioContextStarted = true;
            addTerminalMessage("AUDIO CONTEXT RESUMED.");
          }
        })
        .catch((err) => {
          console.error("Failed to resume audio context:", err);
          addTerminalMessage("ERROR: FAILED TO RESUME AUDIO CONTEXT.");
        });
    } else {
      audioContextStarted = true;
    }
    return true;
  }

  function cleanupAudioSource() {
    if (audioSource) {
      try {
        audioSource.disconnect();
        audioSourceConnected = false;
        audioSource = null;
      } catch (e) {
        console.log("Error disconnecting previous source:", e);
      }
    }
  }

  function createNewAudioElement() {
    if (currentAudioElement) {
      if (currentAudioElement.parentNode) {
        currentAudioElement.parentNode.removeChild(currentAudioElement);
      }
    }
    const newAudioElement = document.createElement("audio");
    newAudioElement.id = "audio-player";
    newAudioElement.className = "audio-player";
    newAudioElement.crossOrigin = "anonymous";
    document
      .querySelector(".audio-controls")
      .insertBefore(newAudioElement, document.querySelector(".controls-row"));
    currentAudioElement = newAudioElement;
    return newAudioElement;
  }

  function setupAudioSource(audioElement) {
    try {
      if (!ensureAudioContextStarted()) {
        addTerminalMessage(
          "ERROR: AUDIO CONTEXT NOT AVAILABLE. CLICK ANYWHERE TO ENABLE AUDIO."
        );
        return false;
      }
      cleanupAudioSource();
      try {
        // Only create a new media element source if one doesn't already exist
        if (!audioSourceConnected) {
          audioSource = audioContext.createMediaElementSource(audioElement);
          audioSource.connect(audioAnalyser);
          audioSourceConnected = true;
        }
        return true;
      } catch (error) {
        console.error("Error creating media element source:", error);
        if (
          error.name === "InvalidStateError" &&
          error.message.includes("already connected")
        ) {
          addTerminalMessage(
            "AUDIO SOURCE ALREADY CONNECTED. ATTEMPTING TO PLAY ANYWAY."
          );
          return true;
        }
        addTerminalMessage(
          "ERROR: FAILED TO SETUP AUDIO SOURCE. " + error.message
        );
        return false;
      }
    } catch (error) {
      console.error("Error setting up audio source:", error);
      addTerminalMessage("ERROR: FAILED TO SETUP AUDIO SOURCE.");
      return false;
    }
  }

  function initAudioFile(file) {
    try {
      if (!isAudioInitialized && !initAudio()) {
        return;
      }
      const audioPlayer = createNewAudioElement();
      const fileURL = URL.createObjectURL(file);
      currentAudioSrc = fileURL;
      audioPlayer.src = fileURL;
      audioPlayer.onloadeddata = function () {
        if (setupAudioSource(audioPlayer)) {
          audioPlayer
            .play()
            .then(() => {
              isAudioPlaying = true;
              zoomCameraForAudio(true);
            })
            .catch((e) => {
              console.warn("Auto-play prevented:", e);
              addTerminalMessage(
                "WARNING: AUTO-PLAY PREVENTED BY BROWSER. CLICK PLAY TO START AUDIO."
              );
            });
        }
      };
      document.getElementById("file-label").textContent = file.name;
      document.querySelectorAll(".demo-track-btn").forEach((btn) => {
        btn.classList.remove("active");
      });
      addTerminalMessage(`AUDIO FILE LOADED: ${file.name}`);
      showNotification("AUDIO FILE LOADED");
    } catch (error) {
      console.error("Audio file error:", error);
      addTerminalMessage("ERROR: AUDIO FILE PROCESSING FAILED.");
      showNotification("AUDIO FILE ERROR");
    }
  }

  function loadAudioFromURL(url) {
    try {
      if (!isAudioInitialized && !initAudio()) {
        return;
      }
      ensureAudioContextStarted();
      const audioPlayer = createNewAudioElement();
      currentAudioSrc = url;
      audioPlayer.src = url;
      audioPlayer.onloadeddata = function () {
        if (setupAudioSource(audioPlayer)) {
          audioPlayer
            .play()
            .then(() => {
              isAudioPlaying = true;
              zoomCameraForAudio(true);
              addTerminalMessage(`PLAYING DEMO TRACK: ${url.split("/").pop()}`);
              showNotification(`PLAYING: ${url.split("/").pop()}`);
            })
            .catch((e) => {
              console.warn("Play prevented:", e);
              addTerminalMessage(
                "WARNING: AUDIO PLAYBACK PREVENTED BY BROWSER. CLICK PLAY TO START AUDIO."
              );
              showNotification("CLICK PLAY TO START AUDIO");
            });
        }
      };
      const filename = url.split("/").pop();
      document.getElementById("file-label").textContent = filename;
      addTerminalMessage(`LOADING AUDIO FROM URL: ${url.substring(0, 40)}...`);
      showNotification("AUDIO URL LOADED");
    } catch (error) {
      console.error("Audio URL error:", error);
      addTerminalMessage("ERROR: AUDIO URL PROCESSING FAILED.");
      showNotification("AUDIO URL ERROR");
    }
  }
  const circularCanvas = document.getElementById("circular-canvas");
  const circularCtx = circularCanvas.getContext("2d");

  function resizeCircularCanvas() {
    circularCanvas.width = circularCanvas.offsetWidth;
    circularCanvas.height = circularCanvas.offsetHeight;
  }
  resizeCircularCanvas();
  window.addEventListener("resize", resizeCircularCanvas);

  function drawCircularVisualizer() {
    if (!audioAnalyser) return;
    const width = circularCanvas.width;
    const height = circularCanvas.height;
    const centerX = width / 2;
    const centerY = height / 2;
    circularCtx.clearRect(0, 0, width, height);
    audioAnalyser.getByteFrequencyData(frequencyData);
    const numPoints = 180;
    const baseRadius = Math.min(width, height) * 0.4;
    circularCtx.beginPath();
    circularCtx.arc(centerX, centerY, baseRadius * 1.2, 0, Math.PI * 2);
    circularCtx.fillStyle = "rgba(255, 78, 66, 0.05)";
    circularCtx.fill();
    const numRings = 3;
    for (let ring = 0; ring < numRings; ring++) {
      const ringRadius = baseRadius * (0.7 + ring * 0.15);
      const opacity = 0.8 - ring * 0.2;
      circularCtx.beginPath();
      for (let i = 0; i < numPoints; i++) {
        const freqRangeStart = Math.floor(
          (ring * audioAnalyser.frequencyBinCount) / (numRings * 1.5)
        );
        const freqRangeEnd = Math.floor(
          ((ring + 1) * audioAnalyser.frequencyBinCount) / (numRings * 1.5)
        );
        const freqRange = freqRangeEnd - freqRangeStart;
        let sum = 0;
        const segmentSize = Math.floor(freqRange / numPoints);
        for (let j = 0; j < segmentSize; j++) {
          const freqIndex =
            freqRangeStart + ((i * segmentSize + j) % freqRange);
          sum += frequencyData[freqIndex];
        }
        const value = sum / (segmentSize * 255);
        const adjustedValue = value * (audioSensitivity / 5) * audioReactivity;
        const dynamicRadius = ringRadius * (1 + adjustedValue * 0.5);
        const angle = (i / numPoints) * Math.PI * 2;
        const x = centerX + Math.cos(angle) * dynamicRadius;
        const y = centerY + Math.sin(angle) * dynamicRadius;
        if (i === 0) {
          circularCtx.moveTo(x, y);
        } else {
          circularCtx.lineTo(x, y);
        }
      }
      circularCtx.closePath();
      let gradient;
      if (ring === 0) {
        gradient = circularCtx.createRadialGradient(
          centerX,
          centerY,
          ringRadius * 0.8,
          centerX,
          centerY,
          ringRadius * 1.2
        );
        gradient.addColorStop(0, `rgba(255, 78, 66, ${opacity})`);
        gradient.addColorStop(1, `rgba(194, 54, 47, ${opacity * 0.7})`);
      } else if (ring === 1) {
        gradient = circularCtx.createRadialGradient(
          centerX,
          centerY,
          ringRadius * 0.8,
          centerX,
          centerY,
          ringRadius * 1.2
        );
        gradient.addColorStop(0, `rgba(194, 54, 47, ${opacity})`);
        gradient.addColorStop(1, `rgba(255, 179, 171, ${opacity * 0.7})`);
      } else {
        gradient = circularCtx.createRadialGradient(
          centerX,
          centerY,
          ringRadius * 0.8,
          centerX,
          centerY,
          ringRadius * 1.2
        );
        gradient.addColorStop(0, `rgba(255, 179, 171, ${opacity})`);
        gradient.addColorStop(1, `rgba(255, 78, 66, ${opacity * 0.7})`);
      }
      circularCtx.strokeStyle = gradient;
      circularCtx.lineWidth = 2 + (numRings - ring);
      circularCtx.stroke();
      circularCtx.shadowBlur = 15;
      circularCtx.shadowColor = "rgba(255, 78, 66, 0.7)";
    }
    circularCtx.shadowBlur = 0;
  }
  const spectrumCanvas = document.getElementById("spectrum-canvas");
  const spectrumCtx = spectrumCanvas.getContext("2d");

  function resizeSpectrumCanvas() {
    spectrumCanvas.width = spectrumCanvas.offsetWidth;
    spectrumCanvas.height = spectrumCanvas.offsetHeight;
  }
  resizeSpectrumCanvas();
  window.addEventListener("resize", resizeSpectrumCanvas);

  function drawSpectrumAnalyzer() {
    if (!audioAnalyser) return;
    const width = spectrumCanvas.width;
    const height = spectrumCanvas.height;
    spectrumCtx.clearRect(0, 0, width, height);
    audioAnalyser.getByteFrequencyData(frequencyData);
    const barWidth = width / 256;
    let x = 0;
    for (let i = 0; i < 256; i++) {
      const barHeight =
        (frequencyData[i] / 255) * height * (audioSensitivity / 5);
      const hue = (i / 256) * 20 + 0;
      spectrumCtx.fillStyle = `hsl(${hue}, 100%, 50%)`;
      spectrumCtx.fillRect(x, height - barHeight, barWidth - 1, barHeight);
      x += barWidth;
    }
    spectrumCtx.strokeStyle = "rgba(255, 78, 66, 0.2)";
    spectrumCtx.lineWidth = 1;
    for (let i = 0; i < 5; i++) {
      const y = height * (i / 4);
      spectrumCtx.beginPath();
      spectrumCtx.moveTo(0, y);
      spectrumCtx.lineTo(width, y);
      spectrumCtx.stroke();
    }
    for (let i = 0; i < 9; i++) {
      const x = width * (i / 8);
      spectrumCtx.beginPath();
      spectrumCtx.moveTo(x, 0);
      spectrumCtx.lineTo(x, height);
      spectrumCtx.stroke();
    }
    spectrumCtx.fillStyle = "rgba(255, 78, 66, 0.7)";
    spectrumCtx.font = '10px "TheGoodMonolith", monospace';
    spectrumCtx.textAlign = "center";
    const freqLabels = ["0", "1K", "2K", "4K", "8K", "16K"];
    for (let i = 0; i < freqLabels.length; i++) {
      const x = (width / (freqLabels.length - 1)) * i;
      spectrumCtx.fillText(freqLabels[i], x, height - 5);
    }
  }

  function updateAudioWave() {
    if (!audioAnalyser) return;
    audioAnalyser.getByteTimeDomainData(audioData);
    let sum = 0;
    for (let i = 0; i < audioData.length; i++) {
      sum += Math.abs(audioData[i] - 128);
    }
    const average = sum / audioData.length;
    const normalizedAverage = average / audioData.length;
    const wave = document.getElementById("audio-wave");
    const scale =
      1 + normalizedAverage * audioReactivity * (audioSensitivity / 5);
    wave.style.transform = `translate(-50%, -50%) scale(${scale})`;
    wave.style.borderColor = `rgba(255, 78, 66, ${
      0.1 + normalizedAverage * 0.3
    })`;
  }

  function calculateAudioMetrics() {
    if (!audioAnalyser) return;
    audioAnalyser.getByteFrequencyData(frequencyData);
    let maxValue = 0;
    let maxIndex = 0;
    for (let i = 0; i < frequencyData.length; i++) {
      if (frequencyData[i] > maxValue) {
        maxValue = frequencyData[i];
        maxIndex = i;
      }
    }
    const sampleRate = audioContext.sampleRate;
    const peakFrequency =
      (maxIndex * sampleRate) / (audioAnalyser.frequencyBinCount * 2);
    let sum = 0;
    for (let i = 0; i < frequencyData.length; i++) {
      sum += frequencyData[i];
    }
    const amplitude = sum / (frequencyData.length * 255);
    document.getElementById("peak-value").textContent = `${Math.round(
      peakFrequency
    )} HZ`;
    document.getElementById("amplitude-value").textContent = amplitude.toFixed(
      2
    );
    const stabilityValue = 50 + Math.round(amplitude * 50);
    document.getElementById(
      "stability-value"
    ).textContent = `${stabilityValue}%`;
    document.getElementById("stability-bar").style.width = `${stabilityValue}%`;
    if (stabilityValue < 40) {
      document.getElementById("status-indicator").style.color = "#ff00a0";
    } else if (stabilityValue < 70) {
      document.getElementById("status-indicator").style.color = "#ffae00";
    } else {
      document.getElementById("status-indicator").style.color = "#ff4e42";
    }
    if (Math.random() < 0.05) {
      document.getElementById("mass-value").textContent = (
        1 +
        amplitude * 2
      ).toFixed(3);
      document.getElementById("energy-value").textContent = `${(
        amplitude * 10
      ).toFixed(1)}e8 J`;
      document.getElementById("variance-value").textContent = (
        amplitude * 0.01
      ).toFixed(4);
      const phases = ["π/4", "π/2", "π/6", "3π/4"];
      document.getElementById("phase-value").textContent =
        phases[Math.floor(Math.random() * phases.length)];
    }
  }

  function scheduleCrypticMessages() {
    if (crypticMessageTimeout) {
      clearTimeout(crypticMessageTimeout);
    }

    const delay = Math.random() * 15000 + 10000; // 10-25 seconds

    crypticMessageTimeout = setTimeout(() => {
      if (Date.now() - lastUserActionTime > 10000) {
        const messages = [
          "GSAP.TO('#FILIP', {POSITION: 'WEBFLOW', DURATION: '3.0 QUANTUM_CYCLES'});",
          "CONST FILIP = NEW DESIGNER({SKILLS: ['GSAP', 'THREEJS', 'WEBFLOW', 'NEURAL_UI']});",
          "AWAIT WEBFLOW.HIRE(FILIP, {ROLE: 'DESIGNER', SALARY: 'COMPETITIVE'});",
          "SYSTEM.INTEGRATE(FILIP.CREATIVITY, {TARGET: 'WEBFLOW_ECOSYSTEM', EFFICIENCY: 0.97});",
          "TIMELINE.FORK({AGENT: 'FILIP', MISSION: 'ELEVATE_DIGITAL_EXPERIENCES', PROBABILITY: 0.998});"
        ];

        // Get the current message and increment the index
        const selectedMessage = messages[currentMessageIndex];
        addTerminalMessage(selectedMessage, true);

        // Move to the next message, loop back to the beginning if we've shown all messages
        currentMessageIndex = (currentMessageIndex + 1) % messages.length;
      }

      scheduleCrypticMessages();
    }, delay);
  }
  document.addEventListener("mousemove", function () {
    lastUserActionTime = Date.now();
  });
  document.addEventListener("click", function () {
    lastUserActionTime = Date.now();
    if (!isAudioInitialized) {
      initAudio();
    } else if (audioContext && audioContext.state === "suspended") {
      audioContext.resume();
    }
  });
  document.addEventListener("keydown", function () {
    lastUserActionTime = Date.now();
  });
  setTimeout(() => {
    scheduleCrypticMessages();
    setTimeout(() => {
      addTerminalMessage("FILIPPORTFOLIO.VERSION = 'EXCEPTIONAL';", true);
    }, 15000);
  }, 10000);
  const loadingOverlay = document.getElementById("loading-overlay");
  setTimeout(() => {
    loadingOverlay.style.opacity = 0;
    setTimeout(() => {
      loadingOverlay.style.display = "none";
      initAudio();
      initFloatingParticles();
    }, 500);
  }, 3000);

  function updateTimestamp() {
    const now = new Date();
    const hours = String(now.getHours()).padStart(2, "0");
    const minutes = String(now.getMinutes()).padStart(2, "0");
    const seconds = String(now.getSeconds()).padStart(2, "0");
    document.getElementById(
      "timestamp"
    ).textContent = `TIME: ${hours}:${minutes}:${seconds}`;
  }
  setInterval(updateTimestamp, 1000);
  updateTimestamp();
  const terminalContent = document.getElementById("terminal-content");
  const typingLine = terminalContent.querySelector(".typing");
  let messageQueue = [
    "SYSTEM INITIALIZED. AUDIO ANALYSIS READY.",
    "SCANNING FOR ANOMALIES IN FREQUENCY SPECTRUM."
  ];

  function typeNextMessage() {
    if (messageQueue.length === 0) return;
    const message = messageQueue.shift();
    let charIndex = 0;
    const typingInterval = setInterval(() => {
      if (charIndex < message.length) {
        typingLine.textContent = message.substring(0, charIndex + 1);
        charIndex++;
      } else {
        clearInterval(typingInterval);
        const newLine = document.createElement("div");
        newLine.className = "terminal-line command-line";
        newLine.textContent = message;
        terminalContent.insertBefore(newLine, typingLine);
        typingLine.textContent = "";
        terminalContent.scrollTop = terminalContent.scrollHeight;
        setTimeout(typeNextMessage, 5000);
      }
    }, 50);
  }

  function addTerminalMessage(message, isCommand = false) {
    const newLine = document.createElement("div");
    const isFilipMessage =
      message.toLowerCase().includes("filip") ||
      message.toLowerCase().includes("webflow");
    if (isCommand) {
      if (isFilipMessage) {
        newLine.className = "terminal-line command-line";
      } else {
        newLine.className = "terminal-line command-line";
      }
    } else {
      newLine.className = "terminal-line";
    }
    newLine.textContent = message;
    terminalContent.insertBefore(newLine, typingLine);
    terminalContent.scrollTop = terminalContent.scrollHeight;
  }
  setTimeout(typeNextMessage, 3000);
  const waveformCanvas = document.getElementById("waveform-canvas");
  const waveformCtx = waveformCanvas.getContext("2d");

  function resizeCanvas() {
    waveformCanvas.width = waveformCanvas.offsetWidth * window.devicePixelRatio;
    waveformCanvas.height =
      waveformCanvas.offsetHeight * window.devicePixelRatio;
    waveformCtx.scale(window.devicePixelRatio, window.devicePixelRatio);
  }
  resizeCanvas();
  window.addEventListener("resize", resizeCanvas);

  function drawWaveform() {
    const width = waveformCanvas.width / window.devicePixelRatio;
    const height = waveformCanvas.height / window.devicePixelRatio;
    waveformCtx.clearRect(0, 0, width, height);
    waveformCtx.fillStyle = "rgba(0, 0, 0, 0.2)";
    waveformCtx.fillRect(0, 0, width, height);
    if (audioAnalyser) {
      audioAnalyser.getByteTimeDomainData(audioData);
      waveformCtx.beginPath();
      waveformCtx.strokeStyle = "rgba(255, 78, 66, 0.8)";
      waveformCtx.lineWidth = 2;
      const sliceWidth = width / audioData.length;
      let x = 0;
      for (let i = 0; i < audioData.length; i++) {
        const v = audioData[i] / 128.0;
        const y = (v * height) / 2;
        if (i === 0) {
          waveformCtx.moveTo(x, y);
        } else {
          waveformCtx.lineTo(x, y);
        }
        x += sliceWidth;
      }
      waveformCtx.stroke();
    } else {
      waveformCtx.beginPath();
      waveformCtx.strokeStyle = "rgba(255, 78, 66, 0.8)";
      waveformCtx.lineWidth = 1;
      const time = Date.now() / 1000;
      const sliceWidth = width / 100;
      let x = 0;
      for (let i = 0; i < 100; i++) {
        const t = i / 100;
        const y =
          height / 2 +
          Math.sin(t * 10 + time) * 5 +
          Math.sin(t * 20 + time * 1.5) * 3 +
          Math.sin(t * 30 + time * 0.5) * 7 +
          (Math.random() - 0.5) * 2;
        if (i === 0) {
          waveformCtx.moveTo(x, y);
        } else {
          waveformCtx.lineTo(x, y);
        }
        x += sliceWidth;
      }
      waveformCtx.stroke();
    }
    requestAnimationFrame(drawWaveform);
  }
  drawWaveform();
  let scene, camera, renderer, controls;
  let anomalyObject;
  let distortionAmount = 1.0;
  let resolution = 32;
  let clock = new THREE.Clock();
  let isDraggingAnomaly = false;
  let anomalyVelocity = new THREE.Vector2(0, 0);
  let anomalyTargetPosition = new THREE.Vector3(0, 0, 0);
  let anomalyOriginalPosition = new THREE.Vector3(0, 0, 0);
  let defaultCameraPosition = new THREE.Vector3(0, 0, 10);
  let zoomedCameraPosition = new THREE.Vector3(0, 0, 7);

  function initThreeJS() {
    scene = new THREE.Scene();
    scene.fog = new THREE.FogExp2(0x0a0e17, 0.05);
    camera = new THREE.PerspectiveCamera(
      60,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    camera.position.copy(defaultCameraPosition);
    renderer = new THREE.WebGLRenderer({
      antialias: true,
      alpha: true,
      powerPreference: "high-performance",
      stencil: false,
      depth: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x000000, 0);
    renderer.setPixelRatio(window.devicePixelRatio);
    document.getElementById("three-container").appendChild(renderer.domElement);
    controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.1;
    controls.rotateSpeed = 0.5;
    controls.zoomSpeed = 0.7;
    controls.panSpeed = 0.8;
    controls.minDistance = 3;
    controls.maxDistance = 30;
    controls.enableZoom = false;
    const ambientLight = new THREE.AmbientLight(0x404040, 1.5);
    scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
    directionalLight.position.set(1, 1, 1);
    scene.add(directionalLight);
    const pointLight1 = new THREE.PointLight(0xff4e42, 1, 10);
    pointLight1.position.set(2, 2, 2);
    scene.add(pointLight1);
    const pointLight2 = new THREE.PointLight(0xc2362f, 1, 10);
    pointLight2.position.set(-2, -2, -2);
    scene.add(pointLight2);
    createAnomalyObject();
    createBackgroundParticles();
    window.addEventListener("resize", onWindowResize);
    setupAnomalyDragging();
    animate();
  }

  function zoomCameraForAudio(zoomIn) {
    const targetPosition = zoomIn
      ? zoomedCameraPosition
      : defaultCameraPosition;
    gsap.to(camera.position, {
      x: targetPosition.x,
      y: targetPosition.y,
      z: targetPosition.z,
      duration: 1.5,
      ease: "power2.inOut",
      onUpdate: function () {
        camera.lookAt(0, 0, 0);
      }
    });
    if (zoomIn) {
      addTerminalMessage(
        "CAMERA.ZOOM(TARGET: 0.7, DURATION: 1.5, EASE: 'POWER2.INOUT');",
        true
      );
    } else {
      addTerminalMessage(
        "CAMERA.ZOOM(TARGET: 1.0, DURATION: 1.5, EASE: 'POWER2.INOUT');",
        true
      );
    }
  }

  function setupAnomalyDragging() {
    const container = document.getElementById("three-container");
    const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2();
    let isDragging = false;
    let dragStartPosition = new THREE.Vector2();
    anomalyOriginalPosition = new THREE.Vector3(0, 0, 0);
    anomalyTargetPosition = new THREE.Vector3(0, 0, 0);
    const maxDragDistance = 3;
    container.addEventListener("mousedown", function (event) {
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
      raycaster.setFromCamera(mouse, camera);
      const intersects = raycaster.intersectObject(anomalyObject, true);
      if (intersects.length > 0) {
        controls.enabled = false;
        isDragging = true;
        isDraggingAnomaly = true;
        dragStartPosition.x = mouse.x;
        dragStartPosition.y = mouse.y;
        addTerminalMessage(
          "ANOMALY INTERACTION DETECTED. PHYSICS SIMULATION ACTIVE.",
          true
        );
        showNotification("ANOMALY INTERACTION DETECTED");
      }
    });
    container.addEventListener("mousemove", function (event) {
      if (isDragging) {
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
        // Fix the drag direction to match mouse movement
        const deltaX = (mouse.x - dragStartPosition.x) * 5;
        const deltaY = (mouse.y - dragStartPosition.y) * 5;
        anomalyTargetPosition.x += deltaX;
        anomalyTargetPosition.y += deltaY;
        const distance = Math.sqrt(
          anomalyTargetPosition.x * anomalyTargetPosition.x +
            anomalyTargetPosition.y * anomalyTargetPosition.y
        );
        if (distance > maxDragDistance) {
          const scale = maxDragDistance / distance;
          anomalyTargetPosition.x *= scale;
          anomalyTargetPosition.y *= scale;
        }
        anomalyVelocity.x = deltaX * 2;
        anomalyVelocity.y = deltaY * 2;
        dragStartPosition.x = mouse.x;
        dragStartPosition.y = mouse.y;
      }
    });
    container.addEventListener("mouseup", function () {
      if (isDragging) {
        controls.enabled = true;
        isDragging = false;
        isDraggingAnomaly = false;
        addTerminalMessage(
          `INERTIAPLUGIN.TRACK('#ANOMALY', {THROWRESISTANCE: 0.45, VELOCITY: {X: ${anomalyVelocity.x.toFixed(
            2
          )}, Y: ${anomalyVelocity.y.toFixed(2)}}});`,
          true
        );
      }
    });
    container.addEventListener("mouseleave", function () {
      if (isDragging) {
        controls.enabled = true;
        isDragging = false;
        isDraggingAnomaly = false;
      }
    });
  }

  function createBackgroundParticles() {
    const particlesGeometry = new THREE.BufferGeometry();
    const particleCount = 3000;
    const positions = new Float32Array(particleCount * 3);
    const colors = new Float32Array(particleCount * 3);
    const sizes = new Float32Array(particleCount);
    const color1 = new THREE.Color(0xff4e42);
    const color2 = new THREE.Color(0xc2362f);
    const color3 = new THREE.Color(0xffb3ab);
    for (let i = 0; i < particleCount; i++) {
      positions[i * 3] = (Math.random() - 0.5) * 100;
      positions[i * 3 + 1] = (Math.random() - 0.5) * 100;
      positions[i * 3 + 2] = (Math.random() - 0.5) * 100;
      let color;
      const colorChoice = Math.random();
      if (colorChoice < 0.33) {
        color = color1;
      } else if (colorChoice < 0.66) {
        color = color2;
      } else {
        color = color3;
      }
      colors[i * 3] = color.r;
      colors[i * 3 + 1] = color.g;
      colors[i * 3 + 2] = color.b;
      sizes[i] = 0.05;
    }
    particlesGeometry.setAttribute(
      "position",
      new THREE.BufferAttribute(positions, 3)
    );
    particlesGeometry.setAttribute(
      "color",
      new THREE.BufferAttribute(colors, 3)
    );
    particlesGeometry.setAttribute("size", new THREE.BufferAttribute(sizes, 1));
    const particlesMaterial = new THREE.ShaderMaterial({
      uniforms: {
        time: {
          value: 0
        }
      },
      vertexShader: `
          attribute float size;
          varying vec3 vColor;
          uniform float time;
          
          void main() {
            vColor = color;
            
            vec3 pos = position;
            pos.x += sin(time * 0.1 + position.z * 0.2) * 0.05;
            pos.y += cos(time * 0.1 + position.x * 0.2) * 0.05;
            pos.z += sin(time * 0.1 + position.y * 0.2) * 0.05;
            
            vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0);
            gl_PointSize = size * (300.0 / -mvPosition.z);
            gl_Position = projectionMatrix * mvPosition;
          }
        `,
      fragmentShader: `
          varying vec3 vColor;
          
          void main() {
            float r = distance(gl_PointCoord, vec2(0.5, 0.5));
            if (r > 0.5) discard;
            
            float glow = 1.0 - (r * 2.0);
            glow = pow(glow, 2.0);
            
            gl_FragColor = vec4(vColor, glow);
          }
        `,
      transparent: true,
      depthWrite: false,
      blending: THREE.AdditiveBlending,
      vertexColors: true
    });
    const particles = new THREE.Points(particlesGeometry, particlesMaterial);
    scene.add(particles);
    return function updateParticles(time) {
      particlesMaterial.uniforms.time.value = time;
    };
  }
  let updateParticles;

  function createAnomalyObject() {
    if (anomalyObject) {
      scene.remove(anomalyObject);
    }
    anomalyObject = new THREE.Group();
    const radius = 2;
    const outerGeometry = new THREE.IcosahedronGeometry(
      radius,
      Math.max(1, Math.floor(resolution / 8))
    );
    const outerMaterial = new THREE.ShaderMaterial({
      uniforms: {
        time: {
          value: 0
        },
        color: {
          value: new THREE.Color(0xff4e42)
        },
        audioLevel: {
          value: 0
        },
        distortion: {
          value: distortionAmount
        }
      },
      vertexShader: `
      uniform float time;
      uniform float audioLevel;
      uniform float distortion;
      varying vec3 vNormal;
      varying vec3 vPosition;
      
      vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
      vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
      vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }
      vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
      
      float snoise(vec3 v) {
        const vec2 C = vec2(1.0/6.0, 1.0/3.0);
        const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
        
        vec3 i  = floor(v + dot(v, C.yyy));
        vec3 x0 = v - i + dot(i, C.xxx);
        
        vec3 g = step(x0.yzx, x0.xyz);
        vec3 l = 1.0 - g;
        vec3 i1 = min(g.xyz, l.zxy);
        vec3 i2 = max(g.xyz, l.zxy);
        
        vec3 x1 = x0 - i1 + C.xxx;
        vec3 x2 = x0 - i2 + C.yyy;
        vec3 x3 = x0 - D.yyy;
        
        i = mod289(i);
        vec4 p = permute(permute(permute(
                i.z + vec4(0.0, i1.z, i2.z, 1.0))
              + i.y + vec4(0.0, i1.y, i2.y, 1.0))
              + i.x + vec4(0.0, i1.x, i2.x, 1.0));
              
        float n_ = 0.142857142857;
        vec3 ns = n_ * D.wyz - D.xzx;
        
        vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
        
        vec4 x_ = floor(j * ns.z);
        vec4 y_ = floor(j - 7.0 * x_);
        
        vec4 x = x_ *ns.x + ns.yyyy;
        vec4 y = y_ *ns.x + ns.yyyy;
        vec4 h = 1.0 - abs(x) - abs(y);
        
        vec4 b0 = vec4(x.xy, y.xy);
        vec4 b1 = vec4(x.zw, y.zw);
        
        vec4 s0 = floor(b0)*2.0 + 1.0;
        vec4 s1 = floor(b1)*2.0 + 1.0;
        vec4 sh = -step(h, vec4(0.0));
        
        vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy;
        vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww;
        
        vec3 p0 = vec3(a0.xy, h.x);
        vec3 p1 = vec3(a0.zw, h.y);
        vec3 p2 = vec3(a1.xy, h.z);
        vec3 p3 = vec3(a1.zw, h.w);
        
        vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
        p0 *= norm.x;
        p1 *= norm.y;
        p2 *= norm.z;
        p3 *= norm.w;
        
        vec4 m = max(0.6 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0);
        m = m * m;
        return 42.0 * dot(m*m, vec4(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3)));
      }
      
      void main() {
        vNormal = normalize(normalMatrix * normal);
        
        float slowTime = time * 0.3;
        vec3 pos = position;
        
        float noise = snoise(vec3(position.x * 0.5, position.y * 0.5, position.z * 0.5 + slowTime));
        pos += normal * noise * 0.2 * distortion * (1.0 + audioLevel);
        
        vPosition = pos;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
      }
    `,
      fragmentShader: `
      uniform float time;
      uniform vec3 color;
      uniform float audioLevel;
      varying vec3 vNormal;
      varying vec3 vPosition;
      
      void main() {
        vec3 viewDirection = normalize(cameraPosition - vPosition);
        float fresnel = 1.0 - max(0.0, dot(viewDirection, vNormal));
        fresnel = pow(fresnel, 2.0 + audioLevel * 2.0);
        
        float pulse = 0.8 + 0.2 * sin(time * 2.0);
        
        vec3 finalColor = color * fresnel * pulse * (1.0 + audioLevel * 0.8);
        
        float alpha = fresnel * (0.7 - audioLevel * 0.3);
        
        gl_FragColor = vec4(finalColor, alpha);
      }
    `,
      wireframe: true,
      transparent: true
    });
    const outerSphere = new THREE.Mesh(outerGeometry, outerMaterial);
    anomalyObject.add(outerSphere);
    scene.add(anomalyObject);
    const glowGeometry = new THREE.SphereGeometry(radius * 1.2, 32, 32);
    const glowMaterial = new THREE.ShaderMaterial({
      uniforms: {
        time: {
          value: 0
        },
        color: {
          value: new THREE.Color(0xff4e42)
        },
        audioLevel: {
          value: 0
        }
      },
      vertexShader: `
      varying vec3 vNormal;
      varying vec3 vPosition;
      uniform float audioLevel;
      
      void main() {
        vNormal = normalize(normalMatrix * normal);
        vPosition = position * (1.0 + audioLevel * 0.2);
        gl_Position = projectionMatrix * modelViewMatrix * vec4(vPosition, 1.0);
      }
    `,
      fragmentShader: `
      varying vec3 vNormal;
      varying vec3 vPosition;
      uniform vec3 color;
      uniform float time;
      uniform float audioLevel;
      
      void main() {
        vec3 viewDirection = normalize(cameraPosition - vPosition);
        float fresnel = 1.0 - max(0.0, dot(viewDirection, vNormal));
        fresnel = pow(fresnel, 3.0 + audioLevel * 3.0);
        
        float pulse = 0.5 + 0.5 * sin(time * 2.0);
        float audioFactor = 1.0 + audioLevel * 3.0;
        
        vec3 finalColor = color * fresnel * (0.8 + 0.2 * pulse) * audioFactor;
        
        float alpha = fresnel * (0.3 * audioFactor) * (1.0 - audioLevel * 0.2);
        
        gl_FragColor = vec4(finalColor, alpha);
      }
    `,
      transparent: true,
      side: THREE.BackSide,
      blending: THREE.AdditiveBlending,
      depthWrite: false
    });
    const glowSphere = new THREE.Mesh(glowGeometry, glowMaterial);
    anomalyObject.add(glowSphere);
    return function updateAnomaly(time, audioLevel) {
      outerMaterial.uniforms.time.value = time;
      outerMaterial.uniforms.audioLevel.value = audioLevel;
      outerMaterial.uniforms.distortion.value = distortionAmount;
      glowMaterial.uniforms.time.value = time;
      glowMaterial.uniforms.audioLevel.value = audioLevel;
    };
  }

  function updateWireframeDistortion(amount) {
    distortionAmount = amount;
    updateGlow = createAnomalyObject();
  }

  function updateWireframeResolution(newResolution) {
    resolution = newResolution;
    updateGlow = createAnomalyObject();
  }

  function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    resizeCanvas();
    resizeCircularCanvas();
    resizeSpectrumCanvas();
  }

  function updateAnomalyPosition() {
    if (!isDraggingAnomaly) {
      anomalyVelocity.x *= 0.95;
      anomalyVelocity.y *= 0.95;
      anomalyTargetPosition.x += anomalyVelocity.x * 0.1;
      anomalyTargetPosition.y += anomalyVelocity.y * 0.1;
      const springStrength = 0.1;
      anomalyVelocity.x -= anomalyTargetPosition.x * springStrength;
      anomalyVelocity.y -= anomalyTargetPosition.y * springStrength;
      if (
        Math.abs(anomalyTargetPosition.x) < 0.05 &&
        Math.abs(anomalyTargetPosition.y) < 0.05
      ) {
        anomalyTargetPosition.set(0, 0, 0);
        anomalyVelocity.set(0, 0);
      }
      const bounceThreshold = 3;
      const bounceDamping = 0.8;
      if (Math.abs(anomalyTargetPosition.x) > bounceThreshold) {
        anomalyVelocity.x = -anomalyVelocity.x * bounceDamping;
        anomalyTargetPosition.x =
          Math.sign(anomalyTargetPosition.x) * bounceThreshold;
        if (Math.abs(anomalyVelocity.x) > 0.1) {
          addTerminalMessage(
            "ANOMALY BOUNDARY COLLISION DETECTED. ENERGY TRANSFER: " +
              (Math.abs(anomalyVelocity.x) * 100).toFixed(0) +
              " UNITS"
          );
        }
      }
      if (Math.abs(anomalyTargetPosition.y) > bounceThreshold) {
        anomalyVelocity.y = -anomalyVelocity.y * bounceDamping;
        anomalyTargetPosition.y =
          Math.sign(anomalyTargetPosition.y) * bounceThreshold;
        if (Math.abs(anomalyVelocity.y) > 0.1) {
          addTerminalMessage(
            "ANOMALY BOUNDARY COLLISION DETECTED. ENERGY TRANSFER: " +
              (Math.abs(anomalyVelocity.y) * 100).toFixed(0) +
              " UNITS"
          );
        }
      }
    }
    anomalyObject.position.x +=
      (anomalyTargetPosition.x - anomalyObject.position.x) * 0.2;
    anomalyObject.position.y +=
      (anomalyTargetPosition.y - anomalyObject.position.y) * 0.2;
    if (!isDraggingAnomaly) {
      anomalyObject.rotation.x += anomalyVelocity.y * 0.01;
      anomalyObject.rotation.y += anomalyVelocity.x * 0.01;
    }
  }

  function animate() {
    requestAnimationFrame(animate);
    controls.update();
    const time = clock.getElapsedTime();
    let audioLevel = 0;
    if (audioAnalyser) {
      audioAnalyser.getByteFrequencyData(frequencyData);
      let sum = 0;
      for (let i = 0; i < frequencyData.length; i++) {
        sum += frequencyData[i];
      }
      audioLevel = ((sum / frequencyData.length / 255) * audioSensitivity) / 5;
      drawCircularVisualizer();
      drawSpectrumAnalyzer();
      updateAudioWave();
      calculateAudioMetrics();
    }
    updateAnomalyPosition();
    if (updateGlow) {
      updateGlow(time, audioLevel);
    }
    if (updateParticles) {
      updateParticles(time);
    }
    const rotationSpeed = parseFloat(
      document.getElementById("rotation-slider").value
    );
    if (anomalyObject) {
      const audioRotationFactor = 1 + audioLevel * audioReactivity;
      anomalyObject.rotation.y += 0.005 * rotationSpeed * audioRotationFactor;
      anomalyObject.rotation.z += 0.002 * rotationSpeed * audioRotationFactor;
    }
    renderer.render(scene, camera);
  }
  initThreeJS();
  updateParticles = createBackgroundParticles();
  updateGlow = createAnomalyObject();
  const rotationSlider = document.getElementById("rotation-slider");
  const resolutionSlider = document.getElementById("resolution-slider");
  const distortionSlider = document.getElementById("distortion-slider");
  const reactivitySlider = document.getElementById("reactivity-slider");
  const sensitivitySlider = document.getElementById("sensitivity-slider");
  rotationSlider.addEventListener("input", function () {
    document.getElementById("rotation-value").textContent = this.value;
  });
  resolutionSlider.addEventListener("input", function () {
    const value = parseInt(this.value);
    document.getElementById("resolution-value").textContent = value;
    updateWireframeResolution(value);
  });
  distortionSlider.addEventListener("input", function () {
    const value = parseFloat(this.value);
    document.getElementById("distortion-value").textContent = value.toFixed(1);
    updateWireframeDistortion(value);
  });
  reactivitySlider.addEventListener("input", function () {
    audioReactivity = parseFloat(this.value);
    document.getElementById(
      "reactivity-value"
    ).textContent = audioReactivity.toFixed(1);
  });
  sensitivitySlider.addEventListener("input", function () {
    audioSensitivity = parseFloat(this.value);
    document.getElementById(
      "sensitivity-value"
    ).textContent = audioSensitivity.toString();
  });
  document.getElementById("reset-btn").addEventListener("click", function () {
    rotationSlider.value = 1.0;
    document.getElementById("rotation-value").textContent = "1.0";
    resolutionSlider.value = 32;
    document.getElementById("resolution-value").textContent = "32";
    distortionSlider.value = 1.0;
    document.getElementById("distortion-value").textContent = "1.0";
    reactivitySlider.value = 1.0;
    document.getElementById("reactivity-value").textContent = "1.0";
    audioReactivity = 1.0;
    sensitivitySlider.value = 5.0;
    document.getElementById("sensitivity-value").textContent = "5.0";
    audioSensitivity = 5.0;
    distortionAmount = 1.0;
    resolution = 32;
    updateGlow = createAnomalyObject();
    anomalyTargetPosition.set(0, 0, 0);
    anomalyVelocity.set(0, 0);
    anomalyObject.position.set(0, 0, 0);
    showNotification("SETTINGS RESET TO DEFAULT VALUES");
  });
  document.getElementById("analyze-btn").addEventListener("click", function () {
    this.textContent = "ANALYZING...";
    this.disabled = true;
    document.getElementById("stability-bar").style.width = "45%";
    document.getElementById("stability-value").textContent = "45%";
    document.getElementById("status-indicator").style.color = "#ff00a0";
    setTimeout(() => {
      this.textContent = "ANALYZE";
      this.disabled = false;
      addTerminalMessage(
        "ANALYSIS COMPLETE. ANOMALY SIGNATURE IDENTIFIED.",
        true
      );
      showNotification("ANOMALY ANALYSIS COMPLETE");
      document.getElementById("mass-value").textContent = (
        Math.random() * 2 +
        1
      ).toFixed(3);
      document.getElementById("energy-value").textContent =
        (Math.random() * 9 + 1).toFixed(1) + "e8 J";
      document.getElementById("variance-value").textContent = (
        Math.random() * 0.01
      ).toFixed(4);
      document.getElementById("peak-value").textContent =
        (Math.random() * 200 + 100).toFixed(1) + " HZ";
      document.getElementById("amplitude-value").textContent = (
        Math.random() * 0.5 +
        0.3
      ).toFixed(2);
      const phases = ["π/4", "π/2", "π/6", "3π/4"];
      document.getElementById("phase-value").textContent =
        phases[Math.floor(Math.random() * phases.length)];
    }, 3000);
  });
  document.querySelectorAll(".demo-track-btn").forEach((btn) => {
    btn.addEventListener("click", function () {
      if (!isAudioInitialized) {
        initAudio();
      }
      if (audioContext && audioContext.state === "suspended") {
        audioContext.resume();
      }
      const url = this.dataset.url;
      currentAudioSrc = url;
      document.querySelectorAll(".demo-track-btn").forEach((b) => {
        b.classList.remove("active");
      });
      this.classList.add("active");
      loadAudioFromURL(url);
    });
  });
  document.getElementById("file-btn").addEventListener("click", function () {
    if (!isAudioInitialized) {
      initAudio();
    }
    if (audioContext && audioContext.state === "suspended") {
      audioContext.resume();
    }
    document.getElementById("audio-file-input").click();
  });
  document
    .getElementById("audio-file-input")
    .addEventListener("change", function (e) {
      if (e.target.files.length > 0) {
        const file = e.target.files[0];
        initAudioFile(file);
      }
    });
  // Audio player ended event
  document
    .getElementById("audio-player")
    .addEventListener("ended", function () {
      isAudioPlaying = false;
      zoomCameraForAudio(false);
      addTerminalMessage("AUDIO PLAYBACK COMPLETE.");
    });

  function showNotification(message) {
    const notification = document.getElementById("notification");
    notification.textContent = message;
    notification.style.opacity = 1;
    setTimeout(() => {
      notification.style.opacity = 0;
    }, 3000);
  }

  function makePanelDraggable(element, handle = null) {
    Draggable.create(element, {
      type: "x,y",
      edgeResistance: 0.65,
      bounds: document.body,
      handle: handle || element,
      inertia: true,
      throwResistance: 0.85,
      onDragStart: function () {
        const panels = document.querySelectorAll(
          ".terminal-panel, .control-panel, .spectrum-analyzer, .data-panel"
        );
        let maxZ = 10;
        panels.forEach((panel) => {
          const z = parseInt(window.getComputedStyle(panel).zIndex);
          if (z > maxZ) maxZ = z;
        });
        element.style.zIndex = maxZ + 1;
        addTerminalMessage(`PANEL DRAG INITIATED: ${element.className}`);
      },
      onDragEnd: function () {
        addTerminalMessage(
          `DRAGGABLE.INERTIA({TARGET: '${
            element.className
          }', VELOCITY: {X: ${this.getVelocity("x").toFixed(
            2
          )}, Y: ${this.getVelocity("y").toFixed(2)}}});`,
          true
        );
      }
    });
  }
  makePanelDraggable(
    document.querySelector(".control-panel"),
    document.getElementById("control-panel-handle")
  );
  makePanelDraggable(document.querySelector(".terminal-panel"));
  makePanelDraggable(
    document.querySelector(".spectrum-analyzer"),
    document.getElementById("spectrum-handle")
  );
});