import React, { useState, useEffect, useCallback, useMemo } from 'react';
import {
  Modal,
  Steps,
  Button,
  Space,
  Spin,
  Card,
  Tag,
  Tooltip,
  message,
  Typography,
  Divider,
  Badge,
  Empty,
  Input,
} from 'antd';
import {
  SwapOutlined,
  CloudServerOutlined,
  DatabaseOutlined,
  SettingOutlined,
  CheckCircleOutlined,
  ArrowRightOutlined,
  PlusOutlined,
  SearchOutlined,
  InfoCircleOutlined,
} from '@ant-design/icons';
import { motion, AnimatePresence } from 'framer-motion';
import axios from 'axios';
import CloseButton from './CloseButton';
import PortPanel from './PortPanel';
import { designTokens } from '../config/theme';

const { Title, Text } = Typography;

const CABLE_TYPES = [
  { value: 'ethernet', label: '以太网线', color: '#52c41a', icon: '🌐' },
  { value: 'fiber', label: '光纤', color: '#1890ff', icon: '🔦' },
  { value: 'copper', label: '铜缆', color: '#faad14', icon: '🔌' },
];

const CABLE_LENGTHS = [1, 2, 3, 5, 7, 10, 15, 20, 30, 50];

const getStatusTag = (status) => {
  const config = {
    running: { color: 'success', text: '运行中' },
    normal: { color: 'success', text: '正常' },
    warning: { color: 'warning', text: '警告' },
    error: { color: 'error', text: '故障' },
    fault: { color: 'error', text: '故障' },
    offline: { color: 'default', text: '离线' },
    maintenance: { color: 'processing', text: '维护中' },
  };
  const { color, text } = config[status] || { color: 'default', text: status };
  return <Tag color={color} size="small">{text}</Tag>;
};

