import ReactMarkdown from 'react-markdown';
import rehypeHighlight from 'rehype-highlight';

interface MessageContentProps {
  content: string;
  isUser: boolean;
}

export default function MessageContent({ content, isUser }: MessageContentProps) {
  return (
    <div className={`prose prose-sm max-w-none ${isUser ? 'floating-chat-user-message' : 'floating-chat-message'}`}>
      <ReactMarkdown
        rehypePlugins={[rehypeHighlight]}
        components={{
          // Personalizar el renderizado de los elementos
          p: ({ children }) => (
            <p className="mb-2 last:mb-0 leading-relaxed">{children}</p>
          ),

          // Personalizar bloques de código
          pre: ({ children }) => (
            <pre className={`rounded-lg p-3 my-2 overflow-x-auto text-xs leading-relaxed ${
              isUser
                ? 'bg-black/20 border border-white/20'
                : 'bg-slate-800 dark:bg-slate-900 border border-slate-600/50'
            }`}>
              {children}
            </pre>
          ),

          // Personalizar código inline
          code: ({ className, children, ...props }) => {
            const match = /language-(\w+)/.exec(className || '');

            // Si no es un bloque de código (no tiene className), es código inline
            if (!match) {
              return (
                <code
                  className={`px-1.5 py-0.5 rounded text-xs font-mono ${
                    isUser
                      ? 'bg-black/20 text-purple-100'
                      : 'bg-slate-200 dark:bg-slate-700 text-slate-800 dark:text-slate-200'
                  }`}
                  {...props}
                >
                  {children}
                </code>
              );
            }

            // Para bloques de código, devolver el código tal como está
            return (
              <code className={className} {...props}>
                {children}
              </code>
            );
          },

          // Personalizar texto en negrita
          strong: ({ children }) => (
            <strong className={`font-semibold ${
              isUser ? 'text-white' : 'text-slate-900 dark:text-white'
            }`}>
              {children}
            </strong>
          ),

          // Personalizar texto en cursiva
          em: ({ children }) => (
            <em className={`italic ${
              isUser ? 'text-purple-100' : 'text-slate-700 dark:text-slate-300'
            }`}>
              {children}
            </em>
          ),

          // Personalizar listas
          ul: ({ children }) => (
            <ul className="list-disc list-inside my-2 space-y-1">
              {children}
            </ul>
          ),

          li: ({ children }) => (
            <li className="leading-relaxed">{children}</li>
          ),

          // Personalizar enlaces
          a: ({ children, href }) => (
            <a
              href={href}
              target="_blank"
              rel="noopener noreferrer"
              className={`underline hover:no-underline ${
                isUser
                  ? 'text-purple-100 hover:text-white'
                  : 'text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-300'
              }`}
            >
              {children}
            </a>
          ),

          // Personalizar encabezados
          h1: ({ children }) => (
            <h1 className={`text-lg font-bold mb-2 ${
              isUser ? 'text-white' : 'text-slate-900 dark:text-white'
            }`}>
              {children}
            </h1>
          ),

          h2: ({ children }) => (
            <h2 className={`text-base font-semibold mb-2 ${
              isUser ? 'text-white' : 'text-slate-900 dark:text-white'
            }`}>
              {children}
            </h2>
          ),

          h3: ({ children }) => (
            <h3 className={`text-sm font-semibold mb-1 ${
              isUser ? 'text-white' : 'text-slate-900 dark:text-white'
            }`}>
              {children}
            </h3>
          ),

          // Personalizar citas
          blockquote: ({ children }) => (
            <blockquote className={`border-l-3 pl-3 my-2 italic ${
              isUser
                ? 'border-purple-200 text-purple-100'
                : 'border-slate-300 dark:border-slate-600 text-slate-600 dark:text-slate-400'
            }`}>
              {children}
            </blockquote>
          ),
        }}
      >
        {content}
      </ReactMarkdown>
    </div>
  );
}