@props(['session', 'teacher' => null])

@php
    $teacher = $teacher ?? sessionTeacher($session);
    $isLiveSessionTime = false;

    if ($session?->session_date && $session?->start_time && $session?->end_time) {
        $tz           = config('app.timezone', 'Africa/Cairo');
        $now          = \Carbon\Carbon::now($tz);
        $sessionStart = \Carbon\Carbon::parse($session->session_date.' '.$session->start_time, $tz);
        $sessionEnd   = \Carbon\Carbon::parse($session->session_date.' '.$session->end_time, $tz);

        if ($sessionEnd->lessThanOrEqualTo($sessionStart)) {
            $sessionEnd->addDay();
        }

        // Only show when the session is today AND the current time is within the session window.
        $isToday          = $now->isSameDay($sessionStart);
        $isLiveSessionTime = $isToday && $now->betweenIncluded($sessionStart, $sessionEnd);
    }

    $shouldShowMediaStatus = $isLiveSessionTime;
@endphp

@if ($shouldShowMediaStatus)
@php
    $teacherUserId = $teacher?->user_id;
    $participants = $session
        ? ($session->relationLoaded('bbbParticipants') ? $session->bbbParticipants : $session->bbbParticipants()->get())
        : collect();
    $teacherBbbUserId = $teacherUserId ? 'user-'.$teacherUserId : null;
    $teacherParticipants = $teacherUserId
        ? $participants
            ->filter(fn ($item) => (int) $item->user_id === (int) $teacherUserId || $item->bbb_user_id === $teacherBbbUserId)
            ->values()
        : collect();

    $isOnline = $teacherParticipants->contains(fn ($item) => (bool) $item->is_online);
    $micOpen = $isOnline && $teacherParticipants->contains(function ($item) {
        $lastMicUnmutedAt = $item->mic_unmuted_at;
        $lastMicMutedAt = $item->mic_muted_at;
        $hasRecentUnmute = $lastMicUnmutedAt
            && (! $lastMicMutedAt || $lastMicUnmutedAt->greaterThanOrEqualTo($lastMicMutedAt));

        return ! (bool) $item->is_listening_only
            && ! (bool) $item->mic_is_muted
            && ((bool) $item->has_joined_voice || $hasRecentUnmute);
    });
    $cameraOpen = $isOnline && $teacherParticipants->contains(fn ($item) => (bool) $item->has_video);
@endphp

<div class="bbb-media-status" title="Teacher live BBB media status">
    {{-- <span class="bbb-media-status__pill {{ $isOnline ? 'is-online' : 'is-offline' }}">
        {{ $isOnline ? 'Online' : 'Offline' }}
    </span> --}}
    <span class="bbb-media-status__pill {{ $micOpen ? 'is-on' : 'is-off' }}">
        <iconify-icon icon="{{ $micOpen ? 'lucide:mic' : 'lucide:mic-off' }}"></iconify-icon>
        Mic {{ $micOpen ? 'On' : 'Off' }}
    </span>
    <span class="bbb-media-status__pill {{ $cameraOpen ? 'is-on' : 'is-off' }}">
        <iconify-icon icon="{{ $cameraOpen ? 'lucide:video' : 'lucide:video-off' }}"></iconify-icon>
        Camera {{ $cameraOpen ? 'On' : 'Off' }}
    </span>
</div>
@endif

@once
    @push('styles')
        <style>
            .bbb-media-status {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                gap: 6px;
            }

            .bbb-media-status__pill {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                min-height: 26px;
                padding: 4px 9px;
                border-radius: 999px;
                font-size: 12px;
                font-weight: 700;
                line-height: 1;
                border: 1px solid transparent;
                white-space: nowrap;
            }

            .bbb-media-status__pill iconify-icon {
                font-size: 14px;
            }

            .bbb-media-status__pill.is-online,
            .bbb-media-status__pill.is-on {
                color: #166534;
                background: #dcfce7;
                border-color: #bbf7d0;
            }

            .bbb-media-status__pill.is-off,
            .bbb-media-status__pill.is-offline {
                color: #991b1b;
                background: #fee2e2;
                border-color: #fecaca;
            }
        </style>
    @endpush
@endonce