@props(['session'])

@php
    $hasWhiteboard = filled($session?->extra_file);
    $sessionEnd = null;
    $deadline = null;
    $deadlineIso = null;
    $startsAt = null;
    $isExpired = false;
    $isStarted = false;

    if (!empty($session?->session_date) && !empty($session?->end_time)) {
        $sessionEnd = \Carbon\Carbon::parse($session->session_date . ' ' . $session->end_time);
        if (!empty($session?->start_time)) {
            $sessionStart = \Carbon\Carbon::parse($session->session_date . ' ' . $session->start_time);
            if ($sessionEnd->lessThanOrEqualTo($sessionStart)) {
                $sessionEnd->addDay();
            }
        }

        $deadline = $sessionEnd->copy()->addHours(12);
        $deadlineIso = $deadline->toIso8601String();
        $startsAt = $sessionEnd->format('Y-m-d H:i A');
        $isStarted = now()->greaterThanOrEqualTo($sessionEnd);
        $isExpired = now()->greaterThanOrEqualTo($deadline);
    }
@endphp

<div class="whiteboard-upload-countdown">
    @if($hasWhiteboard)
        <span class="badge bg-success">White Board Uploaded</span>
    @elseif($deadlineIso && !$isStarted)
        <span class="badge bg-info text-dark">White Board Upload Starts After Session End</span>
        <div class="small text-muted mt-1">
            Starts: {{ $startsAt }}
        </div>
        <div class="small text-muted">
            Deadline: {{ $deadline->format('Y-m-d H:i A') }}
        </div>
    @elseif($deadlineIso)
        <span
            class="badge {{ $isExpired ? 'bg-danger' : 'bg-warning text-dark' }} js-whiteboard-countdown"
            data-deadline="{{ $deadlineIso }}"
            data-active-label="White Board Upload Ends In"
            data-expired-label="White Board Upload Time Ended"
        >
            {{ $isExpired ? 'White Board Upload Time Ended' : 'Calculating...' }}
        </span>
        <div class="small text-muted mt-1">
            Deadline: {{ $deadline->format('Y-m-d H:i A') }}
        </div>
    @else
        <span class="badge bg-secondary">No Session End Time</span>
    @endif
</div>

@once
    @push('scripts')
        <script>
            (function () {
                function formatDuration(milliseconds) {
                    var totalSeconds = Math.max(0, Math.floor(milliseconds / 1000));
                    var hours = Math.floor(totalSeconds / 3600);
                    var minutes = Math.floor((totalSeconds % 3600) / 60);
                    var seconds = totalSeconds % 60;

                    return [
                        String(hours).padStart(2, '0'),
                        String(minutes).padStart(2, '0'),
                        String(seconds).padStart(2, '0')
                    ].join(':');
                }

                var countdownInterval = null;

                function updateWhiteboardCountdowns() {
                    var hasActiveCountdown = false;

                    document.querySelectorAll('.js-whiteboard-countdown').forEach(function (timer) {
                        var deadline = new Date(timer.dataset.deadline).getTime();
                        var remaining = deadline - Date.now();

                        if (Number.isNaN(deadline) || remaining <= 0) {
                            timer.textContent = timer.dataset.expiredLabel || 'White Board Upload Time Ended';
                            timer.classList.remove('bg-warning', 'text-dark');
                            timer.classList.add('bg-danger');
                            return;
                        }

                        hasActiveCountdown = true;
                        timer.textContent = (timer.dataset.activeLabel || 'White Board Upload Ends In') + ' ' + formatDuration(remaining);
                    });

                    if (!hasActiveCountdown && countdownInterval) {
                        window.clearInterval(countdownInterval);
                        countdownInterval = null;
                    }
                }

                updateWhiteboardCountdowns();
                countdownInterval = window.setInterval(updateWhiteboardCountdowns, 1000);
            })();
        </script>
    @endpush
@endonce