{{--
    Resource Gauge Component - TailAdmin style
    Shows a circular or linear gauge for resource usage
    
    Usage:
    <x-proxmox::ui.resource-gauge :value="75" label="CPU" />
    <x-proxmox::ui.resource-gauge :value="45" label="Memory" :max="100" suffix="%" />
--}}

@props([
    'value' => 0,
    'max' => 100,
    'label',
    'sublabel' => null,
    'suffix' => '%',
    'prefix' => null,
    'icon' => null,
    'gradient' => null,
    'color' => 'auto',
])

@php
    $percent = $max > 0 ? min(100, ($value / $max) * 100) : 0;
    
    // Auto-color based on usage
    if ($color === 'auto') {
        if ($percent >= 90) {
            $color = 'danger';
        } elseif ($percent >= 70) {
            $color = 'warning';
        } else {
            $color = 'success';
        }
    }
    
    $colorClasses = [
        'primary' => 'text-brand-500',
        'success' => 'text-success-500',
        'warning' => 'text-warning-500',
        'danger' => 'text-error-500',
        'info' => 'text-blue-light-500',
    ];
    
    $bgColorClasses = [
        'primary' => 'bg-brand-500',
        'success' => 'bg-success-500',
        'warning' => 'bg-warning-500',
        'danger' => 'bg-error-500',
        'info' => 'bg-blue-light-500',
    ];
    
    $textColor = $colorClasses[$color] ?? $colorClasses['primary'];
    $bgColor = $bgColorClasses[$color] ?? $bgColorClasses['primary'];
    
    $badgeLabel = match(true) {
        $percent >= 100 => 'Over entitlement',
        $percent >= 85 => 'Watchlist',
        default => 'Healthy',
    };
    
    $badgeClass = match(true) {
        $percent >= 100 => 'text-error-600 bg-error-50 dark:bg-error-500/15 dark:text-error-400',
        $percent >= 85 => 'text-warning-600 bg-warning-50 dark:bg-warning-500/15 dark:text-warning-400',
        default => 'text-success-600 bg-success-50 dark:bg-success-500/15 dark:text-success-400',
    };
@endphp

<div {{ $attributes->class(['flex flex-col gap-4 rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]']) }}>
    <div class="flex items-start justify-between gap-3">
        <div class="space-y-1">
            <p class="text-theme-xs font-medium text-gray-500 dark:text-gray-400">{{ $label }}</p>
            <p class="text-xl font-bold text-gray-800 dark:text-white/90">
                @if($prefix){{ $prefix }}@endif{{ is_numeric($value) ? number_format($value, 1) : $value }}@if($suffix){{ $suffix }}@endif
            </p>
            @if($sublabel)
                <p class="text-theme-xs text-gray-500 dark:text-gray-400">{{ $sublabel }}</p>
            @endif
        </div>
        <span class="rounded-full px-2.5 py-1 text-theme-xs font-medium {{ $badgeClass }}">
            {{ $badgeLabel }}
        </span>
    </div>
    
    <div class="space-y-2">
        <div class="flex items-center justify-between text-theme-xs">
            <span class="text-gray-500 dark:text-gray-400">Usage</span>
            <span class="font-semibold text-gray-800 dark:text-white/90">{{ number_format($percent, 1) }}%</span>
        </div>
        <div class="h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
            <div 
                class="h-full rounded-full transition-all duration-300"
                @if($gradient)
                    style="width: {{ min($percent, 130) }}%; background-image: {{ $gradient }};"
                @else
                    style="width: {{ min($percent, 130) }}%;"
                    class="{{ $bgColor }}"
                @endif
            ></div>
        </div>
    </div>
</div>