const CableWizardModal = ({ visible, onClose, onSuccess, initialSourceDevice, editingCable }) => {
  const [currentStep, setCurrentStep] = useState(0);
  const [loading, setLoading] = useState(false);
  const [devices, setDevices] = useState([]);
  const [sourceDevice, setSourceDevice] = useState(null);
  const [targetDevice, setTargetDevice] = useState(null);
  const [sourcePort, setSourcePort] = useState(null);
  const [targetPort, setTargetPort] = useState(null);
  const [selectedCableType, setSelectedCableType] = useState('ethernet');
  const [selectedCableLength, setSelectedCableLength] = useState(3);
  const [cableLabel, setCableLabel] = useState('');
  const [cableDescription, setCableDescription] = useState('');
  const [fetchingDevices, setFetchingDevices] = useState(false);
  const [sourcePorts, setSourcePorts] = useState([]);
  const [targetPorts, setTargetPorts] = useState([]);
  const [conflicts, setConflicts] = useState([]);
  const [cablesData, setCablesData] = useState([]);

  // 初始化编辑模式的数据
  useEffect(() => {
    if (editingCable && visible) {
      setSourceDevice({ deviceId: editingCable.sourceDeviceId, name: editingCable.sourceDeviceId });
      setTargetDevice({ deviceId: editingCable.targetDeviceId, name: editingCable.targetDeviceId });
      setSourcePort({ portName: editingCable.sourcePort });
      setTargetPort({ portName: editingCable.targetPort });
      setSelectedCableType(editingCable.cableType || 'ethernet');
      setSelectedCableLength(editingCable.cableLength || 3);
      setCableLabel(editingCable.cableLabel || '');
      setCableDescription(editingCable.description || '');
      setCurrentStep(3); // 直接跳转到预览步骤
    }
  }, [editingCable, visible]);

  const fetchDevices = useCallback(async (keyword = '', type = '') => {
    try {
      setFetchingDevices(true);
      const params = { pageSize: 100 };
      if (keyword && keyword.trim()) {
        params.keyword = keyword.trim();
      }
      if (type && type.trim()) {
        params.type = type.trim();
      }
      const response = await axios.get('/api/devices', { params });
      const deviceList = response.data.devices || [];
      setDevices(deviceList);
      return deviceList;
    } catch (error) {
      console.error('获取设备列表失败:', error);
      message.error('获取设备列表失败');
      return [];
    } finally {
      setFetchingDevices(false);
    }
  }, []);

  const fetchDevicePorts = useCallback(async (deviceId, type) => {
    console.log('fetchDevicePorts called for:', deviceId, type);
    if (!deviceId) return;

    try {
      const response = await axios.get(`/api/device-ports/device/${deviceId}`);
      const ports = response.data || [];
      console.log('Fetched ports:', ports);
      if (type === 'source') {
        setSourcePorts(ports);
      } else {
        setTargetPorts(ports);
      }
    } catch (error) {
      console.error(`获取端口列表失败: ${deviceId}`, error);
      message.error('获取端口列表失败');
    }
  }, []);

  const fetchCables = useCallback(async () => {
    try {
      const response = await axios.get('/api/cables');
      setCablesData(response.data.cables || []);
    } catch (error) {
      console.error('获取接线数据失败:', error);
    }
  }, []);

  const checkPortConflict = useCallback(async (deviceId, portName, excludeCableId = null) => {
    try {
      const response = await axios.post('/api/cables/check-conflict', {
        sourceDeviceId: deviceId,
        sourcePort: portName,
        excludeCableId,
      });
      return response.data;
    } catch (error) {
      console.error('检查端口冲突失败:', error);
      return { hasConflict: false, conflicts: [] };
    }
  }, []);

  const debounce = (fn, delay) => {
    let timer = null;
    return function (...args) {
      clearTimeout(timer);
      timer = setTimeout(() => fn.apply(this, args), delay);
    };
  };

  const handleDeviceSearch = useCallback(
    debounce((value) => {
      fetchDevices(value, 'switch');
    }, 300),
    [fetchDevices]
  );

  useEffect(() => {
    if (visible) {
      setCurrentStep(0);
      setSourceDevice(null);
      setTargetDevice(null);
      setSourcePort(null);
      setTargetPort(null);
      setSelectedCableType('ethernet');
      setSelectedCableLength(3);
      setCableLabel('');
      setCableDescription('');
      setSourcePorts([]);
      setTargetPorts([]);
      setConflicts([]);
      setDevices([]);
      setCablesData([]);

      fetchDevices('', 'switch').then(deviceList => {
        if (initialSourceDevice?.deviceId) {
          const device = deviceList.find(d => d.deviceId === initialSourceDevice.deviceId);
          if (device) {
            setSourceDevice(device);
            fetchDevicePorts(device.deviceId, 'source');
          }
        }
      });
      fetchCables();
    }
  }, [visible, initialSourceDevice, fetchDevices, fetchDevicePorts, fetchCables]);

  const handleSourceDeviceSelect = useCallback(async device => {
    setSourceDevice(device);
    setSourcePort(null);
    await fetchDevicePorts(device.deviceId, 'source');
  }, [fetchDevicePorts]);

  const handleTargetDeviceSelect = useCallback(async device => {
    setTargetDevice(device);
    setTargetPort(null);
    setConflicts([]);
    await fetchDevicePorts(device.deviceId, 'target');
  }, [fetchDevicePorts]);

  const handleSourcePortSelect = useCallback(async port => {
    console.log('handleSourcePortSelect called with port:', port);

    // 如果点击的是已选中的端口，则取消选择
    const isAlreadySelected =
      sourcePort?.portId === port.portId || sourcePort?.portName === port.portName;

    if (isAlreadySelected) {
      console.log('Deselecting source port:', port);
      setSourcePort(null);
      setConflicts([]);
    } else {
      // 只有在选择新端口时才进行设备相同性检查
      if (sourceDevice?.deviceId === targetDevice?.deviceId) {
        message.warning('源设备和目标设备不能相同');
        return;
      }
      
      setSourcePort(port);
      console.log('Source port set to:', port);

      if (targetDevice) {
        await checkPortConflict(targetDevice.deviceId, port.portName);
      }
    }
  }, [sourceDevice, targetDevice, sourcePort, checkPortConflict]);

  const handleTargetPortSelect = useCallback(async port => {
    console.log('handleTargetPortSelect called with port:', port);

    // 如果点击的是已选中的端口，则取消选择
    const isAlreadySelected =
      targetPort?.portId === port.portId || targetPort?.portName === port.portName;

    if (isAlreadySelected) {
      console.log('Deselecting target port:', port);
      setTargetPort(null);
      setConflicts([]);
    } else {
      // 只有在选择新端口时才进行设备相同性检查
      if (sourceDevice?.deviceId === targetDevice?.deviceId) {
        message.warning('源设备和目标设备不能相同');
        return;
      }
      
      setTargetPort(port);
      console.log('Target port set to:', port);
      await checkPortConflict(sourceDevice.deviceId, port.portName);
    }
  }, [sourceDevice, targetDevice, targetPort, checkPortConflict]);

  const handleNextStep = useCallback(async () => {
    if (currentStep === 0) {
      if (!sourceDevice) {
        message.warning('请先选择源设备');
        return;
      }
      if (!sourcePort) {
        message.warning('请先选择源设备端口');
        return;
      }
      if (sourcePorts.length === 0) {
        message.warning('源设备没有可用端口');
        return;
      }
    } else if (currentStep === 1) {
      if (!targetDevice) {
        message.warning('请先选择目标设备');
        return;
      }
      if (!targetPort) {
        message.warning('请先选择目标设备端口');
        return;
      }
      if (targetPorts.length === 0) {
        message.warning('目标设备没有可用端口');
        return;
      }
    } else if (currentStep === 2) {
      if (!sourcePort || !targetPort) {
        message.warning('请先选择源端口和目标端口');
        return;
      }
      if (sourcePort.portName === targetPort.portName && sourceDevice?.deviceId === targetDevice?.deviceId) {
        message.warning('源端口和目标端口不能相同');
        return;
      }
    }

    setCurrentStep(prev => prev + 1);
  }, [currentStep, sourceDevice, targetDevice, sourcePort, targetPort, sourcePorts, targetPorts]);

  const handlePrevStep = useCallback(() => {
    setCurrentStep(prev => Math.max(0, prev - 1));
  }, []);

  const handleSubmit = useCallback(async () => {
    try {
      setLoading(true);

      const payload = {
        cableId: cableLabel || `CABLE-${Date.now()}`,
        sourceDeviceId: sourceDevice.deviceId,
        sourcePort: sourcePort.portName,
        targetDeviceId: targetDevice.deviceId,
        targetPort: targetPort.portName,
        cableType: selectedCableType,
        cableLength: selectedCableLength,
        description: cableDescription,
      };

      // 如果是编辑模式，使用 PUT 请求
      if (editingCable) {
        await axios.put(`/api/cables/${editingCable.cableId}`, payload);
        message.success('接线更新成功');
      } else {
        await axios.post('/api/cables', payload);
        message.success('接线创建成功');
      }
      
      onSuccess?.();
      onClose();
    } catch (error) {
      console.error('操作接线失败:', error);
      if (error.response?.data?.conflict) {
        message.error('端口已被占用，请选择其他端口');
      } else {
        message.error(editingCable ? '接线更新失败' : '接线创建失败');
      }
    } finally {
      setLoading(false);
    }
  }, [
    sourceDevice,
    sourcePort,
    targetDevice,
    targetPort,
    selectedCableType,
    selectedCableLength,
    cableLabel,
    cableDescription,
    editingCable,
    onSuccess,
    onClose,
  ]);

  const getAvailablePorts = useCallback(
    (ports, type) => {
      return ports.filter(port => {
        if (port.status !== 'free') return false;

        if (type === 'source') {
          return !conflicts.some(c => c.type === 'target' && c.port === port.portName);
        } else {
          return !conflicts.some(c => c.type === 'source' && c.port === port.portName);
        }
      });
    },
    [conflicts]
  );

  const getRecommendedPorts = useCallback(
    (availablePorts, type) => {
      if (availablePorts.length === 0) return [];

      const sortedPorts = [...availablePorts].sort((a, b) => {
        const extractNumbers = str => {
          const matches = str.match(/\d+/g);
          return matches ? matches.map(Number) : [];
        };

        const numsA = extractNumbers(a.portName);
        const numsB = extractNumbers(b.portName);

        for (let i = 0; i < Math.min(numsA.length, numsB.length); i++) {
          if (numsA[i] !== numsB[i]) {
            return numsA[i] - numsB[i];
          }
        }

        return a.portName.localeCompare(b.portName);
      });

      return sortedPorts.slice(0, 5);
    },
    []
  );

  const renderStepContent = () => {
    switch (currentStep) {
      case 0:
        return (
          <Step1SourceDevice
            devices={devices}
            fetchingDevices={fetchingDevices}
            onDeviceSearch={handleDeviceSearch}
            onDeviceSelect={handleSourceDeviceSelect}
            sourceDevice={sourceDevice}
            sourcePorts={sourcePorts}
            sourcePort={sourcePort}
            onPortSelect={handleSourcePortSelect}
          />
        );

      case 1:
        return (
          <Step2TargetDevice
            devices={devices}
            fetchingDevices={fetchingDevices}
            onDeviceSearch={handleDeviceSearch}
            onDeviceSelect={handleTargetDeviceSelect}
            targetDevice={targetDevice}
            targetPorts={targetPorts}
            targetPort={targetPort}
            onPortSelect={handleTargetPortSelect}
            conflicts={conflicts}
          />
        );

      case 2:
        return (
          <Step3CableConfig
            sourceDevice={sourceDevice}
            sourcePort={sourcePort}
            targetDevice={targetDevice}
            targetPort={targetPort}
            cableTypes={CABLE_TYPES}
            cableLengths={CABLE_LENGTHS}
            selectedCableType={selectedCableType}
            selectedCableLength={selectedCableLength}
            onCableTypeChange={setSelectedCableType}
            onCableLengthChange={setSelectedCableLength}
            cableLabel={cableLabel}
            cableDescription={cableDescription}
            setCableLabel={setCableLabel}
            setCableDescription={setCableDescription}
          />
        );

      case 3:
        return (
          <Step4Preview
            sourceDevice={sourceDevice}
            sourcePort={sourcePort}
            targetDevice={targetDevice}
            targetPort={targetPort}
            cableType={CABLE_TYPES.find(c => c.value === selectedCableType)}
            cableLength={selectedCableLength}
            cableLabel={cableLabel}
            cableDescription={cableDescription}
          />
        );

      default:
        return null;
    }
  };

  const steps = [
    {
      title: '源设备',
      icon: <CloudServerOutlined />,
      description: '选择连接起点',
    },
    {
      title: '目标设备',
      icon: <DatabaseOutlined />,
      description: '选择连接终点',
    },
    {
      title: '线缆配置',
      icon: <SettingOutlined />,
      description: '设置线缆参数',
    },
    {
      title: '预览确认',
      icon: <CheckCircleOutlined />,
      description: '确认创建接线',
    },
  ];

  return (
    <Modal
      title={
        <Space>
          <SwapOutlined style={{ color: '#1890ff', fontSize: '24px' }} />
          <div>
            <Title level={3} style={{ margin: 0, lineHeight: 1.2 }}>
              新增接线
            </Title>
            <Text type="secondary" style={{ fontSize: '12px' }}>
              向导式创建流程
            </Text>
          </div>
        </Space>
      }
      open={visible}
      closeIcon={<CloseButton />}
      onCancel={onClose}
      width={1000}
      maskClosable={false}
      footer={null}
    >
      <div style={{ padding: '20px 0' }}>
        <Steps
          current={currentStep}
          items={steps}
          size="small"
          responsive
          onChange={setCurrentStep}
        />
      </div>

      <div style={{ minHeight: 400 }}>
        <AnimatePresence mode="wait">
          <motion.div
            key={currentStep}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            transition={{ duration: 0.3, ease: [0.25, 0.46, 0.45, 0.94] }}
          >
            {renderStepContent()}
          </motion.div>
        </AnimatePresence>
      </div>

      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          marginTop: '24px',
          paddingTop: '20px',
          borderTop: `1px solid ${designTokens.colors.border}`,
        }}
      >
        <Button
          onClick={onClose}
          disabled={currentStep === 0}
          style={{ width: 100 }}
        >
          取消
        </Button>

        <Space>
          {currentStep > 0 && (
            <Button onClick={handlePrevStep} style={{ width: 100 }}>
              上一步
            </Button>
          )}

          {currentStep < steps.length - 1 ? (
            <Button
              type="primary"
              onClick={handleNextStep}
              style={{
                width: 100,
                background: designTokens.colors.primary.gradient,
                border: 'none',
              }}
            >
              下一步
            </Button>
          ) : (
            <Button
              type="primary"
              onClick={handleSubmit}
              loading={loading}
              style={{
                width: 120,
                background: designTokens.colors.primary.gradient,
                border: 'none',
              }}
            >
              创建接线
            </Button>
          )}
        </Space>
      </div>
    </Modal>
  );
};

