<template>
  <div class="voice-recorder">
    <div class="voice-recorder__stage">
      <button
        v-if="!isRecording && !audioUrl"
        type="button"
        class="voice-recorder__main-btn"
        :disabled="disabled"
        @click="startRecording"
      >
        <SvgIcon name="microphone" :size="48" color="transparent" />
      </button>

      <button
        v-else-if="isRecording"
        type="button"
        class="voice-recorder__main-btn voice-recorder__main-btn--recording"
        @click="stopRecording"
      >
        <SvgIcon name="close" :size="40" color="var(--color-error)" />
      </button>

      <div v-else class="voice-recorder__player">
        <button type="button" class="voice-recorder__play-btn" @click="togglePlay">
          <SvgIcon :name="isPlaying ? 'pause' : 'play'" :size="24" color="#848484" />
        </button>
        <div
          ref="trackEl"
          class="voice-recorder__track"
          @pointerdown="onSeekStart"
          @pointermove="onSeekMove"
          @pointerup="onSeekEnd"
          @pointercancel="onSeekEnd"
        >
          <div class="voice-recorder__track-fill" :style="{ width: `${progress}%` }" />
          <span class="voice-recorder__knob" :style="{ left: `${progress}%` }" />
        </div>
        <span class="voice-recorder__time">{{ timeLabel }}</span>
        <audio
          ref="audioEl"
          :src="audioUrl"
          class="voice-recorder__audio"
          @ended="onEnded"
          @timeupdate="onTimeUpdate"
          @loadedmetadata="onLoadedMetadata"
        />
      </div>

      <p v-if="isRecording" class="voice-recorder__status">
        <span class="voice-recorder__dot" />
        در حال ضبط...
        <span class="voice-recorder__timer">{{ formattedTime }}</span>
      </p>
    </div>

    <div class="voice-recorder__actions">
      <button
        v-if="audioUrl && !isRecording && !disabled"
        type="button"
        class="voice-recorder__btn"
        :title="'ضبط مجدد'"
        @click="resetAndStart"
      >
        <SvgIcon name="microphone" :size="20" color="transparent" />
      </button>

      <button
        type="button"
        class="voice-recorder__btn"
        :disabled="isRecording || disabled"
        :title="'بارگذاری فایل'"
        @click="triggerFilePicker"
        v-if="canUpload"
      >
        <SvgIcon name="upload" :size="20" color="var(--color-thd-gray)" />
      </button>

      <input
        ref="fileInput"
        type="file"
        accept="audio/*"
        class="voice-recorder__file-input"
        @change="onFileSelected"
      />
    </div>

    <p v-if="error" class="voice-recorder__error">{{ error }}</p>
  </div>

  <PermissionModal v-if="isModal('VoiceRecorderPermissionModal')" />
</template>

<script setup>
import { toast } from 'vue3-toastify'
import useModal from '@/composables/useModal'
import { PermissionModal } from '@/features/auth'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import { computed, onBeforeUnmount, ref, watch } from 'vue'

const props = defineProps({
  modelValue: { type: [Object, File, String, null], default: null },
  maxSeconds: { type: Number, default: 600 },
  maxSizeKb: { type: Number, default: 25_600 },
  disabled: { type: Boolean, default: false },
  error: { type: String, default: '' },
  canUpload: { type: Boolean, default: false },
})

const emit = defineEmits(['update:modelValue', 'recorded'])

const { openModal, isModal } = useModal()

const audioUrl = ref(
  typeof props.modelValue === 'string' ? props.modelValue : props.modelValue?.url || null
)
const audioFile = ref(null)
const isRecording = ref(false)
const isPlaying = ref(false)
const elapsedMs = ref(0)
const progress = ref(0)
const duration = ref(0)
const currentSeconds = ref(0)
const audioEl = ref(null)
const trackEl = ref(null)
const fileInput = ref(null)
let seeking = false

let mediaRecorder = null
let mediaStream = null
let chunks = []
let timerHandle = null
let timerStart = 0
let recorderType = null

// The backend only accepts these audio extensions. Browsers can't record mp3/wav,
// but most can record into an mp4 container (→ .m4a), so prefer a supported type
// whose extension the backend allows; fall back to webm only as a last resort.
const ACCEPTED_AUDIO_TYPES = [
  { mime: 'audio/mp4', ext: 'm4a' },
  { mime: 'audio/mpeg', ext: 'mp3' },
  { mime: 'audio/wav', ext: 'wav' },
]

