<x-filament-widgets::widget>
    @php
        $tasks = $this->getTasks();
        $settings = $this->getSettings();
    @endphp

    @if(count($tasks) > 0)
        <x-filament::section>
            <x-slot name="heading">
                <div class="flex items-center gap-2">
                    <x-heroicon-o-bell-alert class="w-5 h-5 text-amber-500" />
                    <span>Tugas yang Perlu Diselesaikan</span>
                    <span class="px-2 py-0.5 text-xs font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400 rounded-full">
                        {{ count($tasks) }}
                    </span>
                </div>
            </x-slot>

            <x-slot name="description">
                @if($settings['backdate_enabled'])
                    <span class="text-emerald-600 dark:text-emerald-400">
                        <x-heroicon-o-pencil-square class="w-4 h-4 inline" />
                        Mode Edit Aktif - Anda dapat mengisi/mengubah data kehadiran dan aktivitas
                    </span>
                @else
                    <span class="text-gray-500 dark:text-gray-400">
                        Fokus pada pengisian aktivitas dan output harian
                    </span>
                @endif
            </x-slot>

            <div class="space-y-4">
                @foreach($tasks as $task)
                    <div class="p-4 rounded-xl border-l-4
                        @if($task['priority'] === 'high')
                            border-l-red-500 bg-red-50 dark:bg-red-900/10
                        @elseif($task['priority'] === 'medium')
                            border-l-amber-500 bg-amber-50 dark:bg-amber-900/10
                        @else
                            border-l-blue-500 bg-blue-50 dark:bg-blue-900/10
                        @endif
                    ">
                        <div class="flex items-start justify-between">
                            <div class="flex items-start gap-3">
                                <div class="p-2 rounded-lg
                                    @if($task['priority'] === 'high')
                                        bg-red-100 dark:bg-red-900/30
                                    @elseif($task['priority'] === 'medium')
                                        bg-amber-100 dark:bg-amber-900/30
                                    @else
                                        bg-blue-100 dark:bg-blue-900/30
                                    @endif
                                ">
                                    @svg($task['icon'], 'w-5 h-5 ' . match($task['priority']) {
                                        'high' => 'text-red-600 dark:text-red-400',
                                        'medium' => 'text-amber-600 dark:text-amber-400',
                                        default => 'text-blue-600 dark:text-blue-400',
                                    })
                                </div>
                                <div>
                                    <h4 class="font-semibold text-gray-900 dark:text-white">
                                        {{ $task['title'] }}
                                    </h4>
                                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-0.5">
                                        {{ $task['description'] }}
                                    </p>

                                    {{-- Show items preview --}}
                                    @if(!empty($task['items']))
                                        <div class="mt-3 flex flex-wrap gap-2">
                                            @foreach($task['items'] as $item)
                                                <span class="inline-flex items-center px-2 py-1 text-xs rounded-md
                                                    @if($task['priority'] === 'high')
                                                        bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400
                                                    @elseif($task['priority'] === 'medium')
                                                        bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400
                                                    @else
                                                        bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400
                                                    @endif
                                                ">
                                                    {{ $item['formatted'] }}
                                                    @if(isset($item['check_in']))
                                                        <span class="ml-1 text-gray-500">({{ $item['check_in'] }})</span>
                                                    @endif
                                                </span>
                                            @endforeach
                                            @if($task['total'] > 5)
                                                <span class="text-xs text-gray-500 dark:text-gray-400 self-center">
                                                    +{{ $task['total'] - 5 }} lainnya
                                                </span>
                                            @endif
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <a href="{{ $task['action_url'] }}"
                               class="shrink-0 inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-lg transition-colors
                                @if($task['priority'] === 'high')
                                    bg-red-600 hover:bg-red-700 text-white
                                @elseif($task['priority'] === 'medium')
                                    bg-amber-600 hover:bg-amber-700 text-white
                                @else
                                    bg-blue-600 hover:bg-blue-700 text-white
                                @endif
                            ">
                                {{ $task['action_label'] }}
                                <x-heroicon-o-arrow-right class="w-4 h-4 ml-1" />
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        </x-filament::section>
    @else
        {{-- All tasks completed --}}
        <x-filament::section>
            <div class="text-center py-8">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-emerald-100 dark:bg-emerald-900/30 mb-4">
                    <x-heroicon-o-check-badge class="w-8 h-8 text-emerald-600 dark:text-emerald-400" />
                </div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                    Semua Tugas Selesai!
                </h3>
                <p class="text-sm text-gray-500 dark:text-gray-400">
                    Tidak ada tugas yang perlu diselesaikan saat ini.
                    @if($settings['backdate_enabled'])
                        <br>Data kehadiran dan aktivitas Anda sudah lengkap.
                    @else
                        <br>Aktivitas dan output Anda sudah terisi lengkap.
                    @endif
                </p>
            </div>
        </x-filament::section>
    @endif
</x-filament-widgets::widget>
