<template>
  <div
    class="mobile-play-bar"
    :class="[
      setAnimationClass('animate__fadeInUp'),
      musicFullVisible ? 'play-bar-expanded' : 'play-bar-mini'
    ]"
    :style="{
      color: musicFullVisible
        ? textColors.theme === 'dark'
          ? '#ffffff'
          : '#ffffff'
        : settingsStore.theme === 'dark'
          ? '#ffffff'
          : '#000000'
    }"
  >
    <!-- 完整模式 - 在musicFullVisible为true时显示 -->
    <template v-if="musicFullVisible">
      <!-- 顶部信息区域 -->
      <div class="music-info-header">
        <div class="music-info-main">
          <h1 class="music-title">{{ playMusic.name }}</h1>
          <div class="artist-info">
            <span class="artist-name">
              <span v-for="(artists, artistsindex) in artistList" :key="artistsindex">
                {{ artists.name }}{{ artistsindex < artistList.length - 1 ? ' / ' : '' }}
              </span>
            </span>
          </div>
        </div>
      </div>

      <!-- 进度条 -->
      <div class="music-progress-bar">
        <span class="current-time">{{ secondToMinute(nowTime) }}</span>
        <div class="progress-wrapper">
          <n-slider
            v-model:value="timeSlider"
            :step="1"
            :max="allTime"
            :min="0"
            :tooltip="false"
            class="progress-slider"
          ></n-slider>
        </div>
        <span class="total-time">{{ secondToMinute(allTime) }}</span>
      </div>

      <!-- 主控制区 -->
      <div class="player-controls">
        <div class="control-btn like" @click="toggleFavorite">
          <i class="iconfont ri-heart-3-fill" :class="{ 'like-active': isFavorite }"></i>
        </div>
        <div class="control-btn prev" @click="handlePrev">
          <i class="iconfont ri-skip-back-fill"></i>
        </div>
        <div class="control-btn play-pause" @click="playMusicEvent">
          <i class="iconfont" :class="play ? 'ri-pause-fill' : 'ri-play-fill'"></i>
        </div>
        <div class="control-btn next" @click="handleNext">
          <i class="iconfont ri-skip-forward-fill"></i>
        </div>
        <n-popover
          trigger="click"
          :z-index="99999999"
          content-class="mobile-play-list"
          raw
          :show-arrow="false"
          placement="top"
          @update-show="scrollToPlayList"
        >
          <template #trigger>
            <div class="control-btn list">
              <i class="iconfont ri-menu-line"></i>
            </div>
          </template>
          <div class="mobile-play-list-container">
            <div class="mobile-play-list-back"></div>
            <n-virtual-list ref="playListRef" :item-size="56" item-resizable :items="playList">
              <template #default="{ item }">
                <div class="mobile-play-list-item">
                  <song-item :key="item.id" :item="item" mini></song-item>
                </div>
              </template>
            </n-virtual-list>
          </div>
        </n-popover>
      </div>

      <!-- 定时关闭按钮 -->
      <!-- <SleepTimerPopover mode="mobile" /> -->
    </template>

    <!-- Mini模式 - 在musicFullVisible为false时显示 -->
    <div v-else class="mobile-mini-controls">
      <!-- 歌曲信息 -->
      <div class="mini-song-info" @click="setMusicFull">
        <n-image
          :src="getImgUrl(playMusic?.picUrl, '100y100')"
          class="mini-song-cover"
          lazy
          preview-disabled
        />
        <div class="mini-song-text">
          <n-ellipsis class="mini-song-title" line-clamp="1">
            {{ playMusic.name }}
          </n-ellipsis>
          <n-ellipsis class="mini-song-artist" line-clamp="1">
            <span v-for="(artists, artistsindex) in artistList" :key="artistsindex">
              {{ artists.name }}{{ artistsindex < artistList.length - 1 ? ' / ' : '' }}
            </span>
          </n-ellipsis>
        </div>
      </div>

      <!-- 播放按钮 -->
      <div class="mini-playback-controls">
        <div class="mini-control-btn play" @click="playMusicEvent">
          <i class="iconfont icon" :class="play ? 'icon-stop' : 'icon-play'"></i>
        </div>
        <n-popover
          trigger="click"
          :z-index="99999999"
          content-class="mobile-play-list"
          raw
          :show-arrow="false"
          placement="top"
          @update-show="scrollToPlayList"
        >
          <template #trigger>
            <i class="iconfont icon-list mini-list-icon"></i>
          </template>
          <div class="mobile-play-list-container">
            <div class="mobile-play-list-back"></div>
            <n-virtual-list ref="playListRef" :item-size="56" item-resizable :items="playList">
              <template #default="{ item }">
                <div class="mobile-play-list-item">
                  <song-item :key="item.id" :item="item" mini></song-item>
                </div>
              </template>
            </n-virtual-list>
          </div>
        </n-popover>
      </div>
    </div>

    <!-- 全屏播放器 -->
    <music-full ref="MusicFullRef" v-model="musicFullVisible" :background="background" />
  </div>
