@props(['progressData'])

{{-- Detailed Behavior Breakdown Table --}}
<div class="rounded-lg shadow-sm overflow-hidden bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
    <div class="p-6 border-b border-gray-200 dark:border-gray-700">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
            @lang('app.Detailed Behavior Breakdown')
        </h3>
        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
            @lang('app.Feedback counts for each observable behavior grouped by learning outcomes')
        </p>
    </div>
    <div class="overflow-x-auto">
        @php
            $anyData = false;
        @endphp

        @foreach($progressData['behaviorChecklist'] as $outcome)
            @php
                // Filter behaviors that have stats
                $behaviorsWithStats = collect($outcome['behaviors'])->filter(function($behavior) use ($progressData) {
                    $stats = collect($progressData['behaviorStats'])->firstWhere('title', $behavior['title']);
                    return $stats && ($stats['already_excellent'] > 0 || $stats['needs_improvement'] > 0);
                });
            @endphp

            @if($behaviorsWithStats->isNotEmpty())
                @php
                    $anyData = true;
                @endphp

                <div class="border-b border-gray-200 dark:border-gray-700 last:border-b-0">
                    {{-- Learning Outcome Header --}}
                    <div class="bg-gray-50 dark:bg-gray-900 px-6 py-4">
                        <div class="flex items-center gap-3">
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium whitespace-nowrap
                                @if($outcome['level'] == 1) bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300
                                @elseif($outcome['level'] == 2) bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300
                                @else bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300
                                @endif">
                                Level {{ $outcome['level'] }}
                            </span>
                            <x-heading.frame>
                                {{ $outcome['title'] }}
                            </x-heading.frame>
                        </div>
                    </div>

                    {{-- Behaviors Table --}}
                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                        <thead class="bg-gray-100 dark:bg-gray-800">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                    Observable Behavior
                                </th>
                                <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                    Excellent
                                </th>
                                <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                    Needs Improvement
                                </th>
                                <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                    Total
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                            @foreach($outcome['behaviors'] as $behavior)
                                @php
                                    $behaviorStats = collect($progressData['behaviorStats'])->firstWhere('title', $behavior['title']);
                                @endphp
                                @if($behaviorStats && ($behaviorStats['already_excellent'] > 0 || $behaviorStats['needs_improvement'] > 0))
                                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                                        <td class="px-6 py-4 text-sm text-gray-900 dark:text-white">
                                            {{ $behavior['title'] }}
                                        </td>
                                        <td class="px-6 py-4 text-center text-sm font-medium text-green-600 dark:text-green-400">
                                            {{ $behaviorStats['already_excellent'] }}
                                        </td>
                                        <td class="px-6 py-4 text-center text-sm font-medium text-orange-600 dark:text-orange-400">
                                            {{ $behaviorStats['needs_improvement'] }}
                                        </td>
                                        <td class="px-6 py-4 text-center text-sm font-semibold text-gray-900 dark:text-white">
                                            {{ $behaviorStats['already_excellent'] + $behaviorStats['needs_improvement'] }}
                                        </td>
                                    </tr>
                                @endif
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        @endforeach

        @if(!$anyData)
            <x-filament::empty-state class="rounded-none">
                <x-slot name="heading">
                    @lang('app.No behavior data available')
                </x-slot>
            </x-filament::empty-state>
        @endif
    </div>
</div>