import React, { useEffect, useState, useCallback } from 'react';
import { GroundingMetadata } from '../types/ragGrounding';
import { markdownService } from '../services/markdownService';
import {
  MarkdownParseResult,
  MarkdownNode,
  MarkdownNodeType,
  ValidationResult
} from '../types/markdown';

/**
 * 增强Markdown渲染器属性接口
 */
interface EnhancedMarkdownRendererProps {
  /** 要渲染的文本内容 */
  content: string;
  /** Grounding元数据 */
  groundingMetadata?: GroundingMetadata;
  /** 是否启用角标引用 */
  enableReferences?: boolean;
  /** 是否启用Markdown渲染 */
  enableMarkdown?: boolean;
  /** 自定义样式类名 */
  className?: string;
  /** 是否显示解析统计信息 */
  showStatistics?: boolean;
  /** 是否启用实时解析 */
  enableRealTimeParsing?: boolean;
}

/**
 * 增强Markdown渲染器组件
 * 使用基于Tree-sitter的MarkdownService替代ReactMarkdown
 */
export const EnhancedMarkdownRenderer: React.FC<EnhancedMarkdownRendererProps> = ({
  content,
  groundingMetadata,
  enableReferences = true,
  enableMarkdown = true,
  className = '',
  showStatistics = false,
  enableRealTimeParsing = false
}) => {
  const [parseResult, setParseResult] = useState<MarkdownParseResult | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [validation, setValidation] = useState<ValidationResult | null>(null);

  // 解析Markdown内容
  const parseContent = useCallback(async () => {
    if (!content.trim() || !enableMarkdown) {
      setParseResult(null);
      setValidation(null);
      return;
    }

    setIsLoading(true);
    setError(null);

    try {
      // 解析Markdown
      const result = await markdownService.parseMarkdown(content);
      console.log({
        content: content.length,
        result: result.source_text.length
      })
      setParseResult(result);

      // 验证文档结构
      const validationResult = await markdownService.validateMarkdown(content);
      setValidation(validationResult);
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
      setError(errorMessage);
      console.error('📝 Markdown解析失败:', err);
    } finally {
      setIsLoading(false);
    }
  }, [content, enableMarkdown]);

  // 实时解析效果
  useEffect(() => {
    if (enableRealTimeParsing) {
      const timeoutId = setTimeout(parseContent, 300); // 防抖
      return () => clearTimeout(timeoutId);
    }
  }, [content, enableRealTimeParsing, parseContent]);

  // 初始解析
  useEffect(() => {
    if (!enableRealTimeParsing) {
      parseContent();
    }
  }, [parseContent, enableRealTimeParsing]);

  // 分析节点与引用资源的关联
  const analyzeNodeGrounding = useCallback((node: MarkdownNode) => {
    if (!groundingMetadata?.grounding_supports || !parseResult) {
      return null;
    }

    // 计算节点在原始文本中的字节偏移位置（与grounding数据的字节偏移匹配）
    const nodeStartOffset = node.range?.start?.byte_offset || 0;
    const nodeEndOffset = node.range?.end?.byte_offset || 0;
    const nodeStartOffset1 = node.range?.start?.offset || 0;
    const nodeEndOffset1 = node.range?.end?.offset || 0;
    // 查找与当前节点位置重叠的grounding支持信息
    const relatedSupports = groundingMetadata.grounding_supports.filter(support => {
      // grounding数据使用字节偏移
      const segmentStart = support.segment.startIndex;
      const segmentEnd = support.segment.endIndex;

      const hasOverlap = (nodeEndOffset <= segmentEnd && nodeStartOffset >= segmentStart);
      // 检查节点范围与grounding片段是否有重叠
      return hasOverlap;
    });
    console.log({
      relatedSupports,
      nodeStartOffset,
      nodeEndOffset,
      nodeStartOffset1,
      nodeEndOffset1
    })
    if (relatedSupports.length > 0) {
      // 获取相关的来源信息
      const relatedSources = relatedSupports.flatMap(support =>
        support.groundingChunkIndices.map(index => groundingMetadata.sources[index])
      ).filter(Boolean);

      const analysisResult = {
        node: {
          type: node.node_type,
          content: node.content.substring(0, 100) + (node.content.length > 100 ? '...' : ''),
          position: {
            start: nodeStartOffset,
            end: nodeEndOffset,
            line: node.range?.start?.line,
            column: node.range?.start?.column
          }
        },
        groundingInfo: {
          supportCount: relatedSupports.length,
          sourceCount: relatedSources.length,
          sources: relatedSources.map(source => ({
            title: source.title,
            uri: source.uri,
            snippet: source.content?.snippet || 'No snippet available'
          })),
          segments: relatedSupports.map(support => ({
            start: support.segment.startIndex,
            end: support.segment.endIndex,
            chunkIndices: support.groundingChunkIndices
          }))
        }
      };

      console.log('🔗 节点引用分析:', analysisResult);
      return analysisResult;
    }
    return null;
  }, [groundingMetadata, parseResult]);

  // 渲染单个Markdown节点
  const renderNode = useCallback((node: MarkdownNode, depth: number = 0, index: number = 0): React.ReactNode => {
    const key = `${node.range?.start?.line || 0}-${node.range?.start?.column || 0}-${node.range?.start?.offset || 0}-${depth}-${index}`;
    // 分析当前节点的引用关联
    const groundingAnalysis = analyzeNodeGrounding(node);
    // 创建引用指示器组件
    const GroundingIndicator = groundingAnalysis ? (
      <span
        className="inline-flex items-center ml-1 px-1 py-0.5 text-xs bg-blue-100 text-blue-700 rounded cursor-help"
        title={`引用了 ${groundingAnalysis.groundingInfo.sourceCount} 个来源`}
        onClick={() => {
          console.log('📚 点击查看引用详情:', groundingAnalysis);
          // 这里可以添加弹窗或侧边栏显示详细引用信息
        }}
      >
        📚 {groundingAnalysis.groundingInfo.sourceCount}
      </span>
    ) : null;

    switch (node.node_type) {
      case MarkdownNodeType.Document:
        return (
          <div key={key} className="markdown-document">
            {node.children.map((child, childIndex) => renderNode(child, depth + 1, childIndex))}
          </div>
        );

      case MarkdownNodeType.Heading:
        const level = parseInt(node.attributes.level || '1');
        const HeadingTag = `h${Math.min(level, 6)}` as keyof JSX.IntrinsicElements;
        const headingClasses = {
          1: 'text-lg font-bold mb-2',
          2: 'text-base font-semibold mb-2',
          3: 'font-medium mb-1',
          4: 'font-medium mb-1 text-sm',
          5: 'font-medium mb-1 text-sm',
          6: 'font-medium mb-1 text-xs'
        };
        return (
          <HeadingTag key={key} className={headingClasses[level as keyof typeof headingClasses] || headingClasses[3]}>
            {node.children.map((child, childIndex) => renderNode(child, depth + 1, childIndex))}
            {GroundingIndicator}
          </HeadingTag>
        );

      case MarkdownNodeType.Paragraph:
        return (
          <p key={key} className="mb-2">
            {node.children.map((child, childIndex) => renderNode(child, depth + 1, childIndex))}
            {GroundingIndicator}
          </p>
        );

      case MarkdownNodeType.List:
        const isOrdered = node.content.trim().match(/^\d+\./);
        const ListTag = isOrdered ? 'ol' : 'ul';
        const listClass = isOrdered ? 'list-decimal ml-4 mb-2' : 'list-disc ml-4 mb-2';
        return (
          <ListTag key={key} className={listClass}>
            {node.children.map((child, childIndex) => renderNode(child, depth + 1, childIndex))}
          </ListTag>
        );

      case MarkdownNodeType.ListItem:
        return (
          <li key={key} className="mb-1">
            {node.children.map((child, childIndex) => renderNode(child, depth + 1, childIndex))}
          </li>
        );

      case MarkdownNodeType.CodeBlock:
        const language = node.attributes.language || '';
        return (
          <pre key={key} className="bg-gray-100 p-3 rounded mb-2 overflow-x-auto">
            <code className={`language-${language} text-sm font-mono`}>
              {markdownService.extractTextContent(node)}
            </code>
          </pre>
        );

      case MarkdownNodeType.InlineCode:
        return (
          <code key={key} className="bg-gray-100 px-1 py-0.5 rounded text-sm font-mono">
            {markdownService.extractTextContent(node)}
          </code>
        );

      case MarkdownNodeType.Link:
        const url = node.attributes.url || '#';
        const title = node.attributes.title;
        return (
          <a
            key={key}
            href={url}
            title={title}
            className="text-blue-600 hover:text-blue-800 underline"
            target="_blank"
            rel="noopener noreferrer"
          >
            {node.children.map((child, childIndex) => renderNode(child, depth + 1, childIndex))}
          </a>
        );

      case MarkdownNodeType.Image:
        const src = node.attributes.src || '';
        const alt = node.attributes.alt || '';
        return (
          <img
            key={key}
            src={src}
            alt={alt}
            className="max-w-full h-auto mb-2"
          />
        );

      case MarkdownNodeType.Strong:
        return (
          <strong key={key}>
            {node.children.map((child, childIndex) => renderNode(child, depth + 1, childIndex))}
          </strong>
        );

      case MarkdownNodeType.Emphasis:
        return (
          <em key={key}>
            {node.children.map((child, childIndex) => renderNode(child, depth + 1, childIndex))}
          </em>
        );

      case MarkdownNodeType.Blockquote:
        return (
          <blockquote key={key} className="border-l-4 border-gray-300 pl-4 italic text-gray-600 mb-2">
            {node.children.map((child, childIndex) => renderNode(child, depth + 1, childIndex))}
          </blockquote>
        );

      case MarkdownNodeType.Text:
        return <span key={key}>{node.content}</span>;

      case MarkdownNodeType.LineBreak:
        return <br key={key} />;

      default:
        return (
          <div key={key} className="unknown-node">
            {node.children.map((child, childIndex) => renderNode(child, depth + 1, childIndex))}
          </div>
        );
    }
  }, [analyzeNodeGrounding]);


  return (
    <div className={`enhanced-markdown-renderer ${className}`}>
      {/* 加载状态 */}
      {isLoading && (
        <div className="flex items-center justify-center p-4">
          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600"></div>
          <span className="ml-2 text-sm text-gray-600">解析中...</span>
        </div>
      )}

      {/* 错误状态 */}
      {error && (
        <div className="bg-red-50 border border-red-200 rounded p-3 mb-4">
          <div className="text-red-800 font-medium text-sm">解析错误</div>
          <div className="text-red-600 text-sm mt-1">{error}</div>
        </div>
      )}

      {/* Markdown内容渲染 */}
      {enableMarkdown && parseResult && !isLoading && !error ? (
        <div className="prose prose-sm max-w-none leading-relaxed">
          {renderNode(parseResult.root)}
        </div>
      ) : !enableMarkdown ? (
        <div className="leading-relaxed whitespace-pre-wrap">{content}</div>
      ) : null}

      {/* 解析统计信息 */}
      {showStatistics && parseResult && (
        <div className="mt-4 p-3 bg-gray-50 rounded text-xs">
          <div className="font-medium mb-1">解析统计</div>
          <div className="grid grid-cols-2 gap-2">
            <div>节点数: {parseResult.statistics.total_nodes}</div>
            <div>错误数: {parseResult.statistics.error_nodes}</div>
            <div>解析时间: {parseResult.statistics.parse_time_ms}ms</div>
            <div>最大深度: {parseResult.statistics.max_depth}</div>
          </div>
        </div>
      )}

      {/* 验证结果 */}
      {validation && !validation.is_valid && (
        <div className="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded">
          <div className="text-yellow-800 font-medium text-sm mb-2">文档验证警告</div>
          <div className="space-y-1">
            {validation.issues.slice(0, 3).map((issue, index) => (
              <div key={index} className="text-yellow-700 text-xs">
                • {issue.message}
              </div>
            ))}
            {validation.issues.length > 3 && (
              <div className="text-yellow-600 text-xs">
                还有 {validation.issues.length - 3} 个问题...
              </div>
            )}
          </div>
        </div>
      )}

      {/* 显示引用来源信息（如果有的话） */}
      {enableReferences && groundingMetadata?.sources && groundingMetadata.sources.length > 0 && (
        <div className="mt-4 pt-3 border-t border-gray-200">
          <div className="text-xs text-gray-500 mb-2">
            基于 {groundingMetadata.sources.length} 个来源的信息
          </div>
          <div className="flex flex-wrap gap-1">
            {groundingMetadata.sources.slice(0, 5).map((source, index) => (
              <span
                key={index}
                className="inline-flex items-center px-2 py-1 text-xs bg-blue-50 text-blue-700 rounded-full"
                title={source.title || `来源 ${index + 1}`}
              >
                {index + 1}
              </span>
            ))}
            {groundingMetadata.sources.length > 5 && (
              <span className="text-xs text-gray-400">
                +{groundingMetadata.sources.length - 5} 更多
              </span>
            )}
          </div>
        </div>
      )}
    </div>
  );
};

export default EnhancedMarkdownRenderer;