{{--
    Info Notice / Alert Banner Component - AdminLTE style
    Collapsible notice banners for important information
    
    Usage:
    <x-proxmox::ui.notice-banner 
        title="Cloud-init Configuration Notice"
        variant="info"
        :collapsible="true"
        storage-key="overview-notice-collapsed"
    >
        <p>Your notice content here...</p>
    </x-proxmox::ui.notice-banner>
--}}

@props([
    'title' => null,
    'variant' => 'info', // info, warning, danger, success
    'collapsible' => false,
    'storageKey' => null,
    'icon' => null,
    'showCondition' => null, // Alpine.js expression for conditional display
])

@php
    // AdminLTE Bootstrap 5 color scheme
    $variants = [
        'info' => [
            'bg' => 'rgba(13, 202, 240, 0.1)',
            'border' => '#0dcaf0',
            'icon' => $icon ?? 'ri-information-line',
            'iconColor' => '#0dcaf0',
        ],
        'warning' => [
            'bg' => 'rgba(255, 193, 7, 0.1)',
            'border' => '#ffc107',
            'icon' => $icon ?? 'ri-alert-line',
            'iconColor' => '#ffc107',
        ],
        'danger' => [
            'bg' => 'rgba(220, 53, 69, 0.1)',
            'border' => '#dc3545',
            'icon' => $icon ?? 'ri-error-warning-line',
            'iconColor' => '#dc3545',
        ],
        'success' => [
            'bg' => 'rgba(25, 135, 84, 0.1)',
            'border' => '#198754',
            'icon' => $icon ?? 'ri-checkbox-circle-line',
            'iconColor' => '#198754',
        ],
    ];
    
    $config = $variants[$variant] ?? $variants['info'];
@endphp

<div 
    @if($collapsible)
        x-data="{
            isCollapsed: {{ $storageKey ? "localStorage.getItem('$storageKey') === 'true'" : 'false' }},
            toggle() {
                this.isCollapsed = !this.isCollapsed;
                @if($storageKey)
                    localStorage.setItem('{{ $storageKey }}', this.isCollapsed);
                @endif
            }
        }"
    @endif
    @if($showCondition)
        x-show="{{ $showCondition }}"
        x-transition
    @endif
    {{ $attributes }}
    style="background: {{ $config['bg'] }}; border: 1px solid {{ $config['border'] }}; border-left-width: 4px; border-radius: .375rem; padding: 1rem;"
>
    <div class="flex items-start gap-3.5">
        <x-dynamic-component :component="$config['icon']" class="mt-0.5 size-5 flex-shrink-0" style="color: {{ $config['iconColor'] }};" />
        <div class="min-w-0 flex-1">
            @if($title)
                <div style="margin-bottom: .5rem; display: flex; align-items: center; justify-content: space-between;">
                    <h3 style="font-size: .875rem; font-weight: 500; color: #212529; margin: 0;">{{ $title }}</h3>
                    @if($collapsible)
                        <button @click="toggle()" type="button" style="color: #6c757d; background: transparent; border: none; cursor: pointer; padding: 0; transition: color .2s ease;" onmouseover="this.style.color='#495057'" onmouseout="this.style.color='#6c757d'">
                            <x-ri-arrow-down-s-line x-bind:class="isCollapsed ? 'size-5 rotate-180 transition-transform' : 'size-5 transition-transform'" />
                        </button>
                    @endif
                </div>
            @endif
            
            <div @if($collapsible) x-show="!isCollapsed" x-transition @endif style="font-size: .875rem; color: #495057; line-height: 1.5;">
                {{ $slot }}
            </div>
        </div>
    </div>
</div>