"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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

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

export function CreateCleaningRuleDialog({ open, onOpenChange }: CreateCleaningRuleDialogProps) {
  const [formData, setFormData] = useState({
    name: "",
    description: "",
    type: "",
    sourceTable: "",
    targetTable: "",
  })

  const handleSubmit = () => {
    console.log("创建清洗规则:", formData)
    onOpenChange(false)
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle>新增清洗规则</DialogTitle>
        </DialogHeader>
        <div className="space-y-4 py-4">
          <div className="space-y-2">
            <Label htmlFor="name">规则名称</Label>
            <Input
              id="name"
              placeholder="输入规则名称"
              value={formData.name}
              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="description">规则描述</Label>
            <Textarea
              id="description"
              placeholder="描述规则的作用"
              value={formData.description}
              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="type">规则类型</Label>
            <Select value={formData.type} onValueChange={(value) => setFormData({ ...formData, type: value })}>
              <SelectTrigger>
                <SelectValue placeholder="选择规则类型" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="dedup">去重</SelectItem>
                <SelectItem value="format">格式化</SelectItem>
                <SelectItem value="mapping">映射</SelectItem>
                <SelectItem value="validate">校验</SelectItem>
                <SelectItem value="transform">转换</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="sourceTable">源表</Label>
              <Select
                value={formData.sourceTable}
                onValueChange={(value) => setFormData({ ...formData, sourceTable: value })}
              >
                <SelectTrigger>
                  <SelectValue placeholder="选择源表" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="raw_users">raw_users</SelectItem>
                  <SelectItem value="raw_transactions">raw_transactions</SelectItem>
                  <SelectItem value="raw_events">raw_events</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="targetTable">目标表</Label>
              <Select
                value={formData.targetTable}
                onValueChange={(value) => setFormData({ ...formData, targetTable: value })}
              >
                <SelectTrigger>
                  <SelectValue placeholder="选择目标表" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="clean_users">clean_users</SelectItem>
                  <SelectItem value="clean_transactions">clean_transactions</SelectItem>
                  <SelectItem value="clean_events">clean_events</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button onClick={handleSubmit}>创建规则</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}