<template>
  <div class="audio-player">
    <!-- 动态背景 -->
    <div class="animated-background">
      <div class="bubble" v-for="(_, n) in 15" :key="n" :style="getBubbleStyle(n)"></div>
    </div>

    <!-- 背景图片（可选） -->
    <div v-if="backgroundImage" class="background-image" :style="{ backgroundImage: `url(${backgroundImage})` }"></div>

    <!-- 内容区域 -->
    <div class="content-area">
      <!-- 音乐图标动画 -->
      <div class="music-icon" :class="{ playing: isPlaying }">
        <Music :size="80" stroke-width="1.5" />
      </div>

      <!-- 音符动画 -->
      <div class="music-notes" v-if="isPlaying">
        <span class="note note-1">♪</span>
        <span class="note note-2">♫</span>
        <span class="note note-3">♩</span>
      </div>

      <!-- 标题 -->
      <div class="audio-title" v-if="title">{{ title }}</div>
      <div class="audio-subtitle" v-if="subtitle">{{ subtitle }}</div>
    </div>

    <!-- 音频元素 -->
    <audio
      ref="audioRef"
      :src="src"
      @loadedmetadata="onLoaded"
      @timeupdate="onTimeUpdate"
      @ended="onEnded"
      @play="isPlaying = true"
      @pause="isPlaying = false"
    />

    <!-- 控制栏 -->
    <div class="audio-controls">
      <!-- 进度条 -->
      <div class="progress-container">
        <div class="progress-bar" @click="seekAudio">
          <div class="progress-fill" :style="{ width: progressPercent + '%' }"></div>
          <div class="progress-thumb" :style="{ left: progressPercent + '%' }"></div>
        </div>
        <div class="time-display">
          <span>{{ formatTime(currentTime) }}</span>
          <span>{{ formatTime(duration) }}</span>
        </div>
      </div>

      <!-- 控制按钮 -->
      <div class="control-buttons">
        <!-- 后退 -->
        <button class="ctrl-btn" @click="skipBackward" title="后退10秒">
          <RotateCcw :size="24" />
        </button>

        <!-- 播放/暂停 -->
        <button class="ctrl-btn play-btn" @click="togglePlay">
          <Pause v-if="isPlaying" :size="40" />
          <Play v-else :size="40" />
        </button>

        <!-- 前进 -->
        <button class="ctrl-btn" @click="skipForward" title="前进10秒">
          <RotateCw :size="24" />
        </button>
      </div>

      <!-- 附加控制 -->
      <div class="extra-controls">
        <!-- 循环 -->
        <button class="ctrl-btn small" :class="{ active: isLooping }" @click="toggleLoop" title="循环播放">
          <Repeat :size="20" />
        </button>

        <!-- 音量 -->
        <div class="volume-control">
          <button class="ctrl-btn small" @click="toggleMute" title="静音 (M)">
            <Volume2 v-if="volume > 0.5" :size="20" />
            <Volume1 v-else-if="volume > 0" :size="20" />
            <VolumeX v-else :size="20" />
          </button>
          <input
            type="range"
            class="volume-slider"
            :value="volume"
            min="0"
            max="1"
            step="0.1"
            @input="changeVolume"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue';
import {
  Play,
  Pause,
  RotateCcw,
  RotateCw,
  Volume2,
  Volume1,
  VolumeX,
  Repeat,
  Music,
} from 'lucide-vue-next';

interface Props {
  src: string;
  title?: string;
  subtitle?: string;
  backgroundImage?: string;
}

defineProps<Props>();

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

// Refs
const audioRef = ref<HTMLAudioElement>();

// 状态
const isPlaying = ref(false);
const currentTime = ref(0);
const duration = ref(0);
const volume = ref(1);
const isLooping = ref(false);

// 计算属性
const progressPercent = computed(() => {
  if (duration.value === 0) return 0;
  return (currentTime.value / duration.value) * 100;
});

// 方法
const formatTime = (seconds: number) => {
  const mins = Math.floor(seconds / 60);
  const secs = Math.floor(seconds % 60);
  return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
};

const getBubbleStyle = (_index: number) => {
  const size = 20 + Math.random() * 60;
  const left = Math.random() * 100;
  const delay = Math.random() * 5;
  const duration = 10 + Math.random() * 10;

  return {
    width: `${size}px`,
    height: `${size}px`,
    left: `${left}%`,
    animationDelay: `${delay}s`,
    animationDuration: `${duration}s`,
  };
};

const togglePlay = () => {
  if (!audioRef.value) return;

  if (isPlaying.value) {
    audioRef.value.pause();
  } else {
    audioRef.value.play();
  }
};

const onLoaded = () => {
  if (audioRef.value) {
    duration.value = audioRef.value.duration;
  }
};

const onTimeUpdate = () => {
  if (audioRef.value) {
    currentTime.value = audioRef.value.currentTime;
  }
};

const onEnded = () => {
  isPlaying.value = false;
  if (!isLooping.value) {
    emit('ended');
  }
};