const Step1SourceDevice = ({
  devices,
  fetchingDevices,
  onDeviceSearch,
  onDeviceSelect,
  sourceDevice,
  sourcePorts,
  sourcePort,
  onPortSelect,
}) => {
  const [searchKeyword, setSearchKeyword] = useState('');

  const handleSearch = (e) => {
    const value = e.target.value;
    setSearchKeyword(value);
    onDeviceSearch?.(value);
  };

  return (
    <div style={{ padding: '20px 0' }}>
      <Card
        title={
          <Space>
            <CloudServerOutlined style={{ color: '#1890ff' }} />
            <span>步骤 1: 选择源设备</span>
          </Space>
        }
        size="small"
        style={{ marginBottom: '20px' }}
      >
        <div style={{ marginBottom: '16px' }}>
          <Typography.Text type="secondary" style={{ fontSize: '13px' }}>
            选择接线的起点设备
          </Typography.Text>
        </div>

        <div style={{ marginBottom: '16px' }}>
          <Input
            placeholder="搜索设备名称或ID..."
            prefix={<SearchOutlined />}
            value={searchKeyword}
            onChange={handleSearch}
            style={{ width: '100%' }}
          />
        </div>

        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
            gap: '12px',
            maxHeight: 300,
            overflowY: 'auto',
            padding: '8px',
            background: designTokens.colors.background,
            borderRadius: '8px',
          }}
        >
          {fetchingDevices ? (
            <div style={{ textAlign: 'center', padding: '40px', gridColumn: '1 / -1' }}>
              <Spin size="large" />
            </div>
          ) : (
            devices.map(device => (
              <motion.div
                key={device.deviceId}
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
              >
                <Card
                  onClick={() => onDeviceSelect(device)}
                  hoverable
                  style={{
                    border: sourceDevice?.deviceId === device.deviceId
                      ? `2px solid ${designTokens.colors.primary}`
                      : '1px solid #d9d9d9',
                    background: sourceDevice?.deviceId === device.deviceId
                      ? 'rgba(24,144,255,0.08)'
                      : '#fff',
                  }}
                >
                  <div style={{ display: 'flex', alignItems: 'flex-start', gap: '12px' }}>
                    <div
                      style={{
                        width: '48px',
                        height: '48px',
                        borderRadius: '10px',
                        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        fontSize: '24px',
                        flexShrink: 0,
                      }}
                    >
                      {device.type === 'server' ? '🖥️' : device.type === 'switch' ? '📡' : device.type === 'router' ? '🔀' : device.type === 'storage' ? '💾' : '📦'}
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '6px' }}>
                        <div style={{ fontWeight: 600, color: '#262626', fontSize: '15px' }}>
                          {device.name || device.deviceId}
                        </div>
                        {device.status && getStatusTag(device.status)}
                      </div>
                      <div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}>
                        <span style={{ marginRight: '12px' }}>
                          <span style={{ color: '#bfbfbf', marginRight: '4px' }}>ID:</span>
                          {device.deviceId}
                        </span>
                        <span>
                          <span style={{ color: '#bfbfbf', marginRight: '4px' }}>类型:</span>
                          {device.type === 'server' ? '服务器' : device.type === 'switch' ? '交换机' : device.type === 'router' ? '路由器' : device.type === 'storage' ? '存储设备' : device.type}
                        </span>
                      </div>
                      <div style={{ fontSize: '11px', color: '#8c8c8c', lineHeight: '1.5' }}>
                        {device.Rack?.Room?.name && (
                          <span style={{ marginRight: '12px' }}>
                            <span style={{ color: '#bfbfbf', marginRight: '4px' }}>机房:</span>
                            {device.Rack.Room.name}
                          </span>
                        )}
                        {device.Rack?.name && (
                          <span style={{ marginRight: '12px' }}>
                            <span style={{ color: '#bfbfbf', marginRight: '4px' }}>机柜:</span>
                            {device.Rack.name}
                          </span>
                        )}
                        {device.position && (
                          <span style={{ marginRight: '12px' }}>
                            <span style={{ color: '#bfbfbf', marginRight: '4px' }}>U位:</span>
                            U{device.position}
                          </span>
                        )}
                        {device.ipAddress && (
                          <span>
                            <span style={{ color: '#bfbfbf', marginRight: '4px' }}>IP:</span>
                            {device.ipAddress}
                          </span>
                        )}
                      </div>
                      {device.model && (
                        <div style={{ fontSize: '11px', color: '#bfbfbf', marginTop: '4px' }}>
                          <span style={{ color: '#8c8c8c', marginRight: '4px' }}>型号:</span>
                          {device.model}
                        </div>
                      )}
                    </div>
                    {sourceDevice?.deviceId === device.deviceId && (
                      <CheckCircleOutlined style={{ color: designTokens.colors.primary, fontSize: '22px', flexShrink: 0 }} />
                    )}
                  </div>
                </Card>
              </motion.div>
            ))
          )}
        </div>

        {sourceDevice && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: 'auto' }}
            style={{ marginTop: '20px' }}
          >
            <div style={{ marginBottom: '12px' }}>
              <Typography.Text style={{ fontWeight: 600, color: '#262626' }}>
                源设备已选择: {sourceDevice.name}
              </Typography.Text>
            </div>

            <div
              style={{
                background: '#f5f5f5',
                borderRadius: '12px',
                padding: '16px',
                border: '1px solid #d9d9d9',
              }}
            >
              <div style={{ marginBottom: '12px', display: 'flex', alignItems: 'center', gap: '8px' }}>
                <DatabaseOutlined style={{ color: '#1890ff' }} />
                <Typography.Text style={{ fontWeight: 600 }}>端口选择</Typography.Text>
                <Tag color="blue" style={{ marginLeft: 'auto' }}>
                  {sourcePorts.filter(p => p.status === 'free').length} 个空闲端口
                </Tag>
              </div>

              {sourcePorts.length === 0 ? (
                <Empty description="该设备暂无端口数据" />
              ) : (
                <>
                  <div style={{ marginBottom: '8px', fontSize: '12px', color: '#8c8c8c' }}>
                    端口总数: {sourcePorts.length} | 空闲端口: {sourcePorts.filter(p => p.status === 'free').length}
                  </div>
                  <div style={{ marginBottom: '8px', fontSize: '11px', color: '#bfbfbf' }}>
                    端口状态分布: {sourcePorts.map(p => p.status).filter((v, i, a) => a.indexOf(v) === i).join(', ')}
                  </div>
                  {sourcePort && (
                    <div
                      style={{
                        marginBottom: '16px',
                        padding: '16px',
                        background: 'linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%)',
                        borderRadius: '12px',
                        border: '2px solid #1890ff',
                        display: 'flex',
                        alignItems: 'center',
                        gap: '12px',
                        boxShadow: '0 4px 12px rgba(24,144,255,0.15)',
                      }}
                    >
                      <CheckCircleOutlined
                        style={{
                          color: '#1890ff',
                          fontSize: '24px',
                        }}
                      />
                      <div style={{ flex: 1 }}>
                        <div style={{ fontSize: '15px', fontWeight: 700, color: '#096dd9', marginBottom: '4px' }}>
                          ✓ 已选择端口: {sourcePort.portName}
                        </div>
                        {sourcePort.portType && (
                          <div style={{ fontSize: '12px', color: '#1890ff', fontWeight: 500 }}>
                            端口类型: {sourcePort.portType}
                          </div>
                        )}
                        {sourcePort.portSpeed && (
                          <div style={{ fontSize: '11px', color: '#40a9ff', marginTop: '2px' }}>
                            端口速率: {sourcePort.portSpeed}
                          </div>
                        )}
                      </div>
                    </div>
                  )}
                  <PortPanel
                    ports={sourcePorts}
                    deviceName={sourceDevice.name}
                    deviceId={sourceDevice.deviceId}
                    onPortClick={onPortSelect}
                    selectedPort={sourcePort}
                    compact
                  />
                </>
              )}
            </div>
          </motion.div>
        )}
      </Card>
    </div>
  );
};

