<template>
  <view class="page">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-btn" @click="goBack">
        <text class="nav-icon">←</text>
      </view>
      <text class="nav-title">正在播放222</text>
      <view class="nav-btn" />
    </view>

    <!-- 封面和标题 -->
    <view class="cover-section">
      <view class="cover" :class="{ rotating: isPlaying }">
        <text class="cover-icon">🎵</text>
      </view>
      <text class="title">{{ audio?.title || '未知标题' }}</text>
      <text class="meta">
        {{ albumName || '默认专辑' }}
        <text v-if="playlist.length > 1"> · {{ currentIndex + 1 }}/{{ playlist.length }}</text>
      </text>
    </view>

    <!-- 文本预览 -->
    <view class="text-preview">
      <text class="preview-text">{{ (audio?.text || '').slice(0, 200) }}{{ (audio?.text || '').length > 200 ? '...' : '' }}</text>
    </view>

    <!-- 继续播放提示 -->
    <view v-if="showResumePrompt" class="resume-prompt">
      <view class="resume-content">
        <text class="resume-text">上次播放到 {{ formatDuration(savedProgress) }}</text>
        <view class="resume-buttons">
          <button class="resume-btn" @click="playFromBeginning">从头开始</button>
          <button class="resume-btn primary" @click="resumeFromProgress">继续播放</button>
        </view>
      </view>
    </view>

    <!-- 进度条 -->
    <view class="progress-section">
      <text class="time">{{ formatDuration(currentTime) }}</text>
      <slider
        :value="currentTime"
        :max="duration || 100"
        @change="handleSeek"
        activeColor="#4F46E5"
        backgroundColor="#e5e7eb"
        block-size="16"
        class="progress-slider"
      />
      <text class="time">{{ formatDuration(duration) }}</text>
    </view>

    <!-- 播放控制 -->
    <view class="controls">
      <!-- 随机播放 -->
      <view class="control-btn" :class="{ active: shuffleMode }" @click="toggleShuffle">
        <text class="control-icon">🔀</text>
      </view>

      <!-- 上一首 -->
      <view class="control-btn" :class="{ disabled: !hasPrev && !shuffleMode }" @click="playPrev">
        <text class="control-icon">⏮</text>
      </view>

      <!-- 播放/暂停 -->
      <view class="play-btn" @click="togglePlay">
        <text class="play-icon">{{ isPlaying ? '⏸' : '▶' }}</text>
      </view>

      <!-- 下一首 -->
      <view class="control-btn" :class="{ disabled: !hasNext && !shuffleMode }" @click="playNext">
        <text class="control-icon">⏭</text>
      </view>

      <!-- 循环模式 -->
      <view class="control-btn" :class="{ active: loopMode !== 'off' }" @click="toggleLoop">
        <text class="control-icon">{{ loopMode === 'single' ? '🔂' : '🔁' }}</text>
      </view>
    </view>

    <!-- 底部操作 -->
    <view class="bottom-actions">
      <button class="action-btn" @click="showRatePicker = true">
        <text class="action-icon">⏱</text>
        <text class="action-text">{{ playRate }}x</text>
      </button>
      <button class="action-btn" @click="toggleFavorite">
        <text class="action-icon">{{ audio?.isFavorite ? '❤️' : '🤍' }}</text>
        <text class="action-text">收藏</text>
      </button>
      <button class="action-btn" @click="handleDownload">
        <text class="action-icon">⬇</text>
        <text class="action-text">下载</text>
      </button>
      <button class="action-btn" @click="showTimerPicker = true">
        <text class="action-icon">⏰</text>
        <text class="action-text">{{ timerRemaining > 0 ? formatTimer(timerRemaining) : '定时' }}</text>
      </button>
    </view>

    <!-- 播放列表 -->
    <view class="playlist-section">
      <view class="playlist-header" @click="showPlaylist = !showPlaylist">
        <text class="playlist-title">📋 播放列表 ({{ playlist.length }})</text>
        <text class="playlist-toggle">{{ showPlaylist ? '▼' : '▶' }}</text>
      </view>
      <view v-if="showPlaylist" class="playlist-content">
        <view
          v-for="(item, index) in playlist"
          :key="item.id || index"
          class="playlist-item"
          :class="{ playing: index === currentIndex }"
          @click="playFromPlaylist(index)"
        >
          <text class="playlist-item-icon">{{ index === currentIndex ? (isPlaying ? '▶' : '⏸') : '🎵' }}</text>
          <text class="playlist-item-title">{{ item.title }}</text>
        </view>
        <view v-if="playlist.length === 0" class="playlist-empty">
          <text>播放列表为空</text>
        </view>
      </view>
    </view>

    <!-- 定时关闭选择器 -->
    <view v-if="showTimerPicker" class="rate-picker" @click="showTimerPicker = false">
      <view class="rate-content" @click.stop>
        <text class="rate-title">定时关闭</text>
        <view class="rate-options">
          <view
            v-for="option in timerOptions"
            :key="option.value"
            class="rate-item"
            :class="{ active: timerDuration === option.value }"
            @click="handleSetTimer(option.value)"
          >
            <text>{{ option.label }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 音质选择器 -->
    <view v-if="showQualityPicker" class="rate-picker" @click="showQualityPicker = false">
      <view class="rate-content" @click.stop>
        <text class="rate-title">音质选择</text>
        <view class="rate-options">
          <view
            v-for="option in qualityOptions"
            :key="option.value"
            class="rate-item"
            :class="{ active: audioQuality === option.value }"
            @click="handleSetQuality(option.value)"
          >
            <text>{{ option.label }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 播放速度选择器 -->
    <view v-if="showRatePicker" class="rate-picker" @click="showRatePicker = false">
      <view class="rate-content" @click.stop>
        <text class="rate-title">播放速度</text>
        <view class="rate-options">
          <view
            v-for="rate in [0.5, 0.75, 1, 1.25, 1.5, 2]"
            :key="rate"
            class="rate-item"
            :class="{ active: playRate === rate }"
            @click="handleSetRate(rate)"
          >
            <text>{{ rate }}x</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 分享面板 -->
    <view v-if="showSharePanel" class="share-picker" @click="showSharePanel = false">
      <view class="share-content" @click.stop>
        <!-- 分享卡片预览 -->
        <view class="share-card-preview">
          <view class="share-cover">
            <text class="share-cover-icon">🎵</text>
          </view>
          <view class="share-info">
            <text class="share-title">{{ shareCard.title || 'AI 有声书' }}</text>
            <text class="share-desc">{{ shareCard.description || '精彩内容，快来听听' }}</text>
          </view>
        </view>

        <text class="share-title-text">分享到</text>

        <view class="share-options">
          <view class="share-option" @click="shareToWechat">
            <text class="share-option-icon">💬</text>
            <text class="share-option-label">微信好友</text>
          </view>
          <view class="share-option" @click="shareToMoments">
            <text class="share-option-icon">⭕</text>
            <text class="share-option-label">朋友圈</text>
          </view>
          <view class="share-option" @click="shareToWeibo">
            <text class="share-option-icon">📢</text>
            <text class="share-option-label">微博</text>
          </view>
          <view class="share-option" @click="shareToQQ">
            <text class="share-option-icon">🐧</text>
            <text class="share-option-label">QQ</text>
          </view>
        </view>

        <view class="share-actions">
          <button class="share-action-btn" @click="copyShareLink">
            <text class="share-action-icon">🔗</text>
            <text>复制链接</text>
          </button>
          <button class="share-action-btn" @click="showSharePanel = false">
            <text>取消</text>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useAudioStore } from '../../store/audio';
import { get, post, put, del, getFullUrl } from '../../utils/request';
import type { AudioItem } from '../../types';

const audioStore = useAudioStore();

// 状态
const audioId = ref('');
const audio = ref<AudioItem | null>(null);
const albumName = ref(''); // 专辑名称
const showRatePicker = ref(false);
const showTimerPicker = ref(false);
const showSharePanel = ref(false);
const showQualityPicker = ref(false);
const showPlaylist = ref(true); // 播放列表展开/收起
const savedProgress = ref(0); // 保存的历史进度
const showResumePrompt = ref(false); // 显示继续播放提示
const shareCard = ref({ title: '', description: '', imageUrl: '', link: '' });
const audioQuality = ref('标准');

// 音质选项
const qualityOptions = [
  { label: '标准', value: '标准' },
  { label: '高品质', value: '高品质' },
];

// 定时关闭状态
const timerDuration = ref(0); // 定时时长（秒），0表示未设置
const timerRemaining = ref(0); // 剩余时间（秒）
const timerOptions = [
  { label: '15分钟', value: 15 * 60 },
  { label: '30分钟', value: 30 * 60 },
  { label: '45分钟', value: 45 * 60 },
  { label: '60分钟', value: 60 * 60 },
  { label: '关闭定时', value: 0 },
];
let timerInterval: number | null = null;

// 从 store 获取状态
const isPlaying = computed(() => audioStore.isPlaying);
const currentTime = computed(() => audioStore.currentTime);
const duration = computed(() => audioStore.duration);
const playRate = computed(() => audioStore.playRate);
const hasPrev = computed(() => audioStore.hasPrev);
const hasNext = computed(() => audioStore.hasNext);
const loopMode = computed(() => audioStore.loopMode);
const shuffleMode = computed(() => audioStore.shuffleMode);
const playlist = computed(() => audioStore.playlist);
const currentIndex = computed(() => audioStore.currentIndex);

// 播放进度自动保存定时器
let progressSaveTimer: number | null = null;

// 页面加载时获取参数
onLoad(async (options: any) => {
  audioId.value = options?.id || '';
  
  if (audioId.value) {
    await fetchAudioAndInit();
  }
});

// 获取音频并初始化
async function fetchAudioAndInit() {
  await fetchAudio();
  // 获取播放列表
  await fetchPlaylist();
  // 获取历史播放进度
  await fetchPlayProgress();
  // 获取用户偏好设置
  await fetchUserPreferences();
  // 开始自动保存进度
  startProgressAutoSave();
}

// 获取用户偏好设置
async function fetchUserPreferences() {
  try {
    const result = await get<any>('/user/preferences');
    if (result && result.playSpeed) {
      audioStore.setPlayRate(result.playSpeed);
    }
  } catch (error) {
    console.log('获取用户偏好失败:', error);
  }
}

// 页面加载
onMounted(async () => {
  // 如果没有通过 onLoad 获取到 id，尝试从 URL 获取
  if (!audioId.value) {
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1] as any;
    audioId.value = currentPage?.options?.id || '';
    
    if (audioId.value) {
      await fetchAudioAndInit();
    }
  }
});

