{{--
    Alert Component - TailAdmin 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' => 'default',
    'title' => null,
    'icon' => null,
    'dismissible' => false,
    'collapsible' => false,
    'collapsed' => false,
])

@php
    $variantConfig = [
        'default' => [
            'class' => 'border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] text-gray-800 dark:text-white/90',
            'iconClass' => 'fill-gray-500 dark:fill-gray-400',
            'icon' => $icon ?? 'ri-information-line',
        ],
        'info' => [
            'class' => 'border-blue-light-200 bg-blue-light-50 dark:border-blue-light-500/20 dark:bg-blue-light-500/10 text-blue-light-600 dark:text-blue-light-400',
            'iconClass' => 'fill-blue-light-500',
            'icon' => $icon ?? 'ri-information-line',
        ],
        'success' => [
            'class' => 'border-success-200 bg-success-50 dark:border-success-500/20 dark:bg-success-500/10 text-success-600 dark:text-success-400',
            'iconClass' => 'fill-success-500',
            'icon' => $icon ?? 'ri-checkbox-circle-line',
        ],
        'warning' => [
            'class' => 'border-warning-200 bg-warning-50 dark:border-warning-500/20 dark:bg-warning-500/10 text-warning-600 dark:text-orange-400',
            'iconClass' => 'fill-warning-500',
            'icon' => $icon ?? 'ri-error-warning-line',
        ],
        'danger' => [
            'class' => 'border-error-200 bg-error-50 dark:border-error-500/20 dark:bg-error-500/10 text-error-600 dark:text-error-400',
            'iconClass' => 'fill-error-500',
            'icon' => $icon ?? 'ri-error-warning-fill',
        ],
    ];
    
    $config = $variantConfig[$variant] ?? $variantConfig['default'];
@endphp

<div 
    role="alert"
    {{ $attributes->class([
        'relative w-full rounded-xl border p-4 flex gap-3 items-start',
        $config['class'],
    ]) }}
    @if($dismissible || $collapsible)
        x-data="{ 
            show: true,
            @if($collapsible) collapsed: {{ $collapsed ? 'true' : 'false' }} @endif
        }"
        x-show="show"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
    @endif
>
    <x-dynamic-component :component="$config['icon']" class="size-5 mt-0.5 shrink-0 {{ $config['iconClass'] }}" />
    <div class="flex-1 min-w-0">
        @if($title)
            <h5 class="mb-1 text-sm font-semibold">{{ $title }}</h5>
        @endif
        <div 
            class="text-theme-sm"
            @if($collapsible)
                x-show="!collapsed"
                x-transition:enter="transition ease-out duration-200"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
            @endif
        >
            {{ $slot }}
        </div>
    </div>
    @if($dismissible || $collapsible)
        <div class="flex items-center gap-1 shrink-0">
            @if($collapsible)
                <button 
                    type="button" 
                    @click="collapsed = !collapsed"
                    class="p-1.5 rounded-lg hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
                >
                    <x-ri-arrow-down-s-line 
                        class="size-4 transition-transform duration-200"
                        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/5 dark:hover:bg-white/5 transition-colors"
                >
                    <x-ri-close-line class="size-4" />
                </button>
            @endif
        </div>
    @endif
</div>