{{--
    @intent Exibição universal e acessível de mídias (Imagem, PDF, Áudio, Planilha) na V2.
    @description Utiliza semântica HTML5 (figure/figcaption) e padrões WCAG AAA.
                 Detecta automaticamente o tipo pela extensão do path se 'type' não for informado.
    @param string $path           Caminho original do arquivo.
    @param array  $variants       Variantes responsivas (kit WebP).
    @param string $type           Tipo da mídia (image|pdf|audio|spreadsheet). Se omitido, detecta pela extensão.
    @param string $disk           Disco de armazenamento (default: public).
    @param string $alt            Texto alternativo (Obrigatório para Acessibilidade).
    @param string $narrationText  Texto da narração (opcional — exibido como accordion no áudio).
--}}
@php
    $disk = $disk ?? 'public';
    $alt = $alt ?? '';
    $narrationText = $narrationText ?? '';
    $variants = isset($variants) && is_array($variants) ? $variants : [];

    /* Detecta tipo automaticamente pela extensão se não informado */
    if (!isset($type) || empty($type)) {
        $ext = strtolower(pathinfo($path, PATHINFO_EXTENSION));
        $audioExts = ['mp3', 'wav', 'ogg', 'm4a', 'aac', 'webm', 'wma'];
        $spreadsheetExts = ['xlsx', 'xls', 'csv', 'ods'];
        $pdfExts = ['pdf'];

        if (in_array($ext, $pdfExts)) {
            $type = 'pdf';
        } elseif (in_array($ext, $audioExts)) {
            $type = 'audio';
        } elseif (in_array($ext, $spreadsheetExts)) {
            $type = 'spreadsheet';
        } else {
            $type = 'image';
        }
    }

    $fileUrl = v2_storage_url($path);
    $filename = basename($path);
    $showActions = !isset($noActions) || !$noActions;
@endphp