// 页面卸载
onUnmounted(() => {
  // 保存最终进度
  savePlayProgress();
  // 停止定时器
  if (progressSaveTimer) {
    clearInterval(progressSaveTimer);
  }
  // 清除定时关闭
  if (timerInterval) {
    clearInterval(timerInterval);
  }
});

// 监听播放进度变化
watch(currentTime, (newTime) => {
  if (newTime > 0 && audio.value) {
    savedProgress.value = newTime;
  }
});

// 获取历史播放进度
async function fetchPlayProgress() {
  try {
    const result = await get<any>(`/player/progress?audioId=${audioId.value}`);
    if (result && result.progress > 0) {
      savedProgress.value = result.progress;
      // 如果进度不是从0开始，显示继续播放提示
      if (result.progress > 10) {
        showResumePrompt.value = true;
      }
    }
  } catch (error) {
    console.log('获取播放进度失败:', error);
  }
}

// 开始自动保存进度（每5秒保存一次）
function startProgressAutoSave() {
  if (progressSaveTimer) {
    clearInterval(progressSaveTimer);
  }
  progressSaveTimer = setInterval(() => {
    if (audio.value && audioStore.currentTime > 0) {
      savePlayProgress();
    }
  }, 5000) as unknown as number;
}

// 保存播放进度
async function savePlayProgress() {
  if (!audio.value || audioStore.currentTime <= 0) return;
  
  try {
    await post('/player/progress', {
      audioId: parseInt(audioId.value),
      progress: audioStore.currentTime,
      duration: audioStore.duration,
    });
  } catch (error) {
    console.log('保存播放进度失败:', error);
  }
}

