@php
    $isEdit = filled($record);
    $namePrefix = $modalId.'_';

    $mediaAssetUrl = static function ($asset) {
        if (! $asset?->file_path) {
            return null;
        }

        $path = $asset->file_path;

        if (str($path)->startsWith(['http://', 'https://', '/'])) {
            return $path;
        }

        if (str($path)->startsWith('storage/')) {
            return asset($path);
        }

        if (str($path)->startsWith('images/')) {
            return asset($path);
        }

        if (($asset->disk ?: 'public') === 'public') {
            return asset('storage/'.$path);
        }

        return \Illuminate\Support\Facades\Storage::disk($asset->disk)->url($path);
    };

    $currentUrl = $mediaAssetUrl($record);
@endphp

<div class="modal fade" id="{{ $modalId }}" tabindex="-1" aria-labelledby="{{ $modalId }}Label" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content glass-panel admin-text border-0 rounded-4">
            <form class="media-asset-form" method="POST" action="{{ $action }}" enctype="multipart/form-data">
                @csrf
                @if ($method !== 'POST')
                    @method($method)
                @endif

                <div class="modal-header" style="border-color: var(--admin-border);">
                    <div>
                        <h2 class="modal-title fs-5 fw-bold" id="{{ $modalId }}Label">{{ $isEdit ? 'Edit Media Asset' : 'Upload Media Asset' }}</h2>
                        <p class="small admin-muted mb-0">{{ $isEdit ? 'Replace the file only if needed.' : 'Choose a file. Details are filled automatically.' }}</p>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <div class="media-upload-panel">
                        <label class="media-upload-drop" for="{{ $namePrefix }}media_file">
                            <span class="media-upload-icon">
                                <i data-lucide="upload-cloud" width="28" height="28"></i>
                            </span>
                            <strong data-media-file-label>{{ $isEdit ? 'Replace file' : 'Upload files' }}</strong>
                            <span>{{ $isEdit ? 'Leave empty to keep the current file.' : 'Select one or more files. Each file can be up to 50 MB.' }}</span>
                        </label>
                        <input class="visually-hidden @error($isEdit ? 'media_file' : 'media_files') is-invalid @enderror" id="{{ $namePrefix }}media_file" type="file" name="{{ $isEdit ? 'media_file' : 'media_files[]' }}" @unless($isEdit) multiple @endunless data-media-file-input>
                        @error('media_file')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                        @error('media_files')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                        @error('media_files.*')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror

                        @if ($isEdit)
                            <div class="media-current-file">
                                @if ($record?->file_type === 'image' && $currentUrl)
                                    <img src="{{ $currentUrl }}" alt="{{ $record->alt_text_en ?: $record->title_en ?: 'Current media asset' }}">
                                @else
                                    <span><i data-lucide="file" width="22" height="22"></i></span>
                                @endif
                                <div>
                                    <strong>{{ $record?->title_en ?: basename((string) $record?->file_path) }}</strong>
                                    <p>{{ $record?->file_path }}</p>
                                </div>
                            </div>
                        @endif
                    </div>

                    <div class="row g-3 mt-1">
                        <div class="col-12 col-md-6">
                            <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}title_en">Title</label>
                            <input class="form-control admin-input rounded-4 @error('title_en') is-invalid @enderror" id="{{ $namePrefix }}title_en" type="text" name="title_en" value="{{ old('title_en', $record?->title_en) }}" placeholder="Auto-filled from file name if empty">
                            @error('title_en')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}alt_text_en">Alt Text</label>
                            <input class="form-control admin-input rounded-4 @error('alt_text_en') is-invalid @enderror" id="{{ $namePrefix }}alt_text_en" type="text" name="alt_text_en" value="{{ old('alt_text_en', $record?->alt_text_en) }}" placeholder="Short image description">
                            @error('alt_text_en')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}title_as">Title (Assamese)</label>
                            <input class="form-control admin-input rounded-4 @error('title_as') is-invalid @enderror" id="{{ $namePrefix }}title_as" type="text" name="title_as" value="{{ old('title_as', $record?->title_as) }}">
                            @error('title_as')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}alt_text_as">Alt Text (Assamese)</label>
                            <input class="form-control admin-input rounded-4 @error('alt_text_as') is-invalid @enderror" id="{{ $namePrefix }}alt_text_as" type="text" name="alt_text_as" value="{{ old('alt_text_as', $record?->alt_text_as) }}">
                            @error('alt_text_as')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label small fw-semibold admin-muted" for="{{ $namePrefix }}status">Status</label>
                            <select class="form-select admin-input rounded-4 @error('status') is-invalid @enderror" id="{{ $namePrefix }}status" name="status">
                                @foreach ($selectOptions['categoryStatuses'] ?? ['active' => 'Active', 'inactive' => 'Inactive'] as $optionValue => $optionLabel)
                                    <option value="{{ $optionValue }}" @selected((string) old('status', $record?->status ?? 'active') === (string) $optionValue)>{{ $optionLabel }}</option>
                                @endforeach
                            </select>
                            @error('status')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="modal-footer" style="border-color: var(--admin-border);">
                    <button type="button" class="btn glass-card admin-text rounded-4 px-3" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success rounded-4 px-4 fw-semibold">{{ $isEdit ? 'Update' : 'Upload' }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

@once
    <style>
        .media-asset-form {
            display: flex;
            flex-direction: column;
            min-height: 0;
            max-height: calc(100vh - 3.5rem);
        }

        .media-asset-form .modal-body {
            min-height: 0;
            overflow-y: auto;
        }

        .media-upload-panel {
            border: 1px solid var(--admin-border);
            border-radius: 1rem;
            padding: 1rem;
            background: rgba(255, 255, 255, .03);
        }

        .media-upload-drop {
            min-height: 11rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: .45rem;
            border: 1px dashed rgba(34, 197, 94, .48);
            border-radius: .9rem;
            background: rgba(34, 197, 94, .08);
            color: var(--admin-text);
            cursor: pointer;
            text-align: center;
            padding: 1rem;
            transition: border-color .18s ease, background-color .18s ease;
        }

        .media-upload-drop:hover {
            border-color: rgba(34, 197, 94, .82);
            background: rgba(34, 197, 94, .13);
        }

        .media-upload-drop span:last-child {
            color: var(--admin-muted);
            font-size: .84rem;
        }

        .media-upload-icon {
            width: 3.25rem;
            height: 3.25rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 1rem;
            color: var(--admin-green);
            background: rgba(34, 197, 94, .14);
        }

        .media-current-file {
            display: flex;
            align-items: center;
            gap: .8rem;
            min-width: 0;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--admin-border);
        }

        .media-current-file img,
        .media-current-file > span {
            width: 4.5rem;
            height: 3.4rem;
            flex: 0 0 4.5rem;
            border-radius: .75rem;
            border: 1px solid var(--admin-border);
            background: var(--admin-input);
        }

        .media-current-file img {
            object-fit: cover;
        }

        .media-current-file > span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--admin-muted);
        }

        .media-current-file strong,
        .media-current-file p {
            display: block;
            max-width: 34rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .media-current-file p {
            margin: .2rem 0 0;
            color: var(--admin-muted);
            font-size: .8rem;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('[data-media-file-input]').forEach((input) => {
                const form = input.closest('form');
                const label = form.querySelector('[data-media-file-label]');

                input.addEventListener('change', () => {
                    if (! input.files || input.files.length === 0) {
                        return;
                    }

                    if (input.files.length === 1) {
                        label.textContent = input.files[0].name;
                        return;
                    }

                    label.textContent = `${input.files.length} files selected`;
                });
            });
        });
    </script>
@endonce