{% extends "base.html" %}

{% block title %}Content — {{ course.name }}{% endblock %}
{% if user.is_student %}{% block nav_courses_student %}active{% endblock %}
{% elif user.is_teacher %}{% block nav_teacher_courses %}active{% endblock %}
{% else %}{% block nav_courses %}active{% endblock %}{% endif %}

{% block content %}
<div class="page-header">
    <div>
        <a href="{% if user.is_teacher %}{% url 'portal:teacher_courses' %}{% else %}{% url 'portal:course_list' %}{% endif %}"
           class="text-muted small d-block mb-1">
            <i class="fa-solid fa-arrow-left me-1"></i> Back to Courses
        </a>
        <h2><i class="fa-solid fa-photo-film 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>
    <a href="{% url 'content:material_add' course_pk=course.pk %}" class="btn btn-primary">
        <i class="fa-solid fa-plus me-1"></i> Add Material
    </a>
</div>

<div class="row g-4">
    <!-- Materials list -->
    <div class="col-lg-8">
        <div class="portal-card">
            <div class="portal-card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0"><i class="fa-solid fa-list me-2"></i>Course Materials
                    <span class="badge bg-secondary ms-1">{{ materials|length }}</span>
                </h6>
                <a href="{% url 'content:material_add' course_pk=course.pk %}" class="btn btn-xs btn-outline-primary">
                    <i class="fa-solid fa-plus me-1"></i> Add
                </a>
            </div>
            <div class="portal-card-body p-0">
                {% if materials %}
                <ul class="list-group list-group-flush">
                    {% for m in materials %}
                    <li class="list-group-item">
                        <div class="d-flex align-items-center gap-3">
                            <!-- Type icon -->
                            <div class="flex-shrink-0" style="width:36px;height:36px;display:flex;align-items:center;
                                 justify-content:center;background:#f0f4f8;border-radius:8px;">
                                <i class="{{ m.icon_class }} fa-lg"></i>
                            </div>

                            <!-- Info -->
                            <div class="flex-grow-1 min-width-0">
                                <div class="d-flex align-items-center gap-2 flex-wrap">
                                    <span class="fw-semibold">{{ m.title }}</span>
                                    <span class="badge bg-light text-dark border small">{{ m.get_material_type_display }}</span>
                                    {% if m.is_published %}
                                    <span class="badge bg-success-subtle text-success-emphasis">Published</span>
                                    {% else %}
                                    <span class="badge bg-warning-subtle text-warning-emphasis">Draft</span>
                                    {% endif %}
                                </div>
                                {% if m.description %}
                                <div class="text-muted small mt-1">{{ m.description|truncatechars:80 }}</div>
                                {% endif %}
                            </div>

                            <!-- Actions -->
                            <div class="d-flex gap-1 flex-shrink-0">
                                <!-- Preview button -->
                                <button type="button"
                                        class="btn btn-xs btn-outline-info"
                                        title="Preview"
                                        data-bs-toggle="modal"
                                        data-bs-target="#previewModal"
                                        data-pk="{{ m.pk }}"
                                        data-title="{{ m.title }}">
                                    <i class="fa-solid fa-eye"></i>
                                </button>
                                <!-- Publish toggle -->
                                <form method="post" action="{% url 'content:material_toggle' pk=m.pk %}">
                                    {% csrf_token %}
                                    <button type="submit"
                                            class="btn btn-xs {% if m.is_published %}btn-outline-warning{% else %}btn-outline-success{% endif %}"
                                            title="{% if m.is_published %}Unpublish{% else %}Publish{% endif %}">
                                        <i class="fa-solid {% if m.is_published %}fa-eye-slash{% else %}fa-check{% endif %}"></i>
                                    </button>
                                </form>
                                <!-- Edit -->
                                <a href="{% url 'content:material_edit' pk=m.pk %}" class="btn btn-xs btn-outline-secondary" title="Edit">
                                    <i class="fa-solid fa-pen"></i>
                                </a>
                                <!-- Delete -->
                                <form method="post" action="{% url 'content:material_delete' pk=m.pk %}"
                                      onsubmit="return confirm('Delete &quot;{{ m.title }}&quot;?')">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-xs btn-outline-danger" title="Delete">
                                        <i class="fa-solid fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </li>
                    {% endfor %}
                </ul>
                {% 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-2">No materials yet.</p>
                    <a href="{% url 'content:material_add' course_pk=course.pk %}" class="btn btn-sm btn-primary">
                        <i class="fa-solid fa-plus me-1"></i> Add First Material
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Quiz panel -->
    <div class="col-lg-4">
        <div class="portal-card">
            <div class="portal-card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0"><i class="fa-solid fa-circle-question me-2"></i>Quiz</h6>
                {% if quiz %}
                <span class="badge {% if quiz.is_enabled %}bg-success{% else %}bg-secondary{% endif %}">
                    {% if quiz.is_enabled %}Enabled{% else %}Disabled{% endif %}
                </span>
                {% endif %}
            </div>
            <div class="portal-card-body">
                {% if quiz %}
                <dl class="row mb-3 small">
                    <dt class="col-7 text-muted">Questions</dt>
                    <dd class="col-5">{{ quiz.question_count }}</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">Pass Score</dt>
                    <dd class="col-5">{{ quiz.pass_score }}%</dd>
                </dl>
                <a href="{% url 'content:quiz_builder' course_pk=course.pk %}" class="btn btn-sm btn-outline-primary w-100">
                    <i class="fa-solid fa-screwdriver-wrench me-1"></i> Manage Quiz
                </a>
                {% else %}
                <p class="text-muted small mb-3">No quiz set up yet. Create one to add questions.</p>
                <a href="{% url 'content:quiz_builder' course_pk=course.pk %}" class="btn btn-sm btn-primary w-100">
                    <i class="fa-solid fa-plus me-1"></i> Create Quiz
                </a>
                {% endif %}
            </div>
        </div>

        <div class="portal-card mt-3">
            <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">Set assignments for students to submit work.</p>
                <a href="{% url 'content:teacher_assignment_list' course_pk=course.pk %}" class="btn btn-sm btn-outline-secondary w-100">
                    <i class="fa-solid fa-file-pen me-1"></i> Manage Assignments
                </a>
            </div>
        </div>

        <div class="portal-card mt-3">
            <div class="portal-card-body">
                <p class="text-muted small mb-0">
                    <i class="fa-solid fa-circle-info me-1" style="color:var(--color-secondary);"></i>
                    <strong>Draft vs Published:</strong> Only published materials are visible to students.
                    Use drafts to prepare content before releasing it.
                </p>
            </div>
        </div>
    </div>
</div>

<!-- ================================================================
     Hidden preview content containers (one per material)
     JavaScript clones these into the modal on demand.
================================================================ -->
{% for m in materials %}
<div class="d-none" id="preview-src-{{ m.pk }}" data-title="{{ m.title }}">
    {% if m.material_type == 'youtube' %}
        {% if m.youtube_video_id %}
        <div class="yt-facade" data-vid="{{ m.youtube_video_id }}">
            <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>
            <div class="yt-player-mount" style="display:none;width:100%;aspect-ratio:16/9;background:#000;"></div>
            <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>
        <div class="text-center py-2 border-top mt-2">
            <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>
        </div>
        {% else %}
        <div class="text-center py-5 text-muted">
            <i class="fa-brands fa-youtube fa-3x mb-3 d-block text-danger"></i>
            <p>YouTube URL is not set or could not be parsed.</p>
            <p class="small">{{ m.youtube_url }}</p>
        </div>
        {% endif %}

    {% elif m.material_type == 'upload' %}
        {% if m.file %}
            {% if m.is_pdf %}
            <iframe src="{{ m.file.url }}"
                    style="width:100%;height:600px;border:0;"
                    title="{{ m.title }}">
                <p>Your browser cannot display this PDF.
                   <a href="{{ m.file.url }}" target="_blank">Download it instead.</a>
                </p>
            </iframe>
            {% else %}
            <div class="text-center py-5">
                <i class="fa-solid fa-file fa-3x text-primary mb-3 d-block"></i>
                <p class="text-muted mb-3">
                    <strong>{{ m.title }}</strong><br>
                    <span class="badge bg-light text-dark border font-monospace">{{ m.file_extension|upper }}</span>
                </p>
                <a href="{{ m.file.url }}" target="_blank" class="btn btn-primary">
                    <i class="fa-solid fa-download me-1"></i> Download File
                </a>
            </div>
            {% endif %}
        {% else %}
        <div class="text-center py-5 text-muted">
            <i class="fa-solid fa-file-circle-exclamation fa-3x mb-3 d-block"></i>
            <p>No file uploaded yet.</p>
        </div>
        {% endif %}

    {% elif m.material_type == 'link' %}
    <div class="text-center py-5">
        <i class="fa-solid fa-link fa-3x text-info mb-3 d-block"></i>
        <p class="text-muted mb-1 small">External Link</p>
        <p class="fw-semibold mb-4" style="word-break:break-all;">{{ m.external_url }}</p>
        <a href="{{ m.external_url }}" target="_blank" rel="noopener noreferrer"
           class="btn btn-outline-info">
            <i class="fa-solid fa-arrow-up-right-from-square me-1"></i> Open in New Tab
        </a>
    </div>

    {% elif m.material_type == 'note' %}
    <div class="p-4">
        {% if m.text_content %}
        <div class="bg-light rounded border p-3"
             style="white-space:pre-wrap;font-size:0.95rem;max-height:520px;overflow-y:auto;line-height:1.7;">{{ m.text_content }}</div>
        {% else %}
        <p class="text-muted text-center py-4">No text content yet.</p>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endfor %}

