<template>
  <Teleport to="body">
  <Transition name="fullscreen">
    <div v-if="show" class="fullscreen-player">
      <div class="fullscreen-bg" :style="current ? { background: coverBackground(current.cover) } : undefined" />
      <div class="fullscreen-overlay" />

      <button class="close-btn" type="button" aria-label="关闭全屏" @click="emit('close')">
        <AppIcon name="x" :size="24" />
      </button>

      <div class="fullscreen-content">
        <div class="upper-section">
          <div class="cover-section">
            <div
              class="cover-rotating"
              :class="{ spinning: playerState.isPlaying }"
              :style="current ? { background: coverBackground(current.cover) } : undefined"
            >
              <div class="cover-center" />
            </div>
            <div class="song-info">
              <h1 class="song-title-large">{{ current?.title ?? "未在播放" }}</h1>
              <p class="song-artist-large">{{ current?.artist ?? "" }}</p>
              <p class="song-album">{{ current?.album ?? "" }}</p>
            </div>
          </div>

          <div class="lyrics-section">
            <div ref="lyricContainerRef" class="lyrics-container">
              <div
                v-for="(line, index) in lyrics"
                :key="index"
                class="lyric-line"
                :class="{ active: index === currentLyricIndex }"
              >
                {{ line.text }}
              </div>
            </div>
          </div>
        </div>

        <div class="lower-section">
          <div class="progress-section">
            <span class="time-large">{{ formatTime(playerState.currentTime) }}</span>
            <n-slider
              v-model:value="playerState.currentTime"
              :max="current?.duration ?? 100"
              :disabled="!current"
              :tooltip="false"
              class="progress-slider-large"
            />
            <span class="time-large">{{ formatTime(current?.duration ?? 0) }}</span>
          </div>

          <div class="controls-section">
            <button
              class="control-icon-btn"
              type="button"
              :class="{ active: isLiked }"
              aria-label="喜欢"
              @click="emit('toggleLike')"
            >
              <AppIcon name="heart" :size="26" />
            </button>

            <button class="control-icon-btn" type="button" aria-label="上一首" @click="emit('prev')">
              <AppIcon name="skip-back" :size="32" />
            </button>

            <button
              class="play-toggle-large"
              type="button"
              aria-label="播放或暂停"
              @click="emit('togglePlay')"
            >
              <AppIcon :name="playerState.isPlaying ? 'pause' : 'play'" :size="36" />
            </button>

            <button class="control-icon-btn" type="button" aria-label="下一首" @click="emit('next')">
              <AppIcon name="skip-forward" :size="32" />
            </button>

            <button class="control-icon-btn" type="button" aria-label="音量">
              <AppIcon
                :name="playerState.volume === 0 ? 'volume-mute' : 'volume-high'"
                :size="26"
              />
            </button>
          </div>
        </div>
      </div>
    </div>
  </Transition>
  </Teleport>
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { NSlider } from "naive-ui";
import { playerState } from "@/stores/player";
import { coverBackground } from "@/utils/cover";
import { formatTime } from "@/utils/time";
import AppIcon from "./AppIcon.vue";

defineProps<{
  show: boolean;
}>();

const emit = defineEmits<{
  close: [];
  togglePlay: [];
  next: [];
  prev: [];
  toggleLike: [];
}>();

const current = computed(() => playerState.current);
const isLiked = ref(false);

// 模拟歌词数据
const lyrics = computed(() => {
  if (!current.value) return [];
  return [
    { time: 0, text: current.value.title },
    { time: 10, text: "词曲：" + current.value.artist },
    { time: 20, text: "" },
    { time: 30, text: "夜色温柔如你眼眸" },
    { time: 40, text: "星光洒落在指尖流转" },
    { time: 50, text: "时光凝固在这一刻" },
    { time: 60, text: "只想永远陪在你身边" },
    { time: 70, text: "" },
    { time: 80, text: "听风吹过树梢的声音" },
    { time: 90, text: "看月光倒映在湖面" },
    { time: 100, text: "所有美好都在此刻绽放" },
    { time: 110, text: "愿这旋律伴你入眠" },
    { time: 120, text: "" },
    { time: 130, text: "la la la la~" },
    { time: 140, text: "la la la la~" },
    { time: 150, text: "轻轻哼唱这首歌" },
    { time: 160, text: "让温暖填满整个夜" },
  ];
});

const currentLyricIndex = computed(() => {
  const time = playerState.currentTime;
  let index = 0;
  for (let i = 0; i < lyrics.value.length; i++) {
    if (lyrics.value[i].time <= time) {
      index = i;
    } else {
      break;
    }
  }
  return index;
});

