(() => {
  'use strict';
  const slider = document.getElementById('volumeSlider');
  const volumeValue = document.getElementById('volumeValue');
  const speaker = document.getElementById('speakerMute');
  const mic = document.getElementById('micMute');
  const endpoint = '/api/audio/settings';
  let state = { volume: 70, speaker_muted: false, mic_muted: false };
  let saveTimer;

  function render() {
    slider.value = String(state.volume);
    volumeValue.value = `${state.volume} %`;
    speaker.setAttribute('aria-pressed', String(state.speaker_muted));
    speaker.setAttribute('aria-label', state.speaker_muted ? 'Réactiver le haut-parleur' : 'Couper le haut-parleur');
    speaker.title = speaker.getAttribute('aria-label');
    speaker.textContent = state.speaker_muted ? '🔇' : '🔊';
    mic.setAttribute('aria-pressed', String(state.mic_muted));
    mic.setAttribute('aria-label', state.mic_muted ? 'Réactiver le microphone' : 'Couper le microphone');
    mic.title = mic.getAttribute('aria-label');
    mic.textContent = state.mic_muted ? '🎙️̸' : '🎙️';
  }

  async function save() {
    try {
      const response = await fetch(endpoint, {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(state)
      });
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      const result = await response.json();
      if (result && typeof result.volume === 'number') {
        state = { ...state, ...result };
        render();
      }
    } catch (error) {
      console.warn('Réglages audio non synchronisés avec Flask :', error);
    }
  }

  slider.addEventListener('input', () => {
    state.volume = Number(slider.value);
    render();
    clearTimeout(saveTimer);
    saveTimer = setTimeout(save, 200);
  });
  speaker.addEventListener('click', () => {
    state.speaker_muted = !state.speaker_muted;
    render();
    clearTimeout(saveTimer);
    save();
  });
  mic.addEventListener('click', () => {
    state.mic_muted = !state.mic_muted;
    render();
    clearTimeout(saveTimer);
    save();
  });

  (async () => {
    try {
      const response = await fetch(endpoint);
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      const settings = await response.json();
      if (typeof settings.volume === 'number') state.volume = Math.max(0, Math.min(100, settings.volume));
      if (typeof settings.speaker_muted === 'boolean') state.speaker_muted = settings.speaker_muted;
      if (typeof settings.mic_muted === 'boolean') state.mic_muted = settings.mic_muted;
    } catch (error) {
      console.warn('Réglages audio non disponibles :', error);
    }
    render();
  })();
})();