"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 { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Plus, Loader2 } from "lucide-react"

interface AddPrintBatchDialogProps {
  propId: string
  isPublished: boolean
}

// Mock propData for demonstration purposes.  Replace with actual data source.
const propData = {
  prop1: { printedCount: 500 },
  prop2: { printedCount: 1000 },
  // ... more props
}

export function AddPrintBatchDialog({ propId, isPublished }: AddPrintBatchDialogProps) {
  const [open, setOpen] = useState(false)
  const [quantity, setQuantity] = useState(1000)
  const [batchName, setBatchName] = useState("")
  const [printingMethod, setPrintingMethod] = useState("standard")
  const [isAutoActivate, setIsAutoActivate] = useState(false)
  const [isSubmitting, setIsSubmitting] = useState(false)

  const handleSubmit = async () => {
    setIsSubmitting(true)
    // 模拟API请求
    await new Promise((resolve) => setTimeout(resolve, 1500))
    setIsSubmitting(false)
    setOpen(false)
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 transition-all duration-300 shadow-md hover:shadow-lg">
          <Plus className="mr-2 h-4 w-4" />
          添加印刷批次
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
            添加新印刷批次
          </DialogTitle>
          <DialogDescription>
            为道具 <span className="font-medium">{propId}</span> 添加新的卡牌印刷批次。系统将自动生成唯一的卡牌ID。
          </DialogDescription>
        </DialogHeader>
        <div className="grid gap-4 py-4">
          <div className="space-y-2">
            <Label htmlFor="batchName">批次名称 (可选)</Label>
            <Input
              id="batchName"
              placeholder="例如：2024年春季批次"
              value={batchName}
              onChange={(e) => setBatchName(e.target.value)}
              className="border-gray-300 focus-visible:ring-purple-500"
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="quantity">印刷数量</Label>
            <Input
              id="quantity"
              type="number"
              min="1"
              value={quantity}
              onChange={(e) => setQuantity(Number.parseInt(e.target.value))}
              className="border-gray-300 focus-visible:ring-purple-500"
            />
            <p className="text-sm text-gray-500">将生成 {quantity} 个新的卡牌ID</p>
          </div>

          <div className="space-y-2">
            <Label htmlFor="printingMethod">印刷方式</Label>
            <Select value={printingMethod} onValueChange={setPrintingMethod}>
              <SelectTrigger id="printingMethod">
                <SelectValue placeholder="选择印刷方式" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="standard">标准印刷</SelectItem>
                <SelectItem value="premium">高级印刷 (带全息效果)</SelectItem>
                <SelectItem value="limited">限定版 (带编号)</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="flex items-center space-x-2 pt-2">
            <Checkbox
              id="autoActivate"
              checked={isAutoActivate}
              onCheckedChange={(checked) => setIsAutoActivate(!!checked)}
            />
            <Label htmlFor="autoActivate" className="text-sm font-normal">
              自动激活卡牌 (用于测试环境)
            </Label>
          </div>

          <div className="space-y-2">
            <Label className="text-right">预览</Label>
            <div className="p-3 bg-gray-50 rounded-md">
              <p className="text-sm text-gray-700">
                批次ID:{" "}
                <span className="font-mono">
                  B
                  {Math.floor(Math.random() * 1000)
                    .toString()
                    .padStart(3, "0")}
                </span>
              </p>
              <p className="text-sm text-gray-700">
                起始ID:{" "}
                <span className="font-mono">
                  {propId}-{(propData[propId as keyof typeof propData]?.printedCount || 0) + 1}
                </span>
              </p>
              <p className="text-sm text-gray-700">
                结束ID:{" "}
                <span className="font-mono">
                  {propId}-{(propData[propId as keyof typeof propData]?.printedCount || 0) + quantity}
                </span>
              </p>
            </div>
            <p className="text-xs text-gray-500">实际ID将在创建批次时生成</p>
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => setOpen(false)} disabled={isSubmitting}>
            取消
          </Button>
          <Button
            className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600"
            onClick={handleSubmit}
            disabled={isSubmitting}
          >
            {isSubmitting ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                处理中...
              </>
            ) : (
              "创建批次"
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}