@php
    /**
     * Componente de Áudio e Narração Acessível (V2)
     * Fornece um player rico, acessível (WCAG AAA/eMAG) e responsivo.
     *
     * @param string $path         Caminho do arquivo de áudio
     * @param string $disk         Disco de armazenamento (default: public)
     * @param string $title        Título da narração (opcional)
     * @param string $narrator     Nome do narrador (opcional)
     * @param string $narrationText Texto associado à narração para leitura/acessibilidade (opcional)
     */
    $disk = isset($disk) ? $disk : 'public';
    $audioUrl = v2_storage_url($path);
    $title = isset($title) ? $title : 'Narração do Conteúdo';
    $allowDownload = !isset($allowDownload) || (bool) $allowDownload;
    $id = 'v2-audio-player-' . uniqid();
@endphp

<div class="v2-audio-container" id="{{ $id }}" style="margin: 15px 0; font-family: inherit;">
    <div class="card border shadow-sm overflow-hidden mb-3">
        <div class="card-body p-3 bg-light">
            
            {{-- Metadados e Título do Áudio --}}
            <div class="v2-audio-header mb-3 d-flex align-items-center justify-content-between flex-wrap">
                <div>
                    <h4 class="h6 fw-bold text-dark mb-1">
                        <i class="bi bi-volume-up-fill text-primary me-1" aria-hidden="true"></i>
                        {{ $title }}
                    </h4>
                    @if(isset($narrator))
                        <small class="text-secondary d-block">
                            <i class="bi bi-person-circle me-1" aria-hidden="true"></i> Voz: {{ $narrator }}
                        </small>
                    @endif
                </div>
                
                {{-- Ondas de Áudio Animadas (CSS/SVG) --}}
                <div class="audio-wave-anim js-wave d-flex align-items-end" style="height: 20px; gap: 3px; padding-right: 5px;">
                    <span style="display: inline-block; width: 3px; height: 5px; background: #3c8dbc; border-radius: 3px; transition: height 0.2s;"></span>
                    <span style="display: inline-block; width: 3px; height: 5px; background: #3c8dbc; border-radius: 3px; transition: height 0.2s;"></span>
                    <span style="display: inline-block; width: 3px; height: 5px; background: #3c8dbc; border-radius: 3px; transition: height 0.2s;"></span>
                    <span style="display: inline-block; width: 3px; height: 5px; background: #3c8dbc; border-radius: 3px; transition: height 0.2s;"></span>
                    <span style="display: inline-block; width: 3px; height: 5px; background: #3c8dbc; border-radius: 3px; transition: height 0.2s;"></span>
                </div>
            </div>

            {{-- Elemento Áudio Nativo Oculto --}}
            <audio id="{{ $id }}-element" src="{{ $audioUrl }}" preload="metadata" style="display:none;"></audio>

            {{-- Custom Premium Player Interface --}}
            <div class="v2-audio-controls-row d-flex align-items-center gap-3 flex-wrap">
                
                {{-- Play/Pause Button --}}
                <button type="button" class="btn btn-primary js-play-pause rounded-circle d-flex align-items-center justify-content-center text-white" 
                        aria-label="Reproduzir áudio" 
                        style="width: 46px; height: 46px; padding: 0; box-shadow: 0 3px 6px rgba(60,141,188,0.3);">
                    <i class="bi bi-play-fill fs-4" aria-hidden="true" style="margin-left: 2px;"></i>
                </button>

                {{-- Skip Buttons --}}
                <div class="btn-group" role="group" aria-label="Controle de navegação de tempo">
                    <button type="button" class="btn btn-outline-secondary btn-sm js-skip-backward" aria-label="Voltar 10 segundos" title="Voltar 10s">
                        <i class="bi bi-rewind-fill me-1" aria-hidden="true"></i> -10s
                    </button>
                    <button type="button" class="btn btn-outline-secondary btn-sm js-skip-forward" aria-label="Avançar 10 segundos" title="Avançar 10s">
                        +10s <i class="bi bi-fast-forward-fill ms-1" aria-hidden="true"></i>
                    </button>
                </div>

                {{-- Progress Bar --}}
                <div class="js-progress-container flex-grow-1 position-relative" style="min-width: 150px;">
                    <label for="{{ $id }}-progress" class="visually-hidden">Progresso da reprodução</label>
                    <input type="range" class="form-range js-progress-bar" id="{{ $id }}-progress" min="0" max="100" value="0" 
                           style="cursor: pointer;" 
                           aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                    <div class="d-flex justify-content-between mt-1 small text-secondary" style="font-size: 11px;">
                        <span class="js-current-time">0:00</span>
                        <span class="js-duration">0:00</span>
                    </div>
                </div>

                {{-- Volume Control --}}
                <div class="d-flex align-items-center gap-2">
                    <button type="button" class="btn btn-outline-secondary btn-sm js-mute" aria-label="Mutar áudio" title="Mutar/Desmutar">
                        <i class="bi bi-volume-up-fill" aria-hidden="true"></i>
                    </button>
                    <label for="{{ $id }}-volume" class="visually-hidden">Volume do áudio</label>
                    <input type="range" class="form-range js-volume-bar" id="{{ $id }}-volume" min="0" max="1" step="0.1" value="1" 
                           style="width: 60px; cursor: pointer;">
                </div>

                {{-- Speed Controller --}}
                <div class="dropdown">
                    <button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle js-speed-btn" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Velocidade da voz">
                        Velocidade: <span class="js-current-speed">1x</span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end" role="menu">
                        <li role="none"><a href="#" class="dropdown-item js-speed-opt" data-speed="0.5" role="menuitem">0.5x (Mais lento)</a></li>
                        <li role="none"><a href="#" class="dropdown-item js-speed-opt" data-speed="1.0" role="menuitem">1.0x (Normal)</a></li>
                        <li role="none"><a href="#" class="dropdown-item js-speed-opt" data-speed="1.25" role="menuitem">1.25x (Rápido)</a></li>
                        <li role="none"><a href="#" class="dropdown-item js-speed-opt" data-speed="1.5" role="menuitem">1.5x (Mais rápido)</a></li>
                        <li role="none"><a href="#" class="dropdown-item js-speed-opt" data-speed="2.0" role="menuitem">2.0x (Máximo)</a></li>
                    </ul>
                </div>

                {{-- Download Link --}}
                @if($allowDownload)
                    <a href="{{ $audioUrl }}" class="btn btn-outline-secondary btn-sm" download title="Fazer download da narração" aria-label="Baixar áudio">
                        <i class="bi bi-download" aria-hidden="true"></i>
                    </a>
                @endif
            </div>

            {{-- Narration Text Accordion for Accessibility --}}
            @if(isset($narrationText) && !empty($narrationText))
                <div class="mt-3 pt-2 border-top border-secondary">
                    <button type="button" class="btn btn-link btn-sm text-decoration-none p-0 fw-bold js-toggle-text" 
                            style="color: #3c8dbc;"
                            aria-expanded="false" 
                            aria-controls="{{ $id }}-text-container">
                        <i class="bi bi-file-earmark-text me-1" aria-hidden="true"></i>
                        <span>Exibir texto da narração</span>
                    </button>
                    <div id="{{ $id }}-text-container" class="js-text-container mt-2 p-3 bg-white border border-dashed rounded text-secondary" style="display: none; font-size: 13px; line-height: 1.6;">
                        {{ $narrationText }}
                    </div>
                </div>
            @endif

        </div>
    </div>
