@props([
    'name',
    'maxWidth' => 'md', // sm, md, lg, xl, 2xl
    'title' => null,
    'subtitle' => null,
    'icon' => null,
    'gradient' => true,
])

@php
    $maxWidths = [
        'sm' => 'max-w-sm',
        'md' => 'max-w-md',
        'lg' => 'max-w-lg',
        'xl' => 'max-w-xl',
        '2xl' => 'max-w-2xl',
    ];

    $widthClass = $maxWidths[$maxWidth] ?? $maxWidths['md'];
@endphp

<div
    x-show="{{ $name }}"
    x-cloak
    class="fixed inset-0 z-50 overflow-y-auto"
    x-transition:enter="ease-out duration-200"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="ease-in duration-150"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
>
    {{-- Backdrop with blur --}}
    <div class="fixed inset-0 bg-black/70 backdrop-blur-md" @click="{{ $name }} = false"></div>

    {{-- Modal Container --}}
    <div class="relative min-h-screen flex items-center justify-center p-4">
        <div
            class="relative glass-modal rounded-2xl {{ $widthClass }} w-full"
            x-transition:enter="ease-out duration-200"
            x-transition:enter-start="opacity-0 scale-95 translate-y-4"
            x-transition:enter-end="opacity-100 scale-100 translate-y-0"
            @click.outside="{{ $name }} = false"
        >
            {{-- Glass top highlight --}}
            <div class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent rounded-t-2xl"></div>

            {{-- Header --}}
            @if($title || $icon)
            <div class="relative px-6 py-6 rounded-t-2xl overflow-hidden">
                @if($gradient)
                <div class="absolute inset-0 bg-gradient-to-br from-db-accent-primary/20 via-db-accent-secondary/10 to-transparent"></div>
                <div class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-emerald-400/30 to-transparent"></div>
                @endif

                <div class="relative flex items-center gap-4">
                    @if($icon)
                    <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-db-accent-primary to-db-accent-secondary flex items-center justify-center shadow-lg shadow-db-accent-primary/25 glow-emerald">
                        {!! $icon !!}
                    </div>
                    @endif

                    <div class="flex-1 min-w-0">
                        @if($title)
                        <h2 class="text-xl sm:text-2xl font-bold text-db-text-primary">{{ $title }}</h2>
                        @endif
                        @if($subtitle)
                        <p class="text-sm text-db-text-secondary mt-1">{{ $subtitle }}</p>
                        @endif
                    </div>

                    {{-- Close Button --}}
                    <button
                        @click="{{ $name }} = false"
                        class="absolute top-4 right-4 p-2 rounded-xl glass-button text-db-text-muted hover:text-db-text-primary transition-all"
                    >
                        <svg class="w-5 h-5" 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>
            </div>
            @else
            {{-- Close Button when no header --}}
            <button
                @click="{{ $name }} = false"
                class="absolute top-4 right-4 p-2 rounded-xl glass-button text-db-text-muted hover:text-db-text-primary transition-all z-10"
            >
                <svg class="w-5 h-5" 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>
            @endif

            {{-- Body --}}
            <div class="px-6 py-6">
                {{ $slot }}
            </div>

            {{-- Footer --}}
            @if(isset($footer))
            <div class="px-6 py-5 border-t border-glass bg-white/[0.02] rounded-b-2xl">
                {{ $footer }}
            </div>
            @endif
        </div>
    </div>
</div>