const pickRecorderType = () => {
  const supported = ACCEPTED_AUDIO_TYPES.find((c) =>
    window.MediaRecorder?.isTypeSupported?.(c.mime)
  )
  return supported || { mime: 'audio/webm', ext: 'webm' }
}

const formattedTime = computed(() => {
  const s = Math.floor(elapsedMs.value / 1000)
  const mm = String(Math.floor(s / 60)).padStart(2, '0')
  const ss = String(s % 60).padStart(2, '0')
  return `${mm}:${ss}`
})

const stopTracks = () => {
  if (mediaStream) {
    mediaStream.getTracks().forEach((t) => t.stop())
    mediaStream = null
  }
}

const clearTimer = () => {
  if (timerHandle) {
    clearInterval(timerHandle)
    timerHandle = null
  }
}

const revokePreview = () => {
  if (audioUrl.value && audioUrl.value.startsWith('blob:')) {
    URL.revokeObjectURL(audioUrl.value)
  }
}

const setRecording = (file) => {
  revokePreview()
  audioFile.value = file
  audioUrl.value = URL.createObjectURL(file)
  progress.value = 0
  duration.value = 0
  currentSeconds.value = 0
  isPlaying.value = false
  emit('update:modelValue', file)
  emit('recorded', file)
}

const startRecording = async () => {
  try {
    mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true })
    chunks = []
    recorderType = pickRecorderType()
    mediaRecorder = new window.MediaRecorder(mediaStream, { mimeType: recorderType.mime })
    mediaRecorder.ondataavailable = (e) => {
      if (e.data?.size > 0) chunks.push(e.data)
    }
    mediaRecorder.onstop = () => {
      isRecording.value = false
      stopTracks()
      const mime = recorderType?.mime || mediaRecorder?.mimeType || 'audio/webm'
      const ext = recorderType?.ext || 'webm'
      const blob = new Blob(chunks, { type: mime })
      const file = new File([blob], `recording-${Date.now()}.${ext}`, {
        type: mime,
        lastModified: Date.now(),
      })
      setRecording(file)
    }
    mediaRecorder.start()
    isRecording.value = true
    elapsedMs.value = 0
    timerStart = Date.now()
    timerHandle = setInterval(() => {
      elapsedMs.value = Date.now() - timerStart
      if (elapsedMs.value >= props.maxSeconds * 1000) stopRecording()
    }, 250)
  } catch {
    openModal('VoiceRecorderPermissionModal', { kind: 'audio' })
  }
}

const stopRecording = () => {
  if (mediaRecorder && mediaRecorder.state !== 'inactive') {
    mediaRecorder.stop()
  }
  clearTimer()
}

const resetAndStart = () => {
  if (isPlaying.value) {
    audioEl.value?.pause()
    isPlaying.value = false
  }
  revokePreview()
  audioFile.value = null
  audioUrl.value = null
  progress.value = 0
  emit('update:modelValue', null)
  startRecording()
}

const triggerFilePicker = () => fileInput.value?.click()

const onFileSelected = (event) => {
  const file = event.target?.files?.[0]
  if (event.target) event.target.value = ''
  if (!file) return
  if (file.size > props.maxSizeKb * 1024) {
    toast.error(`حجم فایل صوتی نباید بیشتر از ${props.maxSizeKb} کیلوبایت باشد.`)
    return
  }
  setRecording(file)
}

const togglePlay = () => {
  if (!audioEl.value) return
  if (audioEl.value.paused) {
    audioEl.value.play().then(() => {
      isPlaying.value = true
    })
  } else {
    audioEl.value.pause()
    isPlaying.value = false
  }
}

const onEnded = () => {
  isPlaying.value = false
  progress.value = 0
  currentSeconds.value = 0
}

const onTimeUpdate = () => {
  const a = audioEl.value
  if (!a || !Number.isFinite(duration.value) || duration.value <= 0) return
  currentSeconds.value = a.currentTime
  progress.value = (a.currentTime / duration.value) * 100
}

