@extends('layout.layout')

@section('content')
    @php
        $attendees = collect($status['attendees'] ?? []);
        $sessionNumber = $session->session_number ?? $session->id;
        $courseName = $course->course_name_en ?? $status['meeting_name'] ?? 'Course Session';
        $totalUsers = $status['participant_count'] ?? $attendees->count();
        $onlineUsers = $attendees->filter(fn ($attendee) => $attendee['is_online'] ?? ($status['running'] ?? false))->count();
        $talkActiveUsers = $attendees->filter(fn ($attendee) => ($attendee['has_joined_voice'] ?? 'No') === 'Yes' && ($attendee['is_listening_only'] ?? 'No') !== 'Yes')->count();
        $webcamActiveUsers = $attendees->filter(fn ($attendee) => ($attendee['has_video'] ?? 'No') === 'Yes')->count();
    @endphp

    @include('components.alert')

    <div class="container-fluid analytics-page">
        <div class="analytics-header">
            <div>
                <div class="analytics-title">Learning Analytics Dashboard</div>
                <div class="analytics-subtitle">{{ $courseName }} - Session {{ $sessionNumber }}</div>
            </div>
            <div class="analytics-actions">
                <a href="{{ route('courses.sessions.show', ['course' => $course->id, 'session' => $session->id]) }}"
                    class="analytics-btn analytics-btn--light">Back To Session</a>
                <a href="{{ route('courses.sessions.bbb.status.download', ['course' => $course->id, 'session' => $session->id]) }}"
                    class="analytics-btn analytics-btn--primary">Download CSV</a>
            </div>
        </div>

        <div class="analytics-stats">
            <div class="analytics-stat">
                <span>Total Users</span>
                <strong>{{ $totalUsers }}</strong>
                <small>{{ $onlineUsers }} online</small>
            </div>
            <div class="analytics-stat">
                <span>Talk Active</span>
                <strong>{{ $talkActiveUsers }}</strong>
                <small>Mic currently open</small>
            </div>
            <div class="analytics-stat">
                <span>Webcam Active</span>
                <strong>{{ $webcamActiveUsers }}</strong>
                <small>Camera currently open</small>
            </div>
        </div>

        <section class="analytics-section">
            <div class="analytics-section-head">
                <div>
                    <div class="analytics-section-title">Participants</div>
                    <div class="analytics-section-subtitle">Join history, mic usage, and webcam usage for this BBB session.</div>
                </div>
                <div class="analytics-count">{{ $attendees->count() }} rows</div>
            </div>
            <div class="analytics-table-wrap">
                <table class="analytics-table">
                    <thead>
                        <tr>
                            <th>User</th>
                            <th>Profile Type</th>
                            <th>App User ID</th>
                            <th>Join Count</th>
                            <th>First Join</th>
                            <th>Last Join</th>
                            <th>Left At</th>
                            <th>Meeting Time</th>
                            <th>Talk Time</th>
                            <th>Talk Opens</th>
                            <th>Last Talk Open</th>
                            <th>Last Talk Close</th>
                            <th>Mic Muted</th>
                            <th>Webcam Time</th>
                            <th>Webcam Opens</th>
                            <th>Last Webcam Open</th>
                            <th>Last Webcam Close</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($attendees as $attendee)
                            @php
                                $initials = collect(explode(' ', trim($attendee['name'] ?? 'Participant')))
                                    ->filter()
                                    ->map(fn($part) => mb_substr($part, 0, 1))
                                    ->take(2)
                                    ->implode('');
                                $isOnline = $attendee['is_online'] ?? ($status['running'] ?? false);
                            @endphp
                            <tr>
                                <td>
                                    <div class="analytics-user">
                                        <span class="analytics-avatar">{{ $initials ?: 'U' }}</span>
                                        <span>
                                            @if($attendee['profile_url'])
                                                <a href="{{ $attendee['profile_url'] }}" target="_blank"
                                                    rel="noopener">{{ $attendee['name'] }}</a>
                                            @else
                                                <strong>{{ $attendee['name'] }}</strong>
                                            @endif
                                        </span>
                                    </div>
                                </td>
                                <td>{{ $attendee['profile_type'] ?? 'N/A' }}</td>
                                <td>{{ $attendee['app_user_id'] ?? 'N/A' }}</td>
                                <td>{{ $attendee['join_count'] ?? 0 }}</td>
                                <td>{{ !empty($attendee['first_joined_at']) ? \Carbon\Carbon::parse($attendee['first_joined_at'])->format('M d, h:i A') : 'N/A' }}
                                </td>
                                <td>{{ !empty($attendee['last_joined_at']) ? \Carbon\Carbon::parse($attendee['last_joined_at'])->format('M d, h:i A') : 'N/A' }}
                                </td>
                                <td>{{ !empty($attendee['left_at']) ? \Carbon\Carbon::parse($attendee['left_at'])->format('M d, h:i A') : 'N/A' }}
                                </td>
                                <td>{{ gmdate('H:i:s', max(0, (int) ($attendee['attendance_total_seconds'] ?? 0))) }}</td>
                                <td>
                                    @if(($attendee['has_joined_voice'] ?? 'No') === 'Yes' && ($attendee['is_listening_only'] ?? 'No') !== 'Yes')
                                        <span class="analytics-chip {{ ($attendee['mic_is_muted'] ?? 'No') === 'Yes' ? 'analytics-chip--warning' : 'analytics-chip--success' }}">
                                            {{ ($attendee['mic_is_muted'] ?? 'No') === 'Yes' ? 'Muted' : 'Active' }}
                                            {{ gmdate('H:i:s', max(0, (int) ($attendee['mic_total_seconds'] ?? 0))) }}
                                        </span>
                                    @else
                                        {{ gmdate('H:i:s', max(0, (int) ($attendee['mic_total_seconds'] ?? 0))) }}
                                    @endif
                                </td>
                                <td>{{ $attendee['mic_open_count'] ?? 0 }}</td>
                                <td>{{ !empty($attendee['mic_opened_at']) ? \Carbon\Carbon::parse($attendee['mic_opened_at'])->format('M d, h:i A') : 'N/A' }}</td>
                                <td>{{ !empty($attendee['mic_closed_at']) ? \Carbon\Carbon::parse($attendee['mic_closed_at'])->format('M d, h:i A') : 'N/A' }}</td>
                                <td>
                                    <span class="analytics-chip {{ ($attendee['mic_is_muted'] ?? 'No') === 'Yes' ? 'analytics-chip--warning' : 'analytics-chip--muted' }}">
                                        {{ $attendee['mic_is_muted'] ?? 'No' }}
                                    </span>
                                </td>
                                <td>
                                    @if(($attendee['has_video'] ?? 'No') === 'Yes')
                                        <span class="analytics-chip analytics-chip--success">
                                            Active {{ gmdate('H:i:s', max(0, (int) ($attendee['webcam_total_seconds'] ?? 0))) }}
                                        </span>
                                    @else
                                        {{ gmdate('H:i:s', max(0, (int) ($attendee['webcam_total_seconds'] ?? 0))) }}
                                    @endif
                                </td>
                                <td>{{ $attendee['webcam_open_count'] ?? 0 }}</td>
                                <td>{{ !empty($attendee['webcam_opened_at']) ? \Carbon\Carbon::parse($attendee['webcam_opened_at'])->format('M d, h:i A') : 'N/A' }}</td>
                                <td>{{ !empty($attendee['webcam_closed_at']) ? \Carbon\Carbon::parse($attendee['webcam_closed_at'])->format('M d, h:i A') : 'N/A' }}</td>
                                <td>
                                    <span
                                        class="analytics-status {{ $isOnline ? 'analytics-status--online' : 'analytics-status--offline' }}">
                                        {{ $isOnline ? 'Online' : 'Offline' }}
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="18">
                                    <div class="analytics-empty">
                                        No attendees data yet. BigBlueButton sends attendee rows while the meeting is running.
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </section>
    </div>