</div>

@push('scripts')
<script>
(function($) {
    "use strict";

    $(document).ready(function() {
        const container = $('#{{ $id }}');
        const audio = $('#{{ $id }}-element')[0];
        const playBtn = container.find('.js-play-pause');
        const progress = container.find('.js-progress-bar');
        const currentTimeEl = container.find('.js-current-time');
        const durationEl = container.find('.js-duration');
        const skipBwd = container.find('.js-skip-backward');
        const skipFwd = container.find('.js-skip-forward');
        const muteBtn = container.find('.js-mute');
        const volumeBar = container.find('.js-volume-bar');
        const speedOpts = container.find('.js-speed-opt');
        const currentSpeedEl = container.find('.js-current-speed');
        const wave = container.find('.js-wave span');
        const toggleText = container.find('.js-toggle-text');
        const textContainer = container.find('.js-text-container');
        
        let waveInterval = null;

        function formatTime(seconds) {
            if (isNaN(seconds)) return "0:00";
            const min = Math.floor(seconds / 60);
            const sec = Math.floor(seconds % 60);
            return min + ":" + (sec < 10 ? "0" : "") + sec;
        }

        // Carrega metadados da duração inicial
        audio.addEventListener('loadedmetadata', function() {
            durationEl.text(formatTime(audio.duration));
        });

        // Caso já carregado
        if (audio.duration && !isNaN(audio.duration)) {
            durationEl.text(formatTime(audio.duration));
        }

        // Play / Pause logic
        playBtn.on('click', function() {
            if (audio.paused) {
                const playPromise = audio.play();
                if (playPromise !== undefined) {
                    playPromise.then(() => {
                        playBtn.html('<i class="bi bi-pause-fill fs-4" aria-hidden="true"></i>').attr('aria-label', 'Pausar áudio');
                        startWaveAnimation();
                    }).catch(error => {
                        console.warn("[v2-audio-player] Reprodução impedida ou recurso indisponível:", error.message);
                    });
                } else {
                    // Fallback para navegadores antigos sem retorno de Promise no play()
                    playBtn.html('<i class="bi bi-pause-fill fs-4" aria-hidden="true"></i>').attr('aria-label', 'Pausar áudio');
                    startWaveAnimation();
                }
            } else {
                audio.pause();
                playBtn.html('<i class="bi bi-play-fill fs-4" aria-hidden="true" style="margin-left: 2px;"></i>').attr('aria-label', 'Reproduzir áudio');
                stopWaveAnimation();
            }
        });

        // Time updates
        audio.addEventListener('timeupdate', function() {
            if (!progress.is(':focus') && !progress.data('dragging') && !isNaN(audio.duration) && audio.duration > 0) {
                const percent = (audio.currentTime / audio.duration) * 100;
                progress.val(percent || 0);
                progress.attr('aria-valuenow', percent || 0);
                currentTimeEl.text(formatTime(audio.currentTime));
            }
        });

        // Seek logic
        progress.on('input', function() {
            progress.data('dragging', true);
            if (!isNaN(audio.duration) && audio.duration > 0) {
                const time = (progress.val() / 100) * audio.duration;
                currentTimeEl.text(formatTime(time));
            }
        });

        // Seek end
        progress.on('change', function() {
            if (!isNaN(audio.duration) && audio.duration > 0) {
                audio.currentTime = (progress.val() / 100) * audio.duration;
            }
            progress.data('dragging', false);
        });

        // Skip 10s
        skipBwd.on('click', function() {
            if (!isNaN(audio.duration) && audio.duration > 0) {
                audio.currentTime = Math.max(0, audio.currentTime - 10);
            }
        });

        // Skip forward 10s
        skipFwd.on('click', function() {
            if (!isNaN(audio.duration) && audio.duration > 0) {
                audio.currentTime = Math.min(audio.duration, audio.currentTime + 10);
            }
        });

        // Mute / Volume logic
        muteBtn.on('click', function() {
            audio.muted = !audio.muted;
            if (audio.muted) {
                muteBtn.html('<i class="bi bi-volume-mute-fill" aria-hidden="true"></i>').attr('aria-label', 'Ativar som');
            } else {
                muteBtn.html('<i class="bi bi-volume-up-fill" aria-hidden="true"></i>').attr('aria-label', 'Mutar áudio');
            }
        });

        volumeBar.on('input change', function() {
            audio.volume = $(this).val();
            audio.muted = (audio.volume === 0);
            if (audio.muted) {
                muteBtn.html('<i class="bi bi-volume-mute-fill" aria-hidden="true"></i>');
            } else {
                muteBtn.html('<i class="bi bi-volume-up-fill" aria-hidden="true"></i>');
            }
        });

        // Speed settings
        speedOpts.on('click', function(e) {
            e.preventDefault();
            const speed = parseFloat($(this).data('speed'));
            audio.playbackRate = speed;
            currentSpeedEl.text(speed + 'x');
        });

        // Accordion toggle text
        toggleText.on('click', function(e) {
            e.preventDefault();
            const visible = textContainer.is(':visible');
            textContainer.slideToggle(200);
            $(this).attr('aria-expanded', !visible);
            $(this).find('span').text(visible ? 'Exibir texto da narração' : 'Ocultar texto da narração');
        });

        // Wave Animations
        function startWaveAnimation() {
            if (waveInterval) clearInterval(waveInterval);
            waveInterval = setInterval(() => {
                wave.each(function() {
                    const h = Math.floor(Math.random() * 15) + 5;
                    $(this).css('height', h + 'px');
                });
            }, 150);
        }

        // Stop Wave
        function stopWaveAnimation() {
            if (waveInterval) {
                clearInterval(waveInterval);
                waveInterval = null;
            }
            wave.css('height', '5px');
        }

        // Stop wave when finished
        audio.addEventListener('ended', function() {
            playBtn.html('<i class="bi bi-play-fill fs-4" aria-hidden="true" style="margin-left: 2px;"></i>');
            stopWaveAnimation();
            progress.val(0);
            currentTimeEl.text("0:00");
        });
    });
})(jQuery);
</script>
@endpush