// 继续从上次位置播放
function resumeFromProgress() {
  if (savedProgress.value > 0) {
    audioStore.seek(savedProgress.value);
    if (!isPlaying.value) {
      audioStore.togglePlay();
    }
  }
  showResumePrompt.value = false;
}

// 从头开始播放
function playFromBeginning() {
  audioStore.seek(0);
  if (!isPlaying.value) {
    audioStore.togglePlay();
  }
  showResumePrompt.value = false;
}

// 获取音频详情
async function fetchAudio() {
  try {
    const result = await get<AudioItem>(`/audio/${audioId.value}`);
    audio.value = result;

    // 获取专辑信息
    if (result.albumId) {
      try {
        const album = await get<any>(`/albums/${result.albumId}`);
        albumName.value = album.name || '默认专辑';
      } catch {
        albumName.value = '默认专辑';
      }
    } else {
      albumName.value = '默认专辑';
    }

    // 开始播放（store 中已初始化 audioContext）
    audioStore.play(result);
  } catch (error: any) {
    console.error('获取音频失败:', error);
    uni.showToast({ title: error.message || '音频不存在', icon: 'none' });
  }
}

// 获取播放列表
async function fetchPlaylist() {
  try {
    const result = await get<{ list: AudioItem[] }>('/audio/list', {
      page: 1,
      pageSize: 100,
    });

    // 设置播放列表（不自动播放，因为已经在 fetchAudio 中播放了当前音频）
    const audioIdNum = parseInt(audioId.value);
    const index = result.list.findIndex(item => (item.id || item._id) === audioIdNum);
    if (index >= 0) {
      audioStore.setPlaylist(result.list, index, false);
    } else if (result.list.length > 0) {
      // 如果没找到匹配的，使用第一个
      audioStore.setPlaylist(result.list, 0, false);
    }
  } catch (error) {
    console.error('获取播放列表失败:', error);
  }
}

