@props([
    'title' => null,
    'url' => null,
    'mimeType' => null,
    'fileSize' => null,
])

<flux:modal {{ $attributes }} class="max-w-[90vw]! min-w-[90vw] overflow-hidden!">
    <div class="flex flex-col h-[80vh] -m-6">
        <div class="flex items-center justify-between px-6 py-4 border-b border-zinc-200 dark:border-zinc-700 shrink-0">
            <div class="min-w-0">
                <flux:heading size="lg" class="truncate">{{ $title }}</flux:heading>
                @if($mimeType)
                    <flux:text variant="subtle" class="mt-1 text-xs font-mono">
                        {{ $mimeType }}
                        @if($fileSize)
                            &middot; {{ number_format($fileSize / 1_048_576, 1) }} MB
                        @endif
                    </flux:text>
                @endif
            </div>
            @if($url)
                <div class="pt-8">
                    <flux:button variant="subtle" size="sm" icon="arrow-down-tray" :href="$url" download class="ml-4 shrink-0">
                        Download
                    </flux:button>
                </div>
            @endif
        </div>

        <div class="flex-1 overflow-hidden p-4">
            @if($url && $mimeType)
                @if(str_starts_with($mimeType, 'image/'))
                    <div class="flex items-center justify-center h-full">
                        <img src="{{ $url }}" alt="{{ $title }}" class="max-w-full max-h-[75vh] object-contain rounded" />
                    </div>
                @elseif($mimeType === 'application/pdf')
                    <iframe src="{{ $url }}" class="w-full h-full rounded border border-zinc-200 dark:border-zinc-700"></iframe>
                @elseif(str_starts_with($mimeType, 'video/'))
                    <div class="flex items-center justify-center h-full">
                        <video controls class="max-w-full max-h-[75vh] rounded">
                            <source src="{{ $url }}" type="{{ $mimeType }}">
                            Your browser does not support this video format.
                        </video>
                    </div>
                @elseif(str_starts_with($mimeType, 'audio/'))
                    <div class="flex items-center justify-center h-full">
                        <audio controls class="w-full max-w-lg">
                            <source src="{{ $url }}" type="{{ $mimeType }}">
                            Your browser does not support this audio format.
                        </audio>
                    </div>
                @elseif(str_starts_with($mimeType, 'text/') || in_array($mimeType, ['application/json', 'application/xml']))
                    <iframe src="{{ $url }}" class="w-full h-full rounded border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900"></iframe>
                @else
                    <div class="flex flex-col items-center justify-center h-full gap-4 py-12">
                        <flux:icon.document class="size-16 text-zinc-300 dark:text-zinc-600" />
                        <flux:text variant="subtle">Preview is not available for this file type.</flux:text>
                        <flux:button variant="primary" icon="arrow-down-tray" :href="$url" download>
                            Download File
                        </flux:button>
                    </div>
                @endif
            @else
                <div class="flex flex-col items-center justify-center h-full gap-4 py-12">
                    <flux:icon.document class="size-16 text-zinc-300 dark:text-zinc-600" />
                    <flux:text variant="subtle">No file available for preview.</flux:text>
                </div>
            @endif
        </div>
    </div>
</flux:modal>