@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>Attendance</th>
                            <th>Mic</th>
                            <th>Camera</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);
                                $micActive = ($attendee['has_joined_voice'] ?? 'No') === 'Yes'
                                    && ($attendee['is_listening_only'] ?? 'No') !== 'Yes'
                                    && ($attendee['mic_is_muted'] ?? 'No') !== 'Yes';
                                $cameraActive = ($attendee['has_video'] ?? 'No') === 'Yes';
                                $formatDate = fn ($date) => !empty($date)
                                    ? \Carbon\Carbon::parse($date)->format('M d, h:i A')
                                    : 'N/A';
                                $formatSeconds = fn ($seconds) => gmdate('H:i:s', max(0, (int) $seconds));
                            @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>
                                    <div class="analytics-user-meta">
                                        <span>{{ $attendee['profile_type'] ?? 'N/A' }}</span>
                                        <span>{{ $attendee['join_count'] ?? 0 }} joins</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="analytics-metric">
                                        <strong>{{ $formatSeconds($attendee['attendance_total_seconds'] ?? 0) }}</strong>
                                        <span>First: {{ $formatDate($attendee['first_joined_at'] ?? null) }}</span>
                                        <span>Last: {{ $formatDate($attendee['last_joined_at'] ?? null) }}</span>
                                        <span>Left: {{ $formatDate($attendee['left_at'] ?? null) }}</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="analytics-media-card">
                                        <span class="analytics-chip {{ $micActive ? 'analytics-chip--success' : 'analytics-chip--muted' }}">
                                            {{ $micActive ? 'Mic On' : 'Mic Off' }}
                                        </span>
                                        <div class="analytics-metric">
                                            <strong>{{ $formatSeconds($attendee['mic_total_seconds'] ?? 0) }}</strong>
                                            <span>{{ $attendee['mic_open_count'] ?? 0 }} opens</span>
                                            <span>Opened: {{ $formatDate($attendee['mic_opened_at'] ?? null) }}</span>
                                            <span>Closed: {{ $formatDate($attendee['mic_closed_at'] ?? null) }}</span>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="analytics-media-card">
                                        <span class="analytics-chip {{ $cameraActive ? 'analytics-chip--success' : 'analytics-chip--muted' }}">
                                            {{ $cameraActive ? 'Camera On' : 'Camera Off' }}
                                        </span>
                                        <div class="analytics-metric">
                                            <strong>{{ $formatSeconds($attendee['webcam_total_seconds'] ?? 0) }}</strong>
                                            <span>{{ $attendee['webcam_open_count'] ?? 0 }} opens</span>
                                            <span>Opened: {{ $formatDate($attendee['webcam_opened_at'] ?? null) }}</span>
                                            <span>Closed: {{ $formatDate($attendee['webcam_closed_at'] ?? null) }}</span>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <span
                                        class="analytics-status {{ $isOnline ? 'analytics-status--online' : 'analytics-status--offline' }}">
                                        {{ $isOnline ? 'Online' : 'Offline' }}
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5">
                                    <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: 980px;
            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: top;
            white-space: normal;
        }

        .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: 190px;
        }

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

        .analytics-user a:hover {
            color: #2563eb;
        }

        .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-user-meta {
            color: #64748b;
            display: flex;
            flex-wrap: wrap;
            font-size: 0.75rem;
            font-weight: 700;
            gap: 0.4rem;
            margin: 0.45rem 0 0 2.9rem;
        }

        .analytics-user-meta span {
            background: #f8fafc;
            border: 1px solid #e5e7eb;
            border-radius: 999px;
            padding: 0.22rem 0.48rem;
        }

        .analytics-metric {
            display: grid;
            gap: 0.35rem;
            min-width: 180px;
        }

        .analytics-metric strong {
            color: #0f172a;
            font-size: 0.95rem;
            font-weight: 900;
            line-height: 1.1;
        }

        .analytics-metric span {
            color: #64748b;
            font-size: 0.78rem;
            font-weight: 700;
            line-height: 1.25;
        }

        .analytics-media-card {
            display: grid;
            gap: 0.55rem;
            min-width: 190px;
        }

        .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: #2563eb;
            border-color: #2563eb;
            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