// 格式化时长
function formatDuration(seconds: number): string {
  const mins = Math.floor(seconds / 60);
  const secs = Math.floor(seconds % 60);
  return `${mins}:${secs.toString().padStart(2, '0')}`;
}

// 返回
function goBack() {
  uni.navigateBack();
}

// 跳转进度
function handleSeek(e: any) {
  audioStore.seek(e.detail.value);
}

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

// 上一首
function playPrev() {
  if (hasPrev.value) {
    audioStore.playPrev();
    audio.value = audioStore.currentAudio;
  }
}

// 下一首
function playNext() {
  if (hasNext.value || shuffleMode.value) {
    audioStore.playNext();
    audio.value = audioStore.currentAudio;
  }
}

// 切换循环模式
function toggleLoop() {
  audioStore.toggleLoopMode();
}

// 切换随机播放
function toggleShuffle() {
  audioStore.toggleShuffleMode();
}

// 从播放列表选择播放
function playFromPlaylist(index: number) {
  audioStore.setPlaylist(playlist.value, index, true);
  audio.value = audioStore.currentAudio;
}

// 设置播放速度
async function handleSetRate(rate: number) {
  audioStore.setPlayRate(rate);
  showRatePicker.value = false;
  
  // 保存用户偏好
  try {
    await put('/user/preferences', { playSpeed: rate });
  } catch (error) {
    console.log('保存播放速度偏好失败:', error);
  }
}

// 设置定时关闭
function handleSetTimer(seconds: number) {
  timerDuration.value = seconds;
  timerRemaining.value = seconds;
  showTimerPicker.value = false;

  // 清除之前的定时器
  if (timerInterval) {
    clearInterval(timerInterval);
    timerInterval = null;
  }

  if (seconds > 0) {
    // 启动倒计时
    timerInterval = setInterval(() => {
      if (timerRemaining.value > 0) {
        timerRemaining.value--;
      } else {
        // 时间到，暂停播放
        audioStore.pause();
        if (timerInterval) {
          clearInterval(timerInterval);
          timerInterval = null;
        }
        uni.showToast({ title: '定时关闭，播放已暂停', icon: 'none' });
      }
    }, 1000) as unknown as number;
  }
}

