{{--
    Alert Component - LucentUI Theme
    Migrated from AdminLTE to Tailwind
    
    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' => 'bg-background-secondary border border-neutral text-base/80',
            'calloutClass' => 'border-l-4 border-l-neutral bg-background-secondary/50 text-base/80',
            'icon' => $icon ?? 'ri-information-line',
            'iconColor' => 'text-base/60',
        ],
        'info' => [
            'alertClass' => 'bg-info/10 border border-info/30 text-info',
            'calloutClass' => 'border-l-4 border-l-info bg-info/5 text-info',
            'icon' => $icon ?? 'ri-information-line',
            'iconColor' => 'text-info',
        ],
        'success' => [
            'alertClass' => 'bg-success/10 border border-success/30 text-success',
            'calloutClass' => 'border-l-4 border-l-success bg-success/5 text-success',
            'icon' => $icon ?? 'ri-checkbox-circle-line',
            'iconColor' => 'text-success',
        ],
        'warning' => [
            'alertClass' => 'bg-warning/10 border border-warning/30 text-warning',
            'calloutClass' => 'border-l-4 border-l-warning bg-warning/5 text-warning',
            'icon' => $icon ?? 'ri-error-warning-line',
            'iconColor' => 'text-warning',
        ],
        'danger' => [
            'alertClass' => 'bg-error/10 border border-error/30 text-error',
            'calloutClass' => 'border-l-4 border-l-error bg-error/5 text-error',
            'icon' => $icon ?? 'ri-error-warning-fill',
            'iconColor' => 'text-error',
        ],
        'primary' => [
            'alertClass' => 'bg-primary/10 border border-primary/30 text-primary',
            'calloutClass' => 'border-l-4 border-l-primary bg-primary/5 text-primary',
            'icon' => $icon ?? 'ri-information-line',
            'iconColor' => 'text-primary',
        ],
    ];
    
    $config = $variantConfig[$variant] ?? $variantConfig['default'];
    $componentClass = $callout ? $config['calloutClass'] : $config['alertClass'];
@endphp

<div 
    role="alert"
    {{ $attributes->class([
        'relative p-4 rounded-lg transition-all duration-300 hover:shadow-sm',
        $componentClass,
    ]) }}
    @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 {{ $config['iconColor'] }}" />
        <div class="flex-1 min-w-0">
            @if($title)
                <h5 class="text-lg font-semibold mb-2">{{ $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="absolute top-2 right-2 flex items-center gap-1">
            @if($collapsible)
                <button 
                    type="button" 
                    @click="collapsed = !collapsed"
                    class="p-1 rounded border border-neutral bg-transparent text-base/60 hover:bg-neutral/10 hover:scale-105 transition-all duration-200"
                >
                    <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 rounded text-base/60 hover:text-base hover:opacity-70 transition-opacity duration-200"
                    aria-label="Close"
                >
                    <x-ri-close-line class="size-4" />
                </button>
            @endif
        </div>
    @endif
</div>