@extends('layouts.admin')

@section('title', __('Media Library'))

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">{{ __('Media Library') }}</h1>
            <p class="mb-0 text-muted">{{ __('Browse and manage your media files') }}</p>
        </div>
        <div>
            <a href="{{ route('admin.media.create', ['locale' => app()->getLocale()]) }}" class="btn btn-primary">
                <i class="fas fa-upload"></i> {{ __('Upload Files') }}
            </a>
            <a href="{{ route('admin.media.collections.index', ['locale' => app()->getLocale()]) }}" class="btn btn-info">
                <i class="fas fa-folder"></i> {{ __('Collections') }}
            </a>
        </div>
    </div>

    <!-- View Toggle and Search -->
    <div class="card shadow mb-4">
        <div class="card-body">
            <div class="row align-items-center">
                <!-- View Toggle -->
                <div class="col-md-3">
                    <div class="btn-group btn-group-toggle" data-toggle="buttons">
                        <label class="btn btn-outline-primary active" id="gridViewBtn">
                            <input type="radio" name="view" value="grid" checked> <i class="fas fa-th"></i> {{ __('Grid') }}
                        </label>
                        <label class="btn btn-outline-primary" id="listViewBtn">
                            <input type="radio" name="view" value="list"> <i class="fas fa-list"></i> {{ __('List') }}
                        </label>
                        <label class="btn btn-outline-primary" id="detailViewBtn">
                            <input type="radio" name="view" value="detail"> <i class="fas fa-th-large"></i> {{ __('Detail') }}
                        </label>
                    </div>
                </div>

                <!-- Search -->
                <div class="col-md-6">
                    <div class="input-group">
                        <input type="text" class="form-control" id="searchInput" placeholder="{{ __('Search files...') }}" value="{{ request('search') }}">
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button" id="searchBtn">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Bulk Actions -->
                <div class="col-md-3 text-right">
                    <div class="btn-group" id="bulkActions" style="display: none;">
                        <button type="button" class="btn btn-outline-danger btn-sm" onclick="bulkDelete()">
                            <i class="fas fa-trash"></i> {{ __('Delete') }}
                        </button>
                        <button type="button" class="btn btn-outline-info btn-sm" onclick="bulkDownload()">
                            <i class="fas fa-download"></i> {{ __('Download') }}
                        </button>
                        <button type="button" class="btn btn-outline-warning btn-sm" onclick="bulkEdit()">
                            <i class="fas fa-edit"></i> {{ __('Edit') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Advanced Filters -->
    <div class="card shadow mb-4" id="filtersCard">
        <div class="card-header">
            <h6 class="m-0 font-weight-bold text-primary">
                <button class="btn btn-link p-0 text-primary" data-toggle="collapse" data-target="#filtersCollapse">
                    <i class="fas fa-filter"></i> {{ __('Advanced Filters') }}
                </button>
            </h6>
        </div>
        <div class="collapse" id="filtersCollapse">
            <div class="card-body">
                <form id="filtersForm">
                    <div class="row">
                        <!-- File Type -->
                        <div class="col-md-2">
                            <label>{{ __('File Type') }}</label>
                            <select class="form-control" name="type" id="typeFilter">
                                <option value="">{{ __('All Types') }}</option>
                                <option value="image">{{ __('Images') }}</option>
                                <option value="video">{{ __('Videos') }}</option>
                                <option value="audio">{{ __('Audio') }}</option>
                                <option value="document">{{ __('Documents') }}</option>
                            </select>
                        </div>

                        <!-- Date Range -->
                        <div class="col-md-3">
                            <label>{{ __('Upload Date') }}</label>
                            <div class="input-group">
                                <input type="date" class="form-control" name="date_from" id="dateFrom">
                                <div class="input-group-append">
                                    <span class="input-group-text">to</span>
                                </div>
                                <input type="date" class="form-control" name="date_to" id="dateTo">
                            </div>
                        </div>

                        <!-- Size Range -->
                        <div class="col-md-2">
                            <label>{{ __('File Size (MB)') }}</label>
                            <div class="input-group">
                                <input type="number" class="form-control" name="size_min" id="sizeMin" placeholder="Min">
                                <div class="input-group-append">
                                    <span class="input-group-text">-</span>
                                </div>
                                <input type="number" class="form-control" name="size_max" id="sizeMax" placeholder="Max">
                            </div>
                        </div>

                        <!-- Privacy Status -->
                        <div class="col-md-2">
                            <label>{{ __('Privacy') }}</label>
                            <select class="form-control" name="privacy" id="privacyFilter">
                                <option value="">{{ __('All') }}</option>
                                <option value="1">{{ __('Public') }}</option>
                                <option value="0">{{ __('Private') }}</option>
                            </select>
                        </div>

                        <!-- Collection -->
                        <div class="col-md-2">
                            <label>{{ __('Collection') }}</label>
                            <select class="form-control" name="collection" id="collectionFilter">
                                <option value="">{{ __('All Collections') }}</option>
                                @foreach($collections ?? [] as $collection)
                                <option value="{{ $collection->id }}">{{ $collection->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Actions -->
                        <div class="col-md-1">
                            <label>&nbsp;</label>
                            <div>
                                <button type="button" class="btn btn-primary btn-block" onclick="applyFilters()">
                                    <i class="fas fa-filter"></i>
                                </button>
                                <button type="button" class="btn btn-secondary btn-block mt-1" onclick="clearFilters()">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Media Grid/List Container -->
    <div id="mediaContainer">
        @if($media->count() > 0)
            <!-- Grid View -->
            <div id="gridView" class="row media-grid">
                @foreach($media as $file)
                <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 mb-4 media-item" data-id="{{ $file->id }}">
                    <div class="card h-100 shadow-sm media-card" data-id="{{ $file->id }}">
                        <div class="card-body p-2 position-relative">
                            <!-- Selection Checkbox -->
                            <div class="media-select position-absolute" style="top: 5px; left: 5px; z-index: 10;">
                                <input type="checkbox" class="media-checkbox" value="{{ $file->id }}">
                            </div>

                            <!-- File Preview -->
                            <div class="media-preview mb-2" style="height: 120px; overflow: hidden; border-radius: 5px;">
                                @if($file->isImage())
                                    <img src="{{ $file->getUrl() }}" class="img-fluid w-100 h-100 object-fit-cover" alt="{{ $file->alt_text_en ?? $file->original_name }}">
                                @elseif($file->isVideo())
                                    <video class="w-100 h-100 object-fit-cover">
                                        <source src="{{ $file->getUrl() }}" type="{{ $file->mime_type }}">
                                    </video>
                                @else
                                    <div class="d-flex align-items-center justify-content-center h-100 bg-light">
                                        <i class="fas fa-file-{{ $file->getIcon() }} fa-3x text-muted"></i>
                                    </div>
                                @endif
                            </div>

                            <!-- File Info -->
                            <div class="media-info">
                                <h6 class="card-title mb-1 text-truncate" title="{{ $file->original_name }}">
                                    {{ $file->original_name }}
                                </h6>
                                <small class="text-muted d-block">
                                    {{ $file->size_formatted }} • {{ $file->created_at->diffForHumans() }}
                                </small>
                                <small class="text-muted d-block">
                                    {{ $file->views_count }} {{ __('views') }}
                                </small>
                            </div>

                            <!-- File Type Badge -->
                            <div class="file-type-badge">
                                <span class="badge badge-{{ $file->getTypeColor() }}">
                                    @if($file->isImage()) 🖼️ @elseif($file->isVideo()) 🎥 @elseif($file->isAudio()) 🔊 @else 📄 @endif
                                    {{ $file->file_type }}
                                </span>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="card-footer p-2 bg-transparent">
                            <div class="btn-group btn-group-sm w-100" role="group">
                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="previewFile({{ $file->id }})" title="{{ __('Preview') }}">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button type="button" class="btn btn-outline-info btn-sm" onclick="copyUrl('{{ $file->getUrl() }}')" title="{{ __('Copy URL') }}">
                                    <i class="fas fa-copy"></i>
                                </button>
                                <button type="button" class="btn btn-outline-warning btn-sm" onclick="editFile({{ $file->id }})" title="{{ __('Edit') }}">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button type="button" class="btn btn-outline-danger btn-sm" onclick="deleteFile({{ $file->id }})" title="{{ __('Delete') }}">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>

            <!-- List View (Hidden by default) -->
            <div id="listView" class="media-list" style="display: none;">
                <div class="card shadow">
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead class="thead-light">
                                    <tr>
                                        <th width="40"><input type="checkbox" id="selectAll"></th>
                                        <th>{{ __('Preview') }}</th>
                                        <th>{{ __('Name') }}</th>
                                        <th>{{ __('Type') }}</th>
                                        <th>{{ __('Size') }}</th>
                                        <th>{{ __('Uploaded') }}</th>
                                        <th>{{ __('Views') }}</th>
                                        <th>{{ __('Actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($media as $file)
                                    <tr data-id="{{ $file->id }}">
                                        <td><input type="checkbox" class="media-checkbox" value="{{ $file->id }}"></td>
                                        <td>
                                            @if($file->isImage())
                                                <img src="{{ $file->getUrl() }}" class="img-thumbnail" style="width: 40px; height: 40px; object-fit: cover;" alt="">
                                            @else
                                                <i class="fas fa-file-{{ $file->getIcon() }} fa-2x text-muted"></i>
                                            @endif
                                        </td>
                                        <td>
                                            <strong>{{ $file->original_name }}</strong>
                                            @if($file->alt_text_en)
                                                <br><small class="text-muted">{{ $file->alt_text_en }}</small>
                                            @endif
                                        </td>
                                        <td>
                                            <span class="badge badge-{{ $file->getTypeColor() }}">
                                                {{ $file->file_type }}
                                            </span>
                                        </td>
                                        <td>{{ $file->size_formatted }}</td>
                                        <td>{{ $file->created_at->format('M d, Y') }}</td>
                                        <td>{{ number_format($file->views_count) }}</td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                <button class="btn btn-outline-primary" onclick="previewFile({{ $file->id }})">
                                                    <i class="fas fa-eye"></i>
                                                </button>
                                                <button class="btn btn-outline-info" onclick="copyUrl('{{ $file->getUrl() }}')">
                                                    <i class="fas fa-copy"></i>
                                                </button>
                                                <button class="btn btn-outline-warning" onclick="editFile({{ $file->id }})">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button class="btn btn-outline-danger" onclick="deleteFile({{ $file->id }})">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Detail View (Hidden by default) -->
            <div id="detailView" class="media-detail" style="display: none;">
                @foreach($media as $file)
                <div class="card shadow mb-3 media-item" data-id="{{ $file->id }}">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-md-1">
                                <input type="checkbox" class="media-checkbox" value="{{ $file->id }}">
                            </div>
                            <div class="col-md-2">
                                @if($file->isImage())
                                    <img src="{{ $file->getUrl() }}" class="img-fluid rounded" style="max-height: 80px;" alt="">
                                @else
                                    <div class="text-center">
                                        <i class="fas fa-file-{{ $file->getIcon() }} fa-3x text-muted"></i>
                                    </div>
                                @endif
                            </div>
                            <div class="col-md-6">
                                <h6 class="mb-1">{{ $file->original_name }}</h6>
                                <p class="mb-1 text-muted">{{ $file->alt_text_en ?? __('No description') }}</p>
                                <small class="text-muted">
                                    {{ $file->file_type }} • {{ $file->size_formatted }} • {{ $file->created_at->diffForHumans() }}
                                </small>
                            </div>
                            <div class="col-md-3">
                                <div class="btn-group btn-group-sm">
                                    <button class="btn btn-outline-primary" onclick="previewFile({{ $file->id }})">
                                        <i class="fas fa-eye"></i> {{ __('Preview') }}
                                    </button>
                                    <button class="btn btn-outline-info" onclick="copyUrl('{{ $file->getUrl() }}')">
                                        <i class="fas fa-copy"></i> {{ __('Copy') }}
                                    </button>
                                    <button class="btn btn-outline-warning" onclick="editFile({{ $file->id }})">
                                        <i class="fas fa-edit"></i> {{ __('Edit') }}
                                    </button>
                                    <button class="btn btn-outline-danger" onclick="deleteFile({{ $file->id }})">
                                        <i class="fas fa-trash"></i> {{ __('Delete') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>

            <!-- Pagination -->
            <div class="d-flex justify-content-center mt-4">
                {{ $media->appends(request()->query())->links() }}
            </div>
        @else
            <!-- Empty State -->
            <div class="card shadow">
                <div class="card-body text-center py-5">
                    <i class="fas fa-images fa-4x text-muted mb-4"></i>
                    <h4 class="text-muted">{{ __('No media files found') }}</h4>
                    <p class="text-muted mb-4">{{ __('Start by uploading some files to your media library') }}</p>
                    <a href="{{ route('admin.media.create', ['locale' => app()->getLocale()]) }}" class="btn btn-primary">
                        <i class="fas fa-upload"></i> {{ __('Upload Files') }}
                    </a>
                </div>
            </div>
        @endif
    </div>
</div>
@endsection

@push('styles')
<style>
.media-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.media-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

.media-preview {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
}

.media-select input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.file-type-badge {
    position: absolute;
    top: 5px;
    right: 5px;
}

.object-fit-cover {
    object-fit: cover;
}

.media-grid .media-item.selected .media-card {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

@media (max-width: 768px) {
    .media-grid .col-sm-6 {
        padding: 0.5rem;
    }

    .media-card .card-body {
        padding: 0.5rem !important;
    }

    .media-preview {
        height: 100px;
    }
}
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    // View Toggle Functionality
    $('#gridViewBtn').on('click', function() {
        showGridView();
    });

    $('#listViewBtn').on('click', function() {
        showListView();
    });

    $('#detailViewBtn').on('click', function() {
        showDetailView();
    });

    // Search Functionality
    $('#searchBtn').on('click', function() {
        performSearch();
    });

    $('#searchInput').on('keypress', function(e) {
        if (e.which === 13) {
            performSearch();
        }
    });

    // Select All Checkbox
    $('#selectAll').on('change', function() {
        $('.media-checkbox').prop('checked', $(this).is(':checked'));
        updateBulkActions();
    });

    // Individual Checkboxes
    $(document).on('change', '.media-checkbox', function() {
        updateBulkActions();
        updateSelectAllState();
    });

    // Media Card Click (for selection)
    $(document).on('click', '.media-card', function(e) {
        if (!$(e.target).is('input, button, a, i')) {
            const checkbox = $(this).find('.media-checkbox');
            checkbox.prop('checked', !checkbox.is(':checked'));
            updateBulkActions();
            updateSelectAllState();
        }
    });

    // Initialize view based on localStorage or default to grid
    const savedView = localStorage.getItem('mediaLibraryView') || 'grid';
    switch(savedView) {
        case 'list':
            showListView();
            break;
        case 'detail':
            showDetailView();
            break;
        default:
            showGridView();
    }
});

// View Toggle Functions
function showGridView() {
    $('#gridView').show();
    $('#listView, #detailView').hide();
    $('#gridViewBtn').addClass('active').siblings().removeClass('active');
    localStorage.setItem('mediaLibraryView', 'grid');
}

function showListView() {
    $('#listView').show();
    $('#gridView, #detailView').hide();
    $('#listViewBtn').addClass('active').siblings().removeClass('active');
    localStorage.setItem('mediaLibraryView', 'list');
}

function showDetailView() {
    $('#detailView').show();
    $('#gridView, #listView').hide();
    $('#detailViewBtn').addClass('active').siblings().removeClass('active');
    localStorage.setItem('mediaLibraryView', 'detail');
}

// Search Function
function performSearch() {
    const query = $('#searchInput').val().trim();
    if (query) {
        const url = new URL(window.location);
        url.searchParams.set('search', query);
        window.location.href = url.toString();
    }
}

// Bulk Actions
function updateBulkActions() {
    const checkedBoxes = $('.media-checkbox:checked');
    if (checkedBoxes.length > 0) {
        $('#bulkActions').show();
    } else {
        $('#bulkActions').hide();
    }
}

function updateSelectAllState() {
    const totalCheckboxes = $('.media-checkbox').length;
    const checkedCheckboxes = $('.media-checkbox:checked').length;
    $('#selectAll').prop('checked', totalCheckboxes === checkedCheckboxes && totalCheckboxes > 0);
}

// Filter Functions
function applyFilters() {
    const formData = new FormData(document.getElementById('filtersForm'));
    const params = new URLSearchParams();

    for (let [key, value] of formData.entries()) {
        if (value.trim() !== '') {
            params.append(key, value);
        }
    }

    const url = new URL(window.location);
    url.search = params.toString();
    window.location.href = url.toString();
}

function clearFilters() {
    $('#filtersForm')[0].reset();
    const url = new URL(window.location);
    url.search = '';
    window.location.href = url.toString();
}

// Action Functions
function previewFile(id) {
    window.open(`{{ url('/admin/media') }}/${id}?locale={{ app()->getLocale() }}`, '_blank');
}

function editFile(id) {
    window.location.href = `{{ url('/admin/media') }}/${id}/edit?locale={{ app()->getLocale() }}`;
}

function deleteFile(id) {
    if (confirm('{{ __("Are you sure you want to delete this file?") }}')) {
        // Implement delete functionality
        console.log('Delete file:', id);
    }
}

function copyUrl(url) {
    navigator.clipboard.writeText(url).then(function() {
        // Show success message
        if (typeof toastr !== 'undefined') {
            toastr.success('{{ __("URL copied to clipboard") }}');
        } else {
            alert('{{ __("URL copied to clipboard") }}');
        }
    });
}

// Bulk Operations
function bulkDelete() {
    const selectedIds = $('.media-checkbox:checked').map(function() {
        return $(this).val();
    }).get();

    if (selectedIds.length === 0) return;

    if (confirm(`{{ __("Are you sure you want to delete") }} ${selectedIds.length} {{ __("files?") }}`)) {
        // Implement bulk delete
        console.log('Bulk delete:', selectedIds);
    }
}

function bulkDownload() {
    const selectedIds = $('.media-checkbox:checked').map(function() {
        return $(this).val();
    }).get();

    if (selectedIds.length === 0) return;

    // Implement bulk download
    console.log('Bulk download:', selectedIds);
}

function bulkEdit() {
    const selectedIds = $('.media-checkbox:checked').map(function() {
        return $(this).val();
    }).get();

    if (selectedIds.length === 0) return;

    // Implement bulk edit
    console.log('Bulk edit:', selectedIds);
}
</script>
@endpush