@php
    $attachments = collect($attachments ?? []);
    $filesBaseUrl = rtrim((string) config('cdn.files_url', ''), '/');

    $toUrl = function (?string $path) use ($filesBaseUrl): string {
        $cleanPath = ltrim((string) $path, '/');
        return $filesBaseUrl !== '' ? ($filesBaseUrl . '/' . $cleanPath) : ('/' . $cleanPath);
    };

    $formatBytes = function ($bytes): string {
        $size = max((int) $bytes, 0);
        if ($size < 1024) {
            return $size . ' B';
        }

        $units = ['KB', 'MB', 'GB'];
        $value = $size / 1024;
        $unitIndex = 0;

        while ($value >= 1024 && $unitIndex < count($units) - 1) {
            $value /= 1024;
            $unitIndex++;
        }

        return number_format($value, 1) . ' ' . $units[$unitIndex];
    };
@endphp

@if ($attachments->isNotEmpty())
    <div class="mt-4 space-y-3 border-t border-white/10 pt-4">
        <h4 class="text-xs font-semibold uppercase tracking-wide text-zinc-400">Attachments</h4>
        <ul class="grid grid-cols-1 gap-3 sm:grid-cols-2">
            @foreach ($attachments as $attachment)
                @php
                    $mime = (string) ($attachment->mime_type ?? '');
                    $isImage = str_starts_with($mime, 'image/');
                    $url = $toUrl($attachment->file_path ?? '');
                    $modalId = 'attachment-modal-' . (string) data_get($attachment, 'id', uniqid());
                @endphp
                <li class="rounded-lg border border-white/10 bg-slate-900/60 p-3">
                    @if ($isImage)
                        <a href="#{{ $modalId }}" class="block overflow-hidden rounded-md border border-white/10">
                            <img
                                src="{{ $url }}"
                                alt="Attachment preview"
                                loading="lazy"
                                decoding="async"
                                class="h-36 w-full object-cover"
                            />
                        </a>
                    @endif

                    <div class="mt-2 flex items-center justify-between gap-3 text-xs">
                        <span class="truncate text-zinc-300">{{ basename((string) ($attachment->file_path ?? 'file')) }}</span>
                        <span class="text-zinc-500">{{ $formatBytes($attachment->file_size ?? 0) }}</span>
                    </div>

                    <a href="{{ $url }}" target="_blank" rel="noopener noreferrer" class="mt-2 inline-flex text-xs font-medium text-sky-300 hover:text-sky-200">
                        Download
                    </a>

                    @if ($isImage)
                        <div id="{{ $modalId }}" class="pointer-events-none fixed inset-0 z-50 hidden bg-black/80 p-4 target:pointer-events-auto target:block" role="dialog" aria-label="Attachment preview">
                            <div class="mx-auto flex h-full w-full max-w-5xl items-center justify-center">
                                <div class="w-full overflow-hidden rounded-xl border border-white/10 bg-slate-950/95">
                                    <div class="flex items-center justify-between border-b border-white/10 px-4 py-2">
                                        <span class="truncate text-xs text-zinc-300">{{ basename((string) ($attachment->file_path ?? 'file')) }}</span>
                                        <a href="#" class="text-xs text-zinc-400 hover:text-zinc-200">Close</a>
                                    </div>
                                    <div class="max-h-[80vh] overflow-auto p-3">
                                        <img src="{{ $url }}" alt="Attachment full preview" class="mx-auto h-auto max-h-[72vh] w-auto max-w-full object-contain" />
                                    </div>
                                    <div class="border-t border-white/10 px-4 py-2 text-right">
                                        <a href="{{ $url }}" target="_blank" rel="noopener noreferrer" class="text-xs font-medium text-sky-300 hover:text-sky-200">Open original</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                </li>
            @endforeach
        </ul>
    </div>
@endif