{% extends "base.html" %}
{% load humanize %}

{% block title %}{{ course.name }} | Student Portal{% endblock %}
{% block nav_courses_student %}active{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <a href="{% url 'portal:student_courses' %}" class="text-muted small d-block mb-1">
            <i class="fa-solid fa-arrow-left me-1"></i> My Courses
        </a>
        <h2><i class="fa-solid fa-book me-2"></i>{{ course.name }}</h2>
        <p class="text-muted mb-0">
            {{ course.program.name }}
            <span class="badge bg-secondary ms-1">Year {{ course.year }}</span>
            {% if course.code %}<span class="badge bg-light text-dark border ms-1 font-monospace">{{ course.code }}</span>{% endif %}
        </p>
    </div>
</div>

<div class="row g-4">
    <!-- Materials -->
    <div class="col-lg-8">
        <div class="portal-card">
            <div class="portal-card-header">
                <h6 class="mb-0"><i class="fa-solid fa-photo-film me-2"></i>Course Materials
                    <span class="badge bg-secondary ms-1">{{ materials|length }}</span>
                </h6>
            </div>
            <div class="portal-card-body p-0">
                {% if materials %}
                <div class="accordion accordion-flush" id="materialsAccordion">
                    {% for m in materials %}
                    <div class="accordion-item border-0 border-bottom">
                        <h2 class="accordion-header">
                            <button class="accordion-button {% if not forloop.first %}collapsed{% endif %} py-3"
                                    type="button" data-bs-toggle="collapse"
                                    data-bs-target="#material{{ m.pk }}">
                                <span class="me-3"><i class="{{ m.icon_class }}"></i></span>
                                <span class="fw-semibold">{{ m.title }}</span>
                                <span class="badge bg-light text-dark border ms-2 small">{{ m.get_material_type_display }}</span>
                            </button>
                        </h2>
                        <div id="material{{ m.pk }}"
                             class="accordion-collapse collapse {% if forloop.first %}show{% endif %}"
                             data-bs-parent="#materialsAccordion">
                            <div class="accordion-body pt-2">
                                {% if m.description %}
                                <p class="text-muted small mb-3 mt-2">{{ m.description }}</p>
                                {% endif %}

                                {% if m.material_type == 'youtube' and m.youtube_video_id %}
                                <div class="yt-facade mb-2" data-vid="{{ m.youtube_video_id }}">
                                    <!-- Thumbnail shown first -->
                                    <div class="yt-thumb-area">
                                        <img class="yt-thumb-img"
                                             src="https://img.youtube.com/vi/{{ m.youtube_video_id }}/maxresdefault.jpg"
                                             onerror="this.src='https://img.youtube.com/vi/{{ m.youtube_video_id }}/hqdefault.jpg'"
                                             alt="{{ m.title }}" loading="lazy">
                                        <div class="yt-play-overlay">
                                            <div class="yt-play-circle">
                                                <i class="fa-solid fa-play"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- YT.Player mounts here after click -->
                                    <div class="yt-player-mount" style="display:none;width:100%;aspect-ratio:16/9;background:#000;"></div>
                                    <!-- Shown only if onError fires (e.g. Error 153) -->
                                    <div class="yt-embed-fallback" style="display:none;position:relative;background:#111;border-radius:8px;overflow:hidden;">
                                        <img src="https://img.youtube.com/vi/{{ m.youtube_video_id }}/hqdefault.jpg"
                                             alt="{{ m.title }}" style="width:100%;display:block;opacity:.3;">
                                        <div style="position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;text-align:center;">
                                            <p style="color:#fff;font-size:.9rem;margin-bottom:1rem;">This video can't be embedded here.</p>
                                            <a href="{{ m.youtube_url }}" target="_blank" rel="noopener noreferrer"
                                               style="background:#ff0000;color:#fff;padding:.6rem 1.5rem;border-radius:30px;font-weight:700;text-decoration:none;">
                                                <i class="fa-brands fa-youtube me-1"></i> Watch on YouTube
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <a href="{{ m.youtube_url }}" target="_blank" rel="noopener noreferrer"
                                   class="btn btn-sm btn-outline-danger">
                                    <i class="fa-brands fa-youtube me-1"></i> Watch on YouTube
                                </a>

                                {% elif m.material_type == 'upload' and m.file %}
                                {% if m.is_pdf %}
                                <div class="mb-2">
                                    <iframe src="{{ m.file.url }}"
                                            style="width:100%;height:520px;border:1px solid #dee2e6;border-radius:6px;"
                                            title="{{ m.title }}">
                                        <p class="text-muted small p-3">
                                            Your browser cannot display this PDF inline.
                                            <a href="{{ m.file.url }}" target="_blank">Download it instead.</a>
                                        </p>
                                    </iframe>
                                </div>
                                {% endif %}
                                <a href="{{ m.file.url }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                    <i class="fa-solid fa-download me-1"></i>
                                    Download {{ m.file_extension|upper }} File
                                </a>

                                {% elif m.material_type == 'link' and m.external_url %}
                                <a href="{{ m.external_url }}" target="_blank" rel="noopener noreferrer"
                                   class="btn btn-sm btn-outline-info">
                                    <i class="fa-solid fa-arrow-up-right-from-square me-1"></i>
                                    Open Link
                                </a>

                                {% elif m.material_type == 'note' and m.text_content %}
                                <div class="p-3 bg-light rounded border" style="white-space:pre-wrap;font-size:0.9rem;">{{ m.text_content }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-center py-5 text-muted">
                    <i class="fa-solid fa-photo-film fa-2x mb-3 d-block" style="opacity:0.3;"></i>
                    <p class="mb-0">No materials published yet. Check back soon.</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Side panels: assignments + quiz -->
    <div class="col-lg-4">

        <!-- Assignments panel -->
        <div class="portal-card mb-4" style="border-top:4px solid var(--color-primary);">
            <div class="portal-card-header">
                <h6 class="mb-0"><i class="fa-solid fa-file-pen me-2"></i>Assignments</h6>
            </div>
            <div class="portal-card-body">
                <p class="text-muted small mb-3">Submit your work and view teacher feedback.</p>
                <a href="{% url 'content:student_assignments' course_pk=course.pk %}" class="btn btn-primary btn-sm w-100">
                    <i class="fa-solid fa-file-pen me-1"></i> View Assignments
                </a>
            </div>
        </div>

    {% if quiz %}
    <!-- Quiz panel -->
    <div>
        <div class="portal-card" style="border-top: 4px solid var(--color-secondary);">
            <div class="portal-card-header">
                <h6 class="mb-0"><i class="fa-solid fa-circle-question me-2"></i>{{ quiz.title }}</h6>
            </div>
            <div class="portal-card-body">
                {% if quiz.description %}
                <p class="text-muted small mb-3">{{ quiz.description }}</p>
                {% endif %}

                <dl class="row small mb-3">
                    <dt class="col-7 text-muted">Questions</dt>
                    <dd class="col-5">{{ quiz.question_count }}</dd>
                    <dt class="col-7 text-muted">Pass Score</dt>
                    <dd class="col-5">{{ quiz.pass_score }}%</dd>
                    <dt class="col-7 text-muted">Max Attempts</dt>
                    <dd class="col-5">{% if quiz.max_attempts == 0 %}Unlimited{% else %}{{ quiz.max_attempts }}{% endif %}</dd>
                    <dt class="col-7 text-muted">Your Attempts</dt>
                    <dd class="col-5">{{ quiz_attempts }}{% if quiz.max_attempts > 0 %}/{{ quiz.max_attempts }}{% endif %}</dd>
                </dl>

                {% if quiz_last_score is not None %}
                <div class="alert {% if quiz_last_score >= quiz.pass_score %}alert-success{% else %}alert-warning{% endif %} py-2 small mb-3">
                    <i class="fa-solid {% if quiz_last_score >= quiz.pass_score %}fa-circle-check{% else %}fa-circle-xmark{% endif %} me-1"></i>
                    Last score: <strong>{{ quiz_last_score }}%</strong>
                    {% if quiz_last_score >= quiz.pass_score %}— Passed!{% else %}— Not yet passed{% endif %}
                </div>
                {% endif %}

                {% if quiz_can_attempt %}
                <a href="{% url 'content:student_quiz' course_pk=course.pk %}" class="btn btn-primary w-100">
                    <i class="fa-solid fa-play me-1"></i>
                    {% if quiz_attempts == 0 %}Start Quiz{% else %}Retake Quiz{% endif %}
                </a>
                {% else %}
                <button class="btn btn-secondary w-100" disabled>
                    <i class="fa-solid fa-lock me-1"></i> No Attempts Remaining
                </button>
                {% endif %}
            </div>
        </div>
    </div>
    {% endif %}

    </div><!-- /col-lg-4 side panels -->
</div><!-- /row -->
{% endblock %}

{% block extra_css %}
<style>
.yt-facade { border-radius: 8px; overflow: hidden; background: #000; }
.yt-thumb-area {
    position: relative;
    cursor: pointer;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.yt-thumb-img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: filter .25s;
}
.yt-thumb-area:hover .yt-thumb-img { filter: brightness(.7); }
.yt-play-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.yt-play-circle {
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(255,0,0,.88);
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s;
    box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
.yt-thumb-area:hover .yt-play-circle { transform: scale(1.12); }
.yt-play-circle i { color: #fff; font-size: 22px; margin-left: 4px; }
</style>
{% endblock %}

{% block extra_js %}
<script>
/* YouTube IFrame API — lazy-load, proper onError handling for Error 153 */
var YT_READY = false;
var YT_QUEUE = [];

function onYouTubeIframeAPIReady() {
    YT_READY = true;
    YT_QUEUE.forEach(function(fn) { fn(); });
    YT_QUEUE = [];
}

function ytLoadVideo(facade) {
    if (facade.dataset.loaded) return;
    facade.dataset.loaded = '1';

    var vid         = facade.dataset.vid;
    var thumbArea   = facade.querySelector('.yt-thumb-area');
    var playerMount = facade.querySelector('.yt-player-mount');
    var fallback    = facade.querySelector('.yt-embed-fallback');

    thumbArea.style.display   = 'none';
    playerMount.style.display = 'block';

    function createPlayer() {
        if (!document.body.contains(playerMount)) return;
        new YT.Player(playerMount, {
            videoId: vid,
            playerVars: { autoplay: 1, rel: 0, modestbranding: 1 },
            width: '100%',
            height: '100%',
            events: {
                onReady: function(e) { e.target.playVideo(); },
                onError: function() {
                    playerMount.style.display = 'none';
                    fallback.style.display    = 'block';
                }
            }
        });
    }

    if (YT_READY) {
        createPlayer();
    } else {
        YT_QUEUE.push(createPlayer);
        if (!document.getElementById('yt-api-script')) {
            var s = document.createElement('script');
            s.id  = 'yt-api-script';
            s.src = 'https://www.youtube.com/iframe_api';
            document.head.appendChild(s);
        }
    }
}

document.addEventListener('click', function(e) {
    var thumb = e.target.closest('.yt-thumb-area');
    if (!thumb) return;
    ytLoadVideo(thumb.closest('.yt-facade'));
});

document.addEventListener('keydown', function(e) {
    if (e.key !== 'Enter' && e.key !== ' ') return;
    var el = document.activeElement;
    if (el && el.classList.contains('yt-facade')) { e.preventDefault(); ytLoadVideo(el); }
});
</script>
{% endblock %}