import { useState, useEffect, useRef } from "react";
import { useLoaderData } from "@remix-run/react";
import { Document, Page, pdfjs } from "react-pdf";
import type { LoaderFunctionArgs } from "@remix-run/node";
import mammoth from "mammoth";

// 设置 pdfjs 工作线程
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

// 模拟后端返回的抽取内容数据
const mockExtractedContent = [
  { id: 1, text: "合同条款", page: 2, position: { start: 50, end: 60 } },
  { id: 2, text: "签署日期", page: 5, position: { start: 120, end: 130 } },
  { id: 3, text: "责任划分", page: 3, position: { start: 80, end: 90 } },
];

interface ExtractedContent {
  id: number;
  text: string;
  page: number;
  position: { start: number; end: number };
}

interface LoaderData {
  fileUrl: string;
  initialPage: number;
  extractedContent: ExtractedContent[];
  fileType: "pdf" | "docx";
  urls: Record<string, string>;
}

// 定义文档加载成功回调类型
interface DocumentLoadSuccess {
  numPages: number;
}

// 根据URL判断文件类型
function getFileTypeFromUrl(url: string): "pdf" | "docx" {
  const lowerCaseUrl = url.toLowerCase();
  if (lowerCaseUrl.endsWith(".pdf")) {
    return "pdf";
  } else if (lowerCaseUrl.endsWith(".docx") || lowerCaseUrl.endsWith(".doc")) {
    return "docx";
  }
  // 默认当作PDF处理
  return "pdf";
}

// Remix Loader 函数
export const loader = async ({ request }: LoaderFunctionArgs) => {
  const url = new URL(request.url);
  const page = url.searchParams.get("page") || 1;
  
  // 实际文档 URL (PDF示例)
  // const fileUrl = "http://172.18.0.100:9000/docauditai/documents/%E5%90%88%E5%90%8C%E6%96%87%E6%A1%A3/2025/04%E6%9C%8816%E6%97%A5/%E7%AC%AC16%E5%8F%B7--%E9%94%80%E5%94%AE%E6%97%A0%E6%A0%87%E5%BF%97%E5%A4%96%E5%9B%BD%E5%8D%B7%E7%83%9F_10%E6%97%B626%E5%88%8632%E7%A7%92/%E7%AC%AC16%E5%8F%B7--%E9%94%80%E5%94%AE%E6%97%A0%E6%A0%87%E5%BF%97%E5%A4%96%E5%9B%BD%E5%8D%B7%E7%83%9F.pdf";
  
  // 示例文档URLs
  const urls = {
    // 1. 原始文档URL - 可能有CORS限制
    original: "https://dev-xc-enroll.oss-cn-guangzhou.aliyuncs.com/uploads/7840-230620112939.docx",
    // 2. 公开示例文档 - 仍可能有CORS限制
    public: "https://dev-xc-enroll.oss-cn-guangzhou.aliyuncs.com/uploads/7840-230620112939.docx",
    // 3. 通过CORS代理 (示例)
    proxy: "https://dev-xc-enroll.oss-cn-guangzhou.aliyuncs.com/uploads/7840-230620112939.docx",
    // 4. 本地服务器上的文档 (假设已经部署)
    local: "/uploads/sample.docx",
    // 5. PDF示例 (如果Word文档问题无法解决)
    pdf: "http://172.18.0.100:9000/docauditai/documents/%E5%90%88%E5%90%8C%E6%96%87%E6%A1%A3/2025/04%E6%9C%8816%E6%97%A5/%E7%AC%AC16%E5%8F%B7--%E9%94%80%E5%94%AE%E6%97%A0%E6%A0%87%E5%BF%97%E5%A4%96%E5%9B%BD%E5%8D%B7%E7%83%9F_10%E6%97%B626%E5%88%8632%E7%A7%92/%E7%AC%AC16%E5%8F%B7--%E9%94%80%E5%94%AE%E6%97%A0%E6%A0%87%E5%BF%97%E5%A4%96%E5%9B%BD%E5%8D%B7%E7%83%9F.pdf"
  };
  
  // 使用本地文档或通过CORS代理的URL
  const fileUrl = urls.public; // 可以切换到其他URL进行测试
  
  // 判断文件类型
  const fileType = getFileTypeFromUrl(fileUrl);
  
  return { 
    fileUrl, 
    initialPage: Number(page), 
    extractedContent: mockExtractedContent,
    fileType,
    urls // 传递所有URL供前端选择
  };
};

