@props([
    'score' => 0,
    'size' => 'md', // sm, md, lg
    'showValue' => true,
    'showLabels' => true,
    'animated' => true,
    'thresholds' => [
        'danger' => 1.81,
        'warning' => 2.99
    ]
])

@php
    $sizes = [
        'sm' => ['container' => 'w-32 h-32', 'text' => 'text-xl', 'needle' => 'h-16'],
        'md' => ['container' => 'w-48 h-48', 'text' => 'text-3xl', 'needle' => 'h-24'],
        'lg' => ['container' => 'w-64 h-64', 'text' => 'text-4xl', 'needle' => 'h-32'],
    ];
    
    $sizeConfig = $sizes[$size] ?? $sizes['md'];
    
    // Calculate angle for needle (0-180 degrees, 0 = left, 180 = right)
    $minScore = 0;
    $maxScore = 4;
    $angle = min(180, max(0, ($score / $maxScore) * 180));
    
    // Determine color based on score
    $color = match(true) {
        $score > $thresholds['warning'] => 'text-success-600',
        $score >= $thresholds['danger'] => 'text-warning-600',
        default => 'text-danger-600'
    };
    
    $bgColor = match(true) {
        $score > $thresholds['warning'] => 'bg-success-100 dark:bg-success-900/30',
        $score >= $thresholds['danger'] => 'bg-warning-100 dark:bg-warning-900/30',
        default => 'bg-danger-100 dark:bg-danger-900/30'
    };
@endphp

<div class="gauge-container {{ $sizeConfig['container'] }} mx-auto" 
     x-data="{
         score: {{ $score }},
         angle: {{ $angle }},
         animated: {{ $animated ? 'true' : 'false' }}
     }"
     x-init="if(animated) {
         let startAngle = 0;
         let endAngle = angle;
         let duration = 1000;
         let startTime = null;
         
         function animate(currentTime) {
             if (!startTime) startTime = currentTime;
             let progress = (currentTime - startTime) / duration;
             
             if (progress < 1) {
                 angle = startAngle + (endAngle - startAngle) * progress;
                 requestAnimationFrame(animate);
             } else {
                 angle = endAngle;
             }
         }
         
         requestAnimationFrame(animate);
     }">
    
    <!-- SVG Gauge -->
    <svg class="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
        <!-- Background arc (gray) -->
        <circle cx="50" cy="50" r="45" fill="none" 
                stroke="currentColor" 
                stroke-width="10"
                class="text-gray-200 dark:text-gray-700"/>
        
        <!-- Colored arc based on score -->
        <circle cx="50" cy="50" r="45" fill="none" 
                stroke="currentColor" 
                stroke-width="10"
                stroke-linecap="round"
                stroke-dasharray="283" 
                stroke-dashoffset="283"
                :style="{ strokeDashoffset: 283 - (283 * (angle / 180)) }"
                class="{{ $color }} transition-all duration-1000 ease-out"/>
        
        <!-- Tick marks -->
        @foreach([0, 45, 90, 135, 180] as $tick)
            @php
                $tickAngle = $tick * (pi() / 180);
                $x1 = 50 + 40 * cos($tickAngle);
                $y1 = 50 + 40 * sin($tickAngle);
                $x2 = 50 + 45 * cos($tickAngle);
                $y2 = 50 + 45 * sin($tickAngle);
            @endphp
            <line x1="{{ $x1 }}" y1="{{ $y1 }}" 
                  x2="{{ $x2 }}" y2="{{ $y2 }}" 
                  stroke="currentColor" 
                  stroke-width="1"
                  class="text-gray-400 dark:text-gray-600"/>
        @endforeach
    </svg>
    
    <!-- Needle -->
    <div class="absolute inset-0 flex items-center justify-center"
         :style="{ transform: 'rotate(' + angle + 'deg)' }"
         :class="{ 'transition-transform duration-1000 ease-out': animated }">
        <div class="w-1 {{ $bgColor }} rounded-full {{ $sizeConfig['needle'] }} origin-bottom transform -translate-y-1/2"
             style="transform-origin: bottom center;"></div>
        <div class="absolute w-3 h-3 {{ $bgColor }} rounded-full"></div>
    </div>
    
    <!-- Center point -->
    <div class="absolute inset-0 flex items-center justify-center">
        <div class="w-3 h-3 bg-gray-800 dark:bg-gray-200 rounded-full"></div>
    </div>
</div>

<!-- Score Value and Labels -->
@if($showValue || $showLabels)
    <div class="mt-4 text-center">
        @if($showValue)
            <div class="{{ $sizeConfig['text'] }} font-bold {{ $color }} mb-1">
                {{ number_format($score, 3) }}
            </div>
        @endif
        
        @if($showLabels)
            <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 px-4">
                <span class="text-danger-600 dark:text-danger-400">Bahaya</span>
                <span class="text-warning-600 dark:text-warning-400">Waspada</span>
                <span class="text-success-600 dark:text-success-400">Aman</span>
            </div>
            
            <!-- Threshold markers -->
            <div class="relative h-1 bg-gray-200 dark:bg-gray-700 rounded-full mt-2 mx-4">
                <div class="absolute top-0 left-0 h-full bg-danger-500 rounded-l-full" 
                     style="width: {{ ($thresholds['danger'] / 4) * 100 }}%"></div>
                <div class="absolute top-0 left-0 h-full bg-warning-500" 
                     style="width: {{ (($thresholds['warning'] - $thresholds['danger']) / 4) * 100 }}%; left: {{ ($thresholds['danger'] / 4) * 100 }}%"></div>
                <div class="absolute top-0 right-0 h-full bg-success-500 rounded-r-full" 
                     style="width: {{ (4 - $thresholds['warning']) / 4 * 100 }}%"></div>
                
                <!-- Score marker -->
                <div class="absolute top-1/2 transform -translate-y-1/2 w-2 h-2 bg-gray-900 dark:bg-white rounded-full"
                     style="left: {{ ($score / 4) * 100 }}%"></div>
            </div>
        @endif
    </div>
@endif

<!-- Interpretation Tooltip -->
<div class="absolute top-0 right-0 group">
    <i class="fas fa-info-circle text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-help"></i>
    <div class="absolute right-0 mt-2 w-48 p-2 bg-gray-900 text-white text-xs rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-10">
        <p class="font-semibold mb-1">Interpretasi Z-Score:</p>
        <ul class="space-y-1">
            <li><span class="text-success-400">> 2.99:</span> Aman</li>
            <li><span class="text-warning-400">1.81 - 2.99:</span> Waspada</li>
            <li><span class="text-danger-400">< 1.81:</span> Bahaya</li>
        </ul>
    </div>
</div>