const seekAudio = (e: MouseEvent) => {
  if (!audioRef.value) return;

  const target = e.currentTarget as HTMLElement;
  const rect = target.getBoundingClientRect();
  const percent = (e.clientX - rect.left) / rect.width;
  const time = percent * duration.value;

  audioRef.value.currentTime = time;
  currentTime.value = time;
};

const skipForward = () => {
  if (audioRef.value) {
    audioRef.value.currentTime = Math.min(duration.value, audioRef.value.currentTime + 10);
  }
};

const skipBackward = () => {
  if (audioRef.value) {
    audioRef.value.currentTime = Math.max(0, audioRef.value.currentTime - 10);
  }
};

const changeVolume = (e: Event) => {
  const target = e.target as HTMLInputElement;
  const vol = parseFloat(target.value);
  volume.value = vol;
  if (audioRef.value) {
    audioRef.value.volume = vol;
  }
};

const toggleMute = () => {
  if (audioRef.value) {
    if (volume.value > 0) {
      volume.value = 0;
      audioRef.value.volume = 0;
    } else {
      volume.value = 1;
      audioRef.value.volume = 1;
    }
  }
};

const toggleLoop = () => {
  isLooping.value = !isLooping.value;
  if (audioRef.value) {
    audioRef.value.loop = isLooping.value;
  }
};

// 键盘事件
const handleKeydown = (e: KeyboardEvent) => {
  switch (e.key) {
    case ' ':
      e.preventDefault();
      togglePlay();
      break;
    case 'ArrowLeft':
      skipBackward();
      break;
    case 'ArrowRight':
      skipForward();
      break;
    case 'm':
    case 'M':
      toggleMute();
      break;
  }
};

// 生命周期
onMounted(() => {
  document.addEventListener('keydown', handleKeydown);
});

onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown);
});
</script>

<style scoped lang="scss">
.audio-player {
  width: 100%;
  height: 100%;
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

// 动态背景
.animated-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;

  .bubble {
    position: absolute;
    bottom: -100px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: float linear infinite;
  }

  @keyframes float {
    0% {
      transform: translateY(0) scale(1);
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      transform: translateY(-100vh) scale(0.5);
      opacity: 0;
    }
  }
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.3;
}

// 内容区域
.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

// 音乐图标
.music-icon {
  color: white;
  position: relative;
  margin-bottom: 20px;
  opacity: 0.8;
  transition: all 0.3s;

  &.playing {
    opacity: 1;
    animation: pulse 2s ease-in-out infinite;
  }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.music-notes {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;

  .note {
    position: absolute;
    color: rgba(255, 255, 255, 0.8);
    font-size: 24px;
    opacity: 0;
  }

  .note-1 {
    animation: noteFloat1 2s ease-out infinite;
  }

  .note-2 {
    animation: noteFloat2 2.5s ease-out infinite 0.3s;
  }

  .note-3 {
    animation: noteFloat3 2s ease-out infinite 0.6s;
  }

  @keyframes noteFloat1 {
    0% { transform: translate(-40px, 0); opacity: 1; }
    100% { transform: translate(-60px, -80px); opacity: 0; }
  }

  @keyframes noteFloat2 {
    0% { transform: translate(0, 0); opacity: 1; }
    100% { transform: translate(30px, -100px); opacity: 0; }
  }

  @keyframes noteFloat3 {
    0% { transform: translate(40px, 0); opacity: 1; }
    100% { transform: translate(60px, -70px); opacity: 0; }
  }
}

.audio-title {
  font-size: 28px;
  font-weight: bold;
  color: white;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  margin-bottom: 8px;
  text-align: center;
  padding: 0 20px;
}

.audio-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 0 20px;
}

// 控制栏
.audio-controls {
  padding: 24px;
  background: rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(10px);
}

.progress-container {
  margin-bottom: 16px;

  .progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    cursor: pointer;
    overflow: hidden;
    position: relative;

    &:hover {
      .progress-thumb {
        opacity: 1;
        transform: translateY(-50%) translateX(-50%) scale(1);
      }
    }

    .progress-fill {
      height: 100%;
      background: #FF8C42;
      border-radius: 3px;
      transition: width 0.1s;
    }

    .progress-thumb {
      position: absolute;
      top: 50%;
      width: 14px;
      height: 14px;
      background: #FF8C42;
      border-radius: 50%;
      transform: translateY(-50%) translateX(-50%) scale(0);
      opacity: 0;
      transition: all 0.2s;
      box-shadow: 0 2px 8px rgba(255, 140, 66, 0.5);
    }
  }

  .time-display {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
  }
}

.control-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 16px;

  .ctrl-btn {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: scale(1.1);
    }

    &.play-btn {
      width: 72px;
      height: 72px;
      background: #FF8C42;
      padding: 0;

      &:hover {
        background: #E67635;
        transform: scale(1.05);
      }
    }
  }
}

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

  .ctrl-btn.small {
    padding: 8px;

    &.active {
      color: #FF8C42;
    }
  }

  .volume-control {
    display: flex;
    align-items: center;
    gap: 8px;

    .volume-slider {
      width: 80px;
      height: 4px;
      -webkit-appearance: none;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 2px;
      cursor: pointer;

      &::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: white;
        cursor: pointer;
      }
    }
  }
}
</style>
