{{--
    @intent Fornecer um campo de mídia acessível, unificado com a Galeria V2 e Cropper.js.
    @description Drag & Drop com upload AJAX direto em segundo plano e seleção via Galeria.
    @param string $name Nome do campo de formulário (Obrigatório).
    @param string $label Rótulo do campo (Obrigatório).
    @param string $accept Extensões aceitas (Padrão: image/*,application/pdf).
    @param bool   $required Se o campo é obrigatório.
    @param string $help Texto de ajuda adicional.
    @param int    $currentId ID da mídia atual (para edição/persistência de chave).
    @param string $currentUrl URL da mídia atual.
    @param string $currentAlt Texto alternativo atual.
    @param string $ownerModule Módulo proprietário (ex: 'noticias', 'exemplo').
--}}
@php
    $currentId = $currentId ?? '';
    $currentUrl = $currentUrl ?? '';
    $currentAlt = $currentAlt ?? '';
    $ownerModule = $ownerModule ?? 'global';
    $accept = $accept ?? 'image/*,application/pdf';
    $required = $required ?? false;

    /* Detecta o tipo para renderização inicial no PHP */
    $isPdfInitial = !empty($currentUrl) && strpos(strtolower($currentUrl), '.pdf') !== false;
    $isAudioInitial = !empty($currentUrl) && (strpos(strtolower($currentUrl), '.mp3') !== false || strpos(strtolower($currentUrl), '.wav') !== false || strpos(strtolower($currentUrl), '.ogg') !== false);
    $isExcelInitial = !empty($currentUrl) && (strpos(strtolower($currentUrl), '.xlsx') !== false || strpos(strtolower($currentUrl), '.xls') !== false || strpos(strtolower($currentUrl), '.csv') !== false || strpos(strtolower($currentUrl), '.ods') !== false);
    $isImageInitial = !empty($currentUrl) && !$isPdfInitial && !$isAudioInitial && !$isExcelInitial;
@endphp

<section class="v2-media-input-wrapper mb-3 js-media-input" 
         id="wrapper-{{ $name }}" 
         aria-labelledby="label-container-{{ $name }}"
         data-name="{{ $name }}"
         data-owner="{{ $ownerModule }}"
         data-accept="{{ $accept }}"
         data-no-picker="{{ isset($noPicker) && $noPicker ? '1' : '0' }}">
    <div class="mb-0">
        <label id="label-container-{{ $name }}" class="form-label fw-bold mb-2">
            {{ $label }}
            @if($required) 
                <span class="text-danger" title="Campo Obrigatório" aria-hidden="true" style="margin-left: 5px;">*</span>
                <span class="visually-hidden">Obrigatório</span>
            @endif
        </label>
        
        {{-- Input Oculto contendo o ID físico da mídia da Galeria --}}
        <input type="hidden" name="{{ $name }}" id="media-id-{{ $name }}" value="{{ $currentId }}" @if($required && empty($currentId)) required @endif>
        <input type="hidden" name="{{ $name }}_alt" id="media-alt-{{ $name }}" value="{{ $currentAlt }}">

        {{-- Dropzone Unificada --}}
        <div class="v2-media-dropzone text-center bg-white border border-dashed rounded p-4 {{ !empty($currentUrl) ? 'has-current' : '' }}" 
             id="drop-zone-{{ $name }}"
             role="button"
             tabindex="0"
             title="Arraste arquivos ou clique para selecionar da galeria"
             style="position: relative; transition: all 0.3s; border-color: #d1d9e6; background-color: #f8fafc; overflow: hidden; min-height: 130px; display: flex; align-items: center; justify-content: center; flex-direction: column;">
            
            {{-- Input File Oculto Real --}}
            <input type="file" id="media-input-{{ $name }}" accept="{{ $accept }}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10;">

            {{-- Prompt de zona vazia --}}
            <div class="v2-dropzone-prompt js-zone-content-{{ $name }} {{ !empty($currentUrl) ? 'd-none' : '' }}" style="pointer-events: none;">
                <i class="bi bi-cloud-arrow-up-fill fs-2 text-primary mb-2" aria-hidden="true"></i>
                <h5 class="text-dark fw-bold h6 mb-1">Arraste arquivos aqui</h5>
                <p class="text-muted small mb-0">ou clique para abrir a galeria</p>
            </div>

            {{-- Elemento de Progresso Inline --}}
            <div class="v2-dropzone-progress js-zone-progress-{{ $name }} d-none" style="width: 80%;">
                <p class="small text-muted js-progress-text-{{ $name }} fw-bold mb-2">Enviando arquivo...</p>
                <div class="progress" style="height: 4px; background: #eee; border-radius: 2px; overflow: hidden;">
                    <div class="progress-bar bg-success js-progress-bar-{{ $name }}" role="progressbar" style="width: 0%"></div>
                </div>
            </div>

            {{-- Elemento de Erro de Validação --}}
            <div class="v2-dropzone-error js-zone-error-{{ $name }} text-danger d-none" style="padding: 10px;">
                <i class="bi bi-exclamation-triangle-fill fs-2 mb-2"></i>
                <p class="small js-error-text-{{ $name }} fw-bold mb-0"></p>
            </div>

            {{-- Preview de Arquivo Selecionado --}}
            <div class="v2-dropzone-selected js-selected-content-{{ $name }} {{ empty($currentUrl) ? 'd-none' : '' }}" style="width: 100%; text-align: center;">
                <div class="preview-container position-relative d-inline-block mb-2">
                    <img src="{{ $currentUrl }}" alt="Prévia" class="img-fluid mx-auto d-block shadow-sm js-preview-img-{{ $name }} {{ !$isImageInitial ? 'd-none' : '' }}" style="max-height: 110px; border-radius: 4px; border: 1px solid #ddd; padding: 2px; background: #fff;">
                    <div class="preview-pdf-{{ $name }} {{ !$isPdfInitial ? 'd-none' : '' }} text-danger">
                        <i class="bi bi-file-earmark-pdf-fill fs-1" aria-hidden="true"></i>
                    </div>
                    <div class="preview-audio-{{ $name }} {{ !$isAudioInitial ? 'd-none' : '' }} text-primary">
                        <i class="bi bi-file-earmark-music-fill fs-1" aria-hidden="true"></i>
                    </div>
                    <div class="preview-spreadsheet-{{ $name }} {{ !$isExcelInitial ? 'd-none' : '' }} text-success">
                        <i class="bi bi-file-earmark-excel-fill fs-1" aria-hidden="true"></i>
                    </div>
                </div>
                
                <p class="small text-dark js-preview-label-{{ $name }} fw-bold mb-0" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90%; margin-left: auto; margin-right: auto;">
                    {{ !empty($currentAlt) ? $currentAlt : (!empty($currentUrl) ? basename($currentUrl) : '') }}
                </p>
            </div>
        </div>
        
        <p id="help-{{ $name }}" class="text-muted small mt-2 mb-0">
            <i class="bi bi-info-circle-fill me-1" aria-hidden="true"></i>
            {{ $help ?? 'Formatos aprovados: ' . $accept }}
        </p>
    </div>
</section>

@if (!isset($GLOBALS['media_input_scripts_rendered']))
    @php $GLOBALS['media_input_scripts_rendered'] = true; @endphp
    @push('scripts')
    <script src="{{ asset('assets/js/media-input.js') }}"></script>
    @endpush
@endif