<script setup lang="ts">
import XIcon from '../assets/icons/x.vue'
import ShuffleIcon from '../assets/icons/shuffle.vue'
import PlayIcon from '../assets/icons/play.vue'
import StarEmptyIcon from '../assets/icons/starempty.vue'

import { ref, watch, nextTick } from 'vue'
import { gsap } from 'gsap'
import apis from '../apis'
import { artistsOrganize } from '../utils'
import { usePlayQueueStore } from '../stores/usePlayQueueStore'
import TrackItem from './TrackItem.vue'
import LoadingIndicator from '../assets/icons/loadingindicator.vue'

const props = defineProps<{
	albumCid: string
	present: boolean
}>()

const emit = defineEmits<{
	(e: 'dismiss'): void
}>()

const album = ref<Album>()
const dialogBackdrop = ref<HTMLElement>()
const dialogContent = ref<HTMLElement>()
const closeButton = ref<HTMLElement>()

// Animation functions
const animateIn = async () => {
	if (!dialogBackdrop.value || !dialogContent.value || !closeButton.value) return

	// Set initial states
	gsap.set(dialogBackdrop.value, { opacity: 0 })
	gsap.set(dialogContent.value, { y: 50, opacity: 0, scale: 0.95 })
	gsap.set(closeButton.value, { scale: 0, rotation: -180 })

	// Create timeline
	const tl = gsap.timeline()

	tl.to(dialogBackdrop.value, {
		opacity: 1,
		duration: 0.3,
		ease: "power2.out"
	})
		.to(dialogContent.value, {
			y: 0,
			opacity: 1,
			scale: 1,
			duration: 0.4,
			ease: "power3.out"
		}, "-=0.1")
		.to(closeButton.value, {
			scale: 1,
			rotation: 0,
			duration: 0.3,
			ease: "back.out(1.7)"
		}, "-=0.2")
}

const animateOut = () => {
	if (!dialogBackdrop.value || !dialogContent.value || !closeButton.value) return

	const tl = gsap.timeline({
		onComplete: () => emit('dismiss')
	})

	tl.to(closeButton.value, {
		scale: 0,
		rotation: 180,
		duration: 0.2,
		ease: "power2.in"
	})
		.to(dialogContent.value, {
			y: 30,
			opacity: 0,
			scale: 0.95,
			duration: 0.3,
			ease: "power2.in"
		}, "-=0.1")
		.to(dialogBackdrop.value, {
			opacity: 0,
			duration: 0.2,
			ease: "power2.in"
		}, "-=0.1")
}

const handleClose = () => {
	animateOut()
}

watch(() => props.present, async (newVal) => {
	if (newVal) {
		await nextTick()
		animateIn()
	}
})

watch(() => props.albumCid, async () => {
	console.log("AlbumDetailDialog mounted with albumCid:", props.albumCid)
	album.value = undefined // Reset album when cid changes
	try {
		let res = await apis.getAlbum(props.albumCid)
		for (const track in res.songs) {
			res.songs[parseInt(track)] = await apis.getSong(res.songs[parseInt(track)].cid)
		}
		album.value = res
	} catch (error) {
		console.error(error)
	}
})

const playQueue = usePlayQueueStore()

function playTheAlbum(from: number = 0) {
	if (playQueue.queueReplaceLock) {
		if (!confirm("当前操作会将你的待播列表清空、放入这张专辑所有曲目，并从新待播清单的开头播放。继续吗？")) { return }
		playQueue.queueReplaceLock = false
	}

	let newPlayQueue = []
	for (const track of album.value?.songs ?? []) {
		console.log(track)
		newPlayQueue.push({
			song: track,
			album: album.value
		})
	}
	playQueue.list = newPlayQueue
	playQueue.currentIndex = from
	playQueue.isPlaying = true
	playQueue.isBuffering = true
}

</script>