export default function Documents() {
  const { fileUrl, extractedContent, fileType, urls } = useLoaderData<LoaderData>();
  const [numPages, setNumPages] = useState<number | null>(null);
  const [scrollToPage, setScrollToPage] = useState<number | null>(null);
  const [docxLoading, setDocxLoading] = useState(false); // 设置为false以避免加载指示器
  const [loadError, setLoadError] = useState<string | null>(null);
  const [debugInfo, setDebugInfo] = useState<string[]>([]);
  const docxContainerRef = useRef<HTMLDivElement>(null);
  const [docxContentPositions, setDocxContentPositions] = useState<{[id: number]: number}>({});
  const [currentUrl, setCurrentUrl] = useState<string>(fileUrl);
  // 默认使用iframe模式
  const [showIframe, setShowIframe] = useState<boolean>(true);
  const [docxHtml, setDocxHtml] = useState<string>("");

  // 处理抽取内容点击
  const handleContentClick = (item: ExtractedContent) => {
    setScrollToPage(item.page);
    if (fileType === "pdf") {
      // 使用ID滚动到指定页面
      const pageElement = document.getElementById(`page-${item.page}`);
      if (pageElement) {
        pageElement.scrollIntoView({ behavior: 'smooth' });
      }
    } else if (fileType === "docx" && !showIframe) {
      // 对于Word文档，滚动到提取内容位置 (仅本地渲染模式)
      const position = docxContentPositions[item.id];
      if (position !== undefined && docxContainerRef.current) {
        // 找到Word内容容器内的位置并滚动
        docxContainerRef.current.scrollTop = position;
        
        // 高亮显示这个区域（模拟）
        highlightDocxContent(item);
      }
    } else if (fileType === "docx" && showIframe) {
      // 对于iframe中的Word文档，我们只能切换到特定iframe页面
      // 这里我们无法控制iframe内部的滚动，只能提示用户
      addDebugInfo(`在iframe中无法直接定位到"${item.text}"，请在文档中手动查找`);
    }
  };

  // 模拟在Word文档中高亮内容
  const highlightDocxContent = (item: ExtractedContent) => {
    // 移除之前的高亮
    const previousHighlights = document.querySelectorAll('.docx-highlight');
    previousHighlights.forEach(el => el.classList.remove('docx-highlight'));

    // 由于我们没有确切的位置信息，这里使用一个模拟的方法
    // 实际项目中，您需要一个更精确的方法来找到文本位置
    if (docxContainerRef.current) {
      const textNodes = Array.from(docxContainerRef.current.querySelectorAll('p, span, div'))
        .filter(node => node.textContent?.includes(item.text));
      
      textNodes.forEach(node => {
        node.classList.add('docx-highlight');
      });
    }
  };

  // PDF文档加载成功回调
  function onDocumentLoadSuccess({ numPages }: DocumentLoadSuccess) {
    setNumPages(numPages);
    console.log("PDF加载成功，页数:", numPages);
  }

  // 简化的调试日志
  const addDebugInfo = (info: string) => {
    console.log(info);
    setDebugInfo(prev => [...prev, `${new Date().toISOString().split('T')[1].split('.')[0]}: ${info}`]);
  };

  // 切换到不同的文档URL
  const switchDocumentUrl = (urlKey: keyof typeof urls) => {
    setCurrentUrl(urls[urlKey]);
    setDebugInfo([]);
    setLoadError(null);
    setDocxLoading(false);
    setShowIframe(true);
    addDebugInfo(`切换到新的文档URL: ${urls[urlKey]}`);
  };

  // 切换到iframe模式 (当直接加载文档有CORS问题时)
  const switchToIframeMode = () => {
    setShowIframe(true);
    setDocxLoading(false);
    addDebugInfo("切换到iframe嵌入模式");
  };

  // 使用mammoth处理Word文档
  useEffect(() => {
    if (fileType === "docx" && docxContainerRef.current && !showIframe) {
      setDocxLoading(true);
      setDebugInfo([]);  // 清空之前的调试信息
      addDebugInfo(`准备加载Word文档: ${currentUrl}`);
      
      const loadDocx = async () => {
        try {
          // 获取文件
          addDebugInfo(`开始获取文件...`);
          let response;
          try {
            response = await fetch(currentUrl, {
              // 添加CORS相关选项
              mode: 'cors',
              credentials: 'omit',
              headers: {
                'Access-Control-Allow-Origin': '*'
              }
            });
            addDebugInfo(`fetch请求状态: ${response.status} ${response.statusText}`);
          } catch (fetchError) {
            addDebugInfo(`fetch请求失败: ${fetchError instanceof Error ? fetchError.message : String(fetchError)}`);
            throw new Error(`网络请求失败: ${fetchError instanceof Error ? fetchError.message : String(fetchError)}`);
          }
          
          if (!response.ok) {
            throw new Error(`文档无法访问，状态码: ${response.status}`);
          }
          addDebugInfo(`文档下载成功，状态码: ${response.status}`);
          
          // 转换为ArrayBuffer
          addDebugInfo(`开始读取响应内容为ArrayBuffer...`);
          let buffer;
          try {
            buffer = await response.arrayBuffer();
            addDebugInfo(`获取到文档数据，大小: ${buffer.byteLength} 字节`);
          } catch (bufferError) {
            addDebugInfo(`读取为ArrayBuffer失败: ${bufferError instanceof Error ? bufferError.message : String(bufferError)}`);
            throw new Error(`转换文档内容失败: ${bufferError instanceof Error ? bufferError.message : String(bufferError)}`);
          }
          
          // 使用mammoth.js将Word转换为HTML，添加自定义选项
          addDebugInfo("使用mammoth开始转换文档为HTML...");
          try {
            // 添加自定义样式映射
            const styleMap = `
              p[style-name='Heading 1'] => h1:fresh
              p[style-name='Heading 2'] => h2:fresh
              p[style-name='Title'] => h1.title:fresh
              p[style-name='Subtitle'] => h2.subtitle:fresh
              table => table.docx-table
            `;
            
            // 创建简化版的转换选项
            const options = {
              arrayBuffer: buffer,
              styleMap: styleMap,
              includeDefaultStyleMap: true
            };
            
            const result = await mammoth.convertToHtml(options);
            
            // 检查转换警告
            if (result.messages.length > 0) {
              result.messages.forEach(message => {
                addDebugInfo(`转换警告: [${message.type}] ${message.message}`);
              });
            }
            
            addDebugInfo("文档转换成功，获取到HTML内容");
            
            // 为生成的HTML文档添加包装容器和样式
            const enhancedHtml = `
              <div class="document-container">
                ${result.value}
                <div class="format-note">
                  <p>注意：本地转换使用了简化版格式，一些高级格式(如页眉页脚、复杂表格格式)可能无法完全显示。</p>
                  <p>如需查看完整格式，请使用"嵌入模式"或下载文档。</p>
                </div>
              </div>
            `;
            
            // 存储HTML内容
            setDocxHtml(enhancedHtml);
            
            // 查找匹配的内容并创建位置映射
            setTimeout(() => {
              try {
                if (docxContainerRef.current) {
                  const positionsMap: {[id: number]: number} = {};
                  
                  extractedContent.forEach((item) => {
                    // 在HTML内容中查找文本
                    // 使用更安全的查询方式
                    if (docxContainerRef.current) {
                      // 获取所有可能包含文本的元素
                      const elements = docxContainerRef.current.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, td, th, span');
                      
                      // 转为数组并过滤包含目标文本的元素
                      const textElements = Array.from(elements).filter(element => 
                        element.textContent?.includes(item.text)
                      );
                      
                      if (textElements.length > 0) {
                        // 使用找到的第一个元素的位置
                        const element = textElements[0];
                        const rect = element.getBoundingClientRect();
                        const containerRect = docxContainerRef.current.getBoundingClientRect();
                        // 计算相对于容器的位置
                        positionsMap[item.id] = rect.top - containerRect.top + docxContainerRef.current.scrollTop;
                        
                        // 标记找到的元素
                        element.classList.add('docx-content-found');
                      }
                    }
                  });
                  
                  setDocxContentPositions(positionsMap);
                  addDebugInfo(`已创建 ${Object.keys(positionsMap).length} 个内容位置映射`);
                }
              } catch (positionError) {
                addDebugInfo(`创建位置映射时出错: ${positionError instanceof Error ? positionError.message : String(positionError)}`);
              }
            }, 500);
            
            setDocxLoading(false);
          } catch (mammothError) {
            addDebugInfo(`Mammoth转换失败: ${mammothError instanceof Error ? mammothError.message : String(mammothError)}`);
            throw new Error(`Word转HTML失败: ${mammothError instanceof Error ? mammothError.message : String(mammothError)}`);
          }
        } catch (error: unknown) {
          const errorMessage = error instanceof Error ? error.message : String(error);
          addDebugInfo(`文档处理错误: ${errorMessage}`);
          setLoadError(`加载Word文档失败: ${errorMessage}`);
          setDocxLoading(false);
        }
      };
      
      loadDocx();
    }
  }, [currentUrl, fileType, extractedContent, showIframe]);

  // 页面渲染完成后检查是否需要滚动
  useEffect(() => {
    if (scrollToPage && fileType === "pdf") {
      const pageElement = document.getElementById(`page-${scrollToPage}`);
      if (pageElement) {
        pageElement.scrollIntoView({ behavior: 'smooth' });
      }
      setScrollToPage(null);
    }
  }, [scrollToPage, fileType]);

  // 生成所有PDF页面的数组
  const renderAllPages = () => {
    if (!numPages) return null;
    
    const pages = [];
    for (let i = 1; i <= numPages; i++) {
      pages.push(
        <div key={i} id={`page-${i}`} className="mb-6">
          <div className="text-center text-gray-500 text-sm mb-2">第 {i} 页</div>
          <Page
            pageNumber={i}
            renderTextLayer={true}
            renderAnnotationLayer={true}
            className="border border-gray-300 shadow-md"
          />
        </div>
      );
    }
    return pages;
  };

  return (
    <div className="flex min-h-screen bg-gray-50 p-6">
      {/* 文档展示区域 */}
      <div className="flex-1 mr-6">
        <div className="bg-white p-4 rounded-lg shadow-md">
          <h1 className="text-2xl font-bold mb-4">文档预览 ({fileType.toUpperCase()})</h1>
          
          {fileType === "docx" && (
            <div className="bg-gray-100 p-3 mb-4 rounded flex flex-col">
              <div className="flex justify-between items-center mb-2">
                <p className="text-sm text-gray-600">Word文档预览模式</p>
                <div className="flex gap-2">
                  <button 
                    onClick={() => setShowIframe(!showIframe)} 
                    className={`px-3 py-1 text-sm rounded ${showIframe ? 'bg-gray-200' : 'bg-blue-500 text-white'}`}
                  >
                    {showIframe ? "尝试本地渲染" : "使用嵌入模式"}
                  </button>
                  <button
                    onClick={() => window.open(currentUrl, '_blank')}
                    className="px-3 py-1 bg-gray-500 text-white text-sm rounded"
                  >
                    下载文档
                  </button>
                </div>
              </div>
              {!showIframe && (
                <div className="text-xs text-gray-500 bg-yellow-50 p-2 rounded">
                  <p>本地渲染说明：</p>
                  <ul className="list-disc pl-5 mt-1">
                    <li>本地渲染使用mammoth.js库将Word文档转换为HTML</li>
                    <li>部分复杂格式（页眉页脚、复杂表格样式、特殊字体等）可能无法完全还原</li>
                    <li>嵌入模式使用Google Docs提供原生渲染，格式更完整但加载较慢</li>
                  </ul>
                </div>
              )}
            </div>
          )}
          
          <div className="w-full h-[80vh] overflow-auto bg-gray-100 rounded-lg p-4">
            {loadError ? (
              <div className="text-red-500 flex flex-col items-center justify-center h-full">
                <p className="mb-4">加载错误:</p>
                <p>{loadError}</p>
                <div className="mt-6 p-4 bg-gray-800 text-green-400 rounded text-xs max-w-xl overflow-auto max-h-96">
                  <p className="font-bold mb-2">调试信息:</p>
                  {debugInfo.map((info, index) => (
                    <div key={index} className="mb-1">{info}</div>
                  ))}
                </div>
                <div className="mt-4">
                  <p className="text-black mb-2">尝试其他方式:</p>
                  <div className="flex flex-wrap gap-2">
                    <button onClick={() => switchDocumentUrl('public')} className="px-3 py-1 bg-green-500 text-white rounded">
                      使用公共示例
                    </button>
                    <button onClick={() => switchDocumentUrl('proxy')} className="px-3 py-1 bg-blue-500 text-white rounded">
                      使用CORS代理
                    </button>
                    <button onClick={() => switchToIframeMode()} className="px-3 py-1 bg-purple-500 text-white rounded">
                      使用iframe嵌入
                    </button>
                    <button onClick={() => switchDocumentUrl('pdf')} className="px-3 py-1 bg-yellow-500 text-white rounded">
                      切换到PDF
                    </button>
                    <a href={currentUrl} className="px-3 py-1 bg-gray-500 text-white rounded" download target="_blank" rel="noreferrer">
                      下载文档
                    </a>
                  </div>
                </div>
              </div>
            ) : fileType === "pdf" ? (
              <Document
                file={currentUrl}
                onLoadSuccess={onDocumentLoadSuccess}
                onLoadError={(error) => {
                  console.error("PDF加载错误:", error);
                  setLoadError("PDF文档加载失败：" + (error.message || "未知错误"));
                }}
                className="flex flex-col items-center"
                error={<div className="text-red-500">PDF文档加载失败，请检查链接或网络连接。</div>}
                noData={<div>无数据</div>}
                loading={<div className="text-center py-10">PDF加载中...</div>}
              >
                {renderAllPages()}
              </Document>
            ) : (
              <>
                {docxLoading ? (
                  <div className="flex flex-col items-center justify-center h-full">
                    <div className="mb-6">
                      <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
                    </div>
                    <p className="mb-4 text-lg">Word文档加载中...</p>
                    {debugInfo.length > 0 && (
                      <div className="mt-4 p-4 bg-gray-800 text-green-400 rounded text-xs max-w-xl overflow-auto max-h-72">
                        <p className="font-bold mb-2">加载过程:</p>
                        {debugInfo.map((info, index) => (
                          <div key={index} className="mb-1">{info}</div>
                        ))}
                      </div>
                    )}
                  </div>
                ) : showIframe ? (
                  // 嵌入模式显示Word文档
                  <div className="w-full h-full">
                    <iframe 
                      src={`https://docs.google.com/viewer?url=${encodeURIComponent(currentUrl)}&embedded=true`}
                      className="w-full h-full"
                      frameBorder="0"
                      title="谷歌文档查看器"
                    />
                  </div>
                ) : (
                  // 本地渲染模式 (只有用户特别点击按钮才显示)
                  <div 
                    ref={docxContainerRef} 
                    className="w-full h-full"
                    style={{
                      height: '100%',
                      overflowY: 'auto',
                      padding: '20px',
                      backgroundColor: 'white'
                    }}
                    dangerouslySetInnerHTML={{ __html: docxHtml }}
                  />
                )}
              </>
            )}
          </div>
        </div>
      </div>

      {/* 抽取内容区域 */}
      <div className="w-80 bg-white p-4 rounded-lg shadow-md">
        <h2 className="text-xl font-semibold mb-4">抽取内容</h2>
        <ul className="space-y-3">
          {extractedContent.map((item) => (
            <button
              key={item.id}
              onClick={() => handleContentClick(item)}
              className="w-full text-left p-3 bg-gray-50 hover:bg-gray-100 cursor-pointer rounded-lg transition"
              aria-label={`查看内容: ${item.text}`}
            >
              <p className="text-sm font-medium">{item.text}</p>
              <p className="text-xs text-gray-500">页面: {item.page}</p>
            </button>
          ))}
        </ul>
      </div>
      
      {/* 添加自定义样式 */}
      <style dangerouslySetInnerHTML={{
        __html: `
          .docx-highlight {
            background-color: #ffff00;
            outline: 2px solid orange;
            position: relative;
          }
          
          /* 找到的内容高亮 */
          .docx-content-found {
            background-color: rgba(255, 230, 0, 0.3);
            outline: 1px solid orange;
          }
          
          /* Mammoth.js生成的内容样式 */
          .document-container {
            font-family: "Microsoft YaHei", Arial, sans-serif;
            line-height: 1.5;
            color: #333;
            max-width: 800px;
            margin: 0 auto;
          }
          
          .document-container .format-note {
            margin-top: 30px;
            padding: 10px;
            background-color: #f5f5f5;
            border-left: 3px solid #ccc;
            font-size: 12px;
            color: #666;
          }
          
          .document-container h1 {
            font-size: 24px;
            margin-top: 24px;
            margin-bottom: 16px;
            font-weight: bold;
            color: #222;
          }
          
          .document-container h1.title {
            font-size: 28px;
            text-align: center;
            margin-bottom: 24px;
          }
          
          .document-container h2 {
            font-size: 20px;
            margin-top: 20px;
            margin-bottom: 14px;
            font-weight: bold;
            color: #333;
          }
          
          .document-container h2.subtitle {
            font-size: 18px;
            text-align: center;
            margin-bottom: 20px;
            color: #555;
          }
          
          .document-container p {
            margin-bottom: 16px;
            text-align: justify;
            overflow-wrap: break-word;
          }
          
          .document-container table {
            border-collapse: collapse;
            width: 100%;
            margin-bottom: 16px;
          }
          
          .document-container table.docx-table {
            border: 1px solid #ddd;
            margin: 16px 0;
          }
          
          .document-container table.docx-table th, 
          .document-container table.docx-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
          }
          
          .document-container table.docx-table th {
            background-color: #f2f2f2;
            font-weight: bold;
          }
          
          .document-container ul, .document-container ol {
            margin-left: 20px;
            margin-bottom: 16px;
          }
          
          .document-container li {
            margin-bottom: 5px;
          }
          
          .document-container img {
            max-width: 100%;
            height: auto;
            margin: 10px 0;
          }
          
          .document-container span.underline {
            text-decoration: underline;
          }
          
          .document-container span.strikethrough {
            text-decoration: line-through;
          }
          
          /* 段落缩进 */
          .document-container p:not(.no-indent) {
            text-indent: 2em;
          }
        `
      }} />
    </div>
  );
}