@props([
    'id' => '',
    'title' => '',
    'value' => '',
    'icon' => '',
    'color' => 'blue',
    'tooltipItems' => null,
])

@php
    $gradients = [
        'blue' => 'from-blue-500 to-indigo-600',
        'green' => 'from-emerald-500 to-teal-600',
        'red' => 'from-rose-500 to-red-600',
        'yellow' => 'from-amber-500 to-orange-600',
        'purple' => 'from-purple-500 to-pink-600',
        'gray' => 'from-gray-500 to-gray-700',
    ];
    
    $glowColors = [
        'blue' => 'shadow-blue-200 dark:shadow-blue-900/30',
        'green' => 'shadow-emerald-200 dark:shadow-emerald-900/30',
        'red' => 'shadow-rose-200 dark:shadow-rose-900/30',
        'yellow' => 'shadow-amber-200 dark:shadow-amber-900/30',
        'purple' => 'shadow-purple-200 dark:shadow-purple-900/30',
        'gray' => 'shadow-gray-200 dark:shadow-gray-900/30',
    ];
    
    $gradient = $gradients[$color] ?? $gradients['gray'];
    $glow = $glowColors[$color] ?? $glowColors['gray'];
@endphp

<div {{ $attributes->merge(['id' => $id])->class([
    'group relative bg-white dark:bg-gray-800 rounded-2xl p-6',
    'transition-all duration-500 hover:scale-105 hover:-translate-y-2',
    'shadow-lg hover:shadow-2xl ' . $glow,
    'border border-gray-100 dark:border-gray-700',
    'overflow-hidden'
]) }}>
    <!-- Animated Background Pattern -->
    <div class="absolute inset-0 opacity-5 dark:opacity-10">
        <div class="absolute inset-0 bg-gradient-to-br {{ $gradient }}"></div>
        <svg class="absolute inset-0 w-full h-full" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <pattern id="pattern-{{ $color }}" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
                    <circle cx="20" cy="20" r="1.5" fill="currentColor" opacity="0.5" />
                </pattern>
            </defs>
            <rect width="100%" height="100%" fill="url(#pattern-{{ $color }})" />
        </svg>
    </div>
    
    <!-- Floating Orb Animation -->
    <div class="absolute -top-6 -right-6 w-24 h-24 bg-gradient-to-br {{ $gradient }} rounded-full blur-3xl opacity-20 group-hover:opacity-30 transition-opacity duration-500"></div>
    
    <!-- Card Content -->
    <div class="relative z-10">
        <!-- Header with Icon -->
        <div class="flex items-start justify-between mb-4">
            <div class="flex-grow">
                <h3 class="text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">
                    {{ $title }}
                </h3>
                <!-- Animated Value -->
                <div class="flex items-baseline gap-2">
                    <p class="text-4xl font-black bg-gradient-to-br {{ $gradient }} bg-clip-text text-transparent count-up transition-all duration-500" 
                       data-value="{{ preg_replace('/[^0-9.]/', '', $value) }}">
                        {{ $value }}
                    </p>
                    @if(is_numeric(str_replace(['%', ','], '', $value)))
                        <span class="text-xs font-bold text-green-500 dark:text-green-400 animate-bounce">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                            </svg>
                        </span>
                    @endif
                </div>
            </div>
            
            <!-- Animated Icon Container -->
            <div class="relative">
                <div class="w-14 h-14 bg-gradient-to-br {{ $gradient }} rounded-xl flex items-center justify-center shadow-lg transform group-hover:rotate-12 transition-transform duration-500">
                    <span class="text-2xl text-white filter drop-shadow-lg">{{ $icon }}</span>
                </div>
                <!-- Pulse Effect -->
                <div class="absolute inset-0 w-14 h-14 bg-gradient-to-br {{ $gradient }} rounded-xl animate-ping opacity-20"></div>
            </div>
        </div>
        
        <!-- Progress Bar (if value is percentage) -->
        @if(str_contains($value, '%'))
            @php $percentage = (int) str_replace('%', '', $value); @endphp
            <div class="mt-4">
                <div class="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                    <div class="h-full bg-gradient-to-r {{ $gradient }} rounded-full transition-all duration-1000 ease-out"
                         style="width: {{ $percentage }}%">
                        <div class="h-full bg-white/30 animate-pulse"></div>
                    </div>
                </div>
            </div>
        @endif
        
        <!-- Tooltip Items with Animation -->
        @if($tooltipItems && $tooltipItems->isNotEmpty())
            <div class="mt-4 pt-3 border-t border-gray-200 dark:border-gray-700">
                <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 mb-2">التفاصيل:</p>
                <ul class="space-y-1">
                    @foreach($tooltipItems as $index => $item)
                        <li class="text-xs text-gray-600 dark:text-gray-300 flex items-center gap-2 opacity-0 animate-fade-in-up"
                            style="animation-delay: {{ $index * 0.1 }}s">
                            <span class="w-1.5 h-1.5 bg-gradient-to-br {{ $gradient }} rounded-full"></span>
                            {{ $item }}
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif
    </div>
    
    <!-- Interactive Hover Effect -->
    <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r {{ $gradient }} transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"></div>
</div>

<style>
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.5s ease-out forwards;
}
</style>