src/components/features/MusicPlayer.astro

---

import { Icon } from "astro-icon/components";
import { musicPlayerConfig } from "@/config/musicConfig";
import I18nKey from "@/i18n/i18nKey";
import { i18n } from "@/i18n/translation";
import { url } from "@/utils/url-utils";

interface Props {
	class?: string;
	style?: string;
	id?: string;
}
const { class: className, style, id } = Astro.props;

const config = musicPlayerConfig;

const localPlaylist =
	config.mode === "local" && config.local?.playlist
		? config.local.playlist.map((song) => {
				const isFullUrl = (path: string) => /^https?:\/\//.test(path);
				return {
					name: song.name,
					artist: song.artist,
					url: isFullUrl(song.url) ? song.url : url(song.url),
					pic: song.cover
						? isFullUrl(song.cover)
							? song.cover
							: url(song.cover)
						: undefined,
					lrc: song.lrc
						? isFullUrl(song.lrc)
							? song.lrc
							: url(song.lrc)
						: undefined,
				};
			})
		: [];

const playerConfigStr = JSON.stringify({
	mode: config.mode,
	meting: config.meting,
	localPlaylist: localPlaylist,
	volume: config.volume ?? 0.7,
	playMode: config.playMode ?? "list",
	showLyrics: config.showLyrics ?? true,
	i18n: {
		noPlaying: i18n(I18nKey.musicNoPlaying),
		lyrics: i18n(I18nKey.musicLyrics),
		volume: i18n(I18nKey.musicVolume),
		playMode: i18n(I18nKey.musicPlayMode),
		prev: i18n(I18nKey.musicPrev),
		next: i18n(I18nKey.musicNext),
		playlist: i18n(I18nKey.musicPlaylist),
		noLyrics: i18n(I18nKey.musicNoLyrics),
		loadingLyrics: i18n(I18nKey.musicLoadingLyrics),
		failedLyrics: i18n(I18nKey.musicFailedLyrics),
		noSongs: i18n(I18nKey.musicNoSongs),
		error: i18n(I18nKey.musicError),
		play: i18n(I18nKey.musicPlay),
		pause: i18n(I18nKey.musicPause),
		progress: i18n(I18nKey.musicProgress),
		noCover: i18n(I18nKey.musicNoCover),
	},
});

const widgetId =
	id || `music-widget-${Math.random().toString(36).substring(2, 9)}`;
---



<div id={widgetId} class:list={["music-player-widget w-full relative transition-all duration-300", className]} style={style} role="region" aria-label={i18n(I18nKey.music)}>
    
    <!-- Top Row: Cover & Info -->
<div class="flex items-center gap-2 mb-2 px-1">
    <!-- Circular Cover -->
    <div class="relative shrink-0 w-14 h-14 group">
            <div class="w-full h-full rounded-full overflow-hidden shadow-lg border-2 border-white dark:border-neutral-700 relative z-10 bg-[var(--primary)]/10 flex items-center justify-center">
            <Icon name="material-symbols:music-note-rounded" class="text-2xl text-[var(--primary)] opacity-40 absolute" aria-hidden="true" />
            <img class="music-cover w-full h-full object-cover animate-spin-slow relative z-10 opacity-0 transition-opacity duration-300" src="" alt={i18n(I18nKey.musicCover)} style="animation-play-state: paused;" />
            </div>
    </div>

    <!-- Info Section -->
    <div class="flex-1 min-w-0 flex flex-col overflow-hidden">
        <div class="flex items-center justify-between overflow-hidden gap-2">
            <div class="flex-1 min-w-0 overflow-hidden relative">
                <h3 class="music-title font-bold text-base text-neutral-800 dark:text-neutral-100 leading-tight truncate">
                    {i18n(I18nKey.music)}
                </h3>
            </div>
            <!-- Top Right: Lyric Toggle -->
            <button class={`btn-lrc-toggle hover:text-[var(--primary)] transition-all duration-300 p-0.5 pr-2 transform active:scale-95 text-neutral-400 shrink-0 ${!config.showLyrics ? 'hidden' : ''}`} title={i18n(I18nKey.musicLyrics)} aria-label={i18n(I18nKey.musicLyrics)}>
                <Icon name="material-symbols:subtitles-off-outline-rounded" class="icon-lrc-off text-xl" aria-hidden="true" />
                <Icon name="material-symbols:subtitles-outline-rounded" class="icon-lrc-on text-xl hidden" aria-hidden="true" />
            </button>
        </div>
        
        <div class="min-w-0 overflow-hidden">
            <p class="music-artist text-xs font-medium text-neutral-500 dark:text-neutral-400 truncate">
                {i18n(I18nKey.musicNoPlaying)}
            </p>
        </div>
        
        <!-- Time Display & Volume -->
        <div class="flex items-center gap-3 text-neutral-400 h-5">
            <div class="text-[10px] font-mono flex items-center gap-1 shrink-0 h-full" aria-live="polite">
                <span class="current-time">0:00</span>
                <span class="opacity-50" aria-hidden="true">/</span>
                <span class="total-time">0:00</span>
            </div>
            
            <!-- Volume (Always visible) -->
            <div class="flex items-center gap-1 bg-transparent h-full">
                <button class="btn-mute hover:text-[var(--primary)] transition-colors p-0.5 rounded-md flex items-center" title={i18n(I18nKey.musicVolume)} aria-label={i18n(I18nKey.musicVolume)}>
                    <Icon name="material-symbols:volume-up-rounded" class=" icon-vol-high text-lg" aria-hidden="true" />
                    <Icon name="material-symbols:volume-off-rounded" class="icon-vol-mute text-lg hidden" aria-hidden="true" />
                </button>
                <div class="w-16 transition-all duration-300 ease-out flex items-center">
                    <div class="vol-container h-1 w-16 bg-neutral-200 dark:bg-neutral-600 rounded-full cursor-pointer relative ml-1" role="slider" aria-label={i18n(I18nKey.musicVolume)} aria-valuemin="0" aria-valuemax="100" aria-valuenow="70">
                        <div class="vol-bar absolute left-0 top-0 h-full bg-[var(--primary)] rounded-full w-[70%]"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Progress Bar (Slim) -->
