import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { CheckCircle, Gauge, ListChecks, Power, PowerOff, Settings, Timer, Zap } from "lucide-react";

import type { DecisionResult } from "./types";
import { DecisionLevelBadge, DecisionSourceBadge, ExecutionModeBadge } from "./DecisionBadges";

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

export function DecisionResultDialog({ open, onOpenChange, decision, onExecute }: DecisionResultDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>决策详情</DialogTitle>
          <DialogDescription>查看完整的决策信息、融合过程与执行配置。</DialogDescription>
        </DialogHeader>

        {decision && (
          <div className="space-y-6">
            <div>
              <div className="flex items-center gap-2 mb-3">
                <DecisionSourceBadge source={decision.source} />
                <ExecutionModeBadge mode={decision.executionMode} />
                <DecisionLevelBadge level={decision.level} />
              </div>
              <h3 className="text-lg font-semibold">{decision.name}</h3>
            </div>

            <Card className="p-4 bg-info/10 border-info/30">
              <h4 className="mb-3 text-sm font-medium">触发条件与执行设置</h4>
              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                <div className="p-3 bg-white rounded border border-muted/40">
                  <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-white rounded border border-muted/40">
                  <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">
                        <Timer className="w-3 h-3 text-info" />
                        {decision.execution.duration} 分钟
                      </strong>
                    </div>
                  </div>
                </div>
              </div>
            </Card>

            <div>
              <h4 className="mb-2 text-sm font-medium">推荐建议</h4>
              <div className="field-value whitespace-pre-wrap leading-relaxed">{decision.recommendation}</div>
            </div>

            {decision.explanation && (
              <div>
                <h4 className="mb-2 text-sm font-medium">详细说明</h4>
                <div className="field-value whitespace-pre-wrap leading-relaxed">{decision.explanation}</div>
              </div>
            )}

            <div>
              <h4 className="mb-2 text-sm font-medium">执行步骤</h4>
              <div className="field-value">
                <ol className="list-decimal list-inside space-y-1">
                  {decision.actionItems.map((item, index) => (
                    <li key={index}>{item}</li>
                  ))}
                </ol>
              </div>
            </div>

            {decision.fusionProcess.length > 0 && (
              <div>
                <h4 className="mb-2 text-sm font-medium">融合过程</h4>
                <div className="space-y-2">
                  {decision.fusionProcess.map((step, index) => (
                    <div key={index} className="flex items-start gap-3 p-3 bg-muted rounded">
                      <div className="w-8 h-8 rounded-full bg-info-muted text-info flex items-center justify-center">
                        {index + 1}
                      </div>
                      <div className="flex-1">
                        <div className="font-medium">{step.step}</div>
                        <div className="text-sm text-muted-foreground">{step.result}</div>
                        <Badge variant="outline" className="mt-1 bg-white border-info/40 text-info">
                          权重 {step.weight}
                        </Badge>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {(decision.inputData.models.length > 0 ||
              decision.inputData.rules.length > 0 ||
              decision.inputData.context.length > 0) && (
              <div>
                <h4 className="mb-2 text-sm font-medium">输入数据</h4>
                <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
                  {decision.inputData.models.length > 0 && (
                    <div className="p-3 bg-info/10 rounded">
                      <div className="text-xs text-muted-foreground mb-2">模型输出</div>
                      <div className="space-y-1 text-sm">
                        {decision.inputData.models.map((model) => (
                          <div key={model.id}>{model.name}</div>
                        ))}
                      </div>
                    </div>
                  )}
                  {decision.inputData.rules.length > 0 && (
                    <div className="p-3 bg-success/10 rounded">
                      <div className="text-xs text-muted-foreground mb-2">业务规则</div>
                      <div className="space-y-1 text-sm">
                        {decision.inputData.rules.map((rule) => (
                          <div key={rule.id}>{rule.name}</div>
                        ))}
                      </div>
                    </div>
                  )}
                  {decision.inputData.context.length > 0 && (
                    <div className="p-3 bg-warning/10 rounded">
                      <div className="text-xs text-muted-foreground mb-2">上下文信息</div>
                      <div className="space-y-1 text-sm">
                        {decision.inputData.context.map((ctx) => (
                          <div key={ctx.id}>{ctx.name}</div>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              </div>
            )}

            <div className="grid grid-cols-1 gap-4 text-sm md:grid-cols-3">
              <div>
                <div className="text-muted-foreground mb-1">置信度</div>
                <div className="font-medium">{(decision.confidence * 100).toFixed(0)}%</div>
              </div>
              <div>
                <div className="text-muted-foreground mb-1">生成时间</div>
                <div className="font-medium">{decision.generatedAt}</div>
              </div>
              {decision.createdBy && (
                <div>
                  <div className="text-muted-foreground mb-1">创建人</div>
                  <div className="font-medium">{decision.createdBy}</div>
                </div>
              )}
            </div>
          </div>
        )}

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            关闭
          </Button>
          {decision && (
            <Button className="bg-success hover:bg-success/90" onClick={() => onExecute(decision)}>
              <CheckCircle className="w-4 h-4 mr-2" />
              执行决策
            </Button>
          )}
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
