import React, { useState, useRef, useEffect } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import { Form } from 'antd';
import { EyeOutlined, CloseOutlined } from '@ant-design/icons';

// 提取纯文本工具函数
const extractPlainText = (html: string): string => {
  console.log('html-----',html)
  if (!html) return '';
  const tempDiv = document.createElement('div');
  tempDiv.textContent = html;
  return tempDiv.innerHTML || '';
};

interface LinkData {
  id: string;
  originalText: string;
  url: string;
  isDeleted: boolean;
}

const PersistentImagePreviewEditor = () => {
  const [form] = Form.useForm();
  const [editorHtml, setEditorHtml] = useState<string>(`
    # 传感器进行监测。 <html><body><table><tr><td rowspan="2"></td><td colspan="2">垂直位移监测</td><td>水平位移监测</td><td rowspan="2"></td></tr><tr><td>变形观测点的 高程中误差 （mm）</td><td>相邻变形观测 点的高差中</td><td>变形观测点的 点位中误差 (mm)</td></tr><tr><td>一等</td><td>0.3</td><td>0.1</td><td>1.5 建筑等</td><td>空间结构、高耸构筑物、工业</td></tr><tr><td>二等</td><td>0.5</td><td>0.3</td><td>3.0 建筑等</td><td>空间结构、高耸构筑物、工业</td></tr><tr><td>三等</td><td>1. 0</td><td>0.5</td><td>6.0</td><td>构、高耸构筑物、工业建筑等</td></tr></table></body></html> <html><body><table><tr><td>类别</td><td>监测方法</td></tr><tr><td>水平变形监测</td><td>线法、引张线法、激光准直法、精密测（量）距、伸缩仪法、多</td></tr><tr><td>垂直变形监测</td><td>水准测量、液体静力水准测量、电磁波测距三角高程测量等</td></tr><tr><td>三维位移监测</td><td>全站仪自动跟踪测量法、卫星实时定位测量法等</td></tr><tr><td>主体倾斜</td><td>经纬仪投点法、差异沉降法、激光准直法、垂线法、倾斜仪、 电垂直梁法等</td></tr><tr><td>挠度观测</td><td>垂线法、差异沉降法、位移计、挠度计等</td></tr></table></body></html> 15.2.5监测数据应及时采集和整理，并应按频次要求采集，对漏测、误测或异常数据应及时补测或复测、确认或更正，15.2.6应力应变监测周期，宜与变形监测周期同步。 15.2.7 在进行结构变形和结构内力监测时，宜同时进行监测点的温度、风力等环境量监测。15.2.8监测数据应及时进行定量和定性分析。监测数据分析可采用图表分析、统计分析、对比分析和建模分析等方法。15.2.9需要利用监测结果进行趋势预报时，应给出预报结果的误差范围和适用条件。### 本规范用词说明 1为便于在执行本规范条文时区别对待，对要求严格程度不同的用词说明如下：1）表示很严格，非这样做不可的用词：正面词采用“必须”，反面词采用“严禁”； 2）表示严格，在正常情况下均应这样做的用词：正面词采用“应”，反面词采用“不应”或“不得”； 3）表示允许稍有选择，在条件许可时首先这样做的用词：正面词采用“宜”，反面词采用“不宜”； 4）表示有选择，在一定条件下可这样做的用词，采用“可”。2条文中指明应按其他有关标准执行的写法为：
      <p>系统工作人员联系方式</p>
    <p>系统工作人员联系方式表：
      <a href="http://xia0miduo.gicp.net:9000/papbtest//pdf/a2965738189226381312/a2966033634305507328/【示意图序号_a2966033634305507328_3】.jpg" target="_blank">【示意图序号_a2966033634305507328_2】</a>，
      第二个标签 <a href="https://jkeckms.ryuiso.com/chat-bg.jpg" target="_blank">【示意图序号_a2966033634305507328_2】</a>，
      第三个标签 <a href="https://jkeckms.ryuiso.com/chat-bg.jpg" target="_blank">【示意图序号_a2966033634305507328_2】</a>
  `);
  const [linkDataList, setLinkDataList] = useState<LinkData[]>([]);
  const [activeImageUrl, setActiveImageUrl] = useState<string | null>(null);
  
  // 跟踪鼠标是否在链接或预览区上
  const [isHoveringLink, setIsHoveringLink] = useState(false);
  const [isHoveringPreview, setIsHoveringPreview] = useState(false);
  
  const editorContainerRef = useRef<HTMLDivElement>(null);
  const previewRef = useRef<HTMLDivElement>(null);

  // 初始化链接数据
  useEffect(() => {
    const parser = new DOMParser();
    console.log('初始化editorHtml:', editorHtml);
    // debugger
    const doc = parser.parseFromString(editorHtml, 'text/html');
    console.log('解析后的doc:', doc);
    const links = doc.getElementsByTagName('a');
    const linksData: LinkData[] = [];

    Array.from(links).forEach((link, index) => {
      linksData.push({
        id: `link-${index}-${Date.now()}`,
        originalText: link.textContent || '',
        url: link.href,
        isDeleted: false
      });
    });

    setLinkDataList(linksData);
  }, []);

  // 处理内容变化
  const handleEditorChange = (html: string) => {
    console.log('handleEditorChange:-----', html);
    // setEditorHtml(html);
    const text = extractPlainText(html);
    form.setFieldsValue({ slice_text: text });

    if (linkDataList.length > 0) {
      const updatedLinks = [...linkDataList];
      updatedLinks.forEach(link => {
        const feature = link.originalText.slice(0, 5);
        link.isDeleted = !text.includes(feature);
      });
      setLinkDataList(updatedLinks);
    }
  };

  // 处理鼠标悬停链接事件
  useEffect(() => {
    if (!editorContainerRef.current) return;

    const handleMouseOverLink = (e: MouseEvent) => {
      const target = e.target as HTMLAnchorElement;
      if (target.tagName === 'A') {
        const url = target.href;
        const isKnownLink = linkDataList.some(link => 
          !link.isDeleted && url.includes(link.url)
        );

        if (isKnownLink) {
          console.log('图片地址:', url);
          setActiveImageUrl(url);
          setIsHoveringLink(true);
        }
      }
    };

    const handleMouseOutLink = () => {
      setIsHoveringLink(false);
    };

    const container = editorContainerRef.current;
    container.addEventListener('mouseover', handleMouseOverLink);
    container.addEventListener('mouseout', handleMouseOutLink);

    return () => {
      container.removeEventListener('mouseover', handleMouseOverLink);
      container.removeEventListener('mouseout', handleMouseOutLink);
    };
  }, [linkDataList]);

  // 控制预览区显示/隐藏的核心逻辑
  useEffect(() => {
    // 当鼠标既不在链接上也不在预览区上时，才隐藏预览
    if (!isHoveringLink && !isHoveringPreview) {
      setActiveImageUrl(null);
    }
  }, [isHoveringLink, isHoveringPreview]);

  // 配置编辑器（无工具栏）
  const modules = {
    toolbar: false
  };

  return (
    <Form form={form}>
      {editorHtml}
      <Form.Item
        name="slice_text"
        rules={[{ required: true, message: '内容不能为空' }]}
      >
        {/* 容器：编辑器 + 右侧图片预览区 */}
        <div style={{ 
          display: 'flex', 
          gap: '16px', 
          alignItems: 'flex-start'
        }}>
          {/* 500x500的编辑器 */}
          <div 
            ref={editorContainerRef}
            style={{ 
              width: '500px', 
              height: '500px',
              border: '1px solid #d9d9d9', 
              borderRadius: '4px',
              overflow: 'hidden'
            }}
          >
            <ReactQuill
              value={editorHtml}
              onChange={handleEditorChange}
              modules={modules}
              style={{ height: '100%' }}
              placeholder="请输入内容..."
            />
          </div>

          {/* 右侧图片预览区（固定位置） */}
          {activeImageUrl && (
            <div
              ref={previewRef}
              style={{
                width: '300px',
                height: '500px',
                backgroundColor: 'white',
                borderRadius: '8px',
                boxShadow: '0 4px 16px rgba(0, 0, 0, 0.15)',
                padding: '12px',
                border: '1px solid #eee',
                display: 'flex',
                flexDirection: 'column'
              }}
              onMouseOver={() => setIsHoveringPreview(true)}
              onMouseOut={() => setIsHoveringPreview(false)}
            >
              <div style={{ 
                display: 'flex', 
                justifyContent: 'space-between', 
                alignItems: 'center', 
                marginBottom: '12px',
                paddingBottom: '8px',
                borderBottom: '1px solid #f0f0f0'
              }}>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <EyeOutlined style={{ color: '#1890ff', marginRight: '8px' }} />
                  <span style={{ fontSize: '14px', color: '#333' }}>图片预览</span>
                </div>
                <CloseOutlined 
                  style={{ color: '#999', cursor: 'pointer', fontSize: '16px' }}
                  onClick={() => setActiveImageUrl(null)}
                />
              </div>
              
              <div style={{ 
                flex: 1, 
                display: 'flex', 
                alignItems: 'center', 
                justifyContent: 'center',
                overflow: 'hidden'
              }}>
                <img
                  src={activeImageUrl}
                  alt="示意图预览"
                  style={{ 
                    maxWidth: '100%', 
                    maxHeight: '100%', 
                    objectFit: 'contain' 
                  }}
                  onError={() => setActiveImageUrl(null)}
                />
              </div>
            </div>
          )}
        </div>
      </Form.Item>
    </Form>
  );
};

export default PersistentImagePreviewEditor;
