"use client"

import { useState } 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 } from "lucide-react"

export type Prop = {
  id: string
  name: string
  type: string
  rarity: string
  description: string
  releaseDate: string
  status: string
  activatedCount: number
  image?: string
}

type PropDetailDialogProps = {
  prop: Prop
  onEdit?: () => void
}

export function PropDetailDialog({ prop, onEdit }: PropDetailDialogProps) {
  const [open, setOpen] = useState(false)

  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="h-24 w-24 rounded-lg overflow-hidden bg-gray-100 flex items-center justify-center">
              <img
                src={prop.image || "/placeholder.svg?height=96&width=96"}
                alt={prop.name}
                className="object-cover h-full w-full"
              />
            </div>
            <div>
              <h3 className="text-lg font-bold">{prop.name}</h3>
              <p className="text-sm text-gray-500">ID: {prop.id}</p>
              <div className="flex gap-2 mt-2">
                <Badge className="bg-purple-500">{prop.type}</Badge>
                <Badge className="bg-blue-500">{prop.rarity}</Badge>
                <Badge className={prop.status === "已发布" ? "bg-green-500" : "bg-gray-500"}>{prop.status}</Badge>
              </div>
            </div>
          </div>

          <div className="space-y-4">
            <div>
              <h4 className="text-sm font-medium text-gray-500 mb-1">道具描述</h4>
              <p className="text-sm">{prop.description}</p>
            </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">{prop.releaseDate || "未发布"}</p>
              </div>
              <div>
                <h4 className="text-sm font-medium text-gray-500 mb-1">激活数量</h4>
                <p className="text-sm">{prop.activatedCount}</p>
              </div>
            </div>
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => setOpen(false)}>
            关闭
          </Button>
          {prop.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>
  )
}