import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { AlertCircle, Clock, Gauge, Power, PowerOff, Settings, Zap } from "lucide-react";

import type { DecisionResult } from "./types";

interface ExecuteConfirmDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  decision: DecisionResult | null;
  onConfirm: () => void;
}

export function ExecuteConfirmDialog({ open, onOpenChange, decision, onConfirm }: ExecuteConfirmDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>确认执行决策</DialogTitle>
          <DialogDescription>请确认是否立即执行以下决策。</DialogDescription>
        </DialogHeader>

        {decision && (
          <div className="space-y-4">
            <div>
              <Label>决策名称</Label>
              <div className="field-value">{decision.name}</div>
            </div>

            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
              <div className="p-3 bg-info/10 rounded">
                <div className="text-xs text-muted-foreground mb-2 flex items-center gap-1">
                  <Settings className="w-3 h-3" />
                  触发条件
                </div>
                <div className="space-y-1 text-sm">
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">设备</span>
                    <strong>{decision.triggerCondition.device}</strong>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">参数</span>
                    <strong>{decision.triggerCondition.parameter}</strong>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">条件</span>
                    <strong>
                      {decision.triggerCondition.operator} {decision.triggerCondition.value}
                    </strong>
                  </div>
                </div>
              </div>
              <div className="p-3 bg-success/10 rounded">
                <div className="text-xs text-muted-foreground mb-2 flex items-center gap-1">
                  <Zap className="w-3 h-3" />
                  执行动作
                </div>
                <div className="space-y-1 text-sm">
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">设备</span>
                    <strong>{decision.execution.device}</strong>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-muted-foreground">动作</span>
                    <strong className={decision.execution.action === 'open' ? 'text-success' : 'text-destructive'}>
                      <span className="inline-flex items-center gap-1">
                        {decision.execution.action === 'open' ? (
                          <Power className="w-4 h-4" />
                        ) : (
                          <PowerOff className="w-4 h-4" />
                        )}
                        {decision.execution.action === 'open' ? '打开' : '关闭'}
                      </span>
                    </strong>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">时长</span>
                    <strong className="inline-flex items-center gap-1">
                      <Clock className="w-3 h-3" />
                      {decision.execution.duration} 分钟
                    </strong>
                  </div>
                </div>
              </div>
            </div>

            <div className="flex items-start gap-3 p-3 bg-warning/10 rounded border border-warning/30 text-sm">
              <AlertCircle className="w-4 h-4 text-warning mt-0.5" />
              <div>
                决策执行会立即影响对应设备，请确保现场已做好安全防护措施。
              </div>
            </div>
          </div>
        )}

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button onClick={onConfirm} className="bg-success hover:bg-success/90">
            确认执行
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
