<div>
    {{-- Status Alert Banner (frozen/suspended) --}}
    @if($selectedChild && in_array($selectedChild->status?->value ?? '', ['frozen', 'suspended']))
        @php
            $alertConfig = [
                'frozen' => ['bg' => 'bg-cyan-50 border-cyan-200', 'text' => 'text-cyan-800', 'icon' => 'text-cyan-600', 'message' => 'حساب ' . ($selectedChild->person?->name_ar ?? '') . ' مجمد حالياً - تواصل مع الإدارة لمزيد من المعلومات'],
                'suspended' => ['bg' => 'bg-red-50 border-red-200', 'text' => 'text-red-800', 'icon' => 'text-red-600', 'message' => 'حساب ' . ($selectedChild->person?->name_ar ?? '') . ' موقوف - يرجى مراجعة الإدارة'],
            ];
            $alert = $alertConfig[$selectedChild->status?->value] ?? null;
        @endphp
        @if($alert)
            <div class="mb-4 p-4 rounded-2xl border {{ $alert['bg'] }}">
                <div class="flex items-center gap-3">
                    <svg class="w-5 h-5 {{ $alert['icon'] }} shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/>
                    </svg>
                    <p class="text-sm font-medium {{ $alert['text'] }}">{{ __($alert['message']) }}</p>
                </div>
            </div>
        @endif
    @endif

    {{-- Greeting Section --}}
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-[#0F172A]">
            {{ __('صباح الخير يا') }} {{ $parentName }}
        </h1>
        <p class="text-sm text-[#64748B] mt-1" dir="ltr">{{ now()->translatedFormat('l j F Y') }}</p>
    </div>

    {{-- Child Switcher --}}
    @if($children->count() > 1)
        <div class="flex gap-2 overflow-x-auto pb-2 mb-6 scrollbar-hide">
            @foreach($children as $child)
                <button
                    wire:click="selectChild({{ $child->id }})"
                    class="flex items-center gap-2 px-4 py-2.5 rounded-full whitespace-nowrap transition-all min-h-[44px]
                        {{ $selectedChildId === $child->id
                            ? 'bg-[#2563EB] text-white shadow-md'
                            : 'bg-white text-[#0F172A] border border-gray-200 hover:border-[#2563EB]' }}"
                >
                    <span class="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold
                        {{ $selectedChildId === $child->id ? 'bg-white/20 text-white' : 'bg-[#2563EB]/10 text-[#2563EB]' }}">
                        {{ mb_substr($child->person?->name_ar ?? '?', 0, 1) }}
                    </span>
                    <span class="text-sm font-medium">{{ $child->person?->name_ar ?? '-' }}</span>
                </button>
            @endforeach
        </div>
    @endif

    {{-- Today Card --}}
    <div wire:poll.60s class="mb-6">
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5">
            <div class="flex items-center gap-2 mb-3">
                <svg class="w-5 h-5 text-[#2563EB]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <h2 class="text-base font-semibold text-[#0F172A]">{{ __('اليوم') }}</h2>
            </div>

            @if($todaySession)
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 rounded-xl bg-[#2563EB]/10 flex items-center justify-center">
                        <svg class="w-6 h-6 text-[#2563EB]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <div class="flex-1">
                        <p class="text-sm font-semibold text-[#0F172A]">{{ $todaySession['activity'] ?? '' }}</p>
                        <p class="text-xs text-[#64748B]">{{ $todaySession['group'] ?? '' }}</p>
                        <div class="flex items-center gap-2 mt-1">
                            <span class="text-xs text-[#64748B]" dir="ltr">{{ $todaySession['time'] ?? '' }}</span>
                            @if($todaySession['location'] ?? null)
                                <span class="text-xs text-[#64748B]">{{ $todaySession['location'] }}</span>
                            @endif
                        </div>
                    </div>
                </div>
            @else
                <div class="text-center py-4">
                    <svg class="w-10 h-10 text-gray-200 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
                    </svg>
                    <p class="text-sm text-[#64748B]">{{ __('لا توجد حصص اليوم') }}</p>
                    @if($nextSessionDate)
                        <p class="text-xs text-[#64748B] mt-1">{{ __('الحصة القادمة:') }} <span dir="ltr">{{ $nextSessionDate }}</span></p>
                    @endif
                </div>
            @endif
        </div>
    </div>

    {{-- Quick Stats Row --}}
    <div class="grid grid-cols-3 gap-3 mb-6">
        {{-- Attendance --}}
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 text-center">
            <p class="text-xs text-[#64748B] mb-1">{{ __('الحضور') }}</p>
            <p class="text-lg font-bold {{ ($attendanceRate ?? 0) >= 75 ? 'text-[#059669]' : (($attendanceRate ?? 0) >= 50 ? 'text-[#D97706]' : 'text-[#DC2626]') }}" dir="ltr">
                {{ $attendanceRate !== null ? $attendanceRate . '%' : '--' }}
            </p>
        </div>

        {{-- Pending Amount --}}
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 text-center">
            <p class="text-xs text-[#64748B] mb-1">{{ __('مستحق') }}</p>
            <p class="text-lg font-bold {{ ($pendingAmount ?? 0) > 0 ? 'text-[#DC2626]' : 'text-[#059669]' }}" dir="ltr">
                {{ number_format(($pendingAmount ?? 0) / 100, 0) }}
                <span class="text-xs font-normal text-[#64748B]">{{ __('ج.م') }}</span>
            </p>
        </div>

        {{-- Evaluation Score --}}
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 text-center">
            <p class="text-xs text-[#64748B] mb-1">{{ __('التقييم') }}</p>
            <p class="text-lg font-bold text-[#2563EB]" dir="ltr">
                {{ $evaluationScore !== null ? $evaluationScore : '--' }}
                <span class="text-xs font-normal text-[#64748B]">/10</span>
            </p>
        </div>
    </div>

    {{-- Activity Feed --}}
    <div class="mb-6">
        <h2 class="text-base font-semibold text-[#0F172A] mb-3">{{ __('آخر الأحداث') }}</h2>

        @if(empty($activityFeed))
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 text-center">
                <svg class="w-10 h-10 text-gray-200 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
                </svg>
                <p class="text-sm text-[#64748B]">{{ __('لا توجد أحداث حديثة') }}</p>
            </div>
        @else
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 divide-y divide-gray-50">
                @foreach($activityFeed as $event)
                    @php
                        $dotColors = [
                            'positive' => 'bg-[#059669]',
                            'attention' => 'bg-[#D97706]',
                            'info' => 'bg-[#2563EB]',
                            'negative' => 'bg-[#DC2626]',
                        ];
                        $dotColor = $dotColors[$event['type'] ?? 'info'] ?? 'bg-[#2563EB]';
                    @endphp
                    <div class="flex items-start gap-3 p-4">
                        <span class="w-2.5 h-2.5 rounded-full mt-1.5 shrink-0 {{ $dotColor }}"></span>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm text-[#0F172A]">{{ $event['message'] ?? '' }}</p>
                            <p class="text-xs text-[#64748B] mt-0.5" dir="ltr">{{ $event['time'] ?? '' }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</div>