// MediaRecorder blobs report `Infinity` duration in Chromium until the element
// is seeked past the end once — force that, then rewind.
const onLoadedMetadata = () => {
  const a = audioEl.value
  if (!a) return
  if (Number.isFinite(a.duration)) {
    duration.value = a.duration
    return
  }
  const restore = () => {
    if (!Number.isFinite(a.duration)) return
    duration.value = a.duration
    a.currentTime = 0
    a.removeEventListener('timeupdate', restore)
  }
  a.addEventListener('timeupdate', restore)
  a.currentTime = 1e10
}

const formatClock = (secs) => {
  if (!Number.isFinite(secs) || secs < 0) return '00:00'
  const total = Math.floor(secs)
  const h = Math.floor(total / 3600)
  const mm = String(Math.floor((total % 3600) / 60)).padStart(2, '0')
  const ss = String(total % 60).padStart(2, '0')
  return h > 0 ? `${h}:${mm}:${ss}` : `${mm}:${ss}`
}

const timeLabel = computed(() =>
  formatClock(isPlaying.value || currentSeconds.value > 0 ? currentSeconds.value : duration.value)
)

const seekTo = (clientX) => {
  const a = audioEl.value
  const track = trackEl.value
  if (!a || !track || !Number.isFinite(duration.value) || duration.value <= 0) return
  const rect = track.getBoundingClientRect()
  const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width))
  a.currentTime = ratio * duration.value
  currentSeconds.value = a.currentTime
  progress.value = ratio * 100
}

const onSeekStart = (event) => {
  seeking = true
  trackEl.value?.setPointerCapture?.(event.pointerId)
  seekTo(event.clientX)
}

const onSeekMove = (event) => {
  if (seeking) seekTo(event.clientX)
}

const onSeekEnd = () => {
  seeking = false
}

watch(
  () => props.modelValue,
  (val) => {
    if (val == null) {
      revokePreview()
      audioFile.value = null
      audioUrl.value = null
      progress.value = 0
    }
  }
)

onBeforeUnmount(() => {
  stopRecording()
  stopTracks()
  clearTimer()
  revokePreview()
})
</script>

<style lang="scss" scoped>
.voice-recorder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: #f3f4f6;
  border-radius: 1.5rem;
  min-height: 18rem;
  justify-content: space-between;
  height: 100%;

  &__stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    height: 100%;
  }

  &__main-btn {
    width: 8rem;
    height: 8rem;
    border-radius: 9999px;
    background: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;

    &:hover:enabled {
      transform: scale(1.02);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 8%);
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.6;
    }

    &--recording {
      box-shadow: 0 0 0 6px rgba(204, 40, 49, 12%);
      animation: pulse 1.4s infinite;
    }
  }

  &__player {
    direction: ltr;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border-radius: 1rem;
  }

  &__play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s ease;

    &:hover {
      transform: scale(1.08);
    }
  }

  &__track {
    position: relative;
    flex: 1;
    height: 2px;
    border-radius: 9999px;
    background: #e8e8e8;
    cursor: pointer;
    touch-action: none;

    &::before {
      content: '';
      position: absolute;
      inset: -0.625rem 0;
    }
  }

  &__track-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 9999px;
    background: #5d5d5d;
  }

  &__knob {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background: #4b4b4b;
    pointer-events: none;
  }

  &__time {
    font-family: var(--font-family-en);
    font-size: 0.75rem;
    color: #b5b5b5;
    flex-shrink: 0;
    min-width: 3rem;
    text-align: right;
  }

  &__audio {
    display: none;
  }

  &__status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-family-fa);
    font-size: 0.875rem;
    color: var(--color-error);
    margin: 0;
  }

  &__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--color-error);
  }

  &__timer {
    margin-inline-start: 0.5rem;
    font-family: var(--font-family-en);
    color: #5d5d5d;
  }

  &__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  &__btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 6%);
    transition: transform 0.15s ease;

    &:hover:enabled {
      transform: scale(1.05);
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }

  &__file-input {
    display: none;
  }

  &__error {
    margin: 0;
    font-family: var(--font-family-fa);
    font-size: 0.75rem;
    color: var(--color-error);
  }
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 6px rgba(204, 40, 49, 12%);
  }

  50% {
    box-shadow: 0 0 0 10px rgba(204, 40, 49, 18%);
  }
}
</style>
