{{-- Shared audio/video player for classroom workspace files --}}
<div class="modal fade" id="classroomMediaPlayerModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title h5 mb-0 text-truncate pe-2" id="classroom-media-player-title">{{ __('public.classroom_show.play_media') }}</h3>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('public.classroom_show.aria_close') }}"></button>
            </div>
            <div class="modal-body">
                <div id="classroom-media-player-host" class="w-100"></div>
                <div id="classroom-media-player-error" class="text-danger small mt-2 d-none"></div>
            </div>
            <div class="modal-footer">
                <a id="classroom-media-download-link" href="#" class="btn btn-outline-secondary btn-sm" download>
                    <i class="fas fa-download me-1"></i>{{ __('public.classroom_show.download') }}
                </a>
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{{ __('public.classroom_show.close') }}</button>
            </div>
        </div>
    </div>
</div>
<style>
    #classroom-media-player-host audio {
        display: block;
        width: 100%;
        min-height: 48px;
    }
    #classroom-media-player-host video {
        display: block;
        width: 100%;
        max-height: 70vh;
        background: #000;
        border-radius: 0.375rem;
    }
</style>
<script>
(function () {
    if (window.__classroomMediaPlayerBound) return;
    window.__classroomMediaPlayerBound = true;

    var pendingOpts = null;

    function mimeFromName(name, kind) {
        var ext = String(name || '').split('.').pop().toLowerCase();
        var map = {
            mp3: 'audio/mpeg',
            wav: 'audio/wav',
            ogg: 'audio/ogg',
            oga: 'audio/ogg',
            m4a: 'audio/mp4',
            aac: 'audio/aac',
            flac: 'audio/flac',
            mp4: 'video/mp4',
            webm: 'video/webm',
            mov: 'video/quicktime',
            m4v: 'video/mp4',
            ogv: 'video/ogg'
        };
        if (map[ext]) return map[ext];
        return kind === 'video' ? 'video/mp4' : 'audio/mpeg';
    }

    function stopAndClear(host) {
        if (!host) return;
        var media = host.querySelector('audio, video');
        if (media) {
            try { media.pause(); } catch (e) {}
            try {
                media.removeAttribute('src');
                media.querySelectorAll('source').forEach(function (s) { s.remove(); });
                media.load();
            } catch (e2) {}
        }
        host.innerHTML = '';
    }

    function showError(msg) {
        var errEl = document.getElementById('classroom-media-player-error');
        if (!errEl) return;
        if (msg) {
            errEl.textContent = msg;
            errEl.classList.remove('d-none');
        } else {
            errEl.textContent = '';
            errEl.classList.add('d-none');
        }
    }

    function mountMedia(opts) {
        var host = document.getElementById('classroom-media-player-host');
        if (!host || !opts || !opts.url) return;

        stopAndClear(host);
        showError('');

        var kind = opts.kind === 'video' ? 'video' : 'audio';
        var el = document.createElement(kind);
        el.controls = true;
        el.preload = 'auto';
        el.setAttribute('controlsList', 'nodownload');
        if (kind === 'video') {
            el.playsInline = true;
            el.setAttribute('playsinline', '');
        }

        var source = document.createElement('source');
        source.src = opts.url;
        source.type = mimeFromName(opts.name, kind);
        el.appendChild(source);
        // Fallback src for browsers that ignore <source> type mismatches
        el.src = opts.url;

        el.addEventListener('error', function () {
            showError(@json(__('public.classroom_show.media_play_error')));
        });

        host.appendChild(el);

        var tryPlay = function () {
            var p = el.play();
            if (p && typeof p.then === 'function') {
                p.catch(function () {
                    // Autoplay blocked — controls still work for a manual click.
                });
            }
        };

        if (el.readyState >= 2) {
            tryPlay();
        } else {
            el.addEventListener('loadeddata', tryPlay, { once: true });
            el.addEventListener('canplay', tryPlay, { once: true });
            try { el.load(); } catch (e) {}
        }
    }

    function openClassroomMediaPlayer(opts) {
        var modalEl = document.getElementById('classroomMediaPlayerModal');
        var host = document.getElementById('classroom-media-player-host');
        var titleEl = document.getElementById('classroom-media-player-title');
        var downloadEl = document.getElementById('classroom-media-download-link');
        if (!modalEl || !host || !window.bootstrap) return;

        pendingOpts = {
            url: opts.url || '',
            name: opts.name || '',
            kind: opts.kind === 'video' ? 'video' : 'audio',
        };

        stopAndClear(host);
        showError('');
        if (titleEl) titleEl.textContent = pendingOpts.name || '';
        if (downloadEl) {
            var base = pendingOpts.url || '#';
            if (base !== '#' && base.indexOf('download=') === -1) {
                downloadEl.href = base + (base.indexOf('?') >= 0 ? '&' : '?') + 'download=1';
            } else {
                downloadEl.href = base;
            }
            downloadEl.setAttribute('download', pendingOpts.name || '');
        }

        var modal = window.bootstrap.Modal.getOrCreateInstance(modalEl);
        // If already open, remount immediately; otherwise wait until fully shown
        // so the browser can load media outside display:none.
        if (modalEl.classList.contains('show')) {
            mountMedia(pendingOpts);
        } else {
            modal.show();
        }
    }

    document.addEventListener('click', function (e) {
        var btn = e.target.closest('[data-classroom-media-play]');
        if (!btn) return;
        e.preventDefault();
        e.stopPropagation();
        openClassroomMediaPlayer({
            url: btn.getAttribute('data-media-url') || btn.getAttribute('href') || '',
            name: btn.getAttribute('data-media-name') || '',
            kind: btn.getAttribute('data-media-kind') || 'audio',
        });
    });

    var modalEl = document.getElementById('classroomMediaPlayerModal');
    if (modalEl) {
        modalEl.addEventListener('shown.bs.modal', function () {
            if (pendingOpts) mountMedia(pendingOpts);
        });
        modalEl.addEventListener('hidden.bs.modal', function () {
            pendingOpts = null;
            stopAndClear(document.getElementById('classroom-media-player-host'));
            showError('');
        });
    }

    window.openClassroomMediaPlayer = openClassroomMediaPlayer;
    window.classroomUploadMediaKind = function (mimeType, originalName) {
        var mime = String(mimeType || '').toLowerCase().trim();
        if (mime.indexOf('audio/') === 0) return 'audio';
        if (mime.indexOf('video/') === 0) return 'video';
        var name = String(originalName || '');
        var ext = name.indexOf('.') >= 0 ? name.split('.').pop().toLowerCase() : '';
        if (['mp3', 'wav', 'ogg', 'oga', 'm4a', 'aac', 'flac', 'wma'].indexOf(ext) !== -1) return 'audio';
        if (['mp4', 'webm', 'mov', 'm4v', 'ogv', 'avi', 'mkv'].indexOf(ext) !== -1) return 'video';
        return null;
    };
    window.classroomUploadFileIcon = function (mimeType, originalName) {
        var kind = window.classroomUploadMediaKind(mimeType, originalName);
        if (kind === 'audio') return 'fas fa-file-audio text-primary';
        if (kind === 'video') return 'fas fa-file-video text-primary';
        return 'fas fa-file text-primary';
    };
    window.classroomUploadExtIconUrl = function (mimeType, originalName) {
        var aliases = {
            jpeg: 'jpg', jpe: 'jpg', gif: 'giff', tif: 'tiff',
            oga: 'mp3', ogg: 'mp3', m4a: 'mp3', aac: 'mp3', flac: 'wav',
            webm: 'mp4', m4v: 'mp4', ogv: 'mp4', mkv: 'mp4',
            xls: 'xsl', xlsx: 'xsl', pptx: 'ppt'
        };
        var known = {
            jpg: 1, png: 1, pdf: 1, mp3: 1, wav: 1, wma: 1, mid: 1,
            mp4: 1, mov: 1, mpeg: 1, avi: 1, flv: 1,
            doc: 1, docx: 1, ppt: 1, txt: 1, rar: 1, zip: 1,
            svg: 1, bmp: 1, tiff: 1, giff: 1, raw: 1,
            html: 1, xml: 1, csv: 1, xsl: 1, ps: 1, psd: 1,
            pub: 1, dll: 1, exe: 1, iso: 1, java: 1, ai: 1,
            eps: 1, dwg: 1, crd: 1, mdb: 1, rss: 1
        };
        var name = String(originalName || '');
        var ext = name.indexOf('.') >= 0 ? name.split('.').pop().toLowerCase() : '';
        if (aliases[ext]) ext = aliases[ext];
        if (ext && known[ext]) return '/assets/images/ext/' + ext + '.png';

        var mime = String(mimeType || '').toLowerCase().trim();
        if (mime.indexOf('image/') === 0) return '/assets/images/ext/png.png';
        if (mime === 'application/pdf') return '/assets/images/ext/pdf.png';
        if (mime.indexOf('audio/') === 0) return '/assets/images/ext/mp3.png';
        if (mime.indexOf('video/') === 0) return '/assets/images/ext/mp4.png';
        var kind = window.classroomUploadMediaKind(mimeType, originalName);
        if (kind === 'audio') return '/assets/images/ext/mp3.png';
        if (kind === 'video') return '/assets/images/ext/mp4.png';
        return '/assets/images/ext/txt.png';
    };
    window.classroomUploadExtIconHtml = function (mimeType, originalName) {
        var src = window.classroomUploadExtIconUrl(mimeType, originalName);
        var name = String(originalName || 'File');
        return '<img src="' + src + '" alt="" class="classroom-upload-ext-icon flex-shrink-0" width="22" height="22" loading="lazy">'
            + '<span class="classroom-upload-name">' + String(name)
                .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
            + '</span>';
    };
})();
</script>