/*!
 * MEDIA PLAYER 1.0.0 — auto-mount
 *
 * Panggil CSS + JS ini sekali per halaman, lalu cukup tulis tag <audio> biasa:
 *
 *   <link rel="stylesheet" href="https://cdn.zhyllanfyllah.my.id/cdn/public/css/player/1.0.0.css">
 *   <script src="https://cdn.zhyllanfyllah.my.id/cdn/public/js/player/1.0.0.js" defer></script>
 *
 *   <audio src="lagu.mp3" data-title="Judul" data-artist="Artis"></audio>
 *
 * Beberapa <audio>/<video> dalam satu wadah otomatis menjadi playlist,
 * atau kelompokkan secara eksplisit dengan [data-player-group]:
 *
 *   <div data-player-group>
 *       <audio src="a.mp3" data-title="Lagu A"></audio>
 *       <audio src="b.mp3" data-title="Lagu B"></audio>
 *   </div>
 *
 * Atribut opsional per elemen media:
 *   data-title   -> judul lagu (default: nama berkas)
 *   data-artist  -> nama artis
 *   data-player-skip -> lewati, jangan diubah menjadi player
 *   title        -> dipakai sebagai judul jika data-title tidak ada
 *
 * Konten yang dimuat belakangan (mis. artikel dinamis) bisa di-mount ulang
 * dengan memanggil window.MediaPlayer.init().
 */
