"use client"

import { useState, useEffect } 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, AlertTriangle, Loader2, Trash2 } from "lucide-react"
import { Switch } from "@/components/ui/switch"
import { FileUpload } from "@/components/ui/file-upload"
import type { Prop } from "./prop-detail-dialog"
import { createProp, updateProp } from "@/lib/api/props"

// 判断是否为有效图片URL（非placeholder）
function isRealImageUrl(url?: string): boolean {
  if (!url) return false
  return !url.includes("placeholder")
}

// 中文稀有度 -> 后端 rarity key
const RARITY_MAP: Record<string, string> = {
  "普通": "common",
  "稀有": "rare",
  "史诗": "epic",
  "传说": "legendary",
}

type AddPropDialogProps = {
  mode?: "create" | "edit"
  initialProp?: Prop
  open?: boolean
  onOpenChange?: (open: boolean) => void
  onSave?: (prop: Prop) => void
}

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

  // 表单状态
  const [name, setName] = useState("")
  const [propType, setPropType] = useState("")
  const [rarity, setRarity] = useState("")
  const [description, setDescription] = useState("")
  const [isLimited, setIsLimited] = useState(false)
  const [imageUrl, setImageUrl] = useState<string | undefined>()
  const [previewId, setPreviewId] = useState(
    "PRP" +
      Math.floor(Math.random() * 1000)
        .toString()
        .padStart(3, "0"),
  )

  // 当编辑模式且有道具数据时，初始化表单
  useEffect(() => {
    if (mode === "edit" && initialProp) {
      setName(initialProp.name)
      setPropType(initialProp.type)
      setRarity(initialProp.rarity)
      setDescription(initialProp.description)
      setIsLimited(initialProp.type === "限定道具")
      setPreviewId(initialProp.id)
      setImageUrl(isRealImageUrl(initialProp.image) ? initialProp.image : undefined)
    }
  }, [mode, initialProp])

  // 处理受控和非受控开关状态
  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("")
      setPropType("")
      setRarity("")
      setDescription("")
      setIsLimited(false)
      setImageUrl(undefined)
      setPreviewId(
        "PRP" +
          Math.floor(Math.random() * 1000)
            .toString()
            .padStart(3, "0"),
      )
    }
  }

  const handleSubmit = async () => {
    // 表单验证
    if (!name || !propType || !rarity || !description) {
      alert("请填写所有必填字段！")
      return
    }

    setIsSubmitting(true)
    try {
      const actualType = isLimited ? "限定道具" : propType

      if (mode === "create") {
        // 调用后端创建 API
        const created = await createProp({
          name,
          description,
          category: actualType,
          rarityValue: RARITY_MAP[rarity] || rarity,
          imageUrl,
        })

        // 构建组件格式的 Prop 用于回调
        const prop: Prop = {
          id: created.id,
          name: created.name,
          type: created.category || actualType,
          rarity: created.rarity || rarity,
          description: created.description || description,
          releaseDate: created.createdAt || "",
          status: created.status || "未发布",
          activatedCount: created.activeCardsCount || 0,
          image: created.imageUrl || "/placeholder.svg?height=300&width=300",
        }

        if (onSave) {
          onSave(prop)
        }
      } else {
        // 调用后端更新 API
        const updated = await updateProp(initialProp!.id, {
          name,
          description,
          category: actualType,
          imageUrl,
        })

        const prop: Prop = {
          id: updated.id,
          name: updated.name,
          type: updated.category || actualType,
          rarity: updated.rarity || rarity,
          description: updated.description || description,
          releaseDate: initialProp?.releaseDate || "",
          status: updated.status || initialProp?.status || "未发布",
          activatedCount: updated.activeCardsCount || initialProp?.activatedCount || 0,
          image: updated.imageUrl || initialProp?.image || "/placeholder.svg?height=300&width=300",
        }

        if (onSave) {
          onSave(prop)
        }
      }

      // 关闭对话框
      handleOpenChange(false)
    } catch (error) {
      console.error(mode === "create" ? "创建道具失败:" : "更新道具失败:", error)
      alert(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-[550px]">
        <DialogHeader>
          <DialogTitle className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
            {mode === "create" ? "添加新道具" : "编辑道具"}
          </DialogTitle>
          <DialogDescription>
            {mode === "create" ? "填写道具信息以创建新的道具卡牌。创建后将生成唯一的卡牌ID。" : "修改道具信息。"}
          </DialogDescription>
        </DialogHeader>
        <div className="grid gap-4 py-4">
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="name" className="text-right">
                道具名称 <span className="text-red-500">*</span>
              </Label>
              <Input
                id="name"
                placeholder="输入道具名称"
                className="border-gray-300 focus-visible:ring-pink-500"
                value={name}
                onChange={(e) => setName(e.target.value)}
                required
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="type" className="text-right">
                道具类型 <span className="text-red-500">*</span>
              </Label>
              <Select value={propType} onValueChange={setPropType} required>
                <SelectTrigger className="border-gray-300 focus:ring-pink-500">
                  <SelectValue placeholder="选择道具类型" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="演出道具">演出道具</SelectItem>
                  <SelectItem value="互动道具">互动道具</SelectItem>
                  <SelectItem value="收藏品">收藏品</SelectItem>
                  <SelectItem value="限定道具">限定道具</SelectItem>
                  <SelectItem value="其他">其他</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="rarity" className="text-right">
                稀有度 <span className="text-red-500">*</span>
              </Label>
              <Select value={rarity} onValueChange={setRarity} required>
                <SelectTrigger className="border-gray-300 focus:ring-pink-500">
                  <SelectValue placeholder="选择稀有度" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="普通">普通</SelectItem>
                  <SelectItem value="稀有">稀有</SelectItem>
                  <SelectItem value="史诗">史诗</SelectItem>
                  <SelectItem value="传说">传说</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="quantity" className="text-right">
                初始数量 <span className="text-red-500">*</span>
              </Label>
              <Input
                id="quantity"
                type="number"
                min="1"
                defaultValue="1000"
                className="border-gray-300 focus-visible:ring-pink-500"
                required
                disabled={mode === "edit"}
              />
            </div>
          </div>

          <div className="space-y-2">
            <Label htmlFor="description" className="text-right">
              道具���述 <span className="text-red-500">*</span>
            </Label>
            <Textarea
              id="description"
              placeholder="输入道具描述"
              className="min-h-[100px] border-gray-300 focus-visible:ring-pink-500"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              required
            />
          </div>

          <div className="space-y-2">
            <Label className="text-right">
              道具图片 {mode === "create" && <span className="text-red-500">*</span>}
            </Label>
            {imageUrl ? (
              <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg border">
                <div className="flex items-center space-x-3">
                  <img
                    src={imageUrl}
                    alt="道具图片"
                    className="h-16 w-16 object-cover rounded border"
                  />
                  <span className="text-sm text-gray-700">当前图片</span>
                </div>
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  onClick={() => setImageUrl(undefined)}
                  className="text-red-500 hover:text-red-700 hover:bg-red-50"
                  disabled={isSubmitting}
                >
                  <Trash2 className="h-4 w-4" />
                </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) {
                    setImageUrl(files[0].url)
                  }
                }}
              />
            )}
          </div>

          <div className="flex items-center space-x-2 pt-2">
            <Switch id="limited" checked={isLimited} onCheckedChange={setIsLimited} />
            <Label htmlFor="limited" className="cursor-pointer">
              这是限定道具
            </Label>
          </div>

          {isLimited && (
            <div className="p-3 bg-amber-50 border border-amber-200 rounded-lg flex items-start">
              <AlertTriangle className="h-5 w-5 text-amber-500 mr-2 flex-shrink-0 mt-0.5" />
              <div className="text-sm text-amber-700">
                <p className="font-medium">限定道具提示</p>
                <p>限定道具通常有特定的发布时间和限制条件。请确保在发布前设置好相关参数。</p>
              </div>
            </div>
          )}

          {mode === "create" && (
            <div className="p-4 bg-gray-50 rounded-lg">
              <h3 className="text-sm font-medium mb-2">预览信息</h3>
              <p className="text-sm text-gray-600">
                道具ID: <span className="font-medium text-pink-600">{previewId}</span>
              </p>
              <p className="text-sm text-gray-600 mt-1">
                状态: <span className="font-medium">未发布</span>
              </p>
            </div>
          )}
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => handleOpenChange(false)} disabled={isSubmitting}>
            取消
          </Button>
          <Button
            className="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>
  )
}