import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { Droplets, Power, PowerOff, Settings, Thermometer, Zap } from "lucide-react";

import type { DecisionFormState, DecisionLevel, ExecutionMode } from "./types";

interface DecisionFormDialogProps {
  mode: 'create' | 'edit';
  open: boolean;
  onOpenChange: (open: boolean) => void;
  formState: DecisionFormState;
  onFormChange: <K extends keyof DecisionFormState>(key: K, value: DecisionFormState[K]) => void;
  onSubmit: () => void;
}

const triggerDeviceOptions = [
  { value: '土壤传感器-01', label: '土壤传感器-01', icon: Droplets },
  { value: '土壤传感器-02', label: '土壤传感器-02', icon: Droplets },
  { value: '土壤传感器-03', label: '土壤传感器-03', icon: Droplets },
  { value: '温度传感器-01', label: '温度传感器-01', icon: Thermometer },
  { value: '温度传感器-02', label: '温度传感器-02', icon: Thermometer },
  { value: '湿度传感器-01', label: '湿度传感器-01' },
  { value: '光照传感器-01', label: '光照传感器-01' },
  { value: 'CO2传感器-01', label: 'CO2传感器-01' },
];

const triggerParameterOptions = [
  { value: '土壤湿度', label: '土壤湿度 (%)' },
  { value: '土壤温度', label: '土壤温度 (℃)' },
  { value: '空气温度', label: '空气温度 (℃)' },
  { value: '空气湿度', label: '空气湿度 (%)' },
  { value: '光照强度', label: '光照强度 (lux)' },
  { value: 'CO2浓度', label: 'CO₂ 浓度 (ppm)' },
  { value: 'EC值', label: 'EC 值 (mS/cm)' },
  { value: 'PH值', label: 'PH 值' },
];

const compareOperatorOptions = [
  { value: '>', label: '大于' },
  { value: '<', label: '小于' },
  { value: '>=', label: '大于等于' },
  { value: '<=', label: '小于等于' },
  { value: '==', label: '等于' },
];

const targetDeviceOptions = [
  '水肥机-01',
  '水肥机-02',
  '灌溉阀门-A1',
  '灌溉阀门-B2',
  '排风扇-01',
  '排风扇-02',
  '喷雾器-01',
  '喷雾器-02',
  '补光灯-01',
  '加热器-01',
];

