"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { Eye, Edit, Play, Pause, Volume2, VolumeX } from "lucide-react"
import { Slider } from "@/components/ui/slider"

export type Song = {
  id: string
  name: string
  composer: string
  lyricist: string
  duration: string
  releaseDate?: string
  status: string
  image?: string
  audioUrl?: string
  description?: string
  rarity?: string
  cardType?: string
  genre?: string
  lyrics?: string
  bpm?: string | number
}

type SongDetailDialogProps = {
  song: Song
  onEdit?: () => void
}

export function SongDetailDialog({ song, onEdit }: SongDetailDialogProps) {
  const [open, setOpen] = useState(false)
  const [isPlaying, setIsPlaying] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [volume, setVolume] = useState(80)
  const [isMuted, setIsMuted] = useState(false)
  
  const audioRef = useRef<HTMLAudioElement | null>(null)
  
  // 初始化音频播放器
  useEffect(() => {
    if (open && !audioRef.current && song.audioUrl) {
      audioRef.current = new Audio(song.audioUrl)
      
      const audio = audioRef.current
      
      // 设置事件监听器
      audio.addEventListener('canplay', () => {
        setIsLoading(false)
      })
      
      audio.addEventListener('ended', () => {
        setIsPlaying(false)
      })
      
      audio.addEventListener('error', () => {
        setIsPlaying(false)
        setIsLoading(false)
      })
      
      // 设置音量
      audio.volume = volume / 100
      audio.muted = isMuted
    }
    
    // 关闭对话框时清理
    if (!open && audioRef.current) {
      const audio = audioRef.current
      audio.pause()
      audio.src = ''
      audioRef.current = null
      setIsPlaying(false)
    }
    
    return () => {
      if (audioRef.current) {
        const audio = audioRef.current
        audio.pause()
        audio.src = ''
        
        audio.removeEventListener('canplay', () => {})
        audio.removeEventListener('ended', () => {})
        audio.removeEventListener('error', () => {})
      }
    }
  }, [open, song.audioUrl, volume, isMuted])
  
  // 监听音量变化
  useEffect(() => {
    if (audioRef.current) {
      audioRef.current.volume = volume / 100
    }
  }, [volume])
  
  // 监听静音状态
  useEffect(() => {
    if (audioRef.current) {
      audioRef.current.muted = isMuted
    }
  }, [isMuted])

  const togglePlay = (e: React.MouseEvent) => {
    e.stopPropagation()
    
    if (!song.audioUrl) return
    
    if (isPlaying) {
      audioRef.current?.pause()
      setIsPlaying(false)
    } else {
      setIsLoading(true)
      if (audioRef.current) {
        audioRef.current.play()
          .then(() => {
            setIsPlaying(true)
            setIsLoading(false)
          })
          .catch((error) => {
            console.error('播放失败:', error)
            setIsLoading(false)
          })
      }
    }
  }
  
  // 切换静音状态
  const toggleMute = () => {
    setIsMuted(!isMuted)
  }
  
  // 处理音量变化
  const handleVolumeChange = (values: number[]) => {
    const newVolume = values[0]
    setVolume(newVolume)
    
    // 如果音量从0调高，则取消静音
    if (newVolume > 0 && isMuted) {
      setIsMuted(false)
    }
    // 如果音量调到0，则设置为静音
    else if (newVolume === 0 && !isMuted) {
      setIsMuted(true)
    }
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="ghost" size="icon" className="hover:bg-blue-50 hover:text-blue-600">
          <Eye className="h-4 w-4" />
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[550px]">
        <DialogHeader>
          <DialogTitle className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
            歌曲详情
          </DialogTitle>
          <DialogDescription>查看歌曲的详细信息</DialogDescription>
        </DialogHeader>
        <div className="grid gap-6 py-4">
          <div className="flex items-center gap-4">
            <div className="relative h-24 w-24 rounded-lg overflow-hidden bg-gray-100 flex items-center justify-center group">
              <img
                src={song.image || "/placeholder.svg?height=96&width=96"}
                alt={song.name}
                className="object-cover h-full w-full"
              />
              {song.audioUrl && (
                <div
                  className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center cursor-pointer"
                  onClick={togglePlay}
                >
                  {isLoading ? (
                    <div className="h-10 w-10 flex items-center justify-center">
                      <div className="h-6 w-6 animate-spin rounded-full border-2 border-white border-t-transparent" />
                    </div>
                  ) : isPlaying ? (
                    <Pause className="h-10 w-10 text-white" />
                  ) : (
                    <Play className="h-10 w-10 text-white" />
                  )}
                </div>
              )}
            </div>
            <div>
              <h3 className="text-lg font-bold">{song.name}</h3>
              <p className="text-sm text-gray-500">ID: {song.id}</p>
              <div className="flex gap-2 mt-2">
                <Badge className={song.status === "已发布" ? "bg-green-500" : "bg-gray-500"}>{song.status}</Badge>
                {song.rarity && <Badge className="bg-purple-500">{song.rarity}</Badge>}
                {song.cardType && <Badge className="bg-blue-500">{song.cardType}</Badge>}
              </div>
            </div>
          </div>
          
          {/* 音频控制器 - 仅当歌曲有音频URL且正在播放时显示 */}
          {song.audioUrl && isPlaying && (
            <div className="flex items-center space-x-4 bg-pink-50 p-3 rounded-lg">
              <Button
                variant="ghost"
                size="icon"
                className="h-7 w-7 rounded-full hover:bg-pink-100"
                onClick={toggleMute}
              >
                {isMuted ? <VolumeX className="h-3.5 w-3.5 text-pink-500" /> : <Volume2 className="h-3.5 w-3.5 text-pink-500" />}
              </Button>
              <div className="flex-1">
                <Slider
                  value={[volume]}
                  min={0}
                  max={100}
                  step={1}
                  onValueChange={handleVolumeChange}
                  className="h-1"
                />
              </div>
            </div>
          )}

          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <h4 className="text-sm font-medium text-gray-500 mb-1">作曲</h4>
                <p className="text-sm">{song.composer}</p>
              </div>
              <div>
                <h4 className="text-sm font-medium text-gray-500 mb-1">作词</h4>
                <p className="text-sm">{song.lyricist}</p>
              </div>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <h4 className="text-sm font-medium text-gray-500 mb-1">时长</h4>
                <p className="text-sm">{song.duration}</p>
              </div>
              <div>
                <h4 className="text-sm font-medium text-gray-500 mb-1">发布日期</h4>
                <p className="text-sm">{song.releaseDate || "未发布"}</p>
              </div>
            </div>
            
            {song.genre && (
              <div>
                <h4 className="text-sm font-medium text-gray-500 mb-1">风格</h4>
                <p className="text-sm">{song.genre}</p>
              </div>
            )}
            
            {song.description && (
              <div>
                <h4 className="text-sm font-medium text-gray-500 mb-1">描述</h4>
                <p className="text-sm">{song.description}</p>
              </div>
            )}
            
            {song.lyrics && (
              <div>
                <h4 className="text-sm font-medium text-gray-500 mb-1">歌词</h4>
                <div className="text-sm max-h-40 overflow-y-auto p-2 bg-gray-50 rounded">
                  <pre className="whitespace-pre-wrap font-sans">{song.lyrics}</pre>
                </div>
              </div>
            )}
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => setOpen(false)}>
            关闭
          </Button>
          {song.status !== "已发布" && onEdit && (
            <Button
              className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700"
              onClick={() => {
                setOpen(false)
                onEdit()
              }}
            >
              <Edit className="mr-2 h-4 w-4" />
              编辑歌曲
            </Button>
          )}
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}