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

@php
    // ✅ تحسين: توليد فئات الألوان ديناميكيًا لزيادة المرونة
    $borderColorClass = "border-{$color}-500";
    $textColorClass = "text-{$color}-600";
    
    // ✅ منطق لفصل القيمة الرقمية عن النص (مثل '%') لميزة العدّ
    $numericValue = (int) preg_replace('/[^0-9]/', '', $value);
    $textValue = preg_replace('/[0-9]/', '', $value);
@endphp

{{--
|--------------------------------------------------------------------------
| مكون بطاقة لوحة التحكم
|--------------------------------------------------------------------------
|
| يستعرض إحصائيات عامة مع عنوان، قيمة، ولون محدد.
|
| @param string $title - عنوان البطاقة
| @param string $value - قيمة البطاقة
| @param string $color - لون البطاقة (blue, green, purple, yellow, red)
| @param array $tooltipItems - مصفوفة من العناصر لعرضها في التلميح (لأداة اكتمال الملف)
| @param string $icon  - أيقونة اختيارية (مثال: SVG أو رمز emoji)
|
--}}
<div class="relative bg-white shadow-lg rounded-xl p-5 transition-transform duration-300 transform hover:scale-105 {{ $borderColorClass }}">
    <div class="flex items-center justify-center gap-2 mb-2">
        @if($icon)
            <span class="text-xl {{ $textColorClass }}">{!! $icon !!}</span>
        @endif
        <h3 class="text-lg font-semibold text-brand-text">{{ $title }}</h3>
    </div>
    
    {{-- ✅ ميزة العدّ التصاعدي (Count-up) --}}
    <p class="text-3xl font-bold mt-2 {{ $textColorClass }} count-up" data-value="{{ $numericValue }}">0</p>
    
    @if (!empty($textValue))
        <span class="text-sm font-medium text-brand-text">{{ $textValue }}</span>
    @endif

    @if(!empty($tooltipItems))
        <div x-data="{ open: false }" class="absolute top-3 left-3">
            <span @mouseenter="open = true" @mouseleave="open = false" class="cursor-pointer text-brand-text hover:text-brand-text">
                ℹ️
            </span>
            <div x-show="open" 
                 x-cloak 
                 x-transition:enter="transition ease-out duration-100" 
                 x-transition:enter-start="opacity-0 scale-95" 
                 x-transition:enter-end="opacity-100 scale-100" 
                 x-transition:leave="transition ease-in duration-75" 
                 x-transition:leave-start="opacity-100 scale-100" 
                 x-transition:leave-end="opacity-0 scale-95"
                 class="absolute left-0 mt-2 w-48 z-10 bg-white p-3 rounded-lg shadow-xl border border-brand-light-gray">
                <p class="font-semibold text-brand-text mb-2">حقول الملف الناقصة:</p>
                <ul class="text-sm text-brand-text space-y-1">
                    @foreach($tooltipItems as $item)
                        <li class="flex items-center gap-2 {{ $item['completed'] ? 'text-green-600' : 'text-red-600' }}">
                            <span class="text-base">{{ $item['completed'] ? '✅' : '❌' }}</span>
                            <span>{{ $item['label'] }}</span>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif
</div>

{{-- 
    ✅ كود JavaScript لميزة العدّ التصاعدي.
    يمكن تضمينه هنا أو في ملف JS خارجي.
--}}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        function animateValue(obj, start, end, duration) {
            let startTimestamp = null;
            const step = (timestamp) => {
                if (!startTimestamp) startTimestamp = timestamp;
                const progress = Math.min((timestamp - startTimestamp) / duration, 1);
                obj.textContent = Math.floor(progress * (end - start) + start);
                if (progress < 1) {
                    window.requestAnimationFrame(step);
                }
            };
            window.requestAnimationFrame(step);
        }

        const countUpElements = document.querySelectorAll('.count-up');
        countUpElements.forEach(element => {
            const endValue = parseInt(element.dataset.value, 10);
            animateValue(element, 0, endValue, 1500); // 1500ms = 1.5s
        });
    });
</script>