<!-- ================================================================
     Preview Modal (single, reused for all materials)
================================================================ -->
<div class="modal fade" id="previewModal" tabindex="-1" aria-labelledby="previewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header" style="border-bottom:1px solid #eee;">
                <h5 class="modal-title" id="previewModalLabel">
                    <i class="fa-solid fa-eye me-2 text-muted"></i>
                    <span id="previewModalTitle">Preview</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0" id="previewModalBody" style="min-height:200px;">
                <!-- Populated by JavaScript -->
            </div>
            <div class="modal-footer justify-content-between" id="previewModalFooter" style="border-top:1px solid #eee;">
                <span class="text-muted small" id="previewModalMeta"></span>
                <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
{% 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 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); }
});

document.addEventListener('DOMContentLoaded', () => {
    const modal    = document.getElementById('previewModal');
    const titleEl  = document.getElementById('previewModalTitle');
    const bodyEl   = document.getElementById('previewModalBody');
    const metaEl   = document.getElementById('previewModalMeta');

    const TYPE_LABELS = {
        youtube: 'YouTube Video',
        upload:  'File Upload',
        link:    'External Link',
        note:    'Text / Notes',
    };

    modal.addEventListener('show.bs.modal', event => {
        const btn     = event.relatedTarget;
        const pk      = btn.getAttribute('data-pk');
        const title   = btn.getAttribute('data-title');
        const srcDiv  = document.getElementById('preview-src-' + pk);

        titleEl.textContent = title;

        if (srcDiv) {
            // Deep-clone so the hidden original stays intact
            bodyEl.innerHTML = '';
            bodyEl.appendChild(srcDiv.cloneNode(true));
            // Make the clone visible
            bodyEl.firstElementChild.classList.remove('d-none');
        } else {
            bodyEl.innerHTML = '<div class="text-center py-5 text-muted">Preview not available.</div>';
        }

        metaEl.textContent = '';
    });

    // Stop YouTube / iframe playback when modal closes
    modal.addEventListener('hidden.bs.modal', () => {
        bodyEl.innerHTML = '';
        titleEl.textContent = 'Preview';
        metaEl.textContent  = '';
    });
});
</script>
{% endblock %}