// 格式化定时器显示
function formatTimer(seconds: number): string {
  const mins = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return `${mins}:${secs.toString().padStart(2, '0')}`;
}

// 设置音质
async function handleSetQuality(quality: string) {
  audioQuality.value = quality;
  showQualityPicker.value = false;

  // 保存用户偏好
  try {
    await put('/user/preferences', { quality });
  } catch (error) {
    console.log('保存音质偏好失败:', error);
  }
}

// 切换收藏
async function toggleFavorite() {
  if (!audio.value) return;

  try {
    // 获取音频ID（后端返回id而不是_id）
    const audioId = audio.value.id || audio.value._id;
    
    // 先检查是否已收藏
    const checkResult = await get<{ isFavorited: boolean }>(`/favorites/check/${audioId}`);
    const isFavorited = checkResult?.isFavorited;
    
    if (isFavorited) {
      // 取消收藏
      await del(`/favorites/${audioId}`);
      audio.value.isFavorite = false;
      uni.showToast({ title: '已取消收藏', icon: 'success' });
    } else {
      // 添加收藏
      await post('/favorites', { audioId: parseInt(audioId as string) });
      audio.value.isFavorite = true;
      uni.showToast({ title: '已收藏', icon: 'success' });
    }
  } catch (error) {
    console.error('操作失败:', error);
  }
}

// 下载
function handleDownload() {
  if (!audio.value) return;

  uni.showLoading({ title: '下载中...' });
  uni.downloadFile({
    url: getFullUrl(audio.value.audioUrl),
    success: (res) => {
      uni.hideLoading();
      if (res.statusCode === 200) {
        // 提示用户文件保存位置
        uni.showModal({
          title: '下载成功',
          content: '文件已下载到临时目录，请在文件管理器中查找',
          showCancel: false,
        });
      }
    },
    fail: (err) => {
      uni.hideLoading();
      console.error('下载失败:', err);
      uni.showToast({ title: '下载失败', icon: 'none' });
    },
  });
}

// 分享 - 打开分享面板
async function handleShare() {
  if (!audio.value) return;

  try {
    // 获取分享卡片信息
    const result = await get<any>(`/share?audioId=${audio.value.id || audio.value._id}`);
    if (result) {
      shareCard.value = result;
    } else {
      shareCard.value = {
        title: audio.value.title || 'AI 有声书',
        description: (audio.value.summary || audio.value.text || '').slice(0, 50) + '...',
        imageUrl: '',
        link: `${window.location.origin}/#/pages/player/index?id=${audio.value._id}`,
      };
    }
  } catch (error) {
    shareCard.value = {
      title: audio.value.title || 'AI 有声书',
      description: (audio.value.summary || audio.value.text || '').slice(0, 50) + '...',
      imageUrl: '',
      link: `${window.location.origin}/#/pages/player/index?id=${audio.value._id}`,
    };
  }

  showSharePanel.value = true;
}

// 分享到微信好友
function shareToWechat() {
  showSharePanel.value = false;
  // 检查是否有微信JSSDK
  if ((window as any).wx) {
    // 使用微信JSSDK分享
    (window as any).wx.updateAppMessageShareData({
      title: shareCard.value.title,
      desc: shareCard.value.description,
      link: shareCard.value.link,
      success: () => {
        uni.showToast({ title: '分享成功', icon: 'success' });
        trackShare('wechat');
      },
      fail: () => {
        copyShareLink();
      }
    });
  } else {
    // 降级到复制链接
    uni.showToast({ title: '请使用微信打开分享', icon: 'none' });
    setTimeout(() => copyShareLink(), 1500);
  }
}

// 分享到朋友圈
function shareToMoments() {
  showSharePanel.value = false;
  if ((window as any).wx) {
    (window as any).wx.updateTimelineShareData({
      title: shareCard.value.title,
      link: shareCard.value.link,
      success: () => {
        uni.showToast({ title: '分享成功', icon: 'success' });
        trackShare('moments');
      },
      fail: () => {
        copyShareLink();
      }
    });
  } else {
    uni.showToast({ title: '请使用微信打开分享', icon: 'none' });
    setTimeout(() => copyShareLink(), 1500);
  }
}

