<template>
  <view v-if="showMiniPlayer" class="mini-player" @click="goToPlayer">
    <!-- 封面 -->
    <view class="mini-cover" :style="{ background: coverGradient }">
      <text class="cover-icon">{{ getTitleLetter(audioStore.currentAudio?.title || '') }}</text>
    </view>

    <!-- 信息 -->
    <view class="mini-info">
      <text class="mini-title">{{ audioStore.currentAudio?.title || '未知音频' }}</text>
      <text class="mini-subtitle">{{ formatTime(audioStore.currentTime) }} / {{ formatTime(audioStore.duration) }}</text>
    </view>

    <!-- 控制按钮 -->
    <view class="mini-controls">
      <view class="control-btn" @click.stop="togglePlay">
        <text>{{ audioStore.isPlaying ? '⏸' : '▶' }}</text>
      </view>
      <view class="control-btn" @click.stop="playNext">
        <text>⏭</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { useAudioStore } from '../store/audio';
import { getCoverGradient, getTitleLetter } from '../composables/useCoverStyle';

const audioStore = useAudioStore();

const showMiniPlayer = computed(() => {
  // 获取当前页面路径
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const currentPath = currentPage?.route || '';

  // 如果在播放器页面，不显示迷你播放器
  if (currentPath.includes('player')) {
    return false;
  }

  // 如果有当前音频，显示迷你播放器
  return !!audioStore.currentAudio;
});

// 封面颜色
const coverGradient = computed(() => {
  const voiceId = audioStore.currentAudio?.voiceId || 'cherry';
  return getCoverGradient(voiceId);
});

// 格式化时间
function formatTime(seconds: number): string {
  if (!seconds || isNaN(seconds)) return '0:00';
  const mins = Math.floor(seconds / 60);
  const secs = Math.floor(seconds % 60);
  return `${mins}:${secs.toString().padStart(2, '0')}`;
}

// 切换播放
function togglePlay() {
  audioStore.togglePlay();
}

// 播放下一首
function playNext() {
  audioStore.playNext();
}

// 跳转到播放器页面
function goToPlayer() {
  uni.navigateTo({ url: '/pages/player/index' });
}
</script>

<style scoped>
.mini-player {
  position: fixed;
  bottom: 120rpx;
  left: 16rpx;
  right: 16rpx;
  height: 100rpx;
  background: #ffffff;
  border-radius: 50rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  z-index: 999;
}

.mini-cover {
  width: 72rpx;
  height: 72rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cover-icon {
  font-size: 32rpx;
  opacity: 0.6;
}

.mini-info {
  flex: 1;
  margin-left: 20rpx;
  overflow: hidden;
}

.mini-title {
  font-size: 26rpx;
  color: #1f2937;
  font-weight: 500;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-subtitle {
  font-size: 22rpx;
  color: #9ca3af;
  margin-top: 4rpx;
  display: block;
}

.mini-controls {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.control-btn {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
}

.control-btn:active {
  background: #e5e7eb;
}
</style>