</template>

<script lang="ts" setup>
import { useThrottleFn } from '@vueuse/core';
import { computed, ref, watch } from 'vue';

import SongItem from '@/components/common/SongItem.vue';
import { allTime, artistList, nowTime, playMusic, sound, textColors } from '@/hooks/MusicHook';
import MusicFull from '@/layout/components/MusicFull.vue';
import { usePlayerStore } from '@/store/modules/player';
import { useSettingsStore } from '@/store/modules/settings';
import type { SongResult } from '@/type/music';
import { getImgUrl, secondToMinute, setAnimationClass } from '@/utils';

const playerStore = usePlayerStore();
const settingsStore = useSettingsStore();

// 是否播放
const play = computed(() => playerStore.isPlay);
// 播放列表
const playList = computed(() => playerStore.playList as SongResult[]);
// 背景颜色
const background = ref('#000');

// 播放进度条
const throttledSeek = useThrottleFn((value: number) => {
  if (!sound.value) return;
  sound.value.seek(value);
  nowTime.value = value;
}, 50);

const timeSlider = computed({
  get: () => nowTime.value,
  set: throttledSeek
});

// 播放控制
function handleNext() {
  playerStore.nextPlay();
}

function handlePrev() {
  playerStore.prevPlay();
}

// 全屏播放器
const MusicFullRef = ref<any>(null);
const musicFullVisible = ref(false);

// 设置musicFull
const setMusicFull = () => {
  musicFullVisible.value = !musicFullVisible.value;
  playerStore.setMusicFull(musicFullVisible.value);
  if (musicFullVisible.value) {
    settingsStore.showArtistDrawer = false;
  }
};

// 播放列表引用
const playListRef = ref<any>(null);

const scrollToPlayList = (val: boolean) => {
  if (!val) return;
  setTimeout(() => {
    playListRef.value?.scrollTo({ top: playerStore.playListIndex * 56 });
  }, 50);
};

// 收藏功能
const isFavorite = computed(() => {
  return playerStore.favoriteList.includes(playMusic.value.id as number);
});

const toggleFavorite = () => {
  console.log('isFavorite.value', isFavorite.value);
  if (isFavorite.value) {
    playerStore.removeFromFavorite(playMusic.value.id as number);
  } else {
    playerStore.addToFavorite(playMusic.value.id as number);
  }
};

// 播放暂停按钮事件
const playMusicEvent = async () => {
  try {
    playerStore.setPlay(playMusic.value);
  } catch (error) {
    console.error('播放出错:', error);
    playerStore.nextPlay();
  }
};

watch(
  () => playerStore.playMusic,
  async () => {
    background.value = playMusic.value.backgroundColor as string;
  },
  { immediate: true, deep: true }
);
</script>

