{{-- Attachments Gallery — View Mode with Alpine.js Modal --}}
@php
    $attachments = $getState();
@endphp

<div
    x-data="{ open: false, previewUrl: '', previewType: '', previewName: '' }"
    @keydown.escape.window="open = false"
    style="width: 100%;"
>
    {{-- ===== Modal ===== --}}
    <div
        x-show="open"
        x-cloak
        style="
            position: fixed; inset: 0; z-index: 9999;
            display: flex; align-items: center; justify-content: center;
            padding: 16px;
        "
    >
        {{-- Backdrop --}}
        <div
            @click="open = false"
            style="
                position: absolute; inset: 0;
                background: rgba(0,0,0,0.72);
                backdrop-filter: blur(4px);
            "
        ></div>

        {{-- Modal Box --}}
        <div
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 transform scale-95"
            x-transition:enter-end="opacity-100 transform scale-100"
            style="
                position: relative; z-index: 10;
                background: #fff; border-radius: 16px;
                box-shadow: 0 25px 50px rgba(0,0,0,0.3);
                width: 100%; max-width: 900px; max-height: 92vh;
                display: flex; flex-direction: column; overflow: hidden;
            "
        >
            {{-- Header --}}
            <div style="
                display: flex; align-items: center; justify-content: space-between;
                padding: 14px 20px;
                border-bottom: 1px solid #e5e7eb;
                flex-shrink: 0;
            ">
                <span style="font-size: 13px; font-weight: 600; color: #374151;" x-text="previewName"></span>
                <button
                    @click="open = false"
                    style="
                        background: #f3f4f6; border: none; border-radius: 8px;
                        padding: 6px; cursor: pointer; color: #6b7280;
                        display: flex; align-items: center; justify-content: center;
                    "
                >
                    <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>

            {{-- Content --}}
            <div style="
                flex: 1; overflow: auto;
                background: #f9fafb;
                display: flex; align-items: center; justify-content: center;
                padding: 8px;
            ">
                <template x-if="previewType === 'image'">
                    <img :src="previewUrl" :alt="previewName"
                         style="max-width: 100%; max-height: 76vh; object-fit: contain; border-radius: 8px;">
                </template>
                <template x-if="previewType === 'pdf'">
                    <iframe :src="previewUrl"
                            style="width: 100%; height: 76vh; border: none; border-radius: 8px;"></iframe>
                </template>
            </div>

            {{-- Footer --}}
            <div style="
                display: flex; justify-content: flex-end; gap: 8px;
                padding: 12px 20px;
                border-top: 1px solid #e5e7eb;
                flex-shrink: 0;
            ">
                <a
                    :href="previewUrl" :download="previewName" target="_blank"
                    style="
                        display: inline-flex; align-items: center; gap: 6px;
                        background: #f3f4f6; color: #374151;
                        font-size: 13px; font-weight: 500;
                        padding: 8px 18px; border-radius: 8px;
                        text-decoration: none; border: none;
                    "
                >
                    <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                    </svg>
                    تحميل
                </a>
                <button
                    @click="open = false"
                    style="
                        background: #4f46e5; color: #fff; border: none;
                        font-size: 13px; font-weight: 500;
                        padding: 8px 18px; border-radius: 8px; cursor: pointer;
                    "
                >إغلاق</button>
            </div>
        </div>
    </div>

    {{-- ===== Files List ===== --}}
    @if($attachments && $attachments->count())
        <div style="display: flex; flex-direction: column; gap: 10px;">
            @foreach($attachments as $attachment)
                @php
                    $isImage = str_contains($attachment->file_type ?? '', 'image');
                    $isPdf   = str_contains($attachment->file_type ?? '', 'pdf');
                    $url     = asset('storage/' . $attachment->file_path);
                    $name    = $attachment->original_name ?? basename($attachment->file_path);
                    $sizeKb  = $attachment->file_size ? number_format($attachment->file_size / 1024, 2) . ' KB' : '';
                    $type    = $isImage ? 'image' : 'pdf';
                @endphp

                <div style="
                    display: flex; align-items: center; gap: 14px;
                    padding: 14px 16px;
                    border-radius: 12px;
                    border: 1px solid #e5e7eb;
                    background: #fff;
                    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
                ">
                    {{-- Thumbnail --}}
                    <div style="
                        flex-shrink: 0; width: 48px; height: 48px;
                        border-radius: 10px; overflow: hidden;
                        border: 1px solid #f3f4f6;
                        display: flex; align-items: center; justify-content: center;
                    ">
                        @if($isImage)
                            <img src="{{ $url }}" alt="{{ $name }}" style="width:100%;height:100%;object-fit:cover;">
                        @elseif($isPdf)
                            <div style="width:100%;height:100%;background:#fef2f2;display:flex;align-items:center;justify-content:center;">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="#ef4444">
                                    <path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 7.5c0 .83-.67 1.5-1.5 1.5H9v2H7.5V7H10c.83 0 1.5.67 1.5 1.5v1zm5 2c0 .83-.67 1.5-1.5 1.5h-2.5V7H15c.83 0 1.5.67 1.5 1.5v3zm4-3H19v1h1.5V11H19v2h-1.5V7h3v1.5zM9 9.5h1v-1H9v1zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm10 5.5h1v-3h-1v3z"/>
                                </svg>
                            </div>
                        @else
                            <div style="width:100%;height:100%;background:#eff6ff;display:flex;align-items:center;justify-content:center;">
                                <svg width="22" height="22" fill="none" stroke="#3b82f6" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                </svg>
                            </div>
                        @endif
                    </div>

                    {{-- Name & Size --}}
                    <div style="flex: 1; min-width: 0; text-align: right;">
                        <p style="font-size:14px;font-weight:700;color:#1f2937;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
                           title="{{ $name }}">{{ $name }}</p>
                        @if($sizeKb)
                            <p style="font-size:12px;color:#9ca3af;margin:3px 0 0;">{{ $sizeKb }}</p>
                        @endif
                    </div>

                    {{-- Preview Button --}}
                    <button
                        @click="previewUrl = '{{ $url }}'; previewType = '{{ $type }}'; previewName = '{{ addslashes($name) }}'; open = true"
                        style="
                            flex-shrink: 0;
                            display: inline-flex; align-items: center; gap: 6px;
                            background: #ef4444; color: #ffffff;
                            font-size: 13px; font-weight: 600;
                            padding: 8px 18px; border-radius: 8px;
                            border: none; cursor: pointer;
                        "
                    >
                        <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                        </svg>
                        معاينة
                    </button>
                </div>
            @endforeach
        </div>

    @else
        <div style="text-align:center;padding:32px;color:#9ca3af;">
            <p style="font-size:14px;margin:0;">لا توجد ملفات مرفقة لهذا النشاط</p>
        </div>
    @endif
</div>