const lyricContainerRef = ref<HTMLElement | null>(null);

watch(currentLyricIndex, (newIndex) => {
  if (lyricContainerRef.value) {
    const lineHeight = 52;
    const scrollTop = Math.max(0, newIndex * lineHeight - 120);
    lyricContainerRef.value.scrollTo({
      top: scrollTop,
      behavior: "smooth",
    });
  }
});
</script>

<style scoped>
.fullscreen-player {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
}

.fullscreen-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  filter: blur(60px) brightness(0.6);
  transform: scale(1.2);
}

.fullscreen-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 15, 35, 0.75);
  backdrop-filter: blur(20px);
}

.close-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  color: var(--app-text);
  cursor: pointer;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: rgba(0, 0, 0, 0.6);
  transform: scale(1.08);
}

.fullscreen-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 40px;
}

.upper-section {
  flex: 1;
  display: flex;
  gap: 60px;
  min-height: 0;
  margin-bottom: 40px;
}

.cover-section {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.cover-rotating {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--app-card);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  flex-shrink: 0;
}

.cover-rotating.spinning {
  animation-name: rotate;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.cover-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(200, 200, 200, 0.8) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.song-info {
  text-align: center;
  max-width: 360px;
}

.song-title-large {
  margin: 0 0 12px;
  font-size: 32px;
  font-weight: 700;
  color: var(--app-text);
}

.song-artist-large {
  margin: 0 0 8px;
  font-size: 20px;
  color: var(--app-text-secondary);
}

.song-album {
  margin: 0;
  font-size: 16px;
  color: var(--app-text-muted);
}

.lyrics-section {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lyrics-container {
  width: 100%;
  max-width: 600px;
  height: 400px;
  overflow-y: auto;
  padding: 120px 20px;
  scrollbar-width: none;
}

.lyrics-container::-webkit-scrollbar {
  display: none;
}

.lyric-line {
  padding: 12px 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  transition: all 0.3s ease;
}

.lyric-line.active {
  font-size: 20px;
  font-weight: 600;
  color: var(--app-text);
  text-shadow: 0 2px 8px rgba(109, 93, 246, 0.4);
}

.lower-section {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.progress-section {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

.time-large {
  min-width: 52px;
  font-size: 16px;
  font-weight: 500;
  color: var(--app-text-secondary);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.progress-slider-large {
  flex: 1;
}

.progress-slider-large :deep(.n-slider-rail) {
  height: 6px;
  background: rgba(255, 255, 255, 0.15);
}

.progress-slider-large :deep(.n-slider-fill) {
  background: var(--app-green);
  height: 6px;
}

.progress-slider-large :deep(.n-slider-handle) {
  width: 18px;
  height: 18px;
}

.controls-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.control-icon-btn {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--app-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.control-icon-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--app-text);
  transform: scale(1.08);
}

.control-icon-btn.active {
  color: var(--app-green);
}

.play-toggle-large {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: none;
  border-radius: 50%;
  background: var(--app-green);
  color: #052e16;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.4);
  transition: all 0.2s ease;
}

.play-toggle-large:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 32px rgba(34, 197, 94, 0.5);
}

.fullscreen-enter-active,
.fullscreen-leave-active {
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fullscreen-enter-active .fullscreen-content,
.fullscreen-leave-active .fullscreen-content {
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fullscreen-enter-from {
  opacity: 0;
}

.fullscreen-enter-from .fullscreen-content {
  transform: translateY(100%);
}

.fullscreen-leave-to {
  opacity: 0;
}

.fullscreen-leave-to .fullscreen-content {
  transform: translateY(100%);
}

@media (max-width: 1200px) {
  .upper-section {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .cover-rotating {
    width: 280px;
    height: 280px;
  }

  .lyrics-container {
    height: 240px;
  }

  .lyric-line {
    font-size: 20px;
  }

  .lyric-line.active {
    font-size: 26px;
  }
}

@media (max-width: 768px) {
  .fullscreen-content {
    padding: 24px;
  }

  .cover-rotating {
    width: 220px;
    height: 220px;
  }

  .song-title-large {
    font-size: 24px;
  }

  .song-artist-large {
    font-size: 16px;
  }

  .controls-section {
    gap: 16px;
  }

  .control-icon-btn {
    width: 48px;
    height: 48px;
  }

  .play-toggle-large {
    width: 64px;
    height: 64px;
  }
}
</style>