<div class="progress-container relative w-full h-1 bg-neutral-100 dark:bg-neutral-700/50 rounded-full cursor-pointer touch-none mb-2 group mt-2" role="slider" aria-label={i18n(I18nKey.musicProgress)} aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
    <div class="progress-bar absolute left-0 top-0 h-full bg-[var(--primary)] rounded-full w-0 transition-[width] duration-100"></div>
    <!-- Hover Thumb -->
    <div class="progress-thumb absolute top-1/2 -mt-1.5 -ml-1.5 w-3 h-3 bg-[var(--primary)] ring-2 ring-white dark:ring-neutral-800 rounded-full shadow-sm scale-0 group-hover:scale-100 transition-transform duration-200"></div>
</div>

<!-- Controls Row -->
<div class="flex items-center justify-between px-1 select-none">
    <!-- Repeat Mode -->
    <button class="btn-repeat text-neutral-300 dark:text-neutral-600 hover:text-[var(--primary)] transition-colors p-2 active:scale-95" title={i18n(I18nKey.musicPlayMode)} aria-label={i18n(I18nKey.musicPlayMode)}>
        <Icon name="material-symbols:repeat-rounded" class="icon-repeat text-xl" aria-hidden="true" />
        <Icon name="material-symbols:repeat-one-rounded" class="icon-repeat-one text-xl hidden" aria-hidden="true" />
        <Icon name="material-symbols:shuffle-rounded" class="icon-shuffle text-xl hidden" aria-hidden="true" />
    </button>

    <!-- Prev -->
    <button class="btn-prev text-neutral-600 dark:text-neutral-300 hover:text-[var(--primary)] transition-colors p-2 active:scale-95" title={i18n(I18nKey.musicPrev)} aria-label={i18n(I18nKey.musicPrev)}>
        <Icon name="material-symbols:skip-previous-rounded" class="text-3xl" aria-hidden="true" />
    </button>
    
    <!-- Play/Pause (Feature) -->
    <button class="btn-play w-12 h-12 bg-[var(--btn-regular-bg)] hover:bg-[var(--btn-regular-bg-hover)] active:bg-[var(--btn-regular-bg-active)] text-[var(--primary)] rounded-full flex items-center justify-center transition-all duration-300" title={i18n(I18nKey.musicPlay)} aria-label={i18n(I18nKey.musicPlay)}>
        <Icon name="material-symbols:play-arrow-rounded" class="icon-play text-3xl ml-0.5" aria-hidden="true" />
        <Icon name="material-symbols:pause-rounded" class="icon-pause text-3xl hidden" aria-hidden="true" />
    </button>
    
    <!-- Next -->
    <button class="btn-next text-neutral-600 dark:text-neutral-300 hover:text-[var(--primary)] transition-colors p-2 active:scale-95" title={i18n(I18nKey.musicNext)} aria-label={i18n(I18nKey.musicNext)}>
        <Icon name="material-symbols:skip-next-rounded" class="text-3xl" aria-hidden="true" />
    </button>

    <!-- Playlist Toggle Arrow -->
    <button class="btn-drawer-toggle text-neutral-400 hover:text-[var(--primary)] transition-all duration-300 p-2 transform active:scale-95" title={i18n(I18nKey.musicPlaylist)} aria-label={i18n(I18nKey.musicPlaylist)}>
        <Icon name="mdi:playlist-music" class="text-xl" aria-hidden="true" />
    </button>