const Step2TargetDevice = ({
  devices,
  fetchingDevices,
  onDeviceSearch,
  onDeviceSelect,
  targetDevice,
  targetPorts,
  targetPort,
  onPortSelect,
  conflicts,
}) => {
  const [searchKeyword, setSearchKeyword] = useState('');

  const handleSearch = (e) => {
    const value = e.target.value;
    setSearchKeyword(value);
    onDeviceSearch?.(value);
  };

  return (
    <div style={{ padding: '20px 0' }}>
      <Card
        title={
          <Space>
            <DatabaseOutlined style={{ color: '#1890ff' }} />
            <span>步骤 2: 选择目标设备</span>
          </Space>
        }
        size="small"
        style={{ marginBottom: '20px' }}
      >
        <div style={{ marginBottom: '16px' }}>
          <Typography.Text type="secondary" style={{ fontSize: '13px' }}>
            选择接线的终点设备
          </Typography.Text>
        </div>

        <div style={{ marginBottom: '16px' }}>
          <Input
            placeholder="搜索设备名称或ID..."
            prefix={<SearchOutlined />}
            value={searchKeyword}
            onChange={handleSearch}
            style={{ width: '100%' }}
          />
        </div>

        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
            gap: '12px',
            maxHeight: 300,
            overflowY: 'auto',
            padding: '8px',
            background: designTokens.colors.background,
            borderRadius: '8px',
          }}
        >
          {fetchingDevices ? (
            <div style={{ textAlign: 'center', padding: '40px', gridColumn: '1 / -1' }}>
              <Spin size="large" />
            </div>
          ) : (
            devices.map(device => (
              <motion.div
                key={device.deviceId}
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
              >
                <Card
                  onClick={() => onDeviceSelect(device)}
                  hoverable
                  style={{
                    border: targetDevice?.deviceId === device.deviceId
                      ? `2px solid ${designTokens.colors.primary}`
                      : '1px solid #d9d9d9',
                    background: targetDevice?.deviceId === device.deviceId
                      ? 'rgba(24,144,255,0.08)'
                      : '#fff',
                  }}
                >
                  <div style={{ display: 'flex', alignItems: 'flex-start', gap: '12px' }}>
                    <div
                      style={{
                        width: '48px',
                        height: '48px',
                        borderRadius: '10px',
                        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        fontSize: '24px',
                        flexShrink: 0,
                      }}
                    >
                      {device.type === 'server' ? '🖥️' : device.type === 'switch' ? '📡' : device.type === 'router' ? '🔀' : device.type === 'storage' ? '💾' : '📦'}
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '6px' }}>
                        <div style={{ fontWeight: 600, color: '#262626', fontSize: '15px' }}>
                          {device.name || device.deviceId}
                        </div>
                        {device.status && getStatusTag(device.status)}
                      </div>
                      <div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}>
                        <span style={{ marginRight: '12px' }}>
                          <span style={{ color: '#bfbfbf', marginRight: '4px' }}>ID:</span>
                          {device.deviceId}
                        </span>
                        <span>
                          <span style={{ color: '#bfbfbf', marginRight: '4px' }}>类型:</span>
                          {device.type === 'server' ? '服务器' : device.type === 'switch' ? '交换机' : device.type === 'router' ? '路由器' : device.type === 'storage' ? '存储设备' : device.type}
                        </span>
                      </div>
                      <div style={{ fontSize: '11px', color: '#8c8c8c', lineHeight: '1.5' }}>
                        {device.Rack?.Room?.name && (
                          <span style={{ marginRight: '12px' }}>
                            <span style={{ color: '#bfbfbf', marginRight: '4px' }}>机房:</span>
                            {device.Rack.Room.name}
                          </span>
                        )}
                        {device.Rack?.name && (
                          <span style={{ marginRight: '12px' }}>
                            <span style={{ color: '#bfbfbf', marginRight: '4px' }}>机柜:</span>
                            {device.Rack.name}
                          </span>
                        )}
                        {device.position && (
                          <span style={{ marginRight: '12px' }}>
                            <span style={{ color: '#bfbfbf', marginRight: '4px' }}>U位:</span>
                            U{device.position}
                          </span>
                        )}
                        {device.ipAddress && (
                          <span>
                            <span style={{ color: '#bfbfbf', marginRight: '4px' }}>IP:</span>
                            {device.ipAddress}
                          </span>
                        )}
                      </div>
                      {device.model && (
                        <div style={{ fontSize: '11px', color: '#bfbfbf', marginTop: '4px' }}>
                          <span style={{ color: '#8c8c8c', marginRight: '4px' }}>型号:</span>
                          {device.model}
                        </div>
                      )}
                    </div>
                    {targetDevice?.deviceId === device.deviceId && (
                      <CheckCircleOutlined style={{ color: designTokens.colors.primary, fontSize: '22px', flexShrink: 0 }} />
                    )}
                  </div>
                </Card>
              </motion.div>
            ))
          )}
        </div>

        {targetDevice && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: 'auto' }}
            style={{ marginTop: '20px' }}
          >
            <div style={{ marginBottom: '12px' }}>
              <Typography.Text style={{ fontWeight: 600, color: '#262626' }}>
                目标设备已选择: {targetDevice.name}
              </Typography.Text>
            </div>

            <div
              style={{
                background: '#f5f5f5',
                borderRadius: '12px',
                padding: '16px',
                border: '1px solid #d9d9d9',
              }}
            >
              <div style={{ marginBottom: '12px', display: 'flex', alignItems: 'center', gap: '8px' }}>
                <DatabaseOutlined style={{ color: '#1890ff' }} />
                <Typography.Text style={{ fontWeight: 600 }}>端口选择</Typography.Text>
                <Tag color="blue" style={{ marginLeft: 'auto' }}>
                  {targetPorts.filter(p => p.status === 'free').length} 个空闲端口
                </Tag>
              </div>

              {targetPorts.length === 0 ? (
                <Empty description="该设备暂无端口数据" />
              ) : (
                <>
                  <div style={{ marginBottom: '8px', fontSize: '12px', color: '#8c8c8c' }}>
                    端口总数: {targetPorts.length} | 空闲端口: {targetPorts.filter(p => p.status === 'free').length}
                  </div>
                  <div style={{ marginBottom: '8px', fontSize: '11px', color: '#bfbfbf' }}>
                    端口状态分布: {targetPorts.map(p => p.status).filter((v, i, a) => a.indexOf(v) === i).join(', ')}
                  </div>
                  {targetPort && (
                    <div
                      style={{
                        marginBottom: '16px',
                        padding: '16px',
                        background: 'linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%)',
                        borderRadius: '12px',
                        border: '2px solid #1890ff',
                        display: 'flex',
                        alignItems: 'center',
                        gap: '12px',
                        boxShadow: '0 4px 12px rgba(24,144,255,0.15)',
                      }}
                    >
                      <CheckCircleOutlined
                        style={{
                          color: '#1890ff',
                          fontSize: '24px',
                        }}
                      />
                      <div style={{ flex: 1 }}>
                        <div style={{ fontSize: '15px', fontWeight: 700, color: '#096dd9', marginBottom: '4px' }}>
                          ✓ 已选择端口: {targetPort.portName}
                        </div>
                        {targetPort.portType && (
                          <div style={{ fontSize: '12px', color: '#1890ff', fontWeight: 500 }}>
                            端口类型: {targetPort.portType}
                          </div>
                        )}
                        {targetPort.portSpeed && (
                          <div style={{ fontSize: '11px', color: '#40a9ff', marginTop: '2px' }}>
                            端口速率: {targetPort.portSpeed}
                          </div>
                        )}
                      </div>
                    </div>
                  )}
                  <PortPanel
                    ports={targetPorts}
                    deviceName={targetDevice.name}
                    deviceId={targetDevice.deviceId}
                    onPortClick={onPortSelect}
                    selectedPort={targetPort}
                    compact
                  />
                </>
              )}

              {conflicts.length > 0 && (
                <div
                  style={{
                    marginTop: '16px',
                    padding: '12px',
                    background: 'rgba(239,68,68,0.1)',
                    borderRadius: '8px',
                    border: '1px solid rgba(239,68,68,0.3)',
                  }}
                >
                  <Typography.Text type="danger" style={{ fontWeight: 600 }}>
                    ⚠️ 端口冲突检测
                  </Typography.Text>
                  <div style={{ marginTop: '8px', fontSize: '12px' }}>
                    {conflicts.map((conflict, index) => (
                      <div key={index} style={{ marginBottom: '4px' }}>
                        <Tag color="error" style={{ marginRight: '8px' }}>
                          {conflict.type === 'source' ? '源端口' : '目标端口'}
                        </Tag>
                        <Text code>{conflict.port}</Text>
                        <Text type="secondary" style={{ marginLeft: '8px' }}>
                          已被 {conflict.existingCable?.sourceDevice?.name} →{' '}
                          {conflict.existingCable?.targetDevice?.name} 占用
                        </Text>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </motion.div>
        )}
      </Card>
    </div>
  );
};

const Step3CableConfig = ({
  sourceDevice,
  sourcePort,
  targetDevice,
  targetPort,
  cableTypes,
  cableLengths,
  selectedCableType,
  selectedCableLength,
  onCableTypeChange,
  onCableLengthChange,
  cableLabel,
  cableDescription,
  setCableLabel,
  setCableDescription,
}) => {
  const estimatedLength = useMemo(() => {
    if (!sourceDevice?.rackId || !targetDevice?.rackId) return 3;

    const distance = Math.abs(sourceDevice.rackId - targetDevice.rackId) * 0.5;
    return Math.max(3, Math.min(50, Math.round(distance + 3)));
  }, [sourceDevice, targetDevice]);

  return (
    <div style={{ padding: '20px 0' }}>
      <Card
        title={
          <Space>
            <SettingOutlined style={{ color: '#1890ff' }} />
            <span>步骤 3: 线缆配置</span>
          </Space>
        }
        size="small"
        style={{ marginBottom: '20px' }}
      >
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: '24px',
          }}
        >
          <div>
            <Typography.Text style={{ fontWeight: 600, marginBottom: '12px', display: 'block' }}>
              连接信息
            </Typography.Text>

            <div
              style={{
                background: '#f5f5f5',
                borderRadius: '12px',
                padding: '16px',
                marginBottom: '16px',
                border: '1px solid #d9d9d9',
              }}
            >
              <div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '12px' }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: '12px', color: '#8c8c8c' }}>源设备</div>
                  <div style={{ fontWeight: 600, color: '#262626' }}>{sourceDevice?.name}</div>
                  <div style={{ fontSize: '11px', color: '#bfbfbf' }}>
                    端口: {sourcePort?.portName}
                  </div>
                </div>

                <ArrowRightOutlined style={{ color: '#1890ff' }} />

                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: '12px', color: '#8c8c8c' }}>目标设备</div>
                  <div style={{ fontWeight: 600, color: '#262626' }}>{targetDevice?.name}</div>
                  <div style={{ fontSize: '11px', color: '#bfbfbf' }}>
                    端口: {targetPort?.portName}
                  </div>
                </div>
              </div>

              <Divider style={{ margin: '8px 0' }} />

              <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: '12px', color: '#8c8c8c' }}>线缆类型</div>
                  <div style={{ marginTop: '8px' }}>
                    {cableTypes.map(type => (
                      <Tag
                        key={type.value}
                        color={type.color}
                        style={{
                          cursor: 'pointer',
                          marginRight: '8px',
                          marginBottom: '8px',
                          border: selectedCableType === type.value
                            ? `2px solid ${type.color}`
                            : '1px solid #d9d9d9',
                        }}
                        onClick={() => onCableTypeChange(type.value)}
                      >
                        {type.icon} {type.label}
                      </Tag>
                    ))}
                  </div>
                </div>

                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: '12px', color: '#8c8c8c' }}>线缆长度</div>
                  <div style={{ marginTop: '8px' }}>
                    {cableLengths.map(length => (
                      <Tag
                        key={length}
                        color={selectedCableLength === length ? 'blue' : 'default'}
                        style={{
                          cursor: 'pointer',
                          marginRight: '8px',
                          marginBottom: '8px',
                          border: selectedCableLength === length
                            ? '2px solid #1890ff'
                            : '1px solid #d9d9d9',
                        }}
                        onClick={() => onCableLengthChange(length)}
                      >
                        {length}m
                      </Tag>
                    ))}
                  </div>
                </div>
              </div>
            </div>

            <div style={{ fontSize: '12px', color: '#8c8c8c' }}>
              <InfoCircleOutlined style={{ marginRight: '4px' }} />
              建议长度: <Text code>{estimatedLength}m</Text>
            </div>
          </div>

          <div>
            <Typography.Text style={{ fontWeight: 600, marginBottom: '12px', display: 'block' }}>
              线缆属性
            </Typography.Text>

            <div
              style={{
                background: '#f5f5f5',
                borderRadius: '12px',
                padding: '16px',
                border: '1px solid #d9d9d9',
              }}
            >
              <div style={{ marginBottom: '16px' }}>
                <Typography.Text style={{ fontSize: '13px', display: 'block', marginBottom: '8px' }}>
                  线缆标签
                </Typography.Text>
                <Input
                  placeholder="自动生成或手动输入标签"
                  value={cableLabel}
                  onChange={e => setCableLabel(e.target.value)}
                  style={{ width: '100%' }}
                />
                <div style={{ fontSize: '11px', color: '#bfbfbf', marginTop: '4px' }}>
                  示例: CABLE-{sourceDevice?.deviceId.slice(-4)}-{targetDevice?.deviceId.slice(-4)}-{Date.now().toString().slice(-4)}
                </div>
              </div>

              <div>
                <Typography.Text style={{ fontSize: '13px', display: 'block', marginBottom: '8px' }}>
                  备注说明
                </Typography.Text>
                <Input.TextArea
                  placeholder="添加接线说明..."
                  value={cableDescription}
                  onChange={e => setCableDescription(e.target.value)}
                  rows={6}
                  style={{ width: '100%' }}
                />
              </div>
            </div>

            <div
              style={{
                marginTop: '16px',
                padding: '12px',
                background: 'rgba(24,144,255,0.1)',
                borderRadius: '8px',
                border: '1px solid rgba(24,144,255,0.3)',
              }}
            >
              <Typography.Text style={{ fontWeight: 600, color: '#1890ff' }}>
                💡 提示
              </Typography.Text>
              <div style={{ fontSize: '12px', marginTop: '8px', lineHeight: '1.6' }}>
                • 以太网线（Cat6）: 适用于1G/10G短距离连接
                <br />
                • 光纤（SMF/MMF）: 适用于长距离或高带宽需求
                <br />
                • 铜缆: 适用于电源或特殊设备连接
              </div>
            </div>
          </div>
        </div>
      </Card>
    </div>
  );
};

