"use client"

import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { X, Plus } from "lucide-react"

interface CreatePackageDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
}

export function CreatePackageDialog({ open, onOpenChange }: CreatePackageDialogProps) {
  const [formData, setFormData] = useState({
    name: "",
    description: "",
    conditions: [] as { field: string; operator: string; value: string }[],
    tags: [] as string[],
  })
  const [newTag, setNewTag] = useState("")

  const addCondition = () => {
    setFormData({
      ...formData,
      conditions: [...formData.conditions, { field: "", operator: "", value: "" }],
    })
  }

  const removeCondition = (index: number) => {
    setFormData({
      ...formData,
      conditions: formData.conditions.filter((_, i) => i !== index),
    })
  }

  const addTag = () => {
    if (newTag && !formData.tags.includes(newTag)) {
      setFormData({ ...formData, tags: [...formData.tags, newTag] })
      setNewTag("")
    }
  }

  const removeTag = (tag: string) => {
    setFormData({ ...formData, tags: formData.tags.filter((t) => t !== tag) })
  }

  const handleSubmit = () => {
    console.log("创建流量包:", formData)
    onOpenChange(false)
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[600px]">
        <DialogHeader>
          <DialogTitle>创建流量包</DialogTitle>
        </DialogHeader>
        <div className="space-y-4 py-4 max-h-[60vh] overflow-y-auto">
          <div className="space-y-2">
            <Label>流量包名称</Label>
            <Input
              placeholder="输入名称"
              value={formData.name}
              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
            />
          </div>

          <div className="space-y-2">
            <Label>描述</Label>
            <Textarea
              placeholder="描述流量包的用途"
              value={formData.description}
              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
            />
          </div>

          <div className="space-y-2">
            <div className="flex items-center justify-between">
              <Label>筛选条件</Label>
              <Button variant="outline" size="sm" onClick={addCondition}>
                <Plus className="w-3 h-3 mr-1" />
                添加条件
              </Button>
            </div>
            {formData.conditions.length === 0 ? (
              <div className="p-4 border border-dashed rounded-lg text-center text-gray-500 text-sm">
                点击"添加条件"定义筛选规则
              </div>
            ) : (
              <div className="space-y-2">
                {formData.conditions.map((condition, index) => (
                  <div key={index} className="flex items-center gap-2 p-3 bg-gray-50 rounded-lg">
                    <select
                      className="flex-1 px-3 py-2 border rounded-md text-sm"
                      value={condition.field}
                      onChange={(e) => {
                        const newConditions = [...formData.conditions]
                        newConditions[index].field = e.target.value
                        setFormData({ ...formData, conditions: newConditions })
                      }}
                    >
                      <option value="">选择字段</option>
                      <option value="rfm_score">RFM评分</option>
                      <option value="clv_score">CLV分数</option>
                      <option value="churn_prob">流失概率</option>
                      <option value="last_active">最后活跃</option>
                      <option value="total_amount">消费总额</option>
                    </select>
                    <select
                      className="w-24 px-3 py-2 border rounded-md text-sm"
                      value={condition.operator}
                      onChange={(e) => {
                        const newConditions = [...formData.conditions]
                        newConditions[index].operator = e.target.value
                        setFormData({ ...formData, conditions: newConditions })
                      }}
                    >
                      <option value="">操作</option>
                      <option value="gt">大于</option>
                      <option value="lt">小于</option>
                      <option value="eq">等于</option>
                      <option value="gte">大于等于</option>
                      <option value="lte">小于等于</option>
                    </select>
                    <Input
                      className="w-32"
                      placeholder="值"
                      value={condition.value}
                      onChange={(e) => {
                        const newConditions = [...formData.conditions]
                        newConditions[index].value = e.target.value
                        setFormData({ ...formData, conditions: newConditions })
                      }}
                    />
                    <Button variant="ghost" size="sm" onClick={() => removeCondition(index)}>
                      <X className="w-4 h-4" />
                    </Button>
                  </div>
                ))}
              </div>
            )}
          </div>

          <div className="space-y-2">
            <Label>标签</Label>
            <div className="flex items-center gap-2">
              <Input
                placeholder="输入标签"
                value={newTag}
                onChange={(e) => setNewTag(e.target.value)}
                onKeyDown={(e) => e.key === "Enter" && addTag()}
              />
              <Button variant="outline" onClick={addTag}>
                添加
              </Button>
            </div>
            {formData.tags.length > 0 && (
              <div className="flex flex-wrap gap-2 mt-2">
                {formData.tags.map((tag) => (
                  <Badge key={tag} variant="secondary" className="pr-1">
                    {tag}
                    <button onClick={() => removeTag(tag)} className="ml-1 hover:text-red-500">
                      <X className="w-3 h-3" />
                    </button>
                  </Badge>
                ))}
              </div>
            )}
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button onClick={handleSubmit}>创建流量包</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}