<template>
	<dialog :open="present" class="bg-transparent z-20">
		<div ref="dialogBackdrop" class="w-screen h-screen z-20 bg-neutral-700/30 flex" @click="handleClose">
			<div ref="dialogContent"
				class="max-w-[60rem] w-full h-[40rem] mx-auto my-auto rounded-lg shadow-lg flex flex-col p-8 overflow-y-auto backdrop-blur-3xl"
				:style="{
					background: album ? `linear-gradient(180deg, rgba(25, 25, 25, 0.8), rgba(25, 25, 25, 0.95)), url(${album.coverDeUrl})` : '#191919',
					backgroundSize: 'cover',
					backgroundPosition: 'center',
					backgroundRepeat: 'no-repeat',
				}" @click.stop>
				<div class="flex justify-end sticky top-0 z-20 mb-8">
					<button ref="closeButton"
						class="text-white w-9 h-9 bg-neutral-800/80 border border-[#ffffff39] rounded-full text-center backdrop-blur-3xl flex justify-center items-center transition-all duration-200 hover:bg-neutral-700/80"
						@click="handleClose">
						<XIcon :size="4" />
					</button>
				</div>

				<div v-if="album" class="flex gap-8">
					<div class="mx-auto md:mx-0 md:w-72">
						<div class="md:sticky md:top-[4.5rem] flex flex-col gap-8">
							<div
								class="border border-[#5b5b5b] rounded-md overflow-hidden shadow-2xl bg-neutral-800 top-0 w-48 mx-auto md:w-72">
								<img :src="album?.coverUrl" class="md:w-72 md:h-72 w-48 h-48 object-contain shadow-2xl" />
							</div>
							<div class="flex flex-col gap-2 text-center md:text-left">
								<div class="text-white text-2xl font-semibold">{{ album?.name }}</div>
								<div class="text-sky-200 text-xl">{{ artistsOrganize(album?.artistes ?? []) }}</div>
								<div class="text-white/50 text-sm">{{ album?.intro }}</div>
							</div>
						</div>
					</div>

					<div class="flex-1 flex flex-col gap-8 mb-2">
						<div class="flex justify-between items-center z-10">
							<div class="flex gap-2">
								<button
									class="bg-sky-500/20 hover:bg-sky-500/30 active:bg-sky-600/30 active:shadow-inner backdrop-blur-3xl border border-[#ffffff39] rounded-full w-56 h-10 text-base text-white flex justify-center items-center gap-2 transition-all"
									@click="playTheAlbum()">
									<PlayIcon :size="4" />
									<div>播放专辑</div>
								</button>

								<button
									class="text-white w-10 h-10 bg-neutral-800/80 border border-[#ffffff39] backdrop-blur-3xl rounded-full flex justify-center items-center hover:bg-neutral-700/80 transition-all"
									@click="() => {
										playTheAlbum()
										playQueue.shuffleCurrent = true
										playQueue.playMode.shuffle = true
									}">
									<ShuffleIcon :size="4" />
								</button>

								<button
									class="text-white w-10 h-10 bg-neutral-800/80 border border-[#ffffff39] backdrop-blur-3xl rounded-full flex justify-center items-center hover:bg-neutral-700/80 transition-all">
									<StarEmptyIcon :size="4" />
								</button>
							</div>

							<div class="text-sm text-neutral-500 font-medium z-0">
								共 {{ album?.songs?.length ?? '？' }} 首曲目
							</div>
						</div>
						<div class="flex flex-col border border-neutral-600/30 rounded-lg backdrop-blur-lg overflow-hidden">
							<TrackItem v-for="(track, index) in album?.songs" :key="track.cid" :album="album" :track="track"
								:index="index" :playfrom="playTheAlbum" />
						</div>
					</div>
				</div>

				<div v-else class="flex gap-8">
					<div class="mx-auto md:mx-0 md:w-72">
						<div class="md:sticky md:top-[4.5rem] flex flex-col gap-8 animate-pulse">
							<div
								class="border border-[#5b5b5b] rounded-md overflow-hidden shadow-2xl bg-neutral-800 top-0 w-48 mx-auto md:w-72 h-72" />
							<div class="flex flex-col gap-2 text-center md:text-left">
								<div class="h-6 font-semibold w-2/3 bg-neutral-400/50 rounded-sm" />
								<div class="bg-sky-200/30 text-xl h-5 w-1/3 rounded-sm" />
								<div class="text-white/50 text-sm flex flex-col gap-1">
									<div v-for="i in 3" :key="i" class="bg-white/10 h-[0.875rem] rounded-sm"
										:class="i === 3 ? 'w-2/3' : 'w-full'" />
								</div>
							</div>
						</div>
					</div>

					<div class="flex-1 flex justify-center items-center">
						<LoadingIndicator :size="10" />
					</div>
				</div>
			</div>
		</div>
	</dialog>
</template>