import ReactMarkdown from 'react-markdown';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { useMemo } from 'react';

interface MarkdownViewerProps {
  content: string;
  className?: string;
}

export function MarkdownViewer({ content, className = '' }: MarkdownViewerProps) {
  const components = useMemo(() => ({
    code({ node, className, children, ...props }: any) {
      const match = /language-(\w+)/.exec(className || '');
      const inline = !match;
      
      if (inline) {
        return (
          <code className="px-1.5 py-0.5 bg-muted rounded text-sm font-mono" {...props}>
            {children}
          </code>
        );
      }
      
      return (
        <SyntaxHighlighter
          style={oneDark}
          language={match[1]}
          PreTag="div"
          className="rounded-lg overflow-hidden"
          {...props}
        >
          {String(children).replace(/\n$/, '')}
        </SyntaxHighlighter>
      );
    },
    h1: ({ children }: any) => (
      <h1 className="text-2xl font-bold mt-6 mb-4 text-foreground">{children}</h1>
    ),
    h2: ({ children }: any) => (
      <h2 className="text-xl font-semibold mt-5 mb-3 text-foreground">{children}</h2>
    ),
    h3: ({ children }: any) => (
      <h3 className="text-lg font-semibold mt-4 mb-2 text-foreground">{children}</h3>
    ),
    p: ({ children }: any) => (
      <p className="my-3 text-foreground/90 leading-relaxed">{children}</p>
    ),
    ul: ({ children }: any) => (
      <ul className="my-3 ml-6 list-disc space-y-1">{children}</ul>
    ),
    ol: ({ children }: any) => (
      <ol className="my-3 ml-6 list-decimal space-y-1">{children}</ul>
    ),
    li: ({ children }: any) => (
      <li className="text-foreground/90">{children}</li>
    ),
    blockquote: ({ children }: any) => (
      <blockquote className="border-l-4 border-primary pl-4 my-4 italic text-muted-foreground">
        {children}
      </blockquote>
    ),
    table: ({ children }: any) => (
      <div className="overflow-x-auto my-4">
        <table className="min-w-full divide-y divide-border border border-border rounded-lg">
          {children}
        </table>
      </div>
    ),
    thead: ({ children }: any) => (
      <thead className="bg-muted/50">{children}</thead>
    ),
    th: ({ children }: any) => (
      <th className="px-4 py-2 text-left text-sm font-semibold text-foreground">{children}</th>
    ),
    td: ({ children }: any) => (
      <td className="px-4 py-2 text-sm text-foreground/90">{children}</td>
    ),
    a: ({ href, children }: any) => (
      <a 
        href={href} 
        className="text-primary hover:underline"
        target="_blank" 
        rel="noopener noreferrer"
      >
        {children}
      </a>
    ),
  }), []);

  return (
    <div className={`markdown-content ${className}`}>
      <ReactMarkdown components={components}>
        {content}
      </ReactMarkdown>
    </div>
  );
}