</div>

<!-- Lyrics Drawer -->
<div class="lrc-drawer grid transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] grid-rows-[0fr] opacity-0">
    <div class="overflow-hidden min-h-0">
        <div class="mt-2 pt-2 border-t border-neutral-100 dark:border-white/5 mx-1">
            <div class="lrc-container h-48 overflow-y-auto custom-scrollbar flex flex-col items-center gap-2 p-4 py-24 text-center relative scroll-smooth" role="listbox" aria-label={i18n(I18nKey.musicLyrics)}>
                <div class="text-neutral-400 text-sm py-10" role="option">{i18n(I18nKey.musicNoLyrics)}</div>
            </div>
        </div>
    </div>
</div>

<!-- Playlist Drawer (Accordion) -->
<div class="playlist-drawer grid transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] grid-rows-[0fr] opacity-0">
    <div class="overflow-hidden min-h-0">
            <div class="mt-2 pt-2 border-t border-neutral-100 dark:border-white/5 mx-1">
            <div class="playlist-container max-h-48 overflow-y-auto custom-scrollbar pr-1 pb-1 flex flex-col gap-1" role="listbox" aria-label={i18n(I18nKey.musicPlaylist)}>
                <!-- Items -->
            </div>
        </div>
    </div>
</div>

<!-- Hidden Audio -->
<audio class="audio-player hidden" crossorigin="anonymous" title={i18n(I18nKey.musicAudioPlayer)}></audio>

<!-- Loading Overlay -->
    <div class="music-loading absolute inset-0 z-20 flex flex-col items-center justify-center bg-white/60 dark:bg-[#1e1e1e]/60 backdrop-blur-[2px] transition-opacity duration-300 opacity-0 pointer-events-none rounded-xl" aria-busy="true" aria-hidden="true">
    <div class="w-8 h-8 text-[var(--primary)] animate-spin">
        <Icon name="material-symbols:sync-rounded" class="text-3xl" aria-hidden="true" />
    </div>
</div>
</div>

<template id={`playlist-item-template-${widgetId}`}>
<div class="playlist-item flex items-center gap-3 p-2 rounded-lg cursor-pointer hover:bg-neutral-50 dark:hover:bg-white/5 transition-colors group">
    <div class="w-8 h-8 rounded-md overflow-hidden shrink-0 relative bg-neutral-200 dark:bg-neutral-700">
        <img src="" class="item-cover w-full h-full object-cover" loading="lazy" alt="" />
        <!-- Active Indicator overlay -->
        <div class="item-active-overlay absolute inset-0 bg-[var(--primary)]/20 hidden items-center justify-center">
                <Icon name="material-symbols:graphic-eq-rounded" class="text-[var(--primary)] text-sm" />
        </div>
    </div>
    <div class="flex-1 min-w-0">
        <div class="item-title text-xs font-bold text-neutral-700 dark:text-neutral-200 truncate group-hover:text-[var(--primary)] transition-colors"></div>
        <div class="item-artist text-[10px] text-neutral-400 truncate"></div>
    </div>
</div>
</template>

