{{--
    ShiftBridge Toast/Alert Component
    
    Usage:
    <x-ui.toast>Default alert message</x-ui.toast>
    
    <x-ui.toast variant="success">Success message</x-ui.toast>
    
    <x-ui.toast variant="error">Error message</x-ui.toast>
    
    <x-ui.toast variant="warning">Warning message</x-ui.toast>
    
    <x-ui.toast variant="info">Info message</x-ui.toast>
    
    <x-ui.toast title="Alert Title">With title</x-ui.toast>
    
    <x-ui.toast closable>Can be dismissed</x-ui.toast>
    
    <x-ui.toast icon="check-circle">With icon</x-ui.toast>
    
    <x-ui.toast action="Undo" actionUrl="/undo">With action</x-ui.toast>
    
    Props:
    - variant: string (default, success, error, warning, info)
    - title: string (alert title)
    - closable: boolean (show close button)
    - icon: string (icon name override)
    - action: string (action button text)
    - actionUrl: string (action button URL)
    - solid: boolean (solid background instead of subtle)
--}}

@props([
    'variant' => 'default',
    'title' => null,
    'closable' => false,
    'icon' => null,
    'action' => null,
    'actionUrl' => null,
    'solid' => false,
])

@php
// Icon mapping based on variant
$variantIcon = match($variant) {
    'success' => 'check-circle',
    'error', 'danger' => 'alert-circle',
    'warning' => 'alert-triangle',
    'info' => 'info',
    default => 'bell',
};

$displayIcon = $icon ?? $variantIcon;

// Colors based on variant and solid option
if ($solid) {
    $colors = match($variant) {
        'success' => ['bg' => 'bg-[var(--sb-success)]', 'text' => 'text-white', 'icon' => 'text-white'],
        'error', 'danger' => ['bg' => 'bg-[var(--sb-danger)]', 'text' => 'text-white', 'icon' => 'text-white'],
        'warning' => ['bg' => 'bg-[var(--sb-warning)]', 'text' => 'text-white', 'icon' => 'text-white'],
        'info' => ['bg' => 'bg-[var(--sb-info)]', 'text' => 'text-white', 'icon' => 'text-white'],
        default => ['bg' => 'bg-[var(--sb-navy)]', 'text' => 'text-white', 'icon' => 'text-white'],
    };
} else {
    $colors = match($variant) {
        'success' => ['bg' => 'bg-[var(--sb-success-bg)]', 'text' => 'text-[var(--sb-success)]', 'icon' => 'text-[var(--sb-success)]', 'border' => 'border-[var(--sb-success)]/20'],
        'error', 'danger' => ['bg' => 'bg-[var(--sb-danger-bg)]', 'text' => 'text-[var(--sb-danger)]', 'icon' => 'text-[var(--sb-danger)]', 'border' => 'border-[var(--sb-danger)]/20'],
        'warning' => ['bg' => 'bg-[var(--sb-warning-bg)]', 'text' => 'text-[var(--sb-warning)]', 'icon' => 'text-[var(--sb-warning)]', 'border' => 'border-[var(--sb-warning)]/20'],
        'info' => ['bg' => 'bg-[var(--sb-info-bg)]', 'text' => 'text-[var(--sb-info)]', 'icon' => 'text-[var(--sb-info)]', 'border' => 'border-[var(--sb-info)]/20'],
        default => ['bg' => 'bg-slate-100', 'text' => 'text-slate-700', 'icon' => 'text-slate-500', 'border' => 'border-slate-200'],
    };
}

$borderClass = $solid ? '' : ($colors['border'] ?? 'border') . ' border';

// Icon SVG
$iconSvg = match($displayIcon) {
    'check-circle' => '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="' . $colors['icon'] . '"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>',
    'alert-circle' => '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="' . $colors['icon'] . '"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>',
    'alert-triangle' => '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="' . $colors['icon'] . '"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>',
    'info' => '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="' . $colors['icon'] . '"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>',
    'bell' => '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="' . $colors['icon'] . '"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>',
    'check' => '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="' . $colors['icon'] . '"><polyline points="20 6 9 17 4 12"></polyline></svg>',
    'x' => '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="' . $colors['icon'] . '"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>',
    default => null,
};

// Close icon
$closeIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>';
@endphp

<div 
    class="flex items-start gap-3 p-4 rounded-lg {{ $colors['bg'] }} {{ $borderClass }} {{ $colors['text'] }} {{ $closable ? 'pr-10' : '' }} relative"
    role="alert"
>
    {{-- Icon --}}
    @if($iconSvg)
        <div class="flex-shrink-0 mt-0.5">
            {!! $iconSvg !!}
        </div>
    @endif
    
    {{-- Content --}}
    <div class="flex-1 min-w-0">
        @if($title)
            <h4 class="font-semibold text-sm {{ $solid ? '' : $colors['text'] }}">{{ $title }}</h4>
        @endif
        <div class="text-sm {{ $title ? 'mt-1' : '' }}">
            {{ $slot }}
        </div>
        
        {{-- Action --}}
        @if($action)
            <div class="mt-3">
                @if($actionUrl)
                    <a href="{{ $actionUrl }}" class="text-sm font-medium underline hover:opacity-80 {{ $solid ? '' : $colors['text'] }}">
                        {{ $action }}
                    </a>
                @else
                    <button type="button" class="text-sm font-medium underline hover:opacity-80 {{ $solid ? '' : $colors['text'] }}">
                        {{ $action }}
                    </button>
                @endif
            </div>
        @endif
    </div>
    
    {{-- Close Button --}}
    @if($closable)
        <button 
            type="button"
            onclick="this.parentElement.remove();"
            class="absolute top-4 right-4 p-1 rounded hover:bg-black/10 transition-colors {{ $colors['text'] }}"
            aria-label="Close"
        >
            {!! $closeIcon !!}
        </button>
    @endif
</div>