{{--
    Resource Gauge Component - AdminLTE 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';
        }
    }
    
    $bgColors = [
        'primary' => 'var(--lte-primary, #0d6efd)',
        'success' => 'var(--lte-success, #198754)',
        'warning' => 'var(--lte-warning, #ffc107)',
        'danger' => 'var(--lte-danger, #dc3545)',
        'info' => 'var(--lte-info, #0dcaf0)',
    ];
    
    $barColor = $bgColors[$color] ?? $bgColors['primary'];
    
    $badgeLabel = match(true) {
        $percent >= 100 => 'Over entitlement',
        $percent >= 85 => 'Watchlist',
        default => 'Healthy',
    };
    
    $badgeStyle = match(true) {
        $percent >= 100 => 'background-color: rgba(220, 53, 69, 0.1); color: var(--lte-danger, #dc3545);',
        $percent >= 85 => 'background-color: rgba(255, 193, 7, 0.15); color: #997404;',
        default => 'background-color: rgba(25, 135, 84, 0.1); color: var(--lte-success, #198754);',
    };
@endphp

<style>
    .resource-gauge-lte {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        background-color: #fff;
        border: 1px solid var(--lte-border-color, #dee2e6);
        border-radius: var(--lte-border-radius, 0.375rem);
        padding: 1.25rem;
        box-shadow: var(--lte-card-shadow);
    }
    .resource-gauge-lte-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
    }
    .resource-gauge-lte-info {
        min-width: 0;
    }
    .resource-gauge-lte-label {
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--lte-secondary, #6c757d);
        margin-bottom: 0.25rem;
    }
    .resource-gauge-lte-value {
        font-size: 1.25rem;
        font-weight: 700;
        color: #212529;
        line-height: 1.3;
    }
    .resource-gauge-lte-sublabel {
        font-size: 0.8125rem;
        color: var(--lte-secondary, #6c757d);
        margin-top: 0.25rem;
    }
    .resource-gauge-lte-badge {
        flex-shrink: 0;
        padding: 0.25rem 0.625rem;
        font-size: 0.75rem;
        font-weight: 500;
        border-radius: 9999px;
    }
    .resource-gauge-lte-progress {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .resource-gauge-lte-progress-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.8125rem;
    }
    .resource-gauge-lte-progress-label {
        color: var(--lte-secondary, #6c757d);
    }
    .resource-gauge-lte-progress-value {
        font-weight: 600;
        color: #212529;
    }
    .resource-gauge-lte-track {
        height: 0.5rem;
        background-color: #e9ecef;
        border-radius: 9999px;
        overflow: hidden;
    }
    .resource-gauge-lte-bar {
        height: 100%;
        border-radius: 9999px;
        transition: width var(--lte-transition-speed, 0.3s) ease;
    }
    /* Dark mode */
    .dark .resource-gauge-lte {
        background-color: #1f2937;
        border-color: #374151;
    }
    .dark .resource-gauge-lte-value {
        color: #f3f4f6;
    }
    .dark .resource-gauge-lte-progress-value {
        color: #f3f4f6;
    }
    .dark .resource-gauge-lte-track {
        background-color: #374151;
    }
</style>

<div {{ $attributes->class(['resource-gauge-lte']) }}>
    <div class="resource-gauge-lte-header">
        <div class="resource-gauge-lte-info">
            <p class="resource-gauge-lte-label">{{ $label }}</p>
            <p class="resource-gauge-lte-value">
                @if($prefix){{ $prefix }}@endif{{ is_numeric($value) ? number_format($value, 1) : $value }}@if($suffix){{ $suffix }}@endif
            </p>
            @if($sublabel)
                <p class="resource-gauge-lte-sublabel">{{ $sublabel }}</p>
            @endif
        </div>
        <span class="resource-gauge-lte-badge" style="{{ $badgeStyle }}">
            {{ $badgeLabel }}
        </span>
    </div>
    
    <div class="resource-gauge-lte-progress">
        <div class="resource-gauge-lte-progress-header">
            <span class="resource-gauge-lte-progress-label">Usage</span>
            <span class="resource-gauge-lte-progress-value">{{ number_format($percent, 1) }}%</span>
        </div>
        <div class="resource-gauge-lte-track">
            <div 
                class="resource-gauge-lte-bar"
                @if($gradient)
                    style="width: {{ min($percent, 130) }}%; background-image: {{ $gradient }};"
                @else
                    style="width: {{ min($percent, 130) }}%; background-color: {{ $barColor }};"
                @endif
            ></div>
        </div>
    </div>
</div>