@props(['name', 'id', 'value' => null, 'records' => [], 'type' => 'image'])

@php
    $selectedId = (string) old($name, $value);
    $items = collect($records)
        ->filter(fn ($asset) => $type === 'all' || $asset->file_type === $type)
        ->map(function ($asset) {
            $path = $asset->file_path;
            $url = match (true) {
                str($path)->startsWith(['http://', 'https://', '/']) => $path,
                str($path)->startsWith(['storage/', 'images/']) => asset($path),
                ($asset->disk ?: 'public') === 'public' => asset('storage/'.$path),
                default => \Illuminate\Support\Facades\Storage::disk($asset->disk)->url($path),
            };

            return [
                'id' => (string) $asset->id,
                'title' => $asset->title_en ?: basename($path),
                'search' => $asset->title_en.' '.$asset->title_as.' '.$path,
                'path' => $path,
                'type' => $asset->file_type,
                'url' => $url,
            ];
        })->values();
@endphp

<div class="admin-media-picker @error($name) is-invalid @enderror" data-admin-media-picker
    data-type="{{ $type }}" data-upload-url="{{ route('admin.media-assets.store') }}">
    <input type="hidden" name="{{ $name }}" value="{{ $selectedId }}" data-media-value>
    <script type="application/json" data-media-records>@json($items)</script>
    <div class="admin-media-top">
        <div class="admin-media-selection">
            <span class="admin-media-preview" data-media-preview aria-hidden="true"></span>
            <div class="admin-media-description">
                <strong data-media-title>No {{ $type === 'image' ? 'image' : 'file' }} selected</strong>
                <p class="small admin-muted mb-0" data-media-path>Choose from the media library below.</p>
            </div>
        </div>
        <div class="d-flex gap-2 flex-shrink-0">
            <button type="button" class="btn btn-sm btn-success rounded-3" data-media-upload>Upload</button>
            <input type="file" class="d-none" accept="{{ $type === 'image' ? 'image/*' : ($type === 'pdf' ? 'application/pdf,.pdf' : '*/*') }}" data-media-file>
            <button type="button" class="btn btn-sm glass-card admin-text rounded-3" data-media-browse>Browse</button>
            <button type="button" class="btn btn-sm glass-card admin-text rounded-3" data-media-clear>Clear</button>
        </div>
    </div>
    <label class="visually-hidden" for="{{ $id }}">Search media by title or path</label>
    <input type="search" class="form-control admin-input rounded-4" id="{{ $id }}" placeholder="Search by title or path" data-media-search>
    <p class="small admin-muted mt-2 mb-0" role="status" aria-live="polite" data-media-status hidden></p>
    <div class="admin-media-grid" data-media-grid aria-label="Media library"></div>
</div>

@once
    @include('admin.partials.media-picker-assets')
@endonce