<template>
  <div class="bg-gray-50 rounded-lg p-6 mb-6">
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-lg font-medium text-gray-900">Lecture Audio</h3>
      <div class="flex items-center space-x-2">
        <!-- Contrôle du volume -->
        <svg class="h-4 w-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.617.78L4.137 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.137l4.246-3.78z" clip-rule="evenodd"/>
          <path d="M11.738 9.222a4.002 4.002 0 000-0.444c0.779-0.771 1.278-1.834 1.278-3.001s-0.499-2.23-1.278-3.001A1 1 0 0111.738 4.222a2 2 0 010 3.556A1 1 0 0011.738 9.222z"/>
        </svg>
        <input
          v-model="volume"
          @input="updateVolume"
          type="range"
          min="0"
          max="100"
          class="w-20 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider"
        />
        <span class="text-sm text-gray-500 w-8">{{ volume }}%</span>
      </div>
    </div>

    <!-- Contrôles de lecture -->
    <div class="flex items-center justify-center space-x-4 mb-4">
      <button
        @click="rewind"
        class="p-2 rounded-full hover:bg-gray-200 transition-colors"
        :disabled="!hasAudio"
      >
        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20">
          <path d="M8.445 14.832A1 1 0 0010 14v-2.798l5.445 3.63A1 1 0 0017 14V6a1 1 0 00-1.555-.832L10 8.798V6a1 1 0 00-1.555-.832l-6 4a1 1 0 000 1.664l6 4z"/>
        </svg>
      </button>

      <button
        @click="togglePlay"
        class="btn-primary p-4 rounded-full"
        :disabled="!hasAudio"
      >
        <svg v-if="!isPlaying" class="h-8 w-8" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/>
        </svg>
        <svg v-else class="h-8 w-8" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 002 0V8a1 1 0 00-1-1z" clip-rule="evenodd"/>
        </svg>
      </button>

      <button
        @click="fastForward"
        class="p-2 rounded-full hover:bg-gray-200 transition-colors"
        :disabled="!hasAudio"
      >
        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20">
          <path d="M4.555 5.168A1 1 0 003 6v8a1 1 0 001.555.832L10 11.202V14a1 1 0 001.555.832l6-4a1 1 0 000-1.664l-6-4A1 1 0 0010 6v2.798l-5.445-3.63z"/>
        </svg>
      </button>
    </div>

    <!-- Barre de progression -->
    <div class="mb-4">
      <div class="flex items-center justify-between text-sm text-gray-500 mb-2">
        <span>{{ formatTime(currentTime) }}</span>
        <span>{{ formatTime(duration) }}</span>
      </div>
      <div
        class="w-full h-2 bg-gray-200 rounded-full cursor-pointer relative"
        @click="seekTo"
        ref="progressBar"
      >
        <div
          class="h-full bg-black rounded-full transition-all duration-100"
          :style="{ width: progress + '%' }"
        ></div>
      </div>
    </div>

    <!-- Vitesse de lecture -->
    <div class="flex items-center justify-center space-x-2">
      <span class="text-sm text-gray-500">Vitesse:</span>
      <select
        v-model="playbackRate"
        @change="updatePlaybackRate"
        class="text-sm border border-gray-300 rounded px-2 py-1 focus:outline-none focus:border-black"
        :disabled="!hasAudio"
      >
        <option value="0.5">0.5x</option>
        <option value="0.75">0.75x</option>
        <option value="1">1x</option>
        <option value="1.25">1.25x</option>
        <option value="1.5">1.5x</option>
        <option value="2">2x</option>
      </select>
    </div>

    <!-- Message si pas d'audio -->
    <div v-if="!hasAudio" class="text-center text-gray-500 mt-4">
      <p class="text-sm">Aucun fichier audio disponible pour ce texte</p>
    </div>

    <!-- Audio element (caché) -->
    <audio
      ref="audioPlayer"
      @loadedmetadata="onLoadedMetadata"
      @timeupdate="onTimeUpdate"
      @ended="onEnded"
      preload="metadata"
    >
      <source :src="audioSrc" type="audio/mpeg" v-if="audioSrc">
      Votre navigateur ne supporte pas l'audio HTML5.
    </audio>
  </div>
