@props([
    'url',
    'filename' => null,
    'label' => 'Document',
    'linkText' => 'View',
    'linkClass' => 'text-[11.5px] font-medium text-indigo-600 hover:underline',
])

@php
    $displayName = $filename ?? basename(parse_url((string) $url, PHP_URL_PATH) ?: 'document');
    $ext = strtolower(pathinfo($displayName, PATHINFO_EXTENSION));
    if ($ext === '' && str_contains(strtolower((string) $url), '.pdf')) {
        $ext = 'pdf';
    }
    $isPdf = $ext === 'pdf';
    $isImage = in_array($ext, ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'], true);
@endphp

<span
    x-data="{ open: false }"
    x-on:keydown.escape.window="if (open) { open = false }"
    x-effect="document.body.style.overflow = open ? 'hidden' : ''"
    {{ $attributes->class('inline') }}
>
    <button type="button"
            x-on:click="open = true"
            class="{{ $linkClass }}">
        {{ $slot->isEmpty() ? $linkText : $slot }}
    </button>

    <template x-teleport="body">
        <div
            x-show="open"
            x-cloak
            x-transition.opacity
            class="fixed inset-0 z-[200] flex items-center justify-center bg-black/80 p-4"
            role="dialog"
            aria-modal="true"
            :aria-label="@js($label)"
        >
            <button type="button"
                    x-on:click="open = false"
                    class="absolute inset-0 cursor-default"
                    aria-label="Close preview"></button>

            <div class="document-preview-modal relative z-10 rounded-xl bg-white shadow-2xl"
                 x-on:click.stop>
                <div class="flex shrink-0 items-center justify-between gap-3 border-b border-slate-200 px-4 py-2.5">
                    <p class="min-w-0 truncate pr-2 text-sm font-semibold text-slate-900">{{ $label }}</p>
                    <button type="button"
                            x-on:click="open = false"
                            class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-slate-100 text-slate-600 transition hover:bg-slate-200 hover:text-slate-900"
                            aria-label="Close">
                        <i class="fa-solid fa-xmark text-lg"></i>
                    </button>
                </div>

                <div class="document-preview-modal__body">
                    @if ($isImage)
                        <img src="{{ $url }}" alt="{{ $label }}" class="document-preview-modal__img" />
                    @elseif ($isPdf)
                        <iframe src="{{ $url }}" title="{{ $label }}" class="document-preview-modal__pdf"></iframe>
                    @else
                        <div class="rounded-lg bg-white p-6 text-center shadow-md">
                            <p class="text-sm text-slate-600">Preview is not available for this file type.</p>
                            <a href="{{ $url }}" target="_blank" rel="noopener"
                               class="mt-3 inline-flex items-center gap-2 text-sm font-semibold text-indigo-600 hover:underline">
                                <i class="fa-solid fa-arrow-up-right-from-square text-xs"></i>
                                Open in new tab
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </template>
</span>