"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { AlertCircle, Loader2, Send } from "lucide-react"

type PublishConfirmationDialogProps = {
  title: string
  description: string
  itemName: string
  onPublish: () => Promise<void>
  trigger?: React.ReactNode
}

export function PublishConfirmationDialog({
  title,
  description,
  itemName,
  onPublish,
  trigger,
}: PublishConfirmationDialogProps) {
  const [open, setOpen] = useState(false)
  const [isPublishing, setIsPublishing] = useState(false)

  const handlePublish = async () => {
    setIsPublishing(true)
    try {
      await onPublish()
      setOpen(false)
    } catch (error) {
      console.error("发布失败:", error)
      // 失败处理已经在onPublish中处理，这里不需要额外处理
    } finally {
      setIsPublishing(false)
    }
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        {trigger || (
          <Button 
            variant="ghost" 
            size="icon" 
            className="hover:bg-green-50 hover:text-green-600"
            title="发布歌曲"
          >
            <Send className="h-4 w-4" />
          </Button>
        )}
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle className="text-xl font-bold text-green-600 flex items-center">
            <AlertCircle className="h-5 w-5 mr-2" />
            {title}
          </DialogTitle>
          <DialogDescription>{description}</DialogDescription>
        </DialogHeader>
        <div className="py-4">
          <p className="text-sm text-gray-700 mb-2">
            您确定要发布 <span className="font-medium text-green-600">{itemName}</span> 吗？
          </p>
          <div className="p-3 bg-amber-50 border border-amber-200 rounded-md">
            <p className="text-sm text-amber-700 font-medium">
              重要提示
            </p>
            <p className="text-sm text-amber-600 mt-1">
              一旦发布后，将不能再修改任何卡片属性，包括名称、描述、音频等信息。请确认所有信息正确无误。
            </p>
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => setOpen(false)} disabled={isPublishing}>
            取消
          </Button>
          <Button
            variant="default"
            onClick={handlePublish}
            disabled={isPublishing}
            className="bg-green-600 hover:bg-green-700 text-white"
          >
            {isPublishing ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                发布中...
              </>
            ) : (
              <>
                <Send className="mr-2 h-4 w-4" />
                确认发布
              </>
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}