"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 { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Download, FileText } from "lucide-react"

interface ExportCardsDialogProps {
  outfitId: string
}

export function ExportCardsDialog({ outfitId }: ExportCardsDialogProps) {
  const [open, setOpen] = useState(false)
  const [exportType, setExportType] = useState("all")
  const [fileFormat, setFileFormat] = useState("csv")

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="outline" className="hover:bg-blue-50 hover:text-blue-700 transition-all duration-200">
          <Download className="mr-2 h-4 w-4" />
          导出卡牌ID
        </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-blue-600 to-teal-600">
            导出卡牌ID
          </DialogTitle>
          <DialogDescription>
            导出服装 <span className="font-medium">{outfitId}</span> 的卡牌ID列表。
          </DialogDescription>
        </DialogHeader>
        <div className="grid gap-4 py-4">
          <div className="space-y-2">
            <Label>导出范围</Label>
            <RadioGroup defaultValue="all" value={exportType} onValueChange={setExportType}>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="all" id="all" />
                <Label htmlFor="all" className="cursor-pointer">
                  所有卡牌ID
                </Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="unused" id="unused" />
                <Label htmlFor="unused" className="cursor-pointer">
                  未激活的卡牌ID
                </Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="activated" id="activated" />
                <Label htmlFor="activated" className="cursor-pointer">
                  已激活的卡牌ID
                </Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="batch" id="batch" />
                <Label htmlFor="batch" className="cursor-pointer">
                  指定批次
                </Label>
              </div>
            </RadioGroup>
          </div>

          {exportType === "batch" && (
            <div className="space-y-2">
              <Label htmlFor="batch-select">选择批次</Label>
              <Select>
                <SelectTrigger className="border-gray-300 focus:ring-blue-500">
                  <SelectValue placeholder="选择批次" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="B001">B001 (2023-09-01)</SelectItem>
                  <SelectItem value="B002">B002 (2023-12-15)</SelectItem>
                </SelectContent>
              </Select>
            </div>
          )}

          <div className="space-y-2">
            <Label htmlFor="format">文件格式</Label>
            <Select value={fileFormat} onValueChange={setFileFormat}>
              <SelectTrigger className="border-gray-300 focus:ring-blue-500">
                <SelectValue placeholder="选择文件格式" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="csv">CSV 文件</SelectItem>
                <SelectItem value="excel">Excel 文件</SelectItem>
                <SelectItem value="txt">文本文件</SelectItem>
                <SelectItem value="json">JSON 文件</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="p-3 bg-blue-50 rounded-md flex items-start">
            <FileText className="h-5 w-5 text-blue-500 mr-2 flex-shrink-0 mt-0.5" />
            <div>
              <p className="text-sm text-blue-700 font-medium">导出预览</p>
              <p className="text-sm text-blue-600">
                {exportType === "all" && "将导出所有卡牌ID"}
                {exportType === "unused" && "将导出所有未激活的卡牌ID"}
                {exportType === "activated" && "将导出所有已激活的卡牌ID"}
                {exportType === "batch" && "将导出选定批次的卡牌ID"} ({fileFormat.toUpperCase()} 格式)
              </p>
            </div>
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => setOpen(false)}>
            取消
          </Button>
          <Button className="bg-gradient-to-r from-blue-500 to-teal-500 hover:from-blue-600 hover:to-teal-600">
            <Download className="mr-2 h-4 w-4" />
            导出
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}