<script define:vars={{ playerConfigStr, widgetId }} is:inline>
(function () {
    const config = JSON.parse(playerConfigStr);
    const widget = document.getElementById(widgetId);
    
    // If widget not found (e.g. removed), stop
    if (!widget) return;

    const ui = {
        widget: widget,
        loading: widget.querySelector('.music-loading'),
        cover: widget.querySelector('.music-cover'),
        title: widget.querySelector('.music-title'),
        artist: widget.querySelector('.music-artist'),
        progressBar: widget.querySelector('.progress-bar'),
        progressThumb: widget.querySelector('.progress-thumb'),
        progressContainer: widget.querySelector('.progress-container'),
        currentTime: widget.querySelector('.current-time'),
        totalTime: widget.querySelector('.total-time'),
        btnPlay: widget.querySelector('.btn-play'),
        iconPlay: widget.querySelector('.icon-play'),
        iconPause: widget.querySelector('.icon-pause'),
        btnPrev: widget.querySelector('.btn-prev'),
        btnNext: widget.querySelector('.btn-next'),
        btnRepeat: widget.querySelector('.btn-repeat'),
        iconRepeat: widget.querySelector('.icon-repeat'),
        iconRepeatOne: widget.querySelector('.icon-repeat-one'),
        iconShuffle: widget.querySelector('.icon-shuffle'),
        btnMute: widget.querySelector('.btn-mute'),
        iconVolHigh: widget.querySelector('.icon-vol-high'),
        iconVolMute: widget.querySelector('.icon-vol-mute'),
        volContainer: widget.querySelector('.vol-container'),
        volBar: widget.querySelector('.vol-bar'),
        btnLrc: widget.querySelector('.btn-lrc-toggle'),
        iconLrcOn: widget.querySelector('.icon-lrc-on'),
        iconLrcOff: widget.querySelector('.icon-lrc-off'),
        lrcDrawer: widget.querySelector('.lrc-drawer'),
        lrcContainer: widget.querySelector('.lrc-container'),
        btnDrawer: widget.querySelector('.btn-drawer-toggle'),
        playlistDrawer: widget.querySelector('.playlist-drawer'),
        playlistContainer: widget.querySelector('.playlist-container'),
        audio: widget.querySelector('.audio-player'),
        itemTemplate: document.getElementById(`playlist-item-template-${widgetId}`)
    };

    // Verify all critical UI elements exist (may be null during Swup page transitions)
    const _critical = [ui.btnPlay, ui.audio, ui.btnRepeat, ui.btnMute, ui.volContainer,
        ui.btnDrawer, ui.btnLrc, ui.lrcDrawer, ui.lrcContainer,
        ui.progressContainer, ui.btnNext, ui.btnPrev, ui.loading,
        ui.cover, ui.title, ui.artist, ui.playlistContainer, ui.itemTemplate];
    if (_critical.some(function(el) { return !el; })) return;

    const state = {
        playlist: [],
        currentIndex: 0,
        isPlaying: false,
        isLoading: false,
        playMode: 0, // 0: List, 1: One, 2: Rand
        lastVolume: localStorage.getItem('music-player-volume') !== null 
            ? parseFloat(localStorage.getItem('music-player-volume')) 
            : (config.volume ?? 0.7),
        isMuted: false,
        lyrics: [], // Parsed lyrics: {time: seconds, text: string}
        currentLrcIndex: -1,
        isUserScrolling: false,
        scrollTimeout: null
    };

    // Initialize state from config
    if (config.playMode === 'random') {
            state.playMode = 2; // Rand
    } else if (config.playMode === 'one') {
            state.playMode = 1; // One
    } else {
            state.playMode = 0; // List (default)
    }

    // UI Helpers
    function setLoading(bool) {
        state.isLoading = bool;
        if (bool) {
            ui.loading.classList.remove('opacity-0', 'pointer-events-none');
        } else {
            ui.loading.classList.add('opacity-0', 'pointer-events-none');
        }
    }

    function formatTime(seconds) {
        if (!seconds || isNaN(seconds)) return "0:00";
        const min = Math.floor(seconds / 60);
        const sec = Math.floor(seconds % 60);
        return `${min}:${sec.toString().padStart(2, '0')}`;
    }

    function parseLRC(lrc) {
        if (!lrc) return [];
        const lines = lrc.split('\n');
        const result = [];
        const timeReg = /\[(\d{2}):(\d{2})\.(\d{2,3})\]/g;
        
        lines.forEach(line => {
            const matches = Array.from(line.matchAll(timeReg));
            if (matches.length > 0) {
                const text = line.replace(timeReg, '').trim();
                if (text) {
                    matches.forEach(match => {
                        const m = parseInt(match[1]);
                        const s = parseInt(match[2]);
                        const ms = parseInt(match[3]);
                        const time = m * 60 + s + ms / (match[3].length === 3 ? 1000 : 100);
                        result.push({ time, text });
                    });
                }
            }
        });
        return result.sort((a, b) => a.time - b.time);
    }

    function renderLyrics(lrcText) {
        state.lyrics = parseLRC(lrcText);
        ui.lrcContainer.innerHTML = '';
        
        if (state.lyrics.length === 0) {
            ui.lrcContainer.innerHTML = `<div class="text-neutral-400 text-sm py-10" role="option">${config.i18n.noLyrics}</div>`;
            return;
        }

        state.lyrics.forEach((line, index) => {
            const lineEl = document.createElement('div');
            lineEl.className = 'lrc-line transition-all duration-300 text-sm text-neutral-400 py-1 cursor-pointer hover:text-[var(--primary)]';
            lineEl.innerText = line.text;
            lineEl.dataset.index = index;
            lineEl.setAttribute('role', 'option');
            lineEl.setAttribute('aria-label', line.text);
            lineEl.onclick = () => {
                ui.audio.currentTime = line.time;
            };
            ui.lrcContainer.appendChild(lineEl);
        });
    }

    function updateLyricSync(currentTime, forceScroll = false) {
        if (!state.lyrics || state.lyrics.length === 0) return;

        let index = -1;
        for (let i = 0; i < state.lyrics.length; i++) {
            if (currentTime >= state.lyrics[i].time) {
                index = i;
            } else {
                break;
            }
        }

        // Always update UI classes when index changes
        if (index !== state.currentLrcIndex) {
                const lines = ui.lrcContainer.querySelectorAll('.lrc-line');
                lines.forEach((line, i) => {
                    if (i === index) {
                        line.classList.add('text-[var(--primary)]', 'font-bold', 'text-base');
                        line.classList.remove('text-neutral-400', 'text-sm');
                    } else {
                        line.classList.remove('text-[var(--primary)]', 'font-bold', 'text-base');
                        line.classList.add('text-neutral-400', 'text-sm');
                    }
                });
                state.currentLrcIndex = index;
        }

        // Handle scrolling separately so it can be forced even if index hasn't changed
        if (index !== -1 && (!state.isUserScrolling || forceScroll)) {
            const line = ui.lrcContainer.querySelector(`.lrc-line[data-index="${index}"]`);

            if (line) {

                const containerHeight = ui.lrcContainer.clientHeight;

                // Use line.offsetTop relative to its offsetParent (the container with relative)

                const lineOffset = line.offsetTop;

                const lineHeight = line.offsetHeight;

                

                const targetScroll = lineOffset - (containerHeight / 2) + (lineHeight / 2);

                

                ui.lrcContainer.scrollTo({

                    top: targetScroll,

                    behavior: forceScroll ? 'auto' : 'smooth'

                });

            }

        }

    }



    // Core Init

    async function init() {

        setLoading(true);

        try {

            if (config.mode === 'meting' && config.meting) {

                await fetchMetingData();

            } else if (config.mode === 'local') {

                state.playlist = config.localPlaylist || [];

            }



            if (state.playlist.length > 0) {

                renderPlaylist();

                // If random mode is initial setting, shuffle start

                let startIndex = 0;

                if (state.playMode === 2) {

                    startIndex = Math.floor(Math.random() * state.playlist.length);

                }

                

                loadTrack(startIndex, false);

                initVolume();

                updateModeUI(); // Reflect initial mode in UI

            } else {

                ui.title.innerText = config.i18n.noSongs;

            }

        } catch (e) {

            console.error("Music Init Error", e);
            ui.title.innerText = config.i18n.error;
        } finally {
            setLoading(false);
        }
    }

    async function fetchMetingData() {
        if (!config.meting) return;
        const { api, server, type, id, auth, fallbackApis } = config.meting;
        
        const apis = [api, ...(fallbackApis || [])];
        
        for (const baseApi of apis) {
            if (!baseApi) continue;
            try {
                let fetchUrl = baseApi.replace(':server', server).replace(':type', type).replace(':id', id).replace(':r', Math.random());
                if (auth) fetchUrl += `&auth=${auth}`;

                const res = await fetch(fetchUrl);
                if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
                const data = await res.json();
                
                if (Array.isArray(data) && data.length > 0) {
                    state.playlist = data.map(item => ({
                        name: item.title || item.name || 'Unknown',
                        artist: item.author || item.artist || 'Unknown',
                        url: item.url,
                        pic: item.pic || item.cover || '',
                        lrc: item.lrc
                    }));
                    return; // Found data, exit loop
                }
            } catch (e) {
                console.warn(`Meting API fetch failed for ${baseApi}`, e);
            }
        }
        throw new Error("All Meting APIs failed");
    }

    function renderPlaylist() {
        ui.playlistContainer.innerHTML = '';
        state.playlist.forEach((track, idx) => {
            const clone = ui.itemTemplate.content.cloneNode(true);
            const itemEl = clone.querySelector('.playlist-item');
            const img = clone.querySelector('.item-cover');
            const title = clone.querySelector('.item-title');
            const artist = clone.querySelector('.item-artist');
            
            img.src = track.pic || '';
            img.alt = `${track.name} - ${track.artist}`;
            title.innerText = track.name;
            artist.innerText = track.artist;
            
            // Active State logic handled in updatePlaylistUI
            itemEl.dataset.index = idx;
            itemEl.setAttribute('role', 'option');
            itemEl.setAttribute('aria-label', `${track.name} - ${track.artist}`);
            itemEl.onclick = () => {
                if (state.currentIndex === idx && !ui.audio.paused) {
                    togglePlay();
                } else {
                    loadTrack(idx, true);
                }
            };
            ui.playlistContainer.appendChild(clone);
        });
    }

    function loadTrack(index, autoPlay = false) {
        if (index < 0 || index >= state.playlist.length) return;
        state.currentIndex = index;
        const track = state.playlist[index];

        ui.title.innerText = track.name;
        ui.title.title = track.name;
        ui.artist.innerText = track.artist;
        ui.artist.title = track.artist;
        
        if (track.pic) {
            ui.cover.classList.add('opacity-0');
            ui.cover.src = track.pic;
            ui.cover.alt = `${track.name} - ${track.artist}`;
        } else {
            ui.cover.src = '';
            ui.cover.classList.add('opacity-0');
            ui.cover.alt = config.i18n.noCover;
        }
        
        ui.audio.src = track.url;
        
        // Reset cover rotation
        ui.cover.classList.remove('animate-spin-slow');
        void ui.cover.offsetWidth;
        ui.cover.classList.add('animate-spin-slow');
        ui.cover.style.animationPlayState = 'paused';
        
        // Reset Progress
        ui.progressBar.style.width = '0%';
        ui.progressContainer.setAttribute('aria-valuenow', '0');
        ui.currentTime.innerText = '0:00';
        ui.totalTime.innerText = '0:00';

        // Reset Lyrics
        state.lyrics = [];
        state.currentLrcIndex = -1;
        ui.lrcContainer.innerHTML = `<div class="text-neutral-400 text-sm py-10">${config.i18n.loadingLyrics}</div>`;
        
        if (track.lrc) {
            const isLrcUrl = /^(https?:)?\/\//.test(track.lrc)
                || track.lrc.startsWith('/')
                || /\.(lrc|txt)(\?|#|$)/i.test(track.lrc);

            if (isLrcUrl) {
                fetch(track.lrc)
                    .then(res => res.text())
                    .then(text => renderLyrics(text))
                    .catch(() => ui.lrcContainer.innerHTML = `<div class="text-neutral-400 text-sm py-10">${config.i18n.failedLyrics}</div>`);
            } else {
                renderLyrics(track.lrc);
            }
        } else {
            ui.lrcContainer.innerHTML = `<div class="text-neutral-400 text-sm py-10">${config.i18n.noLyrics}</div>`;
        }

        updatePlaylistUI();

        if (autoPlay) {
            ui.audio.play().then(() => {
                updatePlayState(true);
            }).catch(e => console.warn(e));
        } else {
            updatePlayState(false);
        }
    }

    function updatePlayState(isPlaying) {
        state.isPlaying = isPlaying;
        if (isPlaying) {
            ui.btnPlay.classList.add('bg-[var(--primary)]', 'text-white', 'hover:brightness-110');
            ui.btnPlay.classList.remove('bg-[var(--btn-regular-bg)]', 'hover:bg-[var(--btn-regular-bg-hover)]', 'active:bg-[var(--btn-regular-bg-active)]', 'text-[var(--primary)]');

            ui.iconPlay.classList.add('hidden');
            ui.iconPause.classList.remove('hidden');
            ui.cover.style.animationPlayState = 'running';
            ui.btnPlay.setAttribute('aria-label', config.i18n.pause);
            ui.btnPlay.title = config.i18n.pause;
        } else {
            ui.btnPlay.classList.remove('bg-[var(--primary)]', 'text-white', 'hover:brightness-110');
            ui.btnPlay.classList.add('bg-[var(--btn-regular-bg)]', 'hover:bg-[var(--btn-regular-bg-hover)]', 'active:bg-[var(--btn-regular-bg-active)]', 'text-[var(--primary)]');

            ui.iconPlay.classList.remove('hidden');
            ui.iconPause.classList.add('hidden');
            ui.cover.style.animationPlayState = 'paused';
            ui.btnPlay.setAttribute('aria-label', config.i18n.play);
            ui.btnPlay.title = config.i18n.play;
        }
    }

    function togglePlay() {
        if (ui.audio.paused) {
            ui.audio.play().then(() => updatePlayState(true));
        } else {
            ui.audio.pause();
            updatePlayState(false);
        }
    }

    function playNext(auto = false) {
        let nextIndex;
        if (state.playMode === 1 && auto) { 
            // Single Loop
            ui.audio.currentTime = 0;
            ui.audio.play(); 
            return;
        } else if (state.playMode === 2) { 
            // Random
            nextIndex = Math.floor(Math.random() * state.playlist.length);
        } else {
            // List Loop
            nextIndex = (state.currentIndex + 1) % state.playlist.length;
        }
        loadTrack(nextIndex, true);
    }

    function playPrev() {
        let prevIndex = (state.currentIndex - 1 + state.playlist.length) % state.playlist.length;
        if (state.playMode === 2) {
                prevIndex = Math.floor(Math.random() * state.playlist.length);
        }
        loadTrack(prevIndex, true);
    }

    function updatePlaylistUI() {
            const items = ui.playlistContainer.querySelectorAll('.playlist-item');
            items.forEach(el => {
                const idx = parseInt(el.dataset.index);
                const overlay = el.querySelector('.item-active-overlay');
                const title = el.querySelector('.item-title');
                if (idx === state.currentIndex) {
                    el.classList.add('bg-neutral-100', 'dark:bg-white/10');
                    el.setAttribute('aria-current', 'true');
                    overlay.classList.remove('hidden');
                    overlay.classList.add('flex');
                    title.classList.add('text-[var(--primary)]');

                } else {

                    el.classList.remove('bg-neutral-100', 'dark:bg-white/10');
                    el.removeAttribute('aria-current');
                    overlay.classList.add('hidden');
                    overlay.classList.remove('flex');
                    title.classList.remove('text-[var(--primary)]');

                }

            });

    }



    // Mode Logic

    // Mode 0: List (Def), Mode 1: One, Mode 2: Rand

    // Button Repeat: Cycle 0 -> 1 -> 2 -> 0

    

    function updateModeUI() {

        const primaryColor = 'text-[var(--primary)]';



        // Always primary color if we want to indicate it's interactable, or conditionally
        // Usually Loop List is 'inactive' (grey) or 'active' (primary). 
        // Let's make: List=Grey (default), One=Primary, Rand=Primary
        
        if (state.playMode === 0) {
                ui.btnRepeat.className = `p-2 active:scale-95 transition-colors text-neutral-300 dark:text-neutral-600 hover:text-[var(--primary)]`;
                ui.iconRepeat.classList.remove('hidden');
                ui.iconRepeatOne.classList.add('hidden');
                ui.iconShuffle.classList.add('hidden');
        } else if (state.playMode === 1) {
                ui.btnRepeat.className = `p-2 active:scale-95 transition-colors ${primaryColor}`;
                ui.iconRepeat.classList.add('hidden');
                ui.iconRepeatOne.classList.remove('hidden');
                ui.iconShuffle.classList.add('hidden');
        } else {
                ui.btnRepeat.className = `p-2 active:scale-95 transition-colors ${primaryColor}`;
                ui.iconRepeat.classList.add('hidden');
                ui.iconRepeatOne.classList.add('hidden');
                ui.iconShuffle.classList.remove('hidden');
        }
    }

    ui.btnRepeat.addEventListener('click', () => {
            // Cycle: 0 -> 1 -> 2 -> 0
            state.playMode = (state.playMode + 1) % 3;
            updateModeUI();
    });

    // Volume Logic
    function initVolume() {
        ui.audio.volume = state.lastVolume;
        updateVolumeUI();
    }

    function updateVolumeUI() {
        const pct = state.isMuted ? 0 : state.lastVolume * 100;
        ui.volBar.style.width = `${pct}%`;
        ui.volContainer.setAttribute('aria-valuenow', Math.round(pct).toString());
        
        if (state.isMuted || state.lastVolume === 0) {
            ui.iconVolHigh.classList.add('hidden');
            ui.iconVolMute.classList.remove('hidden');
        } else {
            ui.iconVolHigh.classList.remove('hidden');
            ui.iconVolMute.classList.add('hidden');
        }
    }

    ui.btnMute.addEventListener('click', () => {
        state.isMuted = !state.isMuted;
        ui.audio.muted = state.isMuted;
        updateVolumeUI();
    });

    ui.volContainer.addEventListener('click', (e) => {
            const rect = ui.volContainer.getBoundingClientRect();
            const x = e.clientX - rect.left;
            let val = x / rect.width;
            val = Math.max(0, Math.min(1, val));
            
            state.lastVolume = val;
            state.isMuted = false;
            ui.audio.muted = false;
            ui.audio.volume = val;
            localStorage.setItem('music-player-volume', val.toString());
            updateVolumeUI();
    });

    // Drawer Logic
    ui.btnLrc.addEventListener('click', () => {
            const isOpen = ui.lrcDrawer.style.gridTemplateRows === '1fr';
            if (isOpen) {
                ui.lrcDrawer.style.gridTemplateRows = '0fr';
                ui.lrcDrawer.classList.remove('opacity-100');
                ui.lrcDrawer.classList.add('opacity-0');
                ui.btnLrc.classList.remove('text-[var(--primary)]');

                ui.btnLrc.classList.add('text-neutral-400');
                ui.iconLrcOn.classList.add('hidden');
                ui.iconLrcOff.classList.remove('hidden');
            } else {
                // Close playlist if open
                ui.playlistDrawer.style.gridTemplateRows = '0fr';
                ui.playlistDrawer.classList.remove('opacity-100');
                ui.playlistDrawer.classList.add('opacity-0');
                ui.btnDrawer.classList.remove('text-[var(--primary)]');

                ui.btnDrawer.classList.add('text-neutral-400');

                ui.lrcDrawer.style.gridTemplateRows = '1fr';
                ui.lrcDrawer.classList.add('opacity-100');
                ui.lrcDrawer.classList.remove('opacity-0');
                ui.btnLrc.classList.add('text-[var(--primary)]');

                ui.btnLrc.classList.remove('text-neutral-400');
                ui.iconLrcOn.classList.remove('hidden');
                ui.iconLrcOff.classList.add('hidden');
            }
    });

    ui.btnDrawer.addEventListener('click', () => {
            const isOpen = ui.playlistDrawer.style.gridTemplateRows === '1fr';
            if (isOpen) {
                ui.playlistDrawer.style.gridTemplateRows = '0fr';
                ui.playlistDrawer.classList.remove('opacity-100');
                ui.playlistDrawer.classList.add('opacity-0');
                
                ui.btnDrawer.classList.add('text-neutral-400');
                ui.btnDrawer.classList.remove('text-[var(--primary)]');

            } else {

                // Close lyrics if open

                ui.lrcDrawer.style.gridTemplateRows = '0fr';
                ui.lrcDrawer.classList.remove('opacity-100');
                ui.lrcDrawer.classList.add('opacity-0');
                ui.btnLrc.classList.remove('text-[var(--primary)]');

                ui.btnLrc.classList.add('text-neutral-400');

                ui.playlistDrawer.style.gridTemplateRows = '1fr';
                ui.playlistDrawer.classList.add('opacity-100');
                ui.playlistDrawer.classList.remove('opacity-0');
                
                ui.btnDrawer.classList.remove('text-neutral-400');
                ui.btnDrawer.classList.add('text-[var(--primary)]');

            }

    });



    // Core Events

    ui.btnPlay.addEventListener('click', togglePlay);
    ui.btnNext.addEventListener('click', () => playNext(false));
    ui.btnPrev.addEventListener('click', playPrev);

    ui.lrcContainer.addEventListener('wheel', () => {
            state.isUserScrolling = true;
            resetScrollTimeout();
    });
    ui.lrcContainer.addEventListener('touchstart', () => {
            state.isUserScrolling = true;
            resetScrollTimeout();
    });

    function resetScrollTimeout() {
        clearTimeout(state.scrollTimeout);
        state.scrollTimeout = setTimeout(() => {
            state.isUserScrolling = false;
            updateLyricSync(ui.audio.currentTime, true); // Snap back immediately
        }, 3000); // Wait for 3 seconds of no activity
    }

    ui.cover.addEventListener('load', () => {
            ui.cover.classList.remove('opacity-0');
    });
    ui.cover.addEventListener('error', () => {
            ui.cover.classList.add('opacity-0');
    });
    
    ui.audio.addEventListener('timeupdate', () => {
            if (isNaN(ui.audio.duration)) return;
            const currentTime = ui.audio.currentTime;
            const duration = ui.audio.duration;
            const progress = (currentTime / duration) * 100;
            
            ui.progressBar.style.width = `${progress}%`;
            ui.progressThumb.style.left = `${progress}%`;
            ui.progressContainer.setAttribute('aria-valuenow', Math.round(progress).toString());
            
            ui.currentTime.innerText = formatTime(currentTime);
            ui.totalTime.innerText = formatTime(duration);

            updateLyricSync(currentTime);
    });

    ui.audio.addEventListener('ended', () => playNext(true));
    ui.audio.addEventListener('error', () => { /* Handle error */ });
    
    // Global Mutual Exclusion
    window.addEventListener('firefly-music-play', (e) => {
        if (e.detail.id !== widgetId && !ui.audio.paused) {
            ui.audio.pause();
            updatePlayState(false);
        }
    });

    ui.audio.addEventListener('play', () => {
        window.dispatchEvent(new CustomEvent('firefly-music-play', { detail: { id: widgetId } }));
    });
    
    // Seek
    ui.progressContainer.addEventListener('click', (e) => {
        if (!ui.audio.duration) return;
        const rect = ui.progressContainer.getBoundingClientRect();
        const clickX = e.clientX - rect.left;
        const percent = Math.min(Math.max(clickX / rect.width, 0), 1);
        ui.audio.currentTime = percent * ui.audio.duration;
    });

    init();
})();
</script>

<style>
    @keyframes spin-slow {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    .animate-spin-slow {
        animation: spin-slow 10s linear infinite;
    }
</style>