{{--
    Alert Component - AdminLTE Theme
    Based on AdminLTE v4 Alert & Callout styling patterns
    
    Usage:
    <x-proxmox::ui.alert>Default alert</x-proxmox::ui.alert>
    <x-proxmox::ui.alert variant="success" title="Success">Operation completed</x-proxmox::ui.alert>
    <x-proxmox::ui.alert variant="warning" dismissible>Warning message</x-proxmox::ui.alert>
    <x-proxmox::ui.alert variant="info" callout>Callout style</x-proxmox::ui.alert>
--}}

@props([
    'variant' => 'default',
    'title' => null,
    'icon' => null,
    'dismissible' => false,
    'collapsible' => false,
    'collapsed' => false,
    'callout' => false, // Use callout style instead of alert
])

@php
    $variantConfig = [
        'default' => [
            'alertClass' => 'lte-alert',
            'calloutClass' => 'lte-callout',
            'icon' => $icon ?? 'ri-information-line',
        ],
        'info' => [
            'alertClass' => 'lte-alert lte-alert-info',
            'calloutClass' => 'lte-callout lte-callout-info',
            'icon' => $icon ?? 'ri-information-line',
        ],
        'success' => [
            'alertClass' => 'lte-alert lte-alert-success',
            'calloutClass' => 'lte-callout lte-callout-success',
            'icon' => $icon ?? 'ri-checkbox-circle-line',
        ],
        'warning' => [
            'alertClass' => 'lte-alert lte-alert-warning',
            'calloutClass' => 'lte-callout lte-callout-warning',
            'icon' => $icon ?? 'ri-error-warning-line',
        ],
        'danger' => [
            'alertClass' => 'lte-alert lte-alert-danger',
            'calloutClass' => 'lte-callout lte-callout-danger',
            'icon' => $icon ?? 'ri-error-warning-fill',
        ],
        'primary' => [
            'alertClass' => 'lte-alert lte-alert-primary',
            'calloutClass' => 'lte-callout lte-callout-primary',
            'icon' => $icon ?? 'ri-information-line',
        ],
    ];
    
    $config = $variantConfig[$variant] ?? $variantConfig['default'];
    $componentClass = $callout ? $config['calloutClass'] : $config['alertClass'];
@endphp

<div 
    role="alert"
    {{ $attributes->class([
        $componentClass,
        'lte-fade-in transition-all duration-300 hover:shadow-sm',
        $dismissible ? 'lte-alert-dismissible' : '',
    ]) }}
    @if($dismissible || $collapsible)
        x-data="{ 
            show: true,
            @if($collapsible) collapsed: {{ $collapsed ? 'true' : 'false' }} @endif
        }"
        x-show="show"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 -translate-y-2 scale-95"
        x-transition:enter-end="opacity-100 translate-y-0 scale-100"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100 translate-y-0 scale-100"
        x-transition:leave-end="opacity-0 -translate-y-2 scale-95"
    @endif
>
    <div class="flex gap-3 items-start">
        <x-dynamic-component :component="$config['icon']" class="size-5 mt-0.5 shrink-0 transition-transform duration-200 hover:scale-110" />
        <div class="flex-1 min-w-0">
            @if($title)
                <h5 style="font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem;">{{ $title }}</h5>
            @endif
            <div 
                @if($collapsible)
                    x-show="!collapsed"
                    x-transition:enter="transition ease-out duration-300"
                    x-transition:enter-start="opacity-0 -translate-y-1"
                    x-transition:enter-end="opacity-100 translate-y-0"
                    x-transition:leave="transition ease-in duration-200"
                    x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0"
                @endif
            >
                {{ $slot }}
            </div>
        </div>
    </div>
    @if($dismissible || $collapsible)
        <div class="flex items-center gap-1 shrink-0" style="position: absolute; top: 0.5rem; right: 0.5rem;">
            @if($collapsible)
                <button 
                    type="button" 
                    @click="collapsed = !collapsed"
                    class="lte-btn lte-btn-sm lte-btn-outline-secondary transition-all duration-200 hover:scale-105"
                    style="padding: 0.25rem;"
                >
                    <x-ri-arrow-down-s-line 
                        class="size-4 transition-transform duration-300 ease-out"
                        x-bind:class="collapsed ? 'rotate-180' : ''" 
                    />
                </button>
            @endif
            @if($dismissible)
                <button 
                    type="button" 
                    @click="show = false"
                    class="lte-btn-close transition-opacity duration-200 hover:opacity-70"
                    aria-label="Close"
                ></button>
            @endif
        </div>
    @endif
</div>