<figure class="v2-media-viewer bg-white border rounded overflow-hidden shadow-sm" 
        style="margin: 0;"
        role="group" 
        aria-label="Visualização de {{ $type === 'audio' ? 'Áudio' : ($type === 'spreadsheet' ? 'Planilha' : 'Mídia') }}">

    {{-- ==================== IMAGEM ==================== --}}
    @if($type === 'image')
        <div class="v2-media-frame text-center border-bottom d-flex align-items-center justify-content-center bg-light" 
             style="min-height: 200px; overflow: hidden; background-image: linear-gradient(45deg, #fcfcfc 25%, transparent 25%, transparent 75%, #fcfcfc 75%, #fcfcfc), linear-gradient(45deg, #fcfcfc 25%, transparent 25%, transparent 75%, #fcfcfc 75%, #fcfcfc); background-size: 20px 20px; background-position: 0 0, 10px 10px;">
            
            @include('v2-service-media::components.picture', [
                'originalPath' => $path,
                'variants' => $variants,
                'disk' => $disk,
                'alt' => $alt ?: 'Imagem: ' . $filename,
                'class' => 'img-fluid mx-auto d-block transition-all hover-zoom',
                'style' => 'max-height: 400px;'
            ])
        </div>

    {{-- ==================== PDF ==================== --}}
    @elseif($type === 'pdf')
        @if(!empty($variants))
            {{-- PDF com capa gerada --}}
            <div class="v2-media-frame text-center border-bottom d-flex align-items-center justify-content-center bg-light" 
                 style="min-height: 200px; overflow: hidden; background-image: linear-gradient(45deg, #fcfcfc 25%, transparent 25%, transparent 75%, #fcfcfc 75%, #fcfcfc), linear-gradient(45deg, #fcfcfc 25%, transparent 25%, transparent 75%, #fcfcfc 75%, #fcfcfc); background-size: 20px 20px; background-position: 0 0, 10px 10px;">
                
                @include('v2-service-media::components.picture', [
                    'originalPath' => $path,
                    'variants' => $variants,
                    'disk' => $disk,
                    'alt' => $alt ?: 'Capa do PDF: ' . $filename,
                    'class' => 'img-fluid mx-auto d-block transition-all hover-zoom',
                    'style' => 'max-height: 400px;'
                ])
            </div>
        @else
            {{-- PDF sem capa -- visual customizado --}}
            <div class="v2-media-frame-fallback text-center py-5 border-bottom" 
                 style="background: linear-gradient(135deg, #fdf2e9 0%, #fadbd8 100%);">
                <div class="d-inline-block bg-white rounded p-4 shadow-sm" style="box-shadow: 0 2px 8px rgba(192,57,43,0.15);">
                    <i class="bi bi-file-earmark-pdf text-danger display-4 d-block mb-2" aria-hidden="true"></i>
                    <span class="small fw-bold text-danger text-uppercase tracking-wider">Documento PDF</span>
                    <p class="small text-secondary mt-2 mb-0" style="font-size: 11px;">{{ $filename }}</p>
                </div>
            </div>
        @endif

    {{-- ==================== ÁUDIO ==================== --}}
    @elseif($type === 'audio')
        <div class="v2-media-frame-audio border-bottom p-4" 
             style="background: linear-gradient(135deg, #ebf5fb 0%, #d4e6f1 100%);">
            
            {{-- Cabeçalho do áudio --}}
            <div class="d-flex align-items-center gap-3 mb-3">
                <div class="d-flex align-items-center justify-content-center rounded-circle bg-primary text-white shadow-sm flex-shrink-0" style="width: 60px; height: 60px;">
                    <i class="bi bi-headphones fs-3" aria-hidden="true"></i>
                </div>
                <div class="min-width-0">
                    <h5 class="h6 fw-bold text-dark mb-1 text-truncate" style="max-width: 250px;">
                        {{ $alt ?: $filename }}
                    </h5>
                    <small class="text-secondary d-block">
                        <i class="bi bi-file-earmark-music me-1" aria-hidden="true"></i>
                        Arquivo de áudio
                    </small>
                </div>
            </div>

            {{-- Player nativo --}}
            <audio src="{{ $fileUrl }}" controls class="w-100 rounded" preload="metadata">
                Seu navegador não suporta o elemento de áudio.
            </audio>

            {{-- Ondas decorativas animadas --}}
            <div class="d-flex align-items-end justify-content-center mt-3 gap-1 opacity-50" style="height: 24px;">
                <span class="v2-audio-wave-bar" style="display: inline-block; width: 4px; background: #3c8dbc; border-radius: 2px; height: 8px;"></span>
                <span class="v2-audio-wave-bar" style="display: inline-block; width: 4px; background: #3c8dbc; border-radius: 2px; height: 18px;"></span>
                <span class="v2-audio-wave-bar" style="display: inline-block; width: 4px; background: #3c8dbc; border-radius: 2px; height: 12px;"></span>
                <span class="v2-audio-wave-bar" style="display: inline-block; width: 4px; background: #3c8dbc; border-radius: 2px; height: 22px;"></span>
                <span class="v2-audio-wave-bar" style="display: inline-block; width: 4px; background: #3c8dbc; border-radius: 2px; height: 10px;"></span>
                <span class="v2-audio-wave-bar" style="display: inline-block; width: 4px; background: #3c8dbc; border-radius: 2px; height: 16px;"></span>
            </div>

            @if(!empty($narrationText))
                <div class="mt-3 pt-3 border-top border-secondary">
                    <button type="button" class="btn btn-link btn-sm text-decoration-none p-0 fw-bold js-audio-narration-toggle" 
                            style="color: #3c8dbc;"
                            aria-expanded="false" 
                            aria-controls="narration-text-{{ md5($path) }}">
                        <i class="bi bi-file-earmark-text me-1" aria-hidden="true"></i>
                        <span>Exibir descrição da narração</span>
                    </button>
                    <div id="narration-text-{{ md5($path) }}" class="js-audio-narration-text 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>

    {{-- ==================== PLANILHA ==================== --}}
    @elseif($type === 'spreadsheet')
        <div class="v2-media-frame-spreadsheet border-bottom p-4" 
             style="background: linear-gradient(135deg, #e8f8f5 0%, #d1f2eb 100%);">
            
            {{-- Cabeçalho da planilha --}}
            <div class="d-flex align-items-center gap-3 mb-3">
                <div class="d-flex align-items-center justify-content-center rounded bg-success text-white shadow-sm flex-shrink-0" style="width: 60px; height: 60px; border-radius: 12px !important;">
                    <i class="bi bi-table fs-3" aria-hidden="true"></i>
                </div>
                <div class="min-width-0">
                    <h5 class="h6 fw-bold text-success mb-1 text-truncate" style="max-width: 250px;">
                        {{ $alt ?: $filename }}
                    </h5>
                    <small class="text-secondary d-block">
                        <i class="bi bi-file-earmark-excel text-success me-1" aria-hidden="true"></i>
                        Planilha / Tabela de dados
                    </small>
                </div>
            </div>

            {{-- Mini tabela decorativa --}}
            <div class="bg-white rounded border border-success overflow-hidden mb-2">
                <table class="table table-sm table-borderless m-0" style="font-size: 10px;">
                    <thead>
                        <tr class="bg-success text-white">
                            <th style="padding: 5px 8px; font-weight: 600;">#</th>
                            <th style="padding: 5px 8px; font-weight: 600;">Dado A</th>
                            <th style="padding: 5px 8px; font-weight: 600;">Dado B</th>
                            <th style="padding: 5px 8px; font-weight: 600;">Dado C</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="border-bottom">
                            <td class="text-secondary" style="padding: 4px 8px;">1</td>
                            <td style="padding: 4px 8px;">Lorem</td>
                            <td style="padding: 4px 8px;">Ipsum</td>
                            <td style="padding: 4px 8px;">Dolor</td>
                        </tr>
                        <tr class="border-bottom bg-light">
                            <td class="text-secondary" style="padding: 4px 8px;">2</td>
                            <td style="padding: 4px 8px;">Sit</td>
                            <td style="padding: 4px 8px;">Amet</td>
                            <td style="padding: 4px 8px;">Consectetur</td>
                        </tr>
                        <tr>
                            <td class="text-secondary" style="padding: 4px 8px;">3</td>
                            <td style="padding: 4px 8px;">Adipiscing</td>
                            <td style="padding: 4px 8px;">Elit</td>
                            <td style="padding: 4px 8px;">Sed do</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    {{-- ==================== FALLBACK GENÉRICO ==================== --}}
    @else
        <div class="v2-media-frame-fallback text-center py-5 border-bottom" 
             style="background: linear-gradient(135deg, #f4f6f9 0%, #ecf0f5 100%);">
            <div class="d-inline-block bg-white rounded p-4 shadow-sm">
                <i class="bi bi-file-earmark-text text-secondary display-4 d-block mb-2" aria-hidden="true"></i>
                <span class="small fw-bold text-dark text-uppercase tracking-wider">Documento</span>
                <p class="small text-secondary mt-2 mb-0" style="font-size: 11px;">{{ $filename }}</p>
            </div>
        </div>
    @endif

    {{-- ==================== AÇÕES E METADADOS ==================== --}}
    @if($showActions)
    <figcaption class="v2-media-caption bg-white p-3">
        <div class="d-grid gap-1 shadow-sm rounded overflow-hidden">
            
            @if($type === 'pdf')
                <a href="{{ $fileUrl }}" 
                   target="_blank" rel="noopener noreferrer"
                   class="btn btn-light text-danger py-2 fw-bold border-bottom"
                   title="Abrir documento PDF em nova aba">
                    <i class="bi bi-box-arrow-up-right me-2" aria-hidden="true"></i> 
                    <span>Visualizar PDF <small class="text-secondary font-weight-normal">(Nova Aba)</small></span>
                </a>
            @elseif($type === 'image')
                <a href="{{ $fileUrl }}" 
                   target="_blank" rel="noopener noreferrer"
                   class="btn btn-light text-primary py-2 fw-bold border-bottom"
                   title="Ver imagem em tamanho original">
                    <i class="bi bi-zoom-in me-2" aria-hidden="true"></i> 
                    <span>Ver Original <small class="text-secondary font-weight-normal">(Full HD)</small></span>
                </a>
            @elseif($type === 'audio')
                <a href="{{ $fileUrl }}" 
                   target="_blank" rel="noopener noreferrer"
                   class="btn btn-light text-info py-2 fw-bold border-bottom"
                   title="Ouvir áudio em nova aba">
                    <i class="bi bi-volume-up-fill me-2" aria-hidden="true"></i> 
                    <span>Abrir Player <small class="text-secondary font-weight-normal">(Nova Aba)</small></span>
                </a>
            @elseif($type === 'spreadsheet')
                <a href="{{ $fileUrl }}" 
                   target="_blank" rel="noopener noreferrer"
                   class="btn btn-light text-success py-2 fw-bold border-bottom"
                   title="Abrir planilha original">
                    <i class="bi bi-box-arrow-up-right me-2" aria-hidden="true"></i> 
                    <span>Abrir Planilha <small class="text-secondary font-weight-normal">(Original)</small></span>
                </a>
            @endif

            @if($type !== 'audio')
            <a href="{{ $fileUrl }}" 
               class="btn btn-light py-2 fw-bold text-dark"
               download
               title="Baixar arquivo para o seu computador">
                <i class="bi bi-download me-2" aria-hidden="true"></i> 
                <span>Fazer Download</span>
            </a>
            @endif
        </div>

        @if(!empty($alt))
            <div class="mt-3 pt-2 border-top">
                <span class="visually-hidden">Descrição da mídia:</span>
                <p class="small text-secondary italic mb-0">
                    <i class="bi bi-info-circle-fill me-1" aria-hidden="true"></i>
                    {{ $alt }}
                </p>
            </div>
        @endif
    </figcaption>
    @endif
