import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

interface DetailedReference {
  filename: string;
  file_id: string;
  page_number: number;
  chunk_index?: number;
  content_preview?: string;
  full_content?: string;
  is_relevant?: boolean;
}

interface SimpleMarkdownRendererProps {
  content: string;
  detailedReferences?: DetailedReference[];
  onReferenceClick?: (fileId: string, pageNumber: number, filename: string) => void;
}

const SimpleMarkdownRenderer: React.FC<SimpleMarkdownRendererProps> = ({
  content,
  detailedReferences = [],
  onReferenceClick
}) => {
  // 마크다운 렌더링 함수
  const renderMarkdown = (text: string): React.ReactNode => {
    return (
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        components={{
          // 일반 링크 처리
          link: ({ href, children }) => (
            <a href={href} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:text-blue-800 underline">
              {children}
            </a>
          ),
          // 헤딩 스타일
          h1: ({ children }) => (
            <h1 className="text-2xl font-bold text-gray-900 mb-4 mt-6 first:mt-0">
              {children}
            </h1>
          ),
          h2: ({ children }) => (
            <h2 className="text-xl font-semibold text-gray-800 mb-3 mt-5">
              {children}
            </h2>
          ),
          h3: ({ children }) => (
            <h3 className="text-lg font-medium text-gray-700 mb-2 mt-4">
              {children}
            </h3>
          ),
          // 문단 스타일
          p: ({ children }) => (
            <p className="text-gray-700 leading-relaxed mb-4">
              {children}
            </p>
          ),
            // 리스트 스타일
            ul: ({ children }) => (
              <ul className="list-disc pl-6 text-gray-700 mb-4 space-y-2">
                {children}
              </ul>
            ),
            ol: ({ children }) => (
              <ol className="list-decimal pl-6 text-gray-700 mb-4 space-y-2">
                {children}
              </ol>
            ),
            li: ({ children }) => (
              <li className="text-gray-700 leading-relaxed ml-2">
                {children}
              </li>
            ),
          // 강조 스타일
          strong: ({ children }) => (
            <strong className="font-semibold text-gray-900">
              {children}
            </strong>
          ),
          em: ({ children }) => (
            <em className="italic text-gray-800">
              {children}
            </em>
          ),
          // 코드 스타일
          code: ({ children }) => (
            <code className="bg-gray-100 text-gray-800 px-1 py-0.5 rounded text-sm font-mono">
              {children}
            </code>
          ),
          pre: ({ children }) => (
            <pre className="bg-gray-100 text-gray-800 p-4 rounded-lg overflow-x-auto mb-4">
              {children}
            </pre>
          ),
            // 인용 스타일
            blockquote: ({ children }) => (
              <blockquote className="border-l-4 border-blue-500 pl-6 py-2 italic text-gray-600 mb-4 bg-blue-50 rounded-r">
                {children}
              </blockquote>
            ),
          // 테이블 스타일
          table: ({ children }) => (
            <div className="overflow-x-auto mb-4">
              <table className="min-w-full border-collapse border border-gray-300">
                {children}
              </table>
            </div>
          ),
          th: ({ children }) => (
            <th className="border border-gray-300 bg-gray-100 px-4 py-2 text-left font-semibold text-gray-900">
              {children}
            </th>
          ),
          td: ({ children }) => (
            <td className="border border-gray-300 px-4 py-2 text-gray-700">
              {children}
            </td>
          ),
        }}
      >
        {text}
      </ReactMarkdown>
    );
  };

  return (
    <div className="prose prose-gray max-w-none">
      {renderMarkdown(content)}
    </div>
  );
};

export default SimpleMarkdownRenderer;