const Step4Preview = ({
  sourceDevice,
  sourcePort,
  targetDevice,
  targetPort,
  cableType,
  cableLength,
  cableLabel,
  cableDescription,
}) => {
  return (
    <div style={{ padding: '20px 0' }}>
      <Card
        title={
          <Space>
            <CheckCircleOutlined style={{ color: '#52c41a' }} />
            <span>步骤 4: 预览确认</span>
          </Space>
        }
        size="small"
        style={{ marginBottom: '20px' }}
      >
        <div
          style={{
            background: '#f5f5f5',
            borderRadius: '16px',
            padding: '24px',
            border: '1px solid #d9d9d9',
          }}
        >
          <div style={{ textAlign: 'center', marginBottom: '24px' }}>
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                gap: '24px',
                marginBottom: '24px',
              }}
            >
              <div
                style={{
                  width: '80px',
                  height: '80px',
                  borderRadius: '16px',
                  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontSize: '32px',
                  boxShadow: '0 10px 30px rgba(0,0,0,0.3)',
                }}
              >
                {sourceDevice?.type === 'server' ? '🖥️' : sourceDevice?.type === 'switch' ? '📡' : '💾'}
              </div>

              <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                <div
                  style={{
                    width: '40px',
                    height: '40px',
                    borderRadius: '50%',
                    background: cableType?.color + '30',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontSize: '20px',
                  }}
                >
                  {cableType?.icon}
                </div>
                <div>
                  <div style={{ fontSize: '12px', color: '#8c8c8c' }}>
                    {cableType?.label} {cableLength}m
                  </div>
                  <div style={{ fontSize: '11px', color: '#bfbfbf' }}>
                    {cableLabel || '自动生成'}
                  </div>
                </div>
              </div>

              <div
                style={{
                  width: '80px',
                  height: '80px',
                  borderRadius: '16px',
                  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontSize: '32px',
                  boxShadow: '0 10px 30px rgba(0,0,0,0.3)',
                }}
              >
                {targetDevice?.type === 'server' ? '🖥️' : targetDevice?.type === 'switch' ? '📡' : '💾'}
              </div>
            </div>

            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                gap: '16px',
              }}
            >
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: '12px', color: '#8c8c8c' }}>源端口</div>
                <div style={{ fontWeight: 600, color: '#52c41a' }}>{sourcePort?.portName}</div>
                <div style={{ fontSize: '11px', color: '#bfbfbf' }}>
                  {sourceDevice?.name}
                </div>
              </div>

              <ArrowRightOutlined style={{ color: '#1890ff' }} />

              <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: '12px', color: '#8c8c8c' }}>目标端口</div>
                <div style={{ fontWeight: 600, color: '#1890ff' }}>{targetPort?.portName}</div>
                <div style={{ fontSize: '11px', color: '#bfbfbf' }}>
                  {targetDevice?.name}
                </div>
              </div>
            </div>
          </div>

          {cableDescription && (
            <div
              style={{
                padding: '16px',
                background: '#fff',
                borderRadius: '8px',
                marginBottom: '16px',
                border: '1px solid #d9d9d9',
              }}
            >
              <Typography.Text style={{ fontSize: '13px', display: 'block', marginBottom: '8px', color: '#262626' }}>
                备注说明
              </Typography.Text>
              <div style={{ fontSize: '14px', color: '#595959' }}>
                {cableDescription}
              </div>
            </div>
          )}

          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: '8px',
              padding: '12px',
              background: 'rgba(82,196,26,0.1)',
              borderRadius: '8px',
              border: '1px solid rgba(82,196,26,0.3)',
            }}
          >
            <CheckCircleOutlined style={{ color: '#52c41a' }} />
            <Typography.Text style={{ fontWeight: 600, color: '#52c41a' }}>
              ✅ 所有信息已确认，可以创建接线
            </Typography.Text>
          </div>
        </div>
      </Card>
    </div>
  );
};

export default CableWizardModal;