@props([
    'metricsCurrent' => [],
    'metricsLast' => [],
    'metricsGlobal' => [],
    'metricsPerformance' => [],
    'videoResult' => null,
    'testDurationSeconds' => 0
])

@php
/**
 * colorVRtoM($key,$value):
 * Aplica color <70 => rojo, >=90 => verde, else => blanco
 * SOLO si $key está en [VRC,VRP,VPS,VPA,M].
 */
function colorVRtoM($key,$val){
    if(is_null($val)) return '';
    if(!in_array($key,['VRC','VRP','VPS','VPA','M'])) return '';
    if($val<=70) return 'bg-danger text-white'; 
    return '';
}

/**
 * colorPerformance($perf):
 * < -10 => rojo
 * > +10 => verde
 * else => sin color
 */
function colorPerformance($perf){
    if(is_null($perf)) return '';
    if($perf<=-10) return 'bg-danger text-white';
    return '';
}
@endphp

<!-- Headers -->
<div class="row mb-3">
    <div class="col-9">
        <div class="row">
            <div class="col-3">
                <div class="metrics-header text-center">{{ __('all.metrics') }}</div>
            </div>
            <div class="col-3">
                <div class="metrics-header text-center">{{ __('all.current') }}</div>
            </div>
            <div class="col-3">
                <div class="metrics-header text-center">{{ __('all.last') }}</div>
            </div>
            <div class="col-3">
                <div class="metrics-header text-center">{{ __('all.global') }}</div>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="metrics-header performance-header text-center">{{ __('all.performance') }}</div>
    </div>
</div>

<!-- Métricas -->
<div class="metrics-results mt-4">
    @foreach($metricsCurrent as $key => $val)
        @if(!in_array($key, ['CR_total_correct','CR_total_incorrect','CR_average_time']))
        <div class="row mb-2 align-items-center">
            <div class="col-9">
                <div class="row">
                    <div class="col-3">
                        <div class="metric-cell metric-name">
                            @if($key === 'SIN_VALOR')
                                {{ __('all.SIN_VALOR') }}
                            @else
                                {{ strtoupper($key) }}
                            @endif
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="metric-cell {{ colorVRtoM($key, $metricsCurrent[$key]??null) }}">
                            @if(isset($metricsCurrent[$key]))
                                {{ number_format($metricsCurrent[$key],2) }}%
                            @else
                                N/A
                            @endif
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="metric-cell {{ colorVRtoM($key, $metricsLast[$key]??null) }}">
                            @if(isset($metricsLast[$key]))
                                {{ number_format($metricsLast[$key],2) }}%
                            @else
                                N/A
                            @endif
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="metric-cell {{ colorVRtoM($key, $metricsGlobal[$key]??null) }}">
                            @if(isset($metricsGlobal[$key]))
                                {{ number_format($metricsGlobal[$key],2) }}%
                            @else
                                N/A
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="metric-cell">
                    <x-performance-pill 
                        :value="$metricsPerformance[$key] ?? null" 
                        :metric="$key" />
                </div>
            </div>
        </div>
        @endif
    @endforeach

    <!-- CR row -->
    <div class="row mb-2 align-items-center">
        <div class="col-9">
            <div class="row">
                <div class="col-3">
                    <div class="metric-cell metric-name">
                        CR
                    </div>
                </div>
                <div class="col-3">
                    <div class="metric-cell">
                        @if(isset($videoResult) && isset($videoResult['length']) && isset($videoResult['length_invalid_pose']) && $testDurationSeconds > 0)
                            @php
                                $total_frames = array_sum($videoResult['length']);
                                $invalid_pose_frames = array_sum($videoResult['length_invalid_pose']);
                                
                                // Nos aseguramos de que los valores sean válidos
                                $invalid_pose_frames = min(max(0, $invalid_pose_frames), $total_frames);
                                
                                // Calculamos el porcentaje
                                $static_percentage = ($invalid_pose_frames / $total_frames) * 100;
                                
                                // Calculamos el tiempo Static como un porcentaje del tiempo total
                                $static_time = $testDurationSeconds * ($static_percentage / 100);
                            @endphp
                            {{ gmdate('i:s', (int)$static_time) }}
                        @else
                            00:00
                        @endif
                    </div>
                </div>
                <div class="col-3">
                    <div class="metric-cell">
                        @if(isset($videoResult) && isset($videoResult['length']) && isset($videoResult['length_invalid_pose']) && $testDurationSeconds > 0)
                            @php
                                $total_frames = array_sum($videoResult['length']);
                                $invalid_pose_frames = array_sum($videoResult['length_invalid_pose']);
                                
                                // Nos aseguramos de que los valores sean válidos
                                $invalid_pose_frames = min(max(0, $invalid_pose_frames), $total_frames);
                                
                                // Calculamos el porcentaje
                                $static_percentage = ($invalid_pose_frames / $total_frames) * 100;
                                
                                // Calculamos el tiempo Static como un porcentaje del tiempo total
                                $static_time = $testDurationSeconds * ($static_percentage / 100);
                            @endphp
                            {{ gmdate('i:s', (int)$static_time) }}
                        @else
                            00:00
                        @endif
                    </div>
                </div>
                <div class="col-3">
                    <div class="metric-cell">
                        @if(isset($videoResult) && isset($videoResult['length']) && isset($videoResult['length_invalid_pose']) && $testDurationSeconds > 0)
                            @php
                                $total_frames = array_sum($videoResult['length']);
                                $invalid_pose_frames = array_sum($videoResult['length_invalid_pose']);
                                
                                // Nos aseguramos de que los valores sean válidos
                                $invalid_pose_frames = min(max(0, $invalid_pose_frames), $total_frames);
                                
                                // Calculamos el porcentaje
                                $static_percentage = ($invalid_pose_frames / $total_frames) * 100;
                                
                                // Calculamos el tiempo Static como un porcentaje del tiempo total
                                $static_time = $testDurationSeconds * ($static_percentage / 100);
                            @endphp
                            {{ gmdate('i:s', (int)$static_time) }}
                        @else
                            00:00
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <div class="col-3">
            <div class="metric-cell">
                <x-performance-pill 
                    :value="$metricsPerformance['CR'] ?? null" 
                    :metric="'CR'" />
            </div>
        </div>
    </div>
</div>