(function () {
    'use strict';

    if (window.MediaPlayer && window.MediaPlayer.__autoMountLoaded) return;

    const ICON_PLAY  = '<svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true"><polygon points="3,2 13,8 3,14" fill="currentColor"/></svg>';
    const ICON_PAUSE = '<svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true"><rect x="4" y="2" width="3" height="12" fill="currentColor"/><rect x="9" y="2" width="3" height="12" fill="currentColor"/></svg>';
    const ICON_VOL   = '<svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true"><polygon points="2,6 5,6 8,3 8,13 5,10 2,10" fill="currentColor"/><path d="M10 5 Q12 8 10 11" stroke="currentColor" fill="none" stroke-width="1.2"/><path d="M11.5 3 Q14.5 8 11.5 13" stroke="currentColor" fill="none" stroke-width="1.2"/></svg>';
    const ICON_MUTE  = '<svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true"><polygon points="2,6 5,6 8,3 8,13 5,10 2,10" fill="currentColor"/><line x1="10.5" y1="5.5" x2="14.5" y2="10.5" stroke="currentColor" stroke-width="1.3"/><line x1="14.5" y1="5.5" x2="10.5" y2="10.5" stroke="currentColor" stroke-width="1.3"/></svg>';
    const ICON_PREV  = '<svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true"><rect x="2" y="3" width="2" height="10" fill="currentColor"/><polygon points="13,3 5,8 13,13" fill="currentColor"/></svg>';
    const ICON_NEXT  = '<svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true"><polygon points="3,3 11,8 3,13" fill="currentColor"/><rect x="12" y="3" width="2" height="10" fill="currentColor"/></svg>';
    const ICON_CHEVRON = '<svg class="mp-toggle__chevron" viewBox="0 0 16 16" width="10" height="10" aria-hidden="true"><polyline points="3,6 8,11 13,6" fill="none" stroke="currentColor" stroke-width="1.6"/></svg>';

    function getSource(media) {
        const direct = (media.getAttribute('src') || '').trim();
        if (direct) return direct;
        const source = media.querySelector('source[src]');
        return source ? (source.getAttribute('src') || '').trim() : '';
    }

    function fallbackTitle(src) {
        let name = (src.split('?')[0].split('/').pop() || src).trim();
        try {
            name = decodeURIComponent(name);
        } catch (_) {}
        return name.replace(/\.[a-z0-9]{1,6}$/i, '') || name;
    }

    function readTrack(media) {
        const src = getSource(media);
        if (!src) return null;
        return {
            src: src,
            type: media.tagName.toLowerCase(),
            title: media.getAttribute('data-title') || media.getAttribute('title') || fallbackTitle(src),
            artist: media.getAttribute('data-artist') || ''
        };
    }

    function isEligible(media) {
        if (media.dataset.playerReady === '1') return false;
        if (media.dataset.playerSkip !== undefined) return false;
        if (media.closest('.media-player, .media-player-wrap')) return false;
        return !!getSource(media);
    }

    function escapeHtml(value) {
        return String(value).replace(/[&<>"']/g, function (c) {
            return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
        });
    }

    function createWrap() {
        const wrap = document.createElement('div');
        wrap.className = 'media-player-wrap';
        wrap.innerHTML =
            '<div class="mp-list" data-mp="list"></div>' +
            '<div class="mp-volume-panel" data-mp="volume-panel">' +
                '<div class="mp-volume-slider" data-mp="volume-slider">' +
                    '<div class="mp-volume-fill" data-mp="volume-fill"></div>' +
                    '<div class="mp-volume-handle" data-mp="volume-handle"></div>' +
                '</div>' +
                '<div class="mp-volume-value" data-mp="volume-value">100</div>' +
            '</div>' +
            '<div class="media-player">' +
                '<audio class="mp-audio" data-mp="audio" preload="metadata"></audio>' +
                '<video class="mp-video" data-mp="video" preload="metadata" playsinline></video>' +
                '<div class="mp-controls">' +
                    '<button class="mp-btn" data-mp="prev" type="button" aria-label="Track sebelumnya">' + ICON_PREV + '</button>' +
                    '<button class="mp-btn" data-mp="play" type="button" aria-label="Putar / Jeda"></button>' +
                    '<button class="mp-btn" data-mp="next" type="button" aria-label="Track berikutnya">' + ICON_NEXT + '</button>' +
                    '<div class="mp-progress" data-mp="progress" role="slider" tabindex="0" aria-label="Posisi media" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">' +
                        '<div class="mp-progress-buffered" data-mp="buffered"></div>' +
                        '<div class="mp-progress-fill" data-mp="fill"></div>' +
                        '<div class="mp-progress-handle" data-mp="handle"></div>' +
                    '</div>' +
                    '<div class="mp-time" data-mp="time">0:00 / 0:00</div>' +
                    '<button class="mp-btn" data-mp="volume" type="button" aria-label="Volume"></button>' +
                '</div>' +
                '<button class="mp-toggle" data-mp="toggle" type="button" aria-expanded="false">' +
                    '<span class="mp-toggle__label">Playlist</span>' + ICON_CHEVRON +
                '</button>' +
            '</div>';
        return wrap;
    }

    function setup(wrap, tracks) {
        const pick = (name) => wrap.querySelector('[data-mp="' + name + '"]');

        const audio = pick('audio');
        const video = pick('video');
        const $play = pick('play');
        const $prev = pick('prev');
        const $next = pick('next');
        const $progress = pick('progress');
        const $fill = pick('fill');
        const $buffered = pick('buffered');
        const $handle = pick('handle');
        const $time = pick('time');
        const $volume = pick('volume');
        const $volPanel = pick('volume-panel');
        const $volSlider = pick('volume-slider');
        const $volFill = pick('volume-fill');
        const $volHandle = pick('volume-handle');
        const $volValue = pick('volume-value');
        const $toggle = pick('toggle');
        const $list = pick('list');

        if (!audio || !video || !$play) return;

        const hasPlaylist = tracks.length > 1;
        let currentIndex = 0;
        let media = audio;
        let isSeeking = false;
        let isVolumeDragging = false;

        if (!hasPlaylist) {
            $toggle.style.display = 'none';
            $list.style.display = 'none';
            $prev.style.display = 'none';
            $next.style.display = 'none';
        }

        function formatTime(seconds) {
            if (!isFinite(seconds) || seconds < 0) return '0:00';
            const m = Math.floor(seconds / 60);
            const s = Math.floor(seconds % 60);
            return m + ':' + String(s).padStart(2, '0');
        }

        function play() {
            const promise = media.play();
            if (promise && promise.catch) promise.catch(function () {});
        }

        function loadTrack(index, autoplay) {
            currentIndex = hasPlaylist
                ? ((index % tracks.length) + tracks.length) % tracks.length
                : 0;
            const track = tracks[currentIndex];
            const nextMedia = track.type === 'video' ? video : audio;
            if (media !== nextMedia) {
                const previousMedia = media;
                media.pause();
                media.removeAttribute('src');
                media.load();
                media = nextMedia;
                media.volume = previousMedia.volume;
                media.muted = previousMedia.muted;
            }
            wrap.classList.toggle('has-video', track.type === 'video');
            media.src = track.src;
            media.load();
            if (hasPlaylist) renderList();
            if (autoplay) play();
        }

        function togglePlay() {
            if (media.paused) play();
            else media.pause();
        }

        function updatePlayIcon() {
            $play.innerHTML = media.paused ? ICON_PLAY : ICON_PAUSE;
        }

        function updateVolumeIcon() {
            const vol = media.muted ? 0 : media.volume;
            $volume.innerHTML = vol === 0 ? ICON_MUTE : ICON_VOL;
        }

        function updateVolumeUI() {
            const vol = media.muted ? 0 : media.volume;
            const pct = Math.max(0, Math.min(1, vol)) * 100;
            $volFill.style.height = pct + '%';
            $volHandle.style.bottom = pct + '%';
            $volValue.textContent = Math.round(pct);
            updateVolumeIcon();
        }

        function setVolumeFromEvent(e) {
            const rect = $volSlider.getBoundingClientRect();
            let pct = (rect.bottom - e.clientY) / rect.height;
            pct = Math.max(0, Math.min(1, pct));
            media.muted = false;
            media.volume = pct;
            if (pct === 0) media.muted = true;
            updateVolumeUI();
        }

        function updateBuffered() {
            const duration = media.duration;
            if (!isFinite(duration) || duration <= 0) {
                $buffered.style.width = '0%';
                return;
            }
            let end = 0;
            try {
                for (let i = 0; i < audio.buffered.length; i++) {
                    if (media.buffered.start(i) <= media.currentTime && media.currentTime <= media.buffered.end(i)) {
                        end = media.buffered.end(i);
                        break;
                    }
                    end = Math.max(end, media.buffered.end(i));
                }
            } catch (_) {}
            $buffered.style.width = Math.min(100, (end / duration) * 100) + '%';
        }

        function updateTimeUI() {
            const current = media.currentTime || 0;
            const duration = media.duration || 0;
            const pct = duration > 0 ? (current / duration) * 100 : 0;
            $time.textContent = formatTime(current) + ' / ' + formatTime(duration);
            $fill.style.width = pct + '%';
            $handle.style.left = pct + '%';
            $progress.setAttribute('aria-valuenow', String(Math.round(pct)));
        }

        function renderList() {
            if (!hasPlaylist) return;
            $list.innerHTML = tracks.map(function (track, i) {
                return '<div class="mp-track' + (i === currentIndex ? ' active' : '') + '" role="button" tabindex="0" data-index="' + i + '">' +
                    '<span class="mp-track__num">' + (i + 1) + '</span>' +
                    '<span class="mp-track__info">' +
                        '<span class="mp-track__title">' + escapeHtml(track.title) + '</span>' +
                        (track.artist ? '<span class="mp-track__artist">' + escapeHtml(track.artist) + '</span>' : '') +
                    '</span>' +
                '</div>';
            }).join('');
        }

        function setListOpen(open) {
            $list.classList.toggle('open', open);
            $toggle.classList.toggle('open', open);
            $toggle.setAttribute('aria-expanded', String(open));
            const label = $toggle.querySelector('.mp-toggle__label');
            if (label) label.textContent = open ? 'Tutup Playlist' : 'Playlist';
            if (open) $volPanel.classList.remove('open');
        }

        function onActiveMedia(eventName, handler) {
            [audio, video].forEach(function (element) {
                element.addEventListener(eventName, function (event) {
                    if (event.currentTarget === media) handler(event);
                });
            });
        }

        onActiveMedia('timeupdate', function () {
            if (!isSeeking) updateTimeUI();
            updateBuffered();
        });
        onActiveMedia('progress', updateBuffered);
        onActiveMedia('loadedmetadata', function () {
            updateTimeUI();
            updateBuffered();
        });
        onActiveMedia('durationchange', function () {
            updateTimeUI();
            updateBuffered();
        });
        onActiveMedia('canplaythrough', updateBuffered);
        onActiveMedia('play', updatePlayIcon);
        onActiveMedia('pause', updatePlayIcon);
        onActiveMedia('volumechange', updateVolumeUI);
        onActiveMedia('ended', function () {
            if (hasPlaylist) loadTrack(currentIndex + 1, true);
            else updatePlayIcon();
        });

        $play.addEventListener('click', togglePlay);
        $prev.addEventListener('click', function () { loadTrack(currentIndex - 1, true); });
        $next.addEventListener('click', function () { loadTrack(currentIndex + 1, true); });

        $list.addEventListener('click', function (e) {
            const item = e.target.closest('.mp-track');
            if (!item) return;
            loadTrack(Number(item.getAttribute('data-index')), true);
        });

        $list.addEventListener('keydown', function (e) {
            if (e.key !== 'Enter' && e.key !== ' ') return;
            const item = e.target.closest('.mp-track');
            if (!item) return;
            e.preventDefault();
            loadTrack(Number(item.getAttribute('data-index')), true);
        });

        $volume.addEventListener('click', function (e) {
            e.stopPropagation();
            const open = $volPanel.classList.toggle('open');
            if (open) setListOpen(false);
        });

        $volSlider.addEventListener('pointerdown', function (e) {
            isVolumeDragging = true;
            try { $volSlider.setPointerCapture(e.pointerId); } catch (_) {}
            setVolumeFromEvent(e);
        });

        $volSlider.addEventListener('pointermove', function (e) {
            if (!isVolumeDragging) return;
            setVolumeFromEvent(e);
        });

        $volSlider.addEventListener('pointerup', function (e) {
            isVolumeDragging = false;
            try { $volSlider.releasePointerCapture(e.pointerId); } catch (_) {}
        });

        $volSlider.addEventListener('pointercancel', function () {
            isVolumeDragging = false;
        });

        document.addEventListener('click', function (e) {
            if (!$volPanel.contains(e.target) && !$volume.contains(e.target)) {
                $volPanel.classList.remove('open');
            }
        });

        function seekFromEvent(e) {
            const rect = $progress.getBoundingClientRect();
            const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
            const duration = media.duration;
            if (isFinite(duration) && duration > 0) media.currentTime = pct * duration;
            $fill.style.width = (pct * 100) + '%';
            $handle.style.left = (pct * 100) + '%';
            $time.textContent = formatTime(pct * (duration || 0)) + ' / ' + formatTime(duration || 0);
        }

        $progress.addEventListener('pointerdown', function (e) {
            isSeeking = true;
            try { $progress.setPointerCapture(e.pointerId); } catch (_) {}
            seekFromEvent(e);
        });

        $progress.addEventListener('pointermove', function (e) {
            if (!isSeeking) return;
            seekFromEvent(e);
        });

        $progress.addEventListener('pointerup', function (e) {
            isSeeking = false;
            try { $progress.releasePointerCapture(e.pointerId); } catch (_) {}
        });

        $progress.addEventListener('pointercancel', function () {
            isSeeking = false;
        });

        $progress.addEventListener('keydown', function (e) {
            if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
            e.preventDefault();
            const duration = media.duration || 0;
            const step = e.key === 'ArrowRight' ? 5 : -5;
            media.currentTime = Math.max(0, Math.min(duration, (media.currentTime || 0) + step));
            updateTimeUI();
        });

        $toggle.addEventListener('click', function () {
            setListOpen(!$list.classList.contains('open'));
        });

        audio.volume = 1;
        video.volume = 1;
        loadTrack(0, false);
        updatePlayIcon();
        updateVolumeUI();
        updateTimeUI();
        updateBuffered();
    }

    function mount(mediaEls) {
        const tracks = mediaEls.map(readTrack).filter(Boolean);
        if (!tracks.length) return;

        const first = mediaEls[0];
        const parent = first.parentNode;
        if (!parent) return;

        const wrap = createWrap();
        parent.insertBefore(wrap, first);

        mediaEls.forEach(function (media) {
            media.dataset.playerReady = '1';
            media.style.display = 'none';
            media.setAttribute('aria-hidden', 'true');
        });

        setup(wrap, tracks);
    }

    function init() {
        const mediaEls = Array.prototype.slice
            .call(document.querySelectorAll('audio, video'))
            .filter(isEligible);

        if (!mediaEls.length) return;

        const groups = new Map();
        mediaEls.forEach(function (media) {
            const key = media.closest('[data-player-group]') || media.parentElement || document.body;
            if (!groups.has(key)) groups.set(key, []);
            groups.get(key).push(media);
        });

        groups.forEach(mount);
    }

    window.MediaPlayer = { init: init, __autoMountLoaded: true };

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();