"use client"

import { useState, useEffect, useRef } from "react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Plus, Loader2, Music, Trash2 } from "lucide-react"
import { FileUpload } from "@/components/ui/file-upload"
import { Switch } from "@/components/ui/switch"
import type { Song } from "./song-detail-dialog"
import { uploadSongFile, createSong, updateSong } from "@/lib/api/songs"

type AddSongDialogProps = {
  mode?: "create" | "edit"
  initialSong?: Song
  open?: boolean
  onOpenChange?: (open: boolean) => void
  onSave?: (song: Song) => void
}

export function AddSongDialog({
  mode = "create",
  initialSong,
  open: controlledOpen,
  onOpenChange: setControlledOpen,
  onSave,
}: AddSongDialogProps) {
  const [open, setOpen] = useState(false)
  const [isSubmitting, setIsSubmitting] = useState(false)

  // 表单状态
  const [name, setName] = useState("")
  const [songType, setSongType] = useState("")
  const [composer, setComposer] = useState("")
  const [lyricist, setLyricist] = useState("")
  const [duration, setDuration] = useState("")
  const [bpm, setBpm] = useState("")
  const [description, setDescription] = useState("")
  const [isOriginal, setIsOriginal] = useState(true)
  const [previewId, setPreviewId] = useState(
    "SNG" +
      Math.floor(Math.random() * 1000)
        .toString()
        .padStart(3, "0"),
  )
  const [coverUrl, setCoverUrl] = useState<string>("")
  const [audioFile, setAudioFile] = useState<File | null>(null)
  const [audioUrl, setAudioUrl] = useState<string>("")
  const [isUploading, setIsUploading] = useState(false)
  const [uploadError, setUploadError] = useState<string>("")

  const audioInputRef = useRef<HTMLInputElement>(null)

  // 当编辑模式且有歌曲数据时，初始化表单
  useEffect(() => {
    if (mode === "edit" && initialSong) {
      setName(initialSong.name)
      setComposer(initialSong.composer)
      setLyricist(initialSong.lyricist)
      setDuration(initialSong.duration)
      setIsOriginal(true) // 假设所有编辑的歌曲都是原创
      setPreviewId(initialSong.id)
      
      // 初始化歌曲类型
      if (initialSong.genre) {
        setSongType(initialSong.genre)
      }
      
      // 初始化BPM
      if (initialSong.bpm) {
        setBpm(String(initialSong.bpm))
      }
      
      // 初始化描述
      if (initialSong.description) {
        setDescription(initialSong.description)
      }
      
      // 初始化封面URL
      if (initialSong.image) {
        setCoverUrl(initialSong.image)
      }

      // 初始化音频URL
      if (initialSong.audioUrl) {
        setAudioUrl(initialSong.audioUrl)
      }
    }
  }, [mode, initialSong])

  // 处理受控和非受控开关状态
  useEffect(() => {
    if (controlledOpen !== undefined) {
      setOpen(controlledOpen)
    }
  }, [controlledOpen])

  // 处理对话框关闭
  const handleOpenChange = (newOpen: boolean) => {
    setOpen(newOpen)
    if (setControlledOpen) {
      setControlledOpen(newOpen)
    }

    // 如果关闭对话框，重置表单（仅在创建模式下）
    if (!newOpen && mode === "create") {
      resetForm()
    }
  }

  // 重置表单
  const resetForm = () => {
    if (mode === "create") {
      setName("")
      setSongType("")
      setComposer("")
      setLyricist("")
      setDuration("")
      setBpm("")
      setDescription("")
      setIsOriginal(true)
      setPreviewId(
        "SNG" +
          Math.floor(Math.random() * 1000)
            .toString()
            .padStart(3, "0"),
      )
    }
  }

  // 歌曲文件选择和上传
  const handleAudioFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return
    setAudioFile(file)
    setIsUploading(true)
    setUploadError("")
    try {
      const res = await uploadSongFile({ file, isPermanent: true, filename: file.name })
      setAudioUrl(res.url)
    } catch (err: any) {
      setUploadError(err.message || "上传失败")
      setAudioUrl("")
    } finally {
      setIsUploading(false)
    }
  }

  const handleSubmit = async () => {
    // 表单验证
    if (!name || !composer || !lyricist || !duration) {
      alert("请填写所有必填字段！")
      return
    }
    
    // 创建模式下必须上传音频
    if (mode === "create" && !audioUrl) {
      alert("请上传歌曲文件！")
      return
    }
    
    setIsSubmitting(true)
    try {
      // 构造基本的请求数据
      const songAttributes: any = {
        genre: songType || undefined,
        duration,
        composer,
        lyricist,
        arrangement: isOriginal ? undefined : "",
        lyrics: description || undefined,
      }
      
      // 只有在有音频URL时才添加
      if (audioUrl) {
        songAttributes.audio_file = encodeURI(audioUrl)
      }
      
      // 只有在有BPM时才添加
      if (bpm) {
        songAttributes.bpm = Number(bpm)
      }
      
      if (mode === "create") {
        // 创建模式
        const payload: any = {
          name,
          category: "song",
          card_type: "regular",
          rarity: "epic",
          price: 39.99,
          status: "draft",
          description: description || undefined,
          song_attributes: songAttributes
        }
        if (coverUrl) {
          payload.image_url = coverUrl
        }
        const created = await createSong(payload)
        if (onSave) onSave(created)
      } else if (mode === "edit" && initialSong) {
        // 编辑模式
        const payload: any = {
          name,
          category: "song",
          song_attributes: songAttributes
        }
        if (coverUrl) {
          payload.image_url = coverUrl
        }
        const updated = await updateSong(initialSong.id, payload)
        if (onSave) onSave(updated)
      }
      
      handleOpenChange(false)
    } catch (error: any) {
      alert(error.message || (mode === "create" ? "创建歌曲失败" : "更新歌曲失败"))
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      {mode === "create" && (
        <DialogTrigger asChild>
          <Button className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 transition-all duration-300 shadow-md hover:shadow-lg">
            <Plus className="mr-2 h-4 w-4" />
            添加歌曲
          </Button>
        </DialogTrigger>
      )}
      <DialogContent className="sm:max-w-[520px] p-4">
        <DialogHeader>
          <DialogTitle className="text-lg font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
            {mode === "create" ? "添加新歌曲" : "编辑歌曲"}
          </DialogTitle>
          <DialogDescription className="text-xs mt-1 mb-2">{mode === "create" ? "填写歌曲信息以创建新的歌曲。" : "修改歌曲信息。"}</DialogDescription>
        </DialogHeader>
        <div className="grid grid-cols-2 gap-x-3 gap-y-2 py-2">
          <div className="space-y-1">
            <Label htmlFor="name" className="text-xs">歌曲名称 <span className="text-red-500">*</span></Label>
            <Input id="name" placeholder="输入歌曲名称" className="h-8 text-xs border-gray-300 focus-visible:ring-pink-500" value={name} onChange={(e) => setName(e.target.value)} required />
          </div>
          <div className="space-y-1">
            <Label htmlFor="type" className="text-xs">歌曲类型</Label>
            <Select value={songType} onValueChange={setSongType}>
              <SelectTrigger className="h-8 text-xs border-gray-300 focus:ring-pink-500">
                <SelectValue placeholder="选择歌曲类型" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="pop">流行</SelectItem>
                <SelectItem value="rock">摇滚</SelectItem>
                <SelectItem value="electronic">电子</SelectItem>
                <SelectItem value="folk">民谣</SelectItem>
                <SelectItem value="classical">古典</SelectItem>
                <SelectItem value="other">其他</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-1">
            <Label htmlFor="composer" className="text-xs">作曲 <span className="text-red-500">*</span></Label>
            <Input id="composer" placeholder="输入作曲者" className="h-8 text-xs border-gray-300 focus-visible:ring-pink-500" value={composer} onChange={(e) => setComposer(e.target.value)} required />
          </div>
          <div className="space-y-1">
            <Label htmlFor="lyricist" className="text-xs">作词 <span className="text-red-500">*</span></Label>
            <Input id="lyricist" placeholder="输入作词者" className="h-8 text-xs border-gray-300 focus-visible:ring-pink-500" value={lyricist} onChange={(e) => setLyricist(e.target.value)} required />
          </div>

          <div className="space-y-1">
            <Label htmlFor="duration" className="text-xs">时长 <span className="text-red-500">*</span></Label>
            <Input id="duration" placeholder="格式: MM:SS" className="h-8 text-xs border-gray-300 focus-visible:ring-pink-500" value={duration} onChange={(e) => setDuration(e.target.value)} required />
          </div>
          <div className="space-y-1">
            <Label htmlFor="bpm" className="text-xs">BPM</Label>
            <Input id="bpm" type="number" placeholder="输入BPM" className="h-8 text-xs border-gray-300 focus-visible:ring-pink-500" value={bpm} onChange={(e) => setBpm(e.target.value)} />
          </div>

          <div className="space-y-1">
            <Label className="text-xs">歌曲文件 {mode === "create" && <span className="text-red-500">*</span>}</Label>
            <div
              className="relative border-2 border-dashed border-gray-300 rounded-md p-2 flex flex-col items-center justify-center hover:border-pink-500 transition-colors cursor-pointer min-h-[60px]"
              onClick={() => !isUploading && !isSubmitting && audioInputRef.current?.click()}
              style={{ position: 'relative' }}
            >
              <Music className="h-5 w-5 text-gray-400 mb-1" />
              <span className="text-xs text-gray-500">{audioFile ? audioFile.name : "上传"}</span>
              <input
                ref={audioInputRef}
                type="file"
                accept="audio/*"
                className="hidden"
                onChange={handleAudioFileChange}
                disabled={isUploading || isSubmitting}
              />
              {isUploading && <span className="text-xs text-pink-500 mt-1">上传中...</span>}
              {audioUrl && !isUploading && <span className="text-xs text-green-600 mt-1">已上传</span>}
              {uploadError && <span className="text-xs text-red-500 mt-1">{uploadError}</span>}
            </div>
          </div>
          <div className="space-y-1">
            <Label className="text-xs">歌曲封面</Label>
            {coverUrl && !coverUrl.includes("placeholder") ? (
              <div className="flex items-center justify-between p-2 bg-gray-50 rounded-md border min-h-[60px]">
                <div className="flex items-center space-x-2">
                  <img
                    src={coverUrl}
                    alt="歌曲封面"
                    className="h-10 w-10 object-cover rounded border"
                  />
                  <span className="text-xs text-gray-700">已上传</span>
                </div>
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  onClick={() => setCoverUrl("")}
                  className="text-red-500 hover:text-red-700 hover:bg-red-50 h-6 w-6 p-0"
                  disabled={isSubmitting}
                >
                  <Trash2 className="h-3 w-3" />
                </Button>
              </div>
            ) : (
              <FileUpload
                imageOnly={true}
                multiple={false}
                maxFiles={1}
                maxSize={5 * 1024 * 1024}
                accept={{ 'image/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp'] }}
                placeholder="上传封面"
                disabled={isSubmitting}
                onUploadSuccess={(files) => {
                  if (files.length > 0) {
                    setCoverUrl(files[0].url)
                  }
                }}
              />
            )}
          </div>
        </div>
        {/* 可折叠描述和预览信息 */}
        <div className="mt-1">
          <details className="mb-1">
            <summary className="cursor-pointer text-xs text-gray-600 select-none">歌曲描述</summary>
            <Textarea id="description" placeholder="输入歌曲描述" className="min-h-[60px] text-xs border-gray-300 focus-visible:ring-pink-500 mt-1" value={description} onChange={(e) => setDescription(e.target.value)} />
          </details>
          {mode === "create" && (
            <details>
              <summary className="cursor-pointer text-xs text-gray-600 select-none">预览信息</summary>
              <div className="p-2 bg-gray-50 rounded mt-1">
                <p className="text-xs text-gray-600">歌曲ID: <span className="font-medium text-pink-600">{previewId}</span></p>
                <p className="text-xs text-gray-600 mt-1">状态: <span className="font-medium">未发布</span></p>
              </div>
            </details>
          )}
        </div>
        <div className="flex items-center space-x-2 pt-1 pb-2">
          <Switch id="original" checked={isOriginal} onCheckedChange={setIsOriginal} />
          <Label htmlFor="original" className="cursor-pointer text-xs">这是原创歌曲</Label>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => handleOpenChange(false)} disabled={isSubmitting} className="h-8 px-4 text-xs">取消</Button>
          <Button className="h-8 px-4 text-xs bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700" onClick={handleSubmit} disabled={isSubmitting}>
            {isSubmitting ? (<><Loader2 className="mr-2 h-4 w-4 animate-spin" />{mode === "create" ? "创建中..." : "更新中..."}</>) : mode === "create" ? "创建歌曲" : "更新歌曲"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}