</template>

<script>
import { ref, computed, onMounted, watch } from 'vue'

export default {
  name: 'AudioPlayer',
  props: {
    audioSrc: {
      type: String,
      default: null
    }
  },
  setup(props) {
    const audioPlayer = ref(null)
    const progressBar = ref(null)
    const isPlaying = ref(false)
    const currentTime = ref(0)
    const duration = ref(0)
    const volume = ref(70)
    const playbackRate = ref(1)

    const hasAudio = computed(() => !!props.audioSrc)

    const progress = computed(() => {
      if (duration.value === 0) return 0
      return (currentTime.value / duration.value) * 100
    })

    const formatTime = (seconds) => {
      if (isNaN(seconds)) return '00:00'
      const mins = Math.floor(seconds / 60)
      const secs = Math.floor(seconds % 60)
      return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
    }

    const togglePlay = () => {
      if (!audioPlayer.value || !hasAudio.value) return

      if (isPlaying.value) {
        audioPlayer.value.pause()
        isPlaying.value = false
      } else {
        audioPlayer.value.play()
        isPlaying.value = true
      }
    }

    const rewind = () => {
      if (!audioPlayer.value) return
      audioPlayer.value.currentTime = Math.max(0, audioPlayer.value.currentTime - 10)
    }

    const fastForward = () => {
      if (!audioPlayer.value) return
      audioPlayer.value.currentTime = Math.min(duration.value, audioPlayer.value.currentTime + 10)
    }

    const seekTo = (event) => {
      if (!audioPlayer.value || !progressBar.value) return

      const rect = progressBar.value.getBoundingClientRect()
      const clickX = event.clientX - rect.left
      const percentage = clickX / rect.width
      const newTime = percentage * duration.value

      audioPlayer.value.currentTime = newTime
    }

    const updateVolume = () => {
      if (!audioPlayer.value) return
      audioPlayer.value.volume = volume.value / 100
    }

    const updatePlaybackRate = () => {
      if (!audioPlayer.value) return
      audioPlayer.value.playbackRate = playbackRate.value
    }

    const onLoadedMetadata = () => {
      if (audioPlayer.value) {
        duration.value = audioPlayer.value.duration
        updateVolume()
        updatePlaybackRate()
      }
    }

    const onTimeUpdate = () => {
      if (audioPlayer.value) {
        currentTime.value = audioPlayer.value.currentTime
      }
    }

    const onEnded = () => {
      isPlaying.value = false
      currentTime.value = 0
      if (audioPlayer.value) {
        audioPlayer.value.currentTime = 0
      }
    }

    // Watcher pour recharger l'audio quand l'src change
    watch(() => props.audioSrc, () => {
      if (audioPlayer.value) {
        isPlaying.value = false
        currentTime.value = 0
        duration.value = 0
        if (props.audioSrc) {
          audioPlayer.value.load()
        }
      }
    })

    onMounted(() => {
      if (audioPlayer.value && props.audioSrc) {
        audioPlayer.value.load()
      }
    })

    return {
      audioPlayer,
      progressBar,
      isPlaying,
      currentTime,
      duration,
      volume,
      playbackRate,
      hasAudio,
      progress,
      formatTime,
      togglePlay,
      rewind,
      fastForward,
      seekTo,
      updateVolume,
      updatePlaybackRate,
      onLoadedMetadata,
      onTimeUpdate,
      onEnded
    }
  }
}
</script>

<style scoped>
.slider::-webkit-slider-thumb {
  appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #000;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #000;
  cursor: pointer;
  border: none;
}
</style>