// 分享到微博
function shareToWeibo() {
  showSharePanel.value = false;
  const shareUrl = `https://service.weibo.com/share/share.php?title=${encodeURIComponent(shareCard.value.title)}&url=${encodeURIComponent(shareCard.value.link)}`;
  window.open(shareUrl, '_blank');
  trackShare('weibo');
}

// 分享到QQ
function shareToQQ() {
  showSharePanel.value = false;
  const shareUrl = `https://connect.qq.com/widget/shareqq/index.html?title=${encodeURIComponent(shareCard.value.title)}&url=${encodeURIComponent(shareCard.value.link)}&desc=${encodeURIComponent(shareCard.value.description)}`;
  window.open(shareUrl, '_blank');
  trackShare('qq');
}

// 记录分享行为
async function trackShare(platform: string) {
  if (!audio.value) return;
  try {
    await post('/share/track', {
      audioId: audio.value.id || audio.value._id,
      platform: platform
    });
  } catch (error) {
    console.log('记录分享失败:', error);
  }
}

// 复制链接
function copyShareLink() {
  showSharePanel.value = false;
  if (!audio.value) return;

  const shareUrl = shareCard.value.link || `${window.location.origin}/#/pages/player/index?id=${audio.value._id}`;
  uni.setClipboardData({
    data: shareUrl,
    success: () => {
      uni.showToast({
        title: '链接已复制',
        icon: 'success',
      });
    },
    fail: () => {
      uni.showToast({
        title: '请截图分享',
        icon: 'none',
      });
    },
  });
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  position: relative;
}

/* 毛玻璃背景效果 */
.page::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  filter: blur(100px);
  opacity: 0.3;
  z-index: -1;
  pointer-events: none;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 44rpx 32rpx 24rpx;
}

.nav-btn {
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-icon {
  font-size: 36rpx;
  color: #ffffff;
}

.nav-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #ffffff;
}

.cover-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48rpx 0;
}

.cover {
  width: 320rpx;
  height: 320rpx;
  background: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%);
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32rpx;
  box-shadow: 0 16rpx 48rpx rgba(79, 70, 229, 0.4);
}

/* 封面旋转动画 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.cover.rotating {
  animation: rotate 20s linear infinite;
}

/* 暂停时保持当前角度 */
.cover:not(.rotating) {
  animation-play-state: paused;
}

.cover-icon {
  font-size: 96rpx;
}

.title {
  font-size: 36rpx;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  margin-bottom: 12rpx;
  max-width: 600rpx;
}

.meta {
  font-size: 24rpx;
  color: #9ca3af;
}

.text-preview {
  margin: 0 32rpx;
  padding: 24rpx;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16rpx;
}

.preview-text {
  font-size: 26rpx;
  color: #9ca3af;
  line-height: 1.6;
}

.progress-section {
  display: flex;
  align-items: center;
  padding: 32rpx;
}

.time {
  font-size: 22rpx;
  color: #9ca3af;
  width: 80rpx;
  text-align: center;
}

.progress-slider {
  flex: 1;
  margin: 0 16rpx;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32rpx;
  padding: 24rpx;
}

.control-btn {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-btn.disabled {
  opacity: 0.3;
}

.control-btn.active {
  color: #4F46E5;
}

.control-text {
  font-size: 24rpx;
  color: #ffffff;
  font-weight: 600;
}

.control-icon {
  font-size: 40rpx;
  color: #ffffff;
}

.play-btn {
  width: 120rpx;
  height: 120rpx;
  background: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(79, 70, 229, 0.5);
}

.play-icon {
  font-size: 48rpx;
  color: #ffffff;
  margin-left: 8rpx;
}

.bottom-actions {
  display: flex;
  justify-content: center;
  gap: 80rpx;
  padding: 48rpx;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  border: none;
  padding: 0;
}

.action-btn::after {
  border: none;
}

.action-icon {
  font-size: 48rpx;
  margin-bottom: 8rpx;
}

.action-text {
  font-size: 24rpx;
  color: #9ca3af;
}

.rate-picker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  z-index: 1000;
}

