@php
    if (!$this->fileId && !$this->filePath) {
        echo '<div class="alert alert-warning">' . __('No file specified') . '</div>';
        return;
    }

    if ($error) {
        echo '<div class="alert alert-danger">' . $error . '</div>';
        return;
    }

    if (!$readyToLoad) {
        echo '<div class="text-center py-5"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>';
        return;
    }
@endphp

<div class="card shadow-sm border-radius-xl" wire:ignore>
    {{-- Header --}}
    {{-- <div class="card-header d-flex justify-content-between align-items-center py-3 bg-white">
        <div>
            <h4 class="overline-title mb-1">{{ __('PDF Viewer') }}</h4>
            <p class="text-muted small mb-0">
                <em class="icon ni ni-file-pdf me-1"></em>
                {{ $this->fileName }} 
                <span class="badge bg-light text-dark ms-2">
                    {{ $pageCount }} {{ __('page', ['count' => $pageCount]) }}
                </span>
            </p>
        </div>
        
        <div class="d-flex gap-2">
            <div wire:loading class="spinner-border spinner-border-sm text-primary" role="status">
                <span class="visually-hidden">{{ __('Loading') }}...</span>
            </div>
        </div>
    </div> --}}

    {{-- Body --}}
    <div class="card-body p-4">
        {{-- Extract Pages Form --}}
        @if($fileId && $pageCount > 0 && false)
            <div class="extraction-section mb-4" x-data>
                {{-- Extraction Button/Trigger --}}
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <button 
                        type="button"
                        class="btn btn-primary btn-sm"
                        x-on:click="toggleExtractionForm()"
                        x-bind:disabled="selectedCount === 0"
                        x-show="!showExtractionForm"
                    >
                        <em class="icon ni ni-file-plus me-1"></em>
                        <span>{{ __('Extract Selected Pages') }}</span>
                        <span x-show="selectedCount > 0" class="badge bg-white text-primary ms-1" x-text="selectedCount"></span>
                    </button>
                </div>

                {{-- Extraction Form --}}
                <div 
                    x-show="showExtractionForm" 
                    x-collapse
                    class="card bg-light border-primary mb-4"
                >
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="mb-0">
                                <em class="icon ni ni-file-plus text-primary me-2"></em>
                                {{ __('Extract Pages') }}
                            </h6>
                            <button 
                                type="button" 
                                class="btn-close" 
                                x-on:click="cancelExtraction()"
                                aria-label="{{ __('Close') }}"
                            ></button>
                        </div>

                        <div class="row g-3">
                            {{-- Target Folder Selection --}}
                            <div class="col-12 col-md-6">
                                <x-ui.select 
                                    :label="__('Target Folder')" 
                                    model="extractionTargetFolder" 
                                    :options="$this->possibleFolders"
                                    placeholder="{{ __('Select folder') }}"
                                    :required="true"
                                />
                            </div>

                            {{-- Target Filename (conditional) --}}
                            @if($this->canSelectTargetFilename)
                                <div class="col-12 col-md-6">
                                    <x-ui.input 
                                        :label="__('Target Filename')" 
                                        model="extractionTargetFilename" 
                                        placeholder="{{ __('Enter filename') }}"
                                    />
                                    <small class="text-muted">{{ __('Leave empty to use current filename') }}</small>
                                </div>
                            @endif
                        </div>

                        <div class="alert alert-info d-flex align-items-start mt-3 mb-0" role="alert">
                            <em class="icon ni ni-info-fill me-2 mt-1"></em>
                            <div>
                                <strong x-text="selectedCount"></strong> {{ __('page(s) selected for extraction') }}.
                                <br>
                                <small>{{ __('The selected pages will be moved to the target folder and removed from this file.') }}</small>
                            </div>
                        </div>

                        {{-- Action Buttons --}}
                        <div class="d-flex justify-content-end gap-2 mt-3">
                            <button 
                                type="button" 
                                class="btn btn-secondary"
                                x-on:click="cancelExtraction()"
                            >
                                {{ __('Cancel') }}
                            </button>
                            <button 
                                type="button" 
                                class="btn btn-primary"
                                x-on:click="submitExtraction()"
                                x-bind:disabled="loading || selectedCount === 0 || !$wire.extractionTargetFolder"
                            >
                                <span x-show="!loading">
                                    <em class="icon ni ni-check-circle me-1"></em>
                                    {{ __('Extract Pages') }}
                                </span>
                                <span x-show="loading" class="spinner-border spinner-border-sm"></span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        @if($pageCount > 0)
            <div 
                x-data="pdfViewer(@js($pages), '{{ $fileId ?? md5($filePath) }}')"
                x-cloak
            >
                {{-- Toolbar --}}
                <div class="pdf-viewer-toolbar">
                    <div class="row align-items-center">
                        <div class="col-12 col-md-6">
                            <div class="d-flex align-items-center gap-2 gap-md-3">
                                <span class="text-muted bold">
                                    {{ $this->fileName }}
                                    <span class="badge bg-primary" class=" ms-2">
                                        <span x-text="pageCount" class="me-1"></span> {{ __('pages') }}
                                    </span>
                                </span>
                                
                                <template x-if="selectedCount > 0">
                                    <span class="badge bg-primary">
                                        <span x-text="selectedCount" class="me-1"></span> {{ __('selected') }}
                                    </span>
                                </template>
                            </div>
                        </div>
                        
                        <div class="col-12 col-md-6 text-start text-md-end">
                            <div class="btn-group btn-group-sm" role="group">
                                <template x-if="selectedCount === 0">
                                    <button 
                                        type="button" 
                                        class="btn btn-outline-primary pdf-toolbar-btn btn-xs"
                                        x-on:click="selectAll()"
                                    >
                                        <em class="icon ni ni-check-circle d-none d-sm-inline"></em>
                                        <span class="d-none d-sm-inline">{{ __('Select All') }}</span>
                                        <span class="d-sm-none">{{ __('Select All') }}</span>
                                    </button>
                                </template>
                                
                                <template x-if="selectedCount > 0">
                                    <button 
                                        type="button" 
                                        class="btn btn-outline-secondary pdf-toolbar-btn btn-xs"
                                        x-on:click="deselectAll()"
                                    >
                                        <em class="icon ni ni-cross-circle"></em>
                                        <span class="d-none d-sm-inline">{{ __('Deselect All') }}</span>
                                        <span class="d-sm-none">{{ __('Deselect') }}</span>
                                    </button>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Floating Action Panel --}}
                @if($fileId)
                    <x-pdf.action-panel>
                        <x-pdf.action-button
                            icon="file-plus"
                            :label="__('Extraire')"
                            color="primary"
                            x-on:click="openExtractPanel()"
                        />
                        {{-- <x-pdf.action-button
                            icon="files"
                            :label="__('Fusionner')"
                            color="secondary"
                            x-on:click="openMergePanel()"
                        /> --}}
                        <x-pdf.action-button
                            icon="trash"
                            :label="__('Supprimer')"
                            color="danger"
                            x-on:click="deleteSelectedPages()"
                            x-bind:disabled="loading || selectedCount >= pageCount"
                        />
                    </x-pdf.action-panel>

                    {{-- Extract Pages Slide Panel --}}
                    <x-pdf.slide-panel 
                        show="showExtractPanel" 
                        :title="__('Extraire des pages')"
                        icon="file-plus"
                        size="md"
                    >
                        <x-slot name="body">
                            {{-- Selected Pages Preview --}}
                            <x-pdf.selected-pages-preview />

                            <div class="pdf-form-section">
                                <h6 class="pdf-form-section-title">
                                    <em class="icon ni ni-folder me-2"></em>
                                    {{ __('Destination') }}
                                </h6>
                                
                                <div class="mb-3">
                                    <label class="form-label">{{ __('Vers la pochette') }}</label>
                                    <select 
                                        class="form-select form-select-lg pdf-form-select"
                                        wire:model.defer="extractionTargetFolder"
                                        x-model="extractionTargetFolder"
                                    >
                                        <option value="">{{ __('Sélectionner une pochette') }}</option>
                                        @foreach($this->possibleFolders as $value => $label)
                                            <option value="{{ $value }}">{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                @if($this->canSelectTargetFilename)
                                    <div class="mb-3">
                                        <label class="form-label">{{ __('Nom du document') }}</label>
                                        <input 
                                            type="text"
                                            class="form-control form-control-lg pdf-form-input"
                                            wire:model.defer="extractionTargetFilename"
                                            x-model="extractionTargetFilename"
                                            placeholder="{{ __('Nom du document (optionnel)') }}"
                                        />
                                    </div>
                                @endif

                                <div class="pdf-form-info">
                                    <em class="icon ni ni-info-fill text-info me-2"></em>
                                    <span>{{ __('Les pages sélectionnées seront déplacées vers la pochette cible et supprimées de ce fichier.') }}</span>
                                </div>
                            </div>
                        </x-slot>

                        <x-slot name="footer">
                            <button 
                                type="button" 
                                class="btn btn-light btn-lg"
                                x-on:click="closeExtractPanel()"
                            >
                                {{ __('Annuler') }}
                            </button>
                            <button 
                                type="button" 
                                class="btn btn-primary btn-lg"
                                x-on:click="submitExtraction()"
                                x-bind:disabled="loading || selectedCount === 0 || !extractionTargetFolder"
                            >
                                <span x-show="!loading">
                                    <em class="icon ni ni-check-circle me-1"></em>
                                    {{ __('Extraire') }}
                                </span>
                                <span x-show="loading" class="spinner-border spinner-border-sm"></span>
                            </button>
                        </x-slot>
                    </x-pdf.slide-panel>

                    {{-- Merge Files Slide Panel --}}
                    {{-- <x-pdf.slide-panel 
                        show="showMergePanel" 
                        :title="__('Fusionner des fichiers')"
                        icon="files"
                        size="md"
                    >
                        <x-slot name="body">
                            <x-pdf.selected-pages-preview />

                            <div class="pdf-form-section">
                                <h6 class="pdf-form-section-title">
                                    <em class="icon ni ni-files me-2"></em>
                                    {{ __('Fichiers à fusionner') }}
                                </h6>
                                
                                <div class="pdf-form-info mb-3">
                                    <em class="icon ni ni-info-fill text-info me-2"></em>
                                    <span>{{ __('Les fichiers sélectionnés seront ajoutés à la suite de ce document.') }}</span>
                                </div>

                                <div class="pdf-merge-files-list">
                                    @forelse($this->allClientFiles as $id => $name)
                                        <label class="pdf-merge-file-item" x-bind:class="{'selected': mergeSelectedFiles.includes('{{ $id }}')}">
                                            <input 
                                                type="checkbox" 
                                                value="{{ $id }}"
                                                x-model="mergeSelectedFiles"
                                                class="pdf-merge-file-checkbox"
                                            />
                                            <span class="pdf-merge-file-icon">
                                                <em class="icon ni ni-file-pdf"></em>
                                            </span>
                                            <span class="pdf-merge-file-name">{{ $name }}</span>
                                            <span class="pdf-merge-file-check">
                                                <em class="icon ni ni-check"></em>
                                            </span>
                                        </label>
                                    @empty
                                        <div class="pdf-merge-empty">
                                            <em class="icon ni ni-file-remove display-6 text-muted"></em>
                                            <p class="text-muted mt-2 mb-0">{{ __('Aucun fichier PDF disponible pour la fusion') }}</p>
                                        </div>
                                    @endforelse
                                </div>

                                <template x-if="mergeSelectedFiles.length > 0">
                                    <div class="pdf-merge-summary mt-3">
                                        <span class="badge bg-primary">
                                            <span x-text="mergeSelectedFiles.length"></span> {{ __('fichier(s) sélectionné(s)') }}
                                        </span>
                                    </div>
                                </template>
                            </div>
                        </x-slot>

                        <x-slot name="footer">
                            <button 
                                type="button" 
                                class="btn btn-light btn-lg"
                                x-on:click="closeMergePanel()"
                            >
                                {{ __('Annuler') }}
                            </button>
                            <button 
                                type="button" 
                                class="btn btn-primary btn-lg"
                                x-on:click="submitMerge()"
                                x-bind:disabled="loading || mergeSelectedFiles.length === 0"
                            >
                                <span x-show="!loading">
                                    <em class="icon ni ni-check-circle me-1"></em>
                                    {{ __('Fusionner') }}
                                </span>
                                <span x-show="loading" class="spinner-border spinner-border-sm"></span>
                            </button>
                        </x-slot>
                    </x-pdf.slide-panel> --}}
                @endif

                {{-- Two-Column Layout --}}
                <div class="pdf-viewer-wrapper">
                    <div class="pdf-viewer-container">
                    {{-- Left Sidebar: Thumbnails --}}
                    <div class="pdf-thumbnails-sidebar" x-ref="thumbnailSidebar" title="{{ __('Drag to reorder, click to view') }}">
                        <template x-for="(page, index) in pages" :key="page.id || `page-${index}`">
                            <div 
                                class="pdf-thumbnail-card cursor-move"
                                x-bind:class="getThumbnailCardClass(index)"
                                draggable="true"
                                x-on:dragstart="onDragStart($event, index)"
                                x-on:dragover="onDragOver($event, index)"
                                x-on:dragenter="onDragEnter($event, index)"
                                x-on:dragleave="onDragLeave($event)"
                                x-on:drop="onDrop($event, index)"
                                x-on:dragend="onDragEnd($event)"
                                x-on:click="scrollToPage(index)"
                            >
                                {{-- Thumbnail Actions --}}
                                <div class="pdf-thumbnail-actions" x-on:click.stop>
                                    <button
                                        type="button"
                                        class="pdf-thumbnail-action-btn btn btn-sm"
                                        x-bind:class="isPageSelected(index) ? 'btn-success' : 'btn-light'"
                                        x-on:click.stop="togglePageSelection(index)"
                                        title="{{ __('Select page') }}"
                                    >
                                        <em class="icon ni" x-bind:class="isPageSelected(index) ? 'ni-check-circle-fill' : 'ni-check-circle'"></em>
                                    </button>
                                    
                                    <button 
                                        type="button"
                                        class="pdf-thumbnail-action-btn btn btn-sm btn-danger"
                                        x-on:click.stop="confirmDeletePage(index, page.number)"
                                        x-bind:disabled="loading"
                                        title="{{ __('Delete page') }}"
                                    >
                                        <em class="icon ni ni-trash"></em>
                                    </button>
                                </div>

                                {{-- Thumbnail Preview --}}
                                <div class="pdf-thumbnail-preview">
                                    <div 
                                        class="pdf-thumbnail-image"
                                        x-bind:style="page.preview_url ? `background-image: url('${page.preview_url}')` : ''"
                                        x-show="page.preview_url"
                                    ></div>
                                    <div 
                                        class="d-flex align-items-center justify-content-center h-100"
                                        x-show="!page.preview_url"
                                    >
                                        <em class="icon ni ni-file-pdf fs-3 text-muted"></em>
                                    </div>
                                </div>

                                {{-- Page Number --}}
                                <div class="pdf-thumbnail-info">
                                    <span x-text="index + 1"></span>
                                </div>

                                {{-- Drag Indicator --}}
                                <div class="pdf-drag-indicator">
                                    <em class="icon ni ni-swap-v text-primary"></em>
                                </div>
                            </div>
                        </template>
                    </div>

                    {{-- Right Area: Full Page Previews --}}
                    <div class="pdf-preview-area" x-ref="previewArea" x-on:scroll.passive="onPreviewScroll">
                        <template x-for="(page, index) in pages" :key="page.id || `page-${index}`">
                            <div 
                                class="pdf-full-page"
                                x-bind:data-page-number="index + 1"
                                x-bind:data-page="index + 1"
                            >
                                {{-- Page Header --}}
                                <div class="pdf-page-header">
                                    <div class="pdf-page-number">
                                        <em class="icon ni ni-file-pdf"></em>
                                        <span>{{ __('Page') }} <span x-text="index + 1"></span></span>
                                    </div>
                                    <div class="pdf-page-dimensions">
                                        <span x-text="Math.round(page.width)"></span> × <span x-text="Math.round(page.height)"></span> mm
                                    </div>
                                </div>

                                {{-- Full Page Image --}}
                                <div class="pdf-page-content">
                                    <div 
                                        class="pdf-full-page-image"
                                        x-bind:style="page.preview_url ? `background-image: url('${page.preview_url}'); aspect-ratio: ${page.width || 210} / ${page.height || 297};` : ''"
                                        x-show="page.preview_url"
                                    ></div>
                                    
                                    <div 
                                        class="text-center py-5"
                                        x-show="!page.preview_url"
                                    >
                                        <em class="icon ni ni-file-pdf display-3 text-muted"></em>
                                        <p class="text-muted mt-3">{{ __('Preview not available') }}</p>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                    </div>
                </div>

                {{-- Delete confirmation modal --}}
                <template x-if="showDeleteConfirm">
                    <div 
                        class="modal fade show d-block" 
                        tabindex="-1" 
                        style="background-color: rgba(0,0,0,0.5);"
                        x-on:click.self="cancelDelete()"
                    >
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">{{ __('Confirm Deletion') }}</h5>
                                    <button 
                                        type="button" 
                                        class="btn-close" 
                                        x-on:click="cancelDelete()"
                                    ></button>
                                </div>
                                <div class="modal-body">
                                    <p>
                                        {{ __('Are you sure you want to delete page') }} 
                                        <strong x-text="pageToDeleteIndex !== null ? pageToDeleteIndex + 1 : ''"></strong>?
                                    </p>
                                    <p class="text-muted small mb-0">
                                        {{ __('This action cannot be undone.') }}
                                    </p>
                                </div>
                                <div class="modal-footer">
                                    <button 
                                        type="button" 
                                        class="btn btn-secondary" 
                                        x-on:click="cancelDelete()"
                                    >
                                        {{ __('Cancel') }}
                                    </button>
                                    <button 
                                        type="button" 
                                        class="btn btn-danger" 
                                        x-on:click="deletePage()"
                                        x-bind:disabled="loading"
                                    >
                                        <span x-show="!loading">{{ __('Delete Page') }}</span>
                                        <span x-show="loading" class="spinner-border spinner-border-sm"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        @else
            <div class="alert alert-warning">
                {{ __('No pages found in this PDF') }}
            </div>
        @endif
    </div>
</div>