{{--
    Server Status Indicator Component - AdminLTE style
    
    Usage:
    <x-proxmox::ui.server-status status="running" />
    <x-proxmox::ui.server-status status="stopped" showLabel />
    <x-proxmox::ui.server-status status="running" minimal />
--}}

@props([
    'status',
    'showLabel' => true,
    'size' => 'md',
    'minimal' => false,
])

@php
    $statusConfig = [
        'running' => [
            'color' => 'success',
            'label' => 'Running',
            'pulse' => true,
        ],
        'stopped' => [
            'color' => 'muted',
            'label' => 'Stopped',
            'pulse' => false,
        ],
        'paused' => [
            'color' => 'warning',
            'label' => 'Paused',
            'pulse' => false,
        ],
        'suspended' => [
            'color' => 'warning',
            'label' => 'Suspended',
            'pulse' => false,
        ],
        'migrating' => [
            'color' => 'info',
            'label' => 'Migrating',
            'pulse' => true,
        ],
        'starting' => [
            'color' => 'info',
            'label' => 'Starting',
            'pulse' => true,
        ],
        'stopping' => [
            'color' => 'warning',
            'label' => 'Stopping',
            'pulse' => true,
        ],
        'unknown' => [
            'color' => 'danger',
            'label' => 'Unknown',
            'pulse' => false,
        ],
    ];
    
    $config = $statusConfig[strtolower($status)] ?? $statusConfig['unknown'];
    
    $colorStyles = [
        'success' => 'color: var(--lte-success, #198754);',
        'warning' => 'color: #997404;',
        'danger' => 'color: var(--lte-danger, #dc3545);',
        'info' => 'color: var(--lte-info, #0dcaf0);',
        'muted' => 'color: var(--lte-secondary, #6c757d);',
    ];
    
    $bgStyles = [
        'success' => 'background-color: rgba(25, 135, 84, 0.1);',
        'warning' => 'background-color: rgba(255, 193, 7, 0.15);',
        'danger' => 'background-color: rgba(220, 53, 69, 0.1);',
        'info' => 'background-color: rgba(13, 202, 240, 0.1);',
        'muted' => 'background-color: #f8f9fa;',
    ];
    
    $dotStyles = [
        'success' => 'background-color: var(--lte-success, #198754);',
        'warning' => 'background-color: var(--lte-warning, #ffc107);',
        'danger' => 'background-color: var(--lte-danger, #dc3545);',
        'info' => 'background-color: var(--lte-info, #0dcaf0);',
        'muted' => 'background-color: #adb5bd;',
    ];
    
    $sizeStyles = [
        'sm' => 'font-size: 0.75rem; padding: 0.25rem 0.5rem;',
        'md' => 'font-size: 0.8125rem; padding: 0.375rem 0.625rem;',
        'lg' => 'font-size: 0.875rem; padding: 0.5rem 0.75rem;',
    ];
    
    $dotSizeStyles = [
        'sm' => 'width: 0.375rem; height: 0.375rem;',
        'md' => 'width: 0.5rem; height: 0.5rem;',
        'lg' => 'width: 0.625rem; height: 0.625rem;',
    ];
@endphp

<style>
    .server-status-lte {
        display: inline-flex;
        align-items: center;
        font-weight: 500;
        border-radius: 9999px;
    }
    .server-status-lte-minimal {
        display: inline-flex;
        align-items: center;
    }
    .server-status-lte-dot-wrapper {
        position: relative;
        display: flex;
    }
    .server-status-lte-dot {
        position: relative;
        display: inline-flex;
        border-radius: 50%;
    }
    .server-status-lte-pulse {
        position: absolute;
        display: inline-flex;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        opacity: 0.6;
        animation: pulse-lte 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes pulse-lte {
        0%, 100% {
            opacity: 0.6;
            transform: scale(1);
        }
        50% {
            opacity: 0;
            transform: scale(1.5);
        }
    }
    /* Dark mode */
    .dark .server-status-lte-muted {
        background-color: #374151 !important;
    }
</style>

@if($minimal)
    {{-- Minimal dot-only variant --}}
    <div 
        {{ $attributes }}
        class="server-status-lte-minimal"
        style="gap: {{ $showLabel ? '0.375rem' : '0' }};"
    >
        <span class="server-status-lte-dot-wrapper" style="{{ $dotSizeStyles[$size] ?? $dotSizeStyles['md'] }}">
            @if($config['pulse'])
                <span class="server-status-lte-pulse" style="{{ $dotStyles[$config['color']] ?? $dotStyles['muted'] }}"></span>
            @endif
            <span class="server-status-lte-dot" style="{{ $dotSizeStyles[$size] ?? $dotSizeStyles['md'] }} {{ $dotStyles[$config['color']] ?? $dotStyles['muted'] }}"></span>
        </span>
        @if($showLabel)
            <span style="font-weight: 500; {{ $colorStyles[$config['color']] ?? $colorStyles['muted'] }}">{{ $config['label'] }}</span>
        @endif
    </div>
@else
    {{-- Full badge variant --}}
    <div 
        {{ $attributes }}
        class="server-status-lte {{ $config['color'] === 'muted' ? 'server-status-lte-muted' : '' }}"
        style="{{ $bgStyles[$config['color']] ?? $bgStyles['muted'] }} {{ $colorStyles[$config['color']] ?? $colorStyles['muted'] }} {{ $sizeStyles[$size] ?? $sizeStyles['md'] }} gap: 0.5rem;"
    >
        <span class="server-status-lte-dot-wrapper" style="{{ $dotSizeStyles[$size] ?? $dotSizeStyles['md'] }}">
            @if($config['pulse'])
                <span class="server-status-lte-pulse" style="background-color: currentColor;"></span>
            @endif
            <span class="server-status-lte-dot" style="{{ $dotSizeStyles[$size] ?? $dotSizeStyles['md'] }} background-color: currentColor;"></span>
        </span>
        @if($showLabel)
            <span>{{ $config['label'] }}</span>
        @endif
    </div>
@endif