@extends('layouts.admin')

@section('title', 'Media Library')
@section('page-title', 'Media Library')

@section('content')
    <style>
        .media-dropzone {
            border: 2px dashed #d8dee6;
            border-radius: 1rem;
            background: #fbfcfe;
            transition: border-color .2s ease, background .2s ease;
        }

        .media-dropzone.is-dragover {
            border-color: var(--bs-primary);
            background: #fff5f5;
        }

        .media-card {
            cursor: grab;
        }

        .media-card.is-dragging {
            opacity: .55;
        }

        .media-thumb {
            height: 180px;
            width: 100%;
            object-fit: cover;
        }
    </style>

    <div class="row g-4">
        <div class="col-lg-4">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <h2 class="h5 mb-3">Select Media Owner</h2>
                    <form method="GET" action="{{ route('admin.media.index') }}">
                        <label for="model_type" class="form-label">Module</label>
                        <select class="form-select mb-3" name="model_type" id="model_type" onchange="this.form.submit()">
                            @foreach($modelTypes as $typeKey => $type)
                                <option value="{{ $typeKey }}" @selected($selectedType === $typeKey)>{{ $type['label'] }}</option>
                            @endforeach
                        </select>

                        <label for="model_id" class="form-label">Record</label>
                        <select class="form-select" name="model_id" id="model_id" onchange="this.form.submit()">
                            @foreach($records as $record)
                                <option value="{{ $record->id }}" @selected(optional($selectedModel)->id === $record->id)>
                                    {{ $record->property_code ? $record->property_code . ' - ' : '' }}{{ $record->title ?? $record->name }}
                                </option>
                            @endforeach
                        </select>
                    </form>
                </div>
            </div>

            @if($selectedModel)
                <div class="card shadow-sm border-0 mt-4">
                    <div class="card-body">
                        <h2 class="h5 mb-2">Upload Images</h2>
                        <p class="text-muted small mb-3">
                            Supports JPG, PNG and WebP. Uploaded images generate compressed, WebP and watermarked conversions.
                        </p>

                        <form id="media-upload-form" method="POST" action="{{ route('admin.media.upload') }}" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="model_type" value="{{ $selectedType }}">
                            <input type="hidden" name="model_id" value="{{ $selectedModel->id }}">

                            <div class="mb-3">
                                <label for="alt" class="form-label">Default Alt Text</label>
                                <input type="text" class="form-control" name="alt" id="alt" value="{{ old('alt', $selectedModel->title ?? $selectedModel->name) }}">
                            </div>

                            <div id="media-dropzone" class="media-dropzone p-4 text-center">
                                <p class="fw-semibold mb-1">Drag & drop images here</p>
                                <p class="text-muted small mb-3">or choose multiple files from your computer</p>
                                <input type="file" class="form-control" id="media-input" name="media[]" multiple accept="image/jpeg,image/png,image/webp">
                            </div>

                            <div id="upload-preview" class="small text-muted mt-3"></div>

                            <button class="btn btn-primary w-100 mt-3" type="submit">Upload Media</button>
                        </form>
                    </div>
                </div>
            @endif
        </div>

        <div class="col-lg-8">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <div class="d-flex flex-wrap justify-content-between gap-2 align-items-center mb-3">
                        <div>
                            <h2 class="h5 mb-1">Gallery Sorting</h2>
                            <p class="text-muted small mb-0">Drag gallery cards to reorder the property images.</p>
                        </div>
                        <button class="btn btn-outline-primary btn-sm" id="save-media-order" type="button" @disabled($gallery->isEmpty())>
                            Save Order
                        </button>
                    </div>

                    @if(!$selectedModel)
                        <div class="alert alert-info mb-0">Create a record before uploading media.</div>
                    @elseif($gallery->isEmpty())
                        <div class="alert alert-info mb-0">No media uploaded for this property yet.</div>
                    @else
                        <div class="row g-3" id="sortable-gallery">
                            @foreach($gallery as $media)
                                <div class="col-md-6 col-xl-4 media-item" draggable="true" data-media-id="{{ $media->id }}">
                                    <div class="card h-100 media-card">
                                        <a href="{{ $media->getUrl() }}" target="_blank">
                                            <img
                                                src="{{ $media->hasGeneratedConversion('thumb') ? $media->getUrl('thumb') : $media->getUrl() }}"
                                                class="card-img-top media-thumb"
                                                alt="{{ $media->getCustomProperty('alt', $media->name) }}"
                                            >
                                        </a>
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between gap-2">
                                                <strong class="small text-truncate" title="{{ $media->name }}">{{ $media->name }}</strong>
                                                <span class="badge text-bg-light">{{ $media->human_readable_size }}</span>
                                            </div>

                                            <div class="small text-muted mt-2">
                                                WebP: {{ $media->hasGeneratedConversion('webp') ? 'Ready' : 'Pending' }}<br>
                                                Watermark: {{ $media->hasGeneratedConversion('watermarked') ? 'Ready' : 'Pending' }}
                                            </div>

                                            <form method="POST" action="{{ route('admin.media.update', $media) }}" class="mt-3">
                                                @csrf
                                                @method('PATCH')
                                                <div class="mb-2">
                                                    <input type="text" class="form-control form-control-sm" name="name" value="{{ $media->name }}" placeholder="Name">
                                                </div>
                                                <div class="mb-2">
                                                    <input type="text" class="form-control form-control-sm" name="alt" value="{{ $media->getCustomProperty('alt') }}" placeholder="Alt text">
                                                </div>
                                                <div class="mb-2">
                                                    <input type="text" class="form-control form-control-sm" name="caption" value="{{ $media->getCustomProperty('caption') }}" placeholder="Caption">
                                                </div>
                                                <button class="btn btn-sm btn-outline-primary w-100">Update Metadata</button>
                                            </form>

                                            <form method="POST" action="{{ route('admin.media.destroy', $media) }}" class="mt-2" onsubmit="return confirm('Delete this media item?')">
                                                @csrf
                                                @method('DELETE')
                                                <button class="btn btn-sm btn-outline-danger w-100">Delete</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const csrf = document.querySelector('meta[name="csrf-token"]')?.content;
            const dropzone = document.getElementById('media-dropzone');
            const input = document.getElementById('media-input');
            const preview = document.getElementById('upload-preview');
            const sortable = document.getElementById('sortable-gallery');
            const saveButton = document.getElementById('save-media-order');

            const updatePreview = () => {
                if (!preview || !input) return;
                const files = Array.from(input.files || []);
                preview.textContent = files.length
                    ? `${files.length} image${files.length === 1 ? '' : 's'} selected`
                    : '';
            };

            ['dragenter', 'dragover'].forEach((eventName) => {
                dropzone?.addEventListener(eventName, (event) => {
                    event.preventDefault();
                    dropzone.classList.add('is-dragover');
                });
            });

            ['dragleave', 'drop'].forEach((eventName) => {
                dropzone?.addEventListener(eventName, (event) => {
                    event.preventDefault();
                    dropzone.classList.remove('is-dragover');
                });
            });

            dropzone?.addEventListener('drop', (event) => {
                if (!input || !event.dataTransfer?.files?.length) return;
                input.files = event.dataTransfer.files;
                updatePreview();
            });

            input?.addEventListener('change', updatePreview);

            let draggedItem = null;

            sortable?.addEventListener('dragstart', (event) => {
                const item = event.target.closest('.media-item');
                if (!item) return;
                draggedItem = item;
                item.classList.add('is-dragging');
            });

            sortable?.addEventListener('dragend', () => {
                draggedItem?.classList.remove('is-dragging');
                draggedItem = null;
            });

            sortable?.addEventListener('dragover', (event) => {
                event.preventDefault();
                const afterElement = getDragAfterElement(sortable, event.clientY);
                if (!draggedItem) return;

                if (afterElement == null) {
                    sortable.appendChild(draggedItem);
                } else {
                    sortable.insertBefore(draggedItem, afterElement);
                }
            });

            saveButton?.addEventListener('click', async () => {
                const mediaIds = Array.from(document.querySelectorAll('[data-media-id]'))
                    .map((item) => item.dataset.mediaId);

                const response = await fetch('{{ route('admin.media.sort') }}', {
                    method: 'PATCH',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': csrf,
                    },
                    body: JSON.stringify({ media_ids: mediaIds }),
                });

                if (response.ok) {
                    saveButton.textContent = 'Order Saved';
                    setTimeout(() => saveButton.textContent = 'Save Order', 1600);
                } else {
                    alert('Unable to save media order.');
                }
            });

            function getDragAfterElement(container, y) {
                const draggableElements = [...container.querySelectorAll('.media-item:not(.is-dragging)')];

                return draggableElements.reduce((closest, child) => {
                    const box = child.getBoundingClientRect();
                    const offset = y - box.top - box.height / 2;

                    if (offset < 0 && offset > closest.offset) {
                        return { offset, element: child };
                    }

                    return closest;
                }, { offset: Number.NEGATIVE_INFINITY }).element;
            }
        });
    </script>
@endpush