.rate-content {
  width: 100%;
  background: #1f2937;
  border-radius: 32rpx 32rpx 0 0;
  padding: 48rpx;
}

.rate-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  margin-bottom: 32rpx;
}

.rate-options {
  display: flex;
  flex-wrap: wrap;
  gap: 24rpx;
}

.rate-item {
  flex: 1;
  min-width: 180rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #374151;
  border-radius: 16rpx;
  border: 2rpx solid transparent;
}

.rate-item.active {
  background: #4f46e5;
  border-color: #6366f1;
}

.rate-item text {
  font-size: 28rpx;
  color: #ffffff;
}

/* 继续播放提示 */
.resume-prompt {
  margin: 0 32rpx 24rpx;
  background: rgba(79, 70, 229, 0.2);
  border: 1px solid rgba(79, 70, 229, 0.3);
  border-radius: 16rpx;
  padding: 24rpx;
}

.resume-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.resume-text {
  font-size: 26rpx;
  color: #ffffff;
  margin-bottom: 20rpx;
}

.resume-buttons {
  display: flex;
  gap: 24rpx;
}

.resume-btn {
  padding: 16rpx 32rpx;
  border-radius: 12rpx;
  font-size: 26rpx;
  background: #374151;
  color: #ffffff;
  border: none;
}

.resume-btn.primary {
  background: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%);
}

.resume-btn::after {
  border: none;
}

/* 分享面板 */
.share-picker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-end;
  z-index: 1000;
}

.share-content {
  width: 100%;
  background: #1f2937;
  border-radius: 32rpx 32rpx 0 0;
  padding: 48rpx 32rpx 32rpx;
}

.share-card-preview {
  display: flex;
  gap: 24rpx;
  padding: 24rpx;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16rpx;
  margin-bottom: 32rpx;
}

.share-cover {
  width: 120rpx;
  height: 120rpx;
  background: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%);
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.share-cover-icon {
  font-size: 48rpx;
}

.share-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.share-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-desc {
  font-size: 24rpx;
  color: #9ca3af;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.share-title-text {
  font-size: 28rpx;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  margin-bottom: 32rpx;
  display: block;
}

.share-options {
  display: flex;
  justify-content: space-around;
  margin-bottom: 32rpx;
}

.share-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
}

.share-option-icon {
  width: 96rpx;
  height: 96rpx;
  background: #374151;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
}

.share-option-label {
  font-size: 24rpx;
  color: #9ca3af;
}

.share-actions {
  display: flex;
  gap: 24rpx;
}

.share-action-btn {
  flex: 1;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  background: #374151;
  border-radius: 16rpx;
  border: none;
  font-size: 28rpx;
  color: #ffffff;
}

.share-action-btn::after {
  border: none;
}

.share-action-icon {
  font-size: 32rpx;
}

/* 播放列表 */
.playlist-section {
  margin: 0 32rpx;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16rpx;
  overflow: hidden;
}

.playlist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
}

.playlist-title {
  font-size: 28rpx;
  color: #ffffff;
  font-weight: 600;
}

.playlist-toggle {
  font-size: 24rpx;
  color: #9ca3af;
}

.playlist-content {
  max-height: 400rpx;
  overflow-y: auto;
}

.playlist-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 20rpx 24rpx;
  border-top: 1rpx solid rgba(255, 255, 255, 0.05);
}

.playlist-item.playing {
  background: rgba(79, 70, 229, 0.2);
}

.playlist-item-icon {
  font-size: 28rpx;
  width: 40rpx;
  text-align: center;
}

.playlist-item-title {
  font-size: 26rpx;
  color: #ffffff;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playlist-empty {
  padding: 40rpx;
  text-align: center;
  color: #9ca3af;
  font-size: 26rpx;
}

/* 按钮点击动画 */
.control-btn, .play-btn, .action-btn {
  transition: transform 0.1s ease;
}

.control-btn:active, .play-btn:active, .action-btn:active {
  transform: scale(0.9);
}
</style>