{{--
    Alert Component - TailServer Theme (shadcn-inspired)
    
    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' => 'bg-card text-card-foreground',
            'icon' => $icon ?? 'ri-information-line',
        ],
        'info' => [
            'class' => 'border-info/20 bg-info/5 text-info [&>svg]:text-info',
            'icon' => $icon ?? 'ri-information-line',
        ],
        'success' => [
            'class' => 'border-success/20 bg-success/5 text-success [&>svg]:text-success',
            'icon' => $icon ?? 'ri-checkbox-circle-line',
        ],
        'warning' => [
            'class' => 'border-warning/20 bg-warning/5 text-warning [&>svg]:text-warning',
            'icon' => $icon ?? 'ri-error-warning-line',
        ],
        'danger' => [
            'class' => 'border-danger/20 bg-danger/5 text-danger [&>svg]:text-danger',
            'icon' => $icon ?? 'ri-error-warning-fill',
        ],
    ];
    
    $config = $variantConfig[$variant] ?? $variantConfig['default'];
@endphp

<div 
    role="alert"
    {{ $attributes->class([
        'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5',
        $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-150"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-100"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
    @endif
>
    <x-dynamic-component :component="$config['icon']" class="size-4" />
    <div class="flex-1 min-w-0">
        @if($title)
            <h5 class="mb-1 font-medium leading-none tracking-tight">{{ $title }}</h5>
        @endif
        <div 
            class="text-sm [&_p]:leading-relaxed opacity-90"
            @if($collapsible)
                x-show="!collapsed"
                x-transition:enter="transition ease-out duration-150"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
            @endif
        >
            {{ $slot }}
        </div>
    </div>
    @if($dismissible || $collapsible)
        <div class="absolute top-3 right-3 flex items-center gap-1">
            @if($collapsible)
                <button 
                    type="button" 
                    @click="collapsed = !collapsed"
                    class="p-1 rounded hover:bg-black/5 transition-colors"
                >
                    <x-ri-arrow-down-s-line 
                        class="size-4 transition-transform duration-150"
                        x-bind:class="collapsed ? 'rotate-180' : ''" 
                    />
                </button>
            @endif
            @if($dismissible)
                <button 
                    type="button" 
                    @click="show = false"
                    class="p-1 rounded hover:bg-black/5 transition-colors"
                >
                    <x-ri-close-line class="size-4" />
                </button>
            @endif
        </div>
    @endif
</div>