"use client"

import { useState } from "react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Settings, Bell, Users, Clock } from "lucide-react"
import { Checkbox } from "@/components/ui/checkbox"

interface AlertRuleSettingsDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  rule?: {
    name: string
    condition: string
    severity: string
  }
}

export function AlertRuleSettingsDialog({ open, onOpenChange, rule }: AlertRuleSettingsDialogProps) {
  const [activeTab, setActiveTab] = useState("condition")

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Settings className="w-5 h-5" />
            规则设置 - {rule?.name || "告警规则"}
          </DialogTitle>
          <DialogDescription>配置告警触发条件、通知方式和处理策略</DialogDescription>
        </DialogHeader>

        <Tabs value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="grid w-full grid-cols-4">
            <TabsTrigger value="condition">触发条件</TabsTrigger>
            <TabsTrigger value="notify">通知设置</TabsTrigger>
            <TabsTrigger value="suppress">抑制规则</TabsTrigger>
            <TabsTrigger value="action">处理动作</TabsTrigger>
          </TabsList>

          <TabsContent value="condition" className="space-y-4 mt-4">
            <div className="space-y-2">
              <Label>规则名称</Label>
              <Input defaultValue={rule?.name} />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>监控指标</Label>
                <Select defaultValue="cpu">
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="cpu">CPU使用率</SelectItem>
                    <SelectItem value="memory">内存使用率</SelectItem>
                    <SelectItem value="disk">磁盘使用率</SelectItem>
                    <SelectItem value="network">网络流量</SelectItem>
                    <SelectItem value="api_latency">API延迟</SelectItem>
                    <SelectItem value="error_rate">错误率</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>比较方式</Label>
                <Select defaultValue="gt">
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="gt">大于</SelectItem>
                    <SelectItem value="gte">大于等于</SelectItem>
                    <SelectItem value="lt">小于</SelectItem>
                    <SelectItem value="lte">小于等于</SelectItem>
                    <SelectItem value="eq">等于</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>阈值</Label>
                <Input type="number" defaultValue="80" />
              </div>
              <div className="space-y-2">
                <Label>持续时间</Label>
                <Select defaultValue="5">
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="1">1分钟</SelectItem>
                    <SelectItem value="3">3分钟</SelectItem>
                    <SelectItem value="5">5分钟</SelectItem>
                    <SelectItem value="10">10分钟</SelectItem>
                    <SelectItem value="15">15分钟</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="space-y-2">
              <Label>严重程度</Label>
              <Select defaultValue={rule?.severity || "warning"}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="info">提示</SelectItem>
                  <SelectItem value="warning">警告</SelectItem>
                  <SelectItem value="critical">严重</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </TabsContent>

          <TabsContent value="notify" className="space-y-4 mt-4">
            <div className="flex items-center gap-2 mb-2">
              <Bell className="w-4 h-4 text-blue-500" />
              <span className="font-medium">通知渠道</span>
            </div>
            <div className="space-y-3">
              {[
                { id: "email", label: "邮件通知", checked: true },
                { id: "sms", label: "短信通知", checked: true },
                { id: "webhook", label: "Webhook", checked: false },
                { id: "dingtalk", label: "钉钉群", checked: true },
                { id: "wechat", label: "企业微信", checked: false },
              ].map((channel) => (
                <div key={channel.id} className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg">
                  <Checkbox defaultChecked={channel.checked} />
                  <span className="text-sm font-medium">{channel.label}</span>
                </div>
              ))}
            </div>
            <div className="space-y-2">
              <Label className="flex items-center gap-2">
                <Users className="w-4 h-4" />
                通知人员
              </Label>
              <Select defaultValue="ops">
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="ops">运维组</SelectItem>
                  <SelectItem value="dev">开发组</SelectItem>
                  <SelectItem value="manager">管理层</SelectItem>
                  <SelectItem value="all">全部</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </TabsContent>

          <TabsContent value="suppress" className="space-y-4 mt-4">
            <div className="flex items-center gap-2 mb-2">
              <Clock className="w-4 h-4 text-amber-500" />
              <span className="font-medium">告警抑制</span>
            </div>
            <div className="flex items-center justify-between p-4 bg-slate-50 rounded-lg">
              <div>
                <p className="font-medium">重复告警抑制</p>
                <p className="text-sm text-slate-500">相同告警在一定时间内不重复发送</p>
              </div>
              <Switch defaultChecked />
            </div>
            <div className="space-y-2">
              <Label>抑制时间 (分钟)</Label>
              <Input type="number" defaultValue="30" />
            </div>
            <div className="flex items-center justify-between p-4 bg-slate-50 rounded-lg">
              <div>
                <p className="font-medium">夜间静默</p>
                <p className="text-sm text-slate-500">夜间时段不发送低级别告警</p>
              </div>
              <Switch />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>静默开始</Label>
                <Input type="time" defaultValue="22:00" />
              </div>
              <div className="space-y-2">
                <Label>静默结束</Label>
                <Input type="time" defaultValue="08:00" />
              </div>
            </div>
          </TabsContent>

          <TabsContent value="action" className="space-y-4 mt-4">
            <div className="flex items-center justify-between p-4 bg-slate-50 rounded-lg">
              <div>
                <p className="font-medium">自动扩容</p>
                <p className="text-sm text-slate-500">触发告警时自动增加实例数</p>
              </div>
              <Switch />
            </div>
            <div className="flex items-center justify-between p-4 bg-slate-50 rounded-lg">
              <div>
                <p className="font-medium">自动重启</p>
                <p className="text-sm text-slate-500">服务异常时自动重启</p>
              </div>
              <Switch />
            </div>
            <div className="flex items-center justify-between p-4 bg-slate-50 rounded-lg">
              <div>
                <p className="font-medium">自动降级</p>
                <p className="text-sm text-slate-500">负载过高时自动降低服务级别</p>
              </div>
              <Switch />
            </div>
            <div className="space-y-2">
              <Label>自定义脚本</Label>
              <Input placeholder="输入告警触发时执行的脚本路径" />
            </div>
          </TabsContent>
        </Tabs>

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button onClick={() => onOpenChange(false)}>保存设置</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}