@props(['message', 'isSent' => false])

@php
    $msgType = $message->effectiveType();
    $isVoice = in_array($msgType, ['voice', 'voice_note'], true);
@endphp

@if($isVoice && ($message->media_path || $message->audio_url))
    @php
        $url = $message->audio_url ?? route('gc.voice-notes.stream', $message);
        $duration = (int) ($message->audio_duration ?? ceil((float) ($message->metadata['duration'] ?? 0)));
        $waveform = $message->voiceWaveform();
        $mins = intdiv(max(0, $duration), 60);
        $secs = max(0, $duration) % 60;
        $durationLabel = sprintf('%d:%02d', $mins, $secs);
        $unplayed = ! $isSent && ! $message->seen;
    @endphp
    <div class="msg-voice-note"
         data-voice-url="{{ $url }}"
         data-duration="{{ $duration }}"
         data-waveform="{{ json_encode($waveform) }}"
         data-sent="{{ $isSent ? '1' : '0' }}"
         data-unplayed="{{ $unplayed ? '1' : '0' }}">
        <button type="button" class="msg-voice-play {{ $unplayed ? 'unplayed' : '' }}" aria-label="Play voice message">
            <i class="fa-solid fa-play"></i>
        </button>
        <div class="msg-voice-body">
            <div class="msg-voice-wave" role="slider" tabindex="0" aria-label="Voice message progress" aria-valuemin="0" aria-valuemax="{{ $duration }}" aria-valuenow="0">
                @foreach($waveform ?: array_fill(0, 48, 0.2) as $peak)
                    <span class="msg-voice-bar" style="--h: {{ max(0.12, min(1, (float) $peak)) }}"></span>
                @endforeach
            </div>
            <div class="msg-voice-meta">
                <span class="msg-voice-time current">{{ $durationLabel }}</span>
                <button type="button" class="msg-voice-speed" title="Playback speed">1×</button>
            </div>
        </div>
        <audio class="msg-voice-audio" preload="metadata" src="{{ $url }}"></audio>
    </div>
@endif