@endsection

@push('styles')
    <style>
        .analytics-page {
            background: #f6f7f9;
            color: #0f172a;
            min-height: calc(100vh - 80px);
            padding: 1.5rem 0 2rem;
        }

        .analytics-header {
            align-items: center;
            display: flex;
            gap: 1rem;
            justify-content: space-between;
            margin-bottom: 1.25rem;
        }

        .analytics-title {
            color: #111827;
            font-size: 1.35rem;
            font-weight: 800;
            letter-spacing: 0;
            margin: 0 0 0.25rem;
        }

        .analytics-subtitle {
            color: #64748b;
            font-size: 0.92rem;
            font-weight: 600;
        }

        .analytics-status,
        .analytics-chip {
            border-radius: 999px;
            display: inline-flex;
            font-size: 0.74rem;
            font-weight: 800;
            line-height: 1;
            padding: 0.42rem 0.62rem;
        }

        .analytics-status--online {
            background: #dcfce7;
            color: #15803d;
        }

        .analytics-status--offline {
            background: #fee2e2;
            color: #dc2626;
        }

        .analytics-chip--success {
            background: #dcfce7;
            color: #15803d;
        }

        .analytics-chip--warning {
            background: #fef3c7;
            color: #b45309;
        }

        .analytics-chip--muted {
            background: #eef2f7;
            color: #475569;
        }

        .analytics-stats {
            display: grid;
            gap: 0.85rem;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            margin: 0 0 1.25rem;
        }

        .analytics-stat {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            min-height: 96px;
            padding: 1rem 1.1rem;
        }

        .analytics-stat strong {
            color: #0f172a;
            display: block;
            font-size: 1.6rem;
            font-weight: 800;
            line-height: 1.15;
            margin: 0.45rem 0 0.2rem;
        }

        .analytics-stat span {
            color: #475569;
            display: block;
            font-size: 0.78rem;
            font-weight: 800;
            text-transform: uppercase;
        }

        .analytics-stat small {
            color: #64748b;
            font-size: 0.82rem;
            font-weight: 600;
        }

        .analytics-section {
            margin-bottom: 2rem;
        }

        .analytics-section-head {
            align-items: flex-end;
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 0.7rem;
        }

        .analytics-section-title {
            font-size: 1.25rem;
            font-weight: 800;
            letter-spacing: 0;
            margin: 0 0 0.2rem;
        }

        .analytics-section-subtitle {
            color: #64748b;
            font-size: 0.88rem;
            font-weight: 600;
        }

        .analytics-count {
            color: #64748b;
            font-size: 0.82rem;
            font-weight: 800;
            white-space: nowrap;
        }

        .analytics-table-wrap {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            overflow-x: auto;
        }

        .analytics-table {
            border-collapse: collapse;
            margin: 0;
            min-width: 1780px;
            width: 100%;
        }

        .analytics-table th {
            background: #f8fafc;
            border-bottom: 1px solid #e5e7eb;
            color: #475569;
            font-size: 0.72rem;
            font-weight: 800;
            padding: 0.78rem 0.9rem;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .analytics-table td {
            border-top: 1px solid #f1f5f9;
            color: #172033;
            font-size: 0.86rem;
            padding: 0.85rem 0.9rem;
            vertical-align: middle;
            white-space: nowrap;
        }

        .analytics-table tbody tr:hover td {
            background: #fbfdff;
        }

        .analytics-table th:first-child,
        .analytics-table td:first-child {
            background: inherit;
            left: 0;
            position: sticky;
            z-index: 1;
        }

        .analytics-table th:first-child {
            background: #f8fafc;
            z-index: 2;
        }

        .analytics-table td:first-child {
            background: #fff;
        }

        .analytics-table tbody tr:hover td:first-child {
            background: #fbfdff;
        }

        .analytics-user {
            align-items: center;
            display: flex;
            gap: 0.75rem;
            min-width: 210px;
        }

        .analytics-user a,
        .analytics-user strong {
            color: #111827;
            display: block;
            font-weight: 800;
            text-decoration: none;
        }

        .analytics-user a:hover {
            color: #071b3d;
        }

        .analytics-avatar {
            align-items: center;
            background: #334155;
            border-radius: 8px;
            color: #fff;
            display: inline-flex;
            flex: 0 0 32px;
            font-size: 0.78rem;
            font-weight: 800;
            height: 32px;
            justify-content: center;
            width: 32px;
        }

        .analytics-empty {
            color: #64748b;
            font-weight: 700;
            padding: 2rem 1rem;
            text-align: center;
        }

        .analytics-mono {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        }

        .analytics-footer {
            align-items: center;
            color: #334155;
            display: flex;
            font-size: 0.82rem;
            justify-content: flex-end;
            margin-bottom: 1rem;
        }

        .analytics-actions {
            display: flex;
            gap: 0.5rem;
            justify-content: flex-end;
        }

        .analytics-btn {
            align-items: center;
            background: #fff;
            border: 1px solid #d8dde6;
            border-radius: 4px;
            color: #1f2a44;
            display: inline-flex;
            font-size: 0.82rem;
            font-weight: 700;
            min-height: 36px;
            padding: 0.55rem 1rem;
            text-decoration: none;
        }

        .analytics-btn:hover {
            color: #111827;
            text-decoration: none;
        }

        .analytics-btn--primary {
            background: #071b3d;
            border-color: #071b3d;
            color: #fff;
        }

        .analytics-btn--primary:hover {
            color: #fff;
        }

        .analytics-btn--light {
            color: #334155;
        }

        @media (max-width: 1199.98px) {

            .analytics-stats {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        @media (max-width: 767.98px) {

            .analytics-header,
            .analytics-section-head {
                align-items: stretch;
                flex-direction: column;
            }

            .analytics-actions {
                justify-content: flex-start;
            }

            .analytics-stats {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endpush