export function DecisionFormDialog({ mode, open, onOpenChange, formState, onFormChange, onSubmit }: DecisionFormDialogProps) {
  const dialogTitle = mode === 'create' ? '新建决策' : '编辑决策';
  const dialogDescription =
    mode === 'create'
      ? '创建基于设备参数的业务融合决策。'
      : '更新当前决策的触发条件、执行动作与详细内容。';
  const submitLabel = mode === 'create' ? '保存决策' : '保存修改';

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>{dialogTitle}</DialogTitle>
          <DialogDescription>{dialogDescription}</DialogDescription>
        </DialogHeader>

        <div className="space-y-6">
          <Card className="p-4">
            <h4 className="mb-4 text-sm font-medium">基础信息</h4>
            <div className="space-y-4">
              <div>
                <Label>决策名称 *</Label>
                <Input
                  placeholder="例如：3号大棚灌溉决策"
                  value={formState.name}
                  onChange={(event) => onFormChange('name', event.target.value)}
                />
              </div>

              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                <div>
                  <Label>决策级别</Label>
                  <Select
                    value={formState.level}
                    onValueChange={(value) => onFormChange('level', value as DecisionLevel)}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="选择决策级别" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="critical">紧急</SelectItem>
                      <SelectItem value="important">重要</SelectItem>
                      <SelectItem value="normal">一般</SelectItem>
                      <SelectItem value="suggestion">建议</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label>置信度 (%)</Label>
                  <Input
                    type="number"
                    min={0}
                    max={100}
                    value={formState.confidence}
                    onChange={(event) => onFormChange('confidence', Number(event.target.value))}
                  />
                </div>
              </div>

              <div>
                <Label>执行模式 *</Label>
                <Select
                  value={formState.executionMode}
                  onValueChange={(value) => onFormChange('executionMode', value as ExecutionMode)}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="选择执行模式" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="manual">手动执行（点击执行按钮时执行）</SelectItem>
                    <SelectItem value="auto">自动执行（条件满足时自动执行）</SelectItem>
                  </SelectContent>
                </Select>
                <p className="text-xs text-muted-foreground mt-1">
                  {formState.executionMode === 'auto'
                    ? '当触发条件满足时，系统将自动执行设备控制操作。'
                    : '需要人工点击执行按钮，验证触发条件后再执行。'}
                </p>
              </div>
            </div>
          </Card>

          <Card className="p-4 bg-warning/10 border-warning/30">
            <div className="flex items-center gap-2 mb-4">
              <Settings className="w-5 h-5 text-warning" />
              <h4 className="text-sm font-medium">触发条件设置</h4>
            </div>
            <p className="text-sm text-muted-foreground mb-4">
              设置触发条件：当设备参数满足指定阈值时自动触发决策。
            </p>
            <div className="space-y-4">
              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                <div>
                  <Label>选择设备 *</Label>
                  <Select value={formState.triggerDevice} onValueChange={(value) => onFormChange('triggerDevice', value)}>
                    <SelectTrigger>
                      <SelectValue placeholder="请选择设备" />
                    </SelectTrigger>
                    <SelectContent>
                      {triggerDeviceOptions.map((option) => (
                        <SelectItem key={option.value} value={option.value}>
                          <span className="flex items-center gap-2">
                            {option.icon ? <option.icon className="w-4 h-4" /> : null}
                            {option.label}
                          </span>
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label>选择参数 *</Label>
                  <Select
                    value={formState.triggerParameter}
                    onValueChange={(value) => onFormChange('triggerParameter', value)}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="请选择参数" />
                    </SelectTrigger>
                    <SelectContent>
                      {triggerParameterOptions.map((option) => (
                        <SelectItem key={option.value} value={option.value}>
                          {option.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
                <div>
                  <Label>比较符号 *</Label>
                  <Select
                    value={formState.triggerOperator}
                    onValueChange={(value) => onFormChange('triggerOperator', value)}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="请选择比较符号" />
                    </SelectTrigger>
                    <SelectContent>
                      {compareOperatorOptions.map((option) => (
                        <SelectItem key={option.value} value={option.value}>
                          {option.value} {option.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div className="md:col-span-2">
                  <Label>阈值 *</Label>
                  <Input
                    placeholder="请输入阈值"
                    value={formState.triggerValue}
                    onChange={(event) => onFormChange('triggerValue', event.target.value)}
                  />
                </div>
              </div>
            </div>
          </Card>

          <Card className="p-4 bg-success/10 border-success/30">
            <div className="flex items-center gap-2 mb-4">
              <Zap className="w-5 h-5 text-success" />
              <h4 className="text-sm font-medium">执行设置</h4>
            </div>
            <p className="text-sm text-muted-foreground mb-4">配置决策触发后要执行的设备和动作。</p>
            <div className="space-y-4">
              <div>
                <Label>目标设备 *</Label>
                <Select value={formState.targetDevice} onValueChange={(value) => onFormChange('targetDevice', value)}>
                  <SelectTrigger>
                    <SelectValue placeholder="请选择目标设备" />
                  </SelectTrigger>
                  <SelectContent>
                    {targetDeviceOptions.map((device) => (
                      <SelectItem key={device} value={device}>
                        {device}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                <div>
                  <Label>开关状态 *</Label>
                  <Select
                    value={formState.targetAction}
                    onValueChange={(value) => onFormChange('targetAction', value === 'open' ? 'open' : 'close')}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="请选择动作" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="open">
                        <span className="flex items-center gap-2">
                          <Power className="w-4 h-4 text-success" /> 打开
                        </span>
                      </SelectItem>
                      <SelectItem value="close">
                        <span className="flex items-center gap-2">
                          <PowerOff className="w-4 h-4 text-destructive" /> 关闭
                        </span>
                      </SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label>持续时间（分钟）*</Label>
                  <Input
                    type="number"
                    min={1}
                    value={formState.duration}
                    onChange={(event) => onFormChange('duration', Number(event.target.value))}
                  />
                </div>
              </div>
            </div>
          </Card>

          <Card className="p-4">
            <h4 className="mb-4 text-sm font-medium">决策内容</h4>
            <div className="space-y-4">
              <div>
                <Label>推荐建议 *</Label>
                <Textarea
                  rows={3}
                  value={formState.recommendation}
                  onChange={(event) => onFormChange('recommendation', event.target.value)}
                />
              </div>
              <div>
                <Label>详细说明</Label>
                <Textarea
                  rows={5}
                  value={formState.explanation}
                  onChange={(event) => onFormChange('explanation', event.target.value)}
                />
              </div>
              <div>
                <Label>执行步骤 *（每行一个步骤）</Label>
                <Textarea
                  rows={6}
                  value={formState.actionItems}
                  onChange={(event) => onFormChange('actionItems', event.target.value)}
                />
              </div>
            </div>
          </Card>
        </div>

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