"use client"

import type React from "react"

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, Loader2, Award } from "lucide-react"
import { Switch } from "@/components/ui/switch"

// 定义好感度等级类型
export type AffinityLevel = {
  id: string
  level: number
  name: string
  minAffinity: number
  maxAffinity: number
  unlockContent: string
  rewardType: string
  rewardItems?: string
  rewardCurrency?: number
  isEnabled: boolean
}

type AffinityLevelDialogProps = {
  mode?: "create" | "edit"
  level?: AffinityLevel
  onSave?: (level: AffinityLevel) => void
  trigger?: React.ReactNode
}

export function AffinityLevelDialog({ mode = "create", level, onSave, trigger }: AffinityLevelDialogProps) {
  const [open, setOpen] = useState(false)
  const [isSubmitting, setIsSubmitting] = useState(false)

  // 表单状态
  const [levelNumber, setLevelNumber] = useState("6")
  const [levelName, setLevelName] = useState("")
  const [minAffinity, setMinAffinity] = useState("101")
  const [maxAffinity, setMaxAffinity] = useState("120")
  const [unlockContent, setUnlockContent] = useState("")
  const [rewardType, setRewardType] = useState("unlock")
  const [rewardItems, setRewardItems] = useState("")
  const [rewardCurrency, setRewardCurrency] = useState("100")
  const [isEnabled, setIsEnabled] = useState(true)

  // 当编辑模式且有等级数据时，初始化表单
  useEffect(() => {
    if (mode === "edit" && level) {
      setLevelNumber(String(level.level))
      setLevelName(level.name)
      setMinAffinity(String(level.minAffinity))
      setMaxAffinity(String(level.maxAffinity))
      setUnlockContent(level.unlockContent)
      setRewardType(level.rewardType)
      setRewardItems(level.rewardItems || "")
      setRewardCurrency(String(level.rewardCurrency || 100))
      setIsEnabled(level.isEnabled)
    }
  }, [mode, level, open])

  // 重置表单
  const resetForm = () => {
    if (mode === "create") {
      setLevelNumber("6")
      setLevelName("")
      setMinAffinity("101")
      setMaxAffinity("120")
      setUnlockContent("")
      setRewardType("unlock")
      setRewardItems("")
      setRewardCurrency("100")
      setIsEnabled(true)
    }
  }

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

    setIsSubmitting(true)
    try {
      // 构建等级对象
      const updatedLevel: AffinityLevel = {
        id: level?.id || `level-${Date.now()}`,
        level: Number(levelNumber),
        name: levelName,
        minAffinity: Number(minAffinity),
        maxAffinity: Number(maxAffinity),
        unlockContent,
        rewardType,
        rewardItems: rewardItems || undefined,
        rewardCurrency: rewardType === "currency" ? Number(rewardCurrency) : undefined,
        isEnabled,
      }

      // 模拟API请求
      await new Promise((resolve) => setTimeout(resolve, 1500))

      // 调用保存回调
      if (onSave) {
        onSave(updatedLevel)
      }

      // 成功提示
      alert(mode === "create" ? "好感度等级创建成功！" : "好感度等级更新成功！")
      setOpen(false)
      resetForm()
    } catch (error) {
      // 错误处理
      console.error(mode === "create" ? "创建好感度等级失败:" : "更新好感度等级失败:", error)
      alert(mode === "create" ? "创建好感度等级失败，请重试！" : "更新好感度等级失败，请重试！")
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <Dialog
      open={open}
      onOpenChange={(newOpen) => {
        setOpen(newOpen)
        if (!newOpen) resetForm()
      }}
    >
      <DialogTrigger asChild>
        {trigger || (
          <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" ? "设置新的好感度等级和对应奖励" : "修改好感度等级和对应奖励"}
          </DialogDescription>
        </DialogHeader>
        <div className="grid gap-4 py-4">
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="level" className="text-right">
                等级编号 <span className="text-red-500">*</span>
              </Label>
              <Input
                id="level"
                type="number"
                min="1"
                className="border-gray-300 focus-visible:ring-pink-500"
                value={levelNumber}
                onChange={(e) => setLevelNumber(e.target.value)}
                required
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="level-name" className="text-right">
                等级名称 <span className="text-red-500">*</span>
              </Label>
              <Input
                id="level-name"
                placeholder="输入等级名称"
                className="border-gray-300 focus-visible:ring-pink-500"
                value={levelName}
                onChange={(e) => setLevelName(e.target.value)}
                required
              />
            </div>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="min-affinity" className="text-right">
                最小好感度 <span className="text-red-500">*</span>
              </Label>
              <div className="flex items-center space-x-2">
                <Input
                  id="min-affinity"
                  type="number"
                  min="0"
                  className="border-gray-300 focus-visible:ring-pink-500"
                  value={minAffinity}
                  onChange={(e) => setMinAffinity(e.target.value)}
                  required
                />
                <span className="text-sm text-gray-500">点</span>
              </div>
            </div>
            <div className="space-y-2">
              <Label htmlFor="max-affinity" className="text-right">
                最大好感度 <span className="text-red-500">*</span>
              </Label>
              <div className="flex items-center space-x-2">
                <Input
                  id="max-affinity"
                  type="number"
                  min="0"
                  className="border-gray-300 focus-visible:ring-pink-500"
                  value={maxAffinity}
                  onChange={(e) => setMaxAffinity(e.target.value)}
                  required
                />
                <span className="text-sm text-gray-500">点</span>
              </div>
            </div>
          </div>

          <div className="space-y-2">
            <Label htmlFor="unlock-content" className="text-right">
              解锁内容 <span className="text-red-500">*</span>
            </Label>
            <Textarea
              id="unlock-content"
              placeholder="输入该等级解锁的内容"
              className="min-h-[80px] border-gray-300 focus-visible:ring-pink-500"
              value={unlockContent}
              onChange={(e) => setUnlockContent(e.target.value)}
              required
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="reward-type" className="text-right">
              奖励类型
            </Label>
            <Select value={rewardType} onValueChange={setRewardType}>
              <SelectTrigger className="border-gray-300 focus:ring-pink-500">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="unlock">内容解锁</SelectItem>
                <SelectItem value="item">道具奖励</SelectItem>
                <SelectItem value="currency">虚拟货币</SelectItem>
                <SelectItem value="mixed">混合奖励</SelectItem>
              </SelectContent>
            </Select>
          </div>

          {rewardType === "item" && (
            <div className="space-y-2">
              <Label htmlFor="reward-items" className="text-right">
                奖励道具
              </Label>
              <Textarea
                id="reward-items"
                placeholder="输入奖励的道具列表"
                className="min-h-[80px] border-gray-300 focus-visible:ring-pink-500"
                value={rewardItems}
                onChange={(e) => setRewardItems(e.target.value)}
              />
            </div>
          )}

          {rewardType === "currency" && (
            <div className="space-y-2">
              <Label htmlFor="reward-currency" className="text-right">
                虚拟货币数量
              </Label>
              <Input
                id="reward-currency"
                type="number"
                min="0"
                className="border-gray-300 focus-visible:ring-pink-500"
                value={rewardCurrency}
                onChange={(e) => setRewardCurrency(e.target.value)}
              />
            </div>
          )}

          <div className="flex items-center space-x-2 pt-2">
            <Switch id="enable-level" checked={isEnabled} onCheckedChange={setIsEnabled} />
            <Label htmlFor="enable-level" className="cursor-pointer">
              {mode === "create" ? "立即启用此等级" : "启用此等级"}
            </Label>
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => setOpen(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" ? "创建中..." : "更新中..."}
              </>
            ) : (
              <>
                <Award className="mr-2 h-4 w-4" />
                {mode === "create" ? "创建等级" : "更新等级"}
              </>
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}