{% extends 'base.html' %}
{% load i18n static %}

{% block title %}{% trans "Live Classroom" %} - {{ subject.name_en }}{% endblock %}

{% block content %}
<div class="container-fluid p-0" style="height: calc(100vh - 76px); margin-top: 76px;"> 

    {% with youtube_id=subject.get_youtube_id %}
    
    {% if subject.google_meet_link %}
        <!-- Google Meet Mode (Highest Priority) -->
        <div class="d-flex flex-column align-items-center justify-content-center h-100 bg-light">
            <div class="text-center p-5 bg-white shadow rounded">
                <h2 class="mb-4">{% trans "Live Class via Google Meet" %}</h2>
                <p class="mb-4 text-muted">{% trans "This class is being held on Google Meet. Click the button below to join." %}</p>
                <a href="{{ subject.google_meet_link }}" target="_blank" class="btn btn-primary btn-lg">
                    <i class="fas fa-video me-2"></i> {% trans "Join Google Meet" %}
                </a>
            </div>
        </div>

    {% elif not is_teacher and youtube_id %}
        <!-- Broadcast Mode for Students (YouTube) -->
        <div class="row h-100 m-0">
            <!-- Video Player -->
            <div class="col-md-9 p-0 h-100 bg-black d-flex align-items-center justify-content-center">
                <iframe 
                    width="100%" 
                    height="100%" 
                    src="https://www.youtube.com/embed/{{ youtube_id }}?autoplay=1" 
                    title="YouTube video player" 
                    frameborder="0" 
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                    allowfullscreen>
                </iframe>
            </div>
            <!-- Chat Window -->
            <div class="col-md-3 p-0 h-100 border-start">
                <iframe 
                    width="100%" 
                    height="100%" 
                    src="https://www.youtube.com/live_chat?v={{ youtube_id }}&embed_domain={{ request.get_host|cut:':8000'|cut:':80' }}" 
                    frameborder="0">
                </iframe>
            </div>
        </div>

    {% else %}
        <!-- Jitsi Meeting (Teacher Host or Regular Class) -->
        <div id="meet" style="width: 100%; height: 100%;"></div>
    {% endif %}

    {% endwith %}

</div>

{% with youtube_id=subject.get_youtube_id %}
<!-- Only load Jitsi if we are in Jitsi mode -->
<!-- Jitsi Mode conditions: NO Google Meet Link AND (Teacher OR No YouTube ID) -->
{% if not subject.google_meet_link %}
    {% if is_teacher or not youtube_id %}
    <script src='https://meet.jit.si/external_api.js'></script>
    <script>
        const domain = 'meet.jit.si';
        const options = {
            roomName: '{{ room_name }}',
            width: '100%',
            height: '100%',
            parentNode: document.querySelector('#meet'),
            userInfo: {
                displayName: '{{ user_display_name }}'
            },
            configOverwrite: {
                startWithAudioMuted: true,
                startWithVideoMuted: true,
                {% if not is_teacher %}
                // Hide some controls for students
                disableRemoteMute: true,
                {% endif %}
                prejoinPageEnabled: false
            },
            interfaceConfigOverwrite: {
                // Customize toolbar if needed
                SHOW_JITSI_WATERMARK: false,
                DEFAULT_BACKGROUND: 'white',
                DEFAULT_LOCAL_DISPLAY_NAME: '{{ user_display_name }}',
                TOOLBAR_BUTTONS: [
                    'microphone', 'camera', 'closedcaptions', 'desktop', 'fullscreen',
                    'fodeviceselection', 'hangup', 'profile', 'chat', 'recording',
                    'livestreaming', 'etherpad', 'sharedvideo', 'settings', 'raisehand',
                    'videoquality', 'filmstrip', 'invite', 'feedback', 'stats', 'shortcuts',
                    'tileview', 'videobackgroundblur', 'download', 'help', 'mute-everyone',
                    'security'
                ],
            }
        };
        const api = new JitsiMeetExternalAPI(domain, options);
        
        // Redirect when hanging up
        api.addEventListeners({
            videoConferenceLeft: function () {
                window.location.href = "{% url 'profile' %}";
            }
        });
    </script>
    {% endif %}
{% endif %}
{% endwith %}

{% endblock %}