{{--
    Resource Allocation Card Component - LucentUI Theme
    Migrated from AdminLTE to Tailwind
    For displaying CPU, Memory, and other resource allocation vs entitlement
    
    Usage:
    <x-proxmox::ui.allocation-card
        label="CPU Allocation"
        :percent="45"
        usage-summary="1.8 / 4 vCPU"
        entitlement-label="4 vCPU entitlement"
        description="Live hypervisor usage sampled directly from the cluster."
        gradient="linear-gradient(90deg, #38bdf8 0%, #6366f1 100%)"
        :badge="['label' => 'Healthy', 'class' => 'text-success bg-success/10']"
    />
--}}

@props([
    'label',
    'percent' => null,
    'usageSummary',
    'entitlementLabel',
    'description' => null,
    'gradient' => 'linear-gradient(90deg, #0d6efd 0%, #6f42c1 100%)',
    'badge' => null,
    'icon' => null,
    'iconColor' => 'primary',
])

@php
    $iconBgClasses = [
        'primary' => 'bg-primary/10',
        'success' => 'bg-success/10',
        'warning' => 'bg-warning/10',
        'danger' => 'bg-error/10',
        'info' => 'bg-info/10',
    ];
    $iconTextClasses = [
        'primary' => 'text-primary',
        'success' => 'text-success',
        'warning' => 'text-warning',
        'danger' => 'text-error',
        'info' => 'text-info',
    ];
@endphp

<div {{ $attributes->class(['bg-background border border-neutral rounded-lg p-5 shadow-sm transition-colors duration-200 hover:bg-background-secondary/30']) }}>
    <div class="flex flex-col gap-4">
        <div class="flex items-start justify-between gap-3">
            <div class="flex items-start gap-3.5">
                @if($icon)
                    <div class="flex items-center justify-center size-11 shrink-0 rounded-lg {{ $iconBgClasses[$iconColor] ?? $iconBgClasses['primary'] }}">
                        <x-dynamic-component :component="$icon" class="size-5 {{ $iconTextClasses[$iconColor] ?? $iconTextClasses['primary'] }}" />
                    </div>
                @endif
                <div class="min-w-0">
                    <p class="text-xs font-medium text-base/60 mb-1">{{ $label }}</p>
                    <p class="text-xl font-bold text-base leading-tight">{{ $usageSummary }}</p>
                    <p class="text-xs text-base/60 mt-1">{{ $entitlementLabel }}</p>
                </div>
            </div>
            @if($badge)
                <span class="shrink-0 px-2.5 py-1 text-xs font-medium rounded-full {{ $badge['class'] ?? 'bg-success/10 text-success' }}">
                    {{ $badge['label'] ?? '' }}
                </span>
            @endif
        </div>
        
        @if(!is_null($percent))
            <div class="flex flex-col gap-2">
                <div class="flex items-center justify-between text-xs">
                    <span class="text-base/60">Usage</span>
                    <span class="font-semibold text-base">{{ $percent }}%</span>
                </div>
                <div class="h-2 bg-background-secondary rounded-full overflow-hidden">
                    <div 
                        class="h-full rounded-full transition-all duration-300"
                        style="width: {{ min($percent, 130) }}%; background-image: {{ $gradient }};"
                    ></div>
                </div>
            </div>
        @endif
        
        @if($description)
            <p class="text-xs text-base/50">{{ $description }}</p>
        @endif
    </div>
</div>