<style lang="scss" scoped>
.mobile-play-bar {
  @apply fixed bottom-[56px] left-0 w-full flex flex-col shadow-lg;
  z-index: 10000;
  animation-duration: 0.3s !important;
  transition: all 0.3s ease;

  &.play-bar-expanded {
    @apply bg-transparent;
    height: auto; /* 自动适应内容高度 */
    max-height: 230px; /* 限制最大高度 */
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.5) 20%,
      rgba(0, 0, 0, 0.8) 80%,
      rgba(0, 0, 0, 0.9) 100%
    );

    &::before {
      content: '';
      position: absolute;
      top: -50px; /* 延伸到上方 */
      left: 0;
      right: 0;
      bottom: 0;
      background-image: v-bind('`url(${getImgUrl(playMusic?.picUrl, "300y300")})`');
      background-size: cover;
      background-position: center;
      filter: blur(20px);
      opacity: 0.2;
      z-index: -1;
    }
  }

  &.play-bar-mini {
    @apply h-14 py-0 bg-light dark:bg-dark;
  }

  // 顶部信息区域
  .music-info-header {
    @apply flex justify-between items-start px-6 pt-3 pb-2 relative z-10;

    .music-info-main {
      @apply flex flex-col;

      .music-title {
        @apply text-xl font-bold text-white mb-1;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      }

      .artist-info {
        @apply flex items-center;

        .artist-name {
          @apply text-sm text-white opacity-90;
        }
      }
    }

    .action-stats {
      @apply flex items-center gap-4;

      .like-count,
      .comment-count {
        @apply flex items-center text-white;

        i {
          @apply text-base mr-1;
        }

        span {
          @apply text-xs font-medium;
        }
      }
    }
  }

  // 进度条
  .music-progress-bar {
    @apply flex items-center justify-between px-4 py-2 relative z-10;

    .current-time,
    .total-time {
      @apply text-xs text-white opacity-80;
    }

    .progress-wrapper {
      @apply flex-1 mx-3 flex flex-col items-center;

      .progress-slider {
        @apply w-full;

        :deep(.n-slider) {
          --n-rail-height: 3px;
          --n-rail-color: rgba(255, 255, 255, 0.15);
          --n-rail-color-dark: rgba(255, 255, 255, 0.15);
          --n-fill-color: #1ed760; /* Spotify绿色，可调整为其他绿色 */
          --n-handle-size: 0px; /* 隐藏滑块 */
          --n-handle-color: #1ed760;

          &:hover {
            --n-handle-size: 10px; /* 鼠标悬停时显示滑块 */
          }

          .n-slider-rail {
            @apply rounded-full !important; /* 圆角进度条 */
          }

          .n-slider-fill {
            @apply rounded-full !important;
            box-shadow: 0 0 4px rgba(30, 215, 96, 0.5); /* 发光效果 */
          }

          .n-slider-handle {
            @apply transition-all duration-200;
            opacity: 0;
            box-shadow: 0 0 4px rgba(255, 255, 255, 0.7);
          }

          &:hover .n-slider-handle,
          &:active .n-slider-handle {
            opacity: 1;
          }
        }
      }

      .quality-label {
        @apply text-xs text-white opacity-70 mt-1;
      }
    }
  }

  // 主控制区
  .player-controls {
    @apply flex items-center justify-between px-8 py-3 relative z-10 pb-8;

    .control-btn {
      @apply flex items-center justify-center cursor-pointer transition;

      i {
        @apply text-white transition-all;
      }

      &.like i {
        @apply text-2xl;
      }

      &.prev i,
      &.next i {
        @apply text-3xl;
      }

      &.play-pause {
        @apply w-12 h-12 rounded-full flex items-center justify-center;
        background: rgba(255, 255, 255, 0.2);

        i {
          @apply text-4xl;
        }
      }

      &.list i {
        @apply text-2xl;
      }

      .like-active {
        @apply text-red-500;
      }
    }
  }

  // Mini模式样式
  .mobile-mini-controls {
    @apply flex items-center justify-between px-4 h-14;

    .mini-song-info {
      @apply flex items-center flex-1 min-w-0 cursor-pointer;

      .mini-song-cover {
        @apply w-8 h-8 rounded-md;
      }

      .mini-song-text {
        @apply ml-3 min-w-0 flex-1;

        .mini-song-title {
          @apply text-sm font-medium;
        }

        .mini-song-artist {
          @apply text-xs text-gray-500 dark:text-gray-400 mt-0.5;
        }
      }
    }

    .mini-playback-controls {
      @apply flex items-center;

      .mini-control-btn {
        @apply flex items-center justify-center cursor-pointer transition;

        &.play {
          @apply w-9 h-9 rounded-full flex items-center justify-center mr-2;
          @apply bg-gray-100 dark:bg-gray-800;

          .iconfont {
            @apply text-xl text-green-500 transition hover:text-green-600;
          }
        }
      }

      .mini-list-icon {
        @apply text-xl p-1 transition cursor-pointer;
        @apply hover:text-green-500;
      }
    }
  }
}

.mobile-play-list-container {
  height: 60vh;
  width: 90vw;
  max-width: 400px;
  @apply relative rounded-t-2xl overflow-hidden;

  .mobile-play-list-back {
    backdrop-filter: blur(20px);
    @apply absolute top-0 left-0 w-full h-full;
    @apply bg-light dark:bg-black bg-opacity-90;
  }

  .mobile-play-list-item {
    @apply px-3 py-1;
  }
}
</style>
