{{--
    Alert Component - TailServer Theme
    
    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>
--}}

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

@php
    $variantConfig = [
        'info' => [
            'bg' => 'bg-gradient-to-r from-info/10 via-info/5 to-transparent',
            'border' => 'border-info/20',
            'text' => 'text-info',
            'icon' => $icon ?? 'ri-information-line',
        ],
        'success' => [
            'bg' => 'bg-gradient-to-r from-success/10 via-success/5 to-transparent',
            'border' => 'border-success/20',
            'text' => 'text-success',
            'icon' => $icon ?? 'ri-checkbox-circle-line',
        ],
        'warning' => [
            'bg' => 'bg-gradient-to-r from-warning/10 via-warning/5 to-transparent',
            'border' => 'border-warning/20',
            'text' => 'text-warning',
            'icon' => $icon ?? 'ri-error-warning-line',
        ],
        'danger' => [
            'bg' => 'bg-gradient-to-r from-danger/10 via-danger/5 to-transparent',
            'border' => 'border-danger/20',
            'text' => 'text-danger',
            'icon' => $icon ?? 'ri-error-warning-fill',
        ],
        'default' => [
            'bg' => 'bg-gradient-to-r from-neutral/10 via-neutral/5 to-transparent',
            'border' => 'border-neutral/20',
            'text' => 'text-base/70',
            'icon' => $icon ?? 'ri-information-line',
        ],
    ];
    
    $config = $variantConfig[$variant] ?? $variantConfig['default'];
@endphp

<div 
    {{ $attributes->class([
        'rounded-xl p-4 border',
        $config['bg'],
        $config['border'],
    ]) }}
    @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 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
    @endif
>
    <div class="flex items-start gap-3">
        <x-dynamic-component :component="$config['icon']" class="size-5 {{ $config['text'] }} flex-shrink-0 mt-0.5" />
        <div class="flex-1 min-w-0">
            <div class="flex items-center justify-between gap-2">
                @if($title)
                    <h4 class="text-sm font-semibold text-base">{{ $title }}</h4>
                @endif
                <div class="flex items-center gap-1 ml-auto">
                    @if($collapsible)
                        <button 
                            type="button" 
                            @click="collapsed = !collapsed"
                            class="p-1.5 rounded-lg hover:bg-black/10 transition-all duration-200 {{ $config['text'] }}"
                        >
                            <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="p-1.5 rounded-lg hover:bg-black/10 hover:rotate-90 transition-all duration-200 {{ $config['text'] }}"
                        >
                            <x-ri-close-line class="size-4" />
                        </button>
                    @endif
                </div>
            </div>
            <div 
                class="text-sm text-base/70 leading-relaxed @if($title) mt-1 @endif"
                @if($collapsible)
                    x-show="!collapsed"
                    x-transition:enter="transition ease-out duration-200"
                    x-transition:enter-start="opacity-0 -translate-y-2"
                    x-transition:enter-end="opacity-100 translate-y-0"
                @endif
            >
                {{ $slot }}
            </div>
        </div>
    </div>
</div>