</figure>

@push('head-styles')
<style>
    .v2-media-viewer .hover-zoom:hover { transform: scale(1.02); cursor: zoom-in; }
    .v2-media-viewer .italic { font-style: italic; }
    .v2-media-viewer .v2-audio-wave-bar {
        animation: v2WaveAnim 1.5s infinite ease-in-out;
    }
    .v2-media-viewer .v2-audio-wave-bar:nth-child(2) { animation-delay: 0.2s; }
    .v2-media-viewer .v2-audio-wave-bar:nth-child(3) { animation-delay: 0.4s; }
    .v2-media-viewer .v2-audio-wave-bar:nth-child(4) { animation-delay: 0.6s; }
    .v2-media-viewer .v2-audio-wave-bar:nth-child(5) { animation-delay: 0.8s; }
    .v2-media-viewer .v2-audio-wave-bar:nth-child(6) { animation-delay: 1.0s; }
    @keyframes v2WaveAnim {
        0%, 100% { height: 6px; }
        50% { height: 22px; }
    }
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    $('.v2-media-viewer .js-audio-narration-toggle').on('click', function(e) {
        e.preventDefault();
        var $btn = $(this);
        var $textContainer = $btn.closest('.v2-media-viewer').find($btn.attr('aria-controls'));
        if ($textContainer.length) {
            var visible = $textContainer.is(':visible');
            $textContainer.slideToggle(200);
            $btn.attr('aria-expanded', !visible);
            $btn.find('span').text(visible ? 'Exibir descrição da narração' : 'Ocultar descrição da narração');
        }
    });
});
</script>
@endpush