document.addEventListener("DOMContentLoaded", () => {
  const synth = new AudioSynth();
  synth.setVolume(0.4);
  const piano = synth.createInstrument("piano");

  let bpm = 100;
  let beat = 0;
  let timeSig = 6;
  let metronomeState = false;
  let interval;

  // DOM Elements
  const elements = {
    beatsIndicator: document.querySelector(".indicator"),
    beatsButtons: document.querySelectorAll(".beat"),
    inputRange: document.querySelector(".range"),
    bpmsDisplay: document.querySelector(".bpms"),
    presetsButtons: document.querySelectorAll(".preset"),
    metronomeToggle: document.querySelector(".btoogle-metronome"),
    increaseButton: document.querySelector(".bincrease"),
    decreaseButton: document.querySelector(".bdecrease")
  };

  // Event Listeners
  elements.inputRange.addEventListener("input", handleBpmChange);
  elements.increaseButton.addEventListener("click", () => adjustBpm(1));
  elements.decreaseButton.addEventListener("click", () => adjustBpm(-1));
  elements.metronomeToggle.addEventListener("click", toggleMetronome);
  elements.presetsButtons.forEach((btn) =>
    btn.addEventListener("click", handlePresetClick)
  );

  function toggleMetronome() {
    metronomeState = !metronomeState;
    elements.metronomeToggle.textContent = metronomeState ? "Stop" : "Start";
    metronomeState ? startMetronome() : stopMetronome();
  }

  function startMetronome() {
    interval = setInterval(() => {
      beat = (beat % timeSig) + 1;
      playClickSound();
      updateMetronomeDisplay();
    }, 60000 / elements.inputRange.value);
  }

  function stopMetronome() {
    clearInterval(interval);
    beat = 0;
    updateMetronomeDisplay();
  }

  function updateMetronomeDisplay() {
    elements.beatsIndicator.textContent = metronomeState ? beat : "--";
    elements.beatsButtons.forEach((btn, index) => {
      btn.classList.toggle("is-active", metronomeState && index === beat - 1);
      btn.classList.toggle("is-first-beat", metronomeState && beat === 1);
    });
  }

  function playClickSound() {
    const note = beat === 1 ? "C" : "C";
    const octave = beat === 1 ? 4 : 3;
    piano.play(note, octave, 2);
  }

  function adjustBpm(amount) {
    elements.inputRange.value = parseInt(elements.inputRange.value) + amount;
    handleBpmChange();
  }

  function handleBpmChange() {
    stopMetronome();
    updateBpmDisplay();
    if (metronomeState) startMetronome();
    elements.metronomeToggle.textContent = "Stop";
    elements.inputRange.classList.toggle(
      "green-thumb",
      elements.inputRange.value > 137
    );
  }

  function updateBpmDisplay() {
    elements.bpmsDisplay.textContent = `${elements.inputRange.value} BPM`;
  }

  function handlePresetClick(event) {
    const preset = event.target.dataset.setTime;
    resetPresetsButtons();
    event.target.classList.add("is-active");
    setPreset(preset);
    metronomeState = false;
    elements.metronomeToggle.textContent = "Start";
    updateMetronomeDisplay();
    stopMetronome();
  }

  function setPreset(preset) {
    resetBeatsButtonsState();
    const mutedIndexes = { 1: [3, 4, 5], 2: [4, 5], 3: [] };
    mutedIndexes[preset].forEach((index) =>
      elements.beatsButtons[index].classList.add("is-muted")
    );
    timeSig = preset === "3" ? 6 : preset === "2" ? 4 : 3;
  }

  function resetPresetsButtons() {
    elements.presetsButtons.forEach((btn) => btn.classList.remove("is-active"));
  }

  function resetBeatsButtonsState() {
    elements.beatsButtons.forEach((btn) =>
      btn.classList.remove("is-muted", "is-active")
    );
  }
});