@props(['titulo' => 'Visualizar Arte', 'arte' => '', 'largura' => 'lg', 'open' => false])

<div x-data="{ open: @js($open) }" x-cloak>
    <!-- Botão que abre o modal -->
    <div @click.stop.prevent="open = true">
        {{ $slot }}
    </div>

    <!-- Modal -->
    <div x-show="open" x-transition class="fixed inset-0 z-50 bg-black bg-opacity-50 flex items-center justify-center"
        x-cloak @click="open = false">

        <div class="relative" @click.stop>
            @php
                use Illuminate\Support\Str;

                $tamanhos = [
                    'sm' => 'max-w-sm',
                    'md' => 'max-w-md',
                    'lg' => 'max-w-lg',
                    'xl' => 'max-w-xl',
                    '2xl' => 'max-w-2xl',
                    '3xl' => 'max-w-3xl',
                    '4xl' => 'max-w-4xl',
                    'full' => 'max-w-full',
                ];
                $classeLargura = $tamanhos[$largura] ?? 'max-w-lg';

                // Detecta se é arquivo de storage ou direto da public
                $isStorage = Str::startsWith($arte, ['anexos/', 'uploads/', 'storage/']);

                if (Str::startsWith($arte, ['http://', 'https://'])) {
                    // URL externa
                    $artePath = $arte;
                } elseif (Str::startsWith($arte, 'storage/')) {
                    // Já vem pronto (public/storage/arquivo.png)
                    $artePath = asset($arte);
                } elseif (Str::startsWith($arte, 'public/')) {
                    // Vem com "public/anexos/arquivo.png" → transforma em "storage/anexos/arquivo.png"
                    $artePath = asset('storage/' . Str::after($arte, 'public/'));
                } else {
                    // Caso padrão: "anexos/arquivo.png" (armazenado via Storage::put em 'public')
                    $artePath = asset('storage/' . $arte);
                }

            @endphp

            <div class="bg-white rounded-lg shadow-xl {{ $classeLargura }} mx-4">
                <div class="bg-gray-50 px-4 py-3 flex items-center justify-between border-b">
                    <h3 class="text-lg font-medium text-gray-900">{{ $titulo }}</h3>
                    <button @click="open = false" class="text-gray-400 hover:text-gray-500">
                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>

                <div class="p-6">
                    <div class="flex justify-center">
                        @if (Str::endsWith(strtolower($arte), ['.jpg', '.jpeg', '.png', '.gif', '.webp']))
                            <img src="{{ $artePath }}" alt="{{ $titulo }}"
                                class="max-w-full h-auto max-h-[70vh] object-contain rounded">
                        @elseif(Str::endsWith(strtolower($arte), '.pdf'))
                            <iframe src="{{ $artePath }}" alt="{{ $titulo }}" class="w-full"
                                style="height: 70vh;" frameborder="0"></iframe>
                        @else
                            <p class="text-gray-600">Formato não suportado para exibição.</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>