@props([
    'variant' => 'info',
    'title' => null,
    'icon' => null,
    'dismissible' => false,
    'collapsible' => false,
    'collapsed' => false,
    'storageKey' => null,
    'border' => true,
    'callout' => false,
])

@php
    // LucentUI Tailwind variant classes
    $variantClasses = match($variant) {
        'success' => $callout 
            ? 'border-l-4 border-l-success bg-success/5 text-success' 
            : 'bg-success/10 border border-success/30 text-success',
        'danger', 'error' => $callout 
            ? 'border-l-4 border-l-error bg-error/5 text-error' 
            : 'bg-error/10 border border-error/30 text-error',
        'warning' => $callout 
            ? 'border-l-4 border-l-warning bg-warning/5 text-warning' 
            : 'bg-warning/10 border border-warning/30 text-warning',
        'info' => $callout 
            ? 'border-l-4 border-l-info bg-info/5 text-info' 
            : 'bg-info/10 border border-info/30 text-info',
        'primary' => $callout 
            ? 'border-l-4 border-l-primary bg-primary/5 text-primary' 
            : 'bg-primary/10 border border-primary/30 text-primary',
        'neutral' => $callout 
            ? 'border-l-4 border-l-neutral bg-background-secondary text-base/80' 
            : 'bg-background-secondary border border-neutral text-base/80',
        default => $callout 
            ? 'border-l-4 border-l-info bg-info/5 text-info' 
            : 'bg-info/10 border border-info/30 text-info',
    };
    
    // Default icons per variant
    $defaultIcon = match($variant) {
        'success' => 'ri-checkbox-circle-fill',
        'danger', 'error' => 'ri-error-warning-fill',
        'warning' => 'ri-alert-fill',
        'info' => 'ri-information-line',
        'primary' => 'ri-information-line',
        'neutral' => 'ri-information-line',
        default => 'ri-information-line',
    };
    
    $alertIcon = $icon ?? $defaultIcon;
    $baseClasses = "relative p-4 rounded-lg transition-all duration-300 $variantClasses";
@endphp

<div 
    {{ $attributes->merge(['class' => $baseClasses]) }}
    @if($dismissible || $collapsible)
        x-data="{
            show: true,
            isCollapsed: {{ $collapsed ? 'true' : 'false' }},
            init() {
                @if($storageKey)
                    @if($dismissible)
                        this.show = localStorage.getItem('{{ $storageKey }}-dismissed') !== 'true';
                    @endif
                    @if($collapsible)
                        this.isCollapsed = localStorage.getItem('{{ $storageKey }}-collapsed') === 'true';
                    @endif
                @endif
            },
            dismiss() {
                this.show = false;
                @if($storageKey)
                    localStorage.setItem('{{ $storageKey }}-dismissed', 'true');
                @endif
            },
            toggle() {
                this.isCollapsed = !this.isCollapsed;
                @if($storageKey)
                    localStorage.setItem('{{ $storageKey }}-collapsed', this.isCollapsed);
                @endif
            }
        }"
        x-show="show"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 transform -translate-y-2"
        x-transition:enter-end="opacity-100 transform translate-y-0"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
    @endif
>
    <div class="flex items-start gap-3">
        {{-- Icon --}}
        @if($alertIcon)
            <x-dynamic-component :component="$alertIcon" class="size-5 flex-shrink-0 mt-0.5" />
        @endif
        
        {{-- Content --}}
        <div class="flex-1 min-w-0">
            {{-- Header with title and controls --}}
            @if($title || $dismissible || $collapsible)
                <div class="flex items-center justify-between gap-2 mb-1">
                    @if($title)
                        <h3 class="text-sm font-semibold">{{ $title }}</h3>
                    @endif
                    
                    <div class="flex items-center gap-1">
                        @if($collapsible)
                            <button 
                                @click="toggle()" 
                                type="button" 
                                class="opacity-60 hover:opacity-100 transition-opacity p-0.5"
                            >
                                <x-ri-arrow-down-s-line 
                                    x-bind:class="isCollapsed ? 'size-4 transition-transform duration-200 rotate-180' : 'size-4 transition-transform duration-200'" 
                                />
                            </button>
                        @endif
                        
                        @if($dismissible)
                            <button 
                                @click="dismiss()" 
                                type="button" 
                                class="opacity-60 hover:opacity-100 transition-opacity p-0.5"
                            >
                                <x-ri-close-line class="size-4" />
                            </button>
                        @endif
                    </div>
                </div>
            @endif
            
            {{-- Body --}}
            @if($collapsible)
                <div x-show="!isCollapsed" x-collapse x-cloak class="text-sm opacity-90">
                    {{ $slot }}
                </div>
            @else
                <div class="text-sm opacity-90">
                    {{ $slot }}
                </div>
            @endif
        </div>
    </div>
    
    {{-- Actions slot --}}
    @if(isset($actions))
        <div class="mt-4 flex items-center gap-2">
            {{ $actions }}
        </div>
    @endif
</div>