"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 Food = {
  id: string
  name: string
  food_type: string
  description: string
  rarity: string
  image?: string
  animation_file?: string
  sound_effect?: string
  calories?: number
  taste_tags?: string
  nutritional_value?: string
  effect_description?: string
  boost_attributes?: Record<string, number>
  status: string
  created_at?: string
  updated_at?: string
  // 保留一些前端显示用的字段
  releaseDate?: string
  activatedCount?: number
}

type FoodDetailDialogProps = {
  food: Food
  onEdit?: () => void
}

export function FoodDetailDialog({ food, onEdit }: FoodDetailDialogProps) {
  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={food.image || "/placeholder.svg?height=96&width=96"}
                alt={food.name}
                className="object-cover h-full w-full"
              />
            </div>
            <div>
              <h3 className="text-lg font-bold">{food.name}</h3>
              <p className="text-sm text-gray-500">ID: {food.id}</p>
              <div className="flex gap-2 mt-2">
                <Badge className="bg-purple-500">{food.food_type}</Badge>
                <Badge className="bg-blue-500">{food.rarity}</Badge>
                <Badge className={food.status === "已发布" ? "bg-green-500" : "bg-gray-500"}>{food.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">{food.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">{food.releaseDate || "未发布"}</p>
              </div>
              <div>
                <h4 className="text-sm font-medium text-gray-500 mb-1">激活数量</h4>
                <p className="text-sm">{food.activatedCount}</p>
              </div>
            </div>
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => setOpen(false)}>
            关闭
          </Button>
          {food.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>
  )
}