@props([
    'results' => [],
    'expanded' => false,
])

@php
    // Extract the actual checks from nested structure
    $checks = $results['checks'] ?? $results;
    
    // Filter out non-filter keys (metadata fields)
    $metadataKeys = ['passed', 'evaluated_at', 'failed_count', 'passed_count', 'filter_version', 'checks'];
    $checks = collect($checks)->filter(function($value, $key) use ($metadataKeys) {
        return !in_array($key, $metadataKeys) && is_array($value) && isset($value['passed']);
    })->toArray();
    
    $passedCount = collect($checks)->filter(fn($r) => $r['passed'] ?? false)->count();
    $failedCount = collect($checks)->filter(fn($r) => !($r['passed'] ?? true))->count();
    $totalCount = count($checks);
@endphp

<div 
    x-data="{ expanded: @js($expanded) }"
    {{ $attributes->merge(['class' => 'filter-results-panel']) }}
>
    @if($totalCount > 0)
        {{-- Summary Badge --}}
        <div class="d-flex align-items-center gap-2">
            <button 
                type="button"
                class="btn btn-sm btn-icon btn-trigger"
                x-on:click="expanded = !expanded"
            >
                <x-ui.nicon name="chevron-right" class="tw-transition-transform" x-bind:class="{'tw-rotate-90': expanded}"/>
            </button>
            
            <span class="badge bg-success badge-dim rounded-pill">
                <x-ui.nicon name="check" class="me-1"/>
                {{ $passedCount }}
            </span>
            
            @if($failedCount > 0)
                <span class="badge bg-danger badge-dim rounded-pill">
                    <x-ui.nicon name="cross" class="me-1"/>
                    {{ $failedCount }}
                </span>
            @endif
            
            <span class="text-muted small">
                {{ $passedCount }}/{{ $totalCount }} {{ __('critères') }}
            </span>
        </div>
        
        {{-- Detailed Results --}}
        <div 
            x-show="expanded" 
            x-collapse
            class="mt-3"
        >
            <div class="table-responsive">
                <table class="table table-sm table-bordered mb-0">
                    <thead class="bg-light">
                        <tr>
                            <th class="small">{{ __('Critère') }}</th>
                            <th class="small text-center">{{ __('Statut') }}</th>
                            {{-- <th class="small">{{ __('Attendu') }}</th>
                            <th class="small">{{ __('Actuel') }}</th> --}}
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($checks as $key => $result)
                            @php
                                // Get filter name - prefer 'label' (seeder format), then translation, then formatted key
                                $filterName = $result['label'] 
                                    ?? (trans()->has("lead_filters.{$key}") 
                                        ? __("lead_filters.{$key}") 
                                        : ucfirst(str_replace('_', ' ', $key)));
                                    
                                // Helper to format values
                                $formatValue = function($val) {
                                    if (is_array($val)) return implode(', ', $val);
                                    if (is_bool($val)) return $val ? 'Oui' : 'Non';
                                    if (is_numeric($val)) return number_format($val, is_float($val) ? 2 : 0, ',', ' ');
                                    return $val;
                                };
                                    
                                // Format expected/actual values - handle both real and seeder data structures
                                $expectedDisplay = '-';
                                $actualDisplay = '-';
                                
                                // Real filter results have 'expected' and 'actual'
                                if (isset($result['expected'])) {
                                    $expectedDisplay = $formatValue($result['expected']);
                                }
                                
                                if (isset($result['actual'])) {
                                    $actualDisplay = $formatValue($result['actual']);
                                }
                                
                                // Seeder data has 'value' field - use it for actual if no expected/actual
                                if ($expectedDisplay === '-' && $actualDisplay === '-' && isset($result['value'])) {
                                    $actualDisplay = $formatValue($result['value']);
                                }
                            @endphp
                            <tr class="{{ !($result['passed'] ?? true) ? 'table-danger' : '' }}">
                                <td class="small fw-medium">
                                    {{ __($filterName) }}
                                </td>
                                <td class="text-center">
                                    @if($result['passed'] ?? false)
                                        <x-ui.nicon name="check-circle" class="text-success"/>
                                    @else
                                        <x-ui.nicon name="cross-circle" class="text-danger"/>
                                    @endif
                                </td>
                                {{-- <td class="small text-muted">
                                    {{ $expectedDisplay }}
                                </td> --}}
                                {{-- <td class="small">
                                    <span class="{{ !($result['passed'] ?? true) ? 'text-danger fw-bold' : '' }}">
                                        {{ $actualDisplay }}
                                    </span>
                                </td> --}}
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @else
        <span class="text-muted small">
            <x-ui.nicon name="info" class="me-1"/>
            {{ __('Aucun filtre appliqué') }}
        </span>
    @endif
</div>