'use client';

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import Image from 'next/image';
import Link from 'next/link';
import { CodeBlock } from './code-block';

interface MarkdownRendererProps {
  content: string;
}

export default function MarkdownRenderer({ content }: MarkdownRendererProps) {
  return (
    <ReactMarkdown
      remarkPlugins={[remarkGfm]}
      components={{
        h1: ({ children }) => {
          const text = String(children);
          const id = text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
          return <h1 id={id}>{children}</h1>;
        },
        h2: ({ children }) => {
          const text = String(children);
          const id = text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
          return <h2 id={id}>{children}</h2>;
        },
        h3: ({ children }) => {
          const text = String(children);
          const id = text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
          return <h3 id={id}>{children}</h3>;
        },
        code: ({ inline, className, children, ...props }: any) => {
          const match = /language-(\w+)/.exec(className || '');
          if (!inline && match) {
            return (
              <CodeBlock
                code={String(children).replace(/\n$/, '')}
                language={match[1]}
              />
            );
          }
          return (
            <code {...props}>
              {children}
            </code>
          );
        },
        img: ({ src, alt }) => {
          if (!src || typeof src !== 'string') return null;
          const isExternal = src.startsWith('http://') || src.startsWith('https://');

          if (isExternal) {
            return (
              <img
                src={src}
                alt={alt || ''}
                className="w-full h-auto"
              />
            );
          }

          return (
            <div className="relative w-full h-auto">
              <Image
                src={src}
                alt={alt || ''}
                width={800}
                height={600}
                style={{ width: '100%', height: 'auto' }}
              />
            </div>
          );
        },
        a: ({ href, children }) => {
          if (!href) return <>{children}</>;
          const isExternal = href.startsWith('http://') || href.startsWith('https://');

          if (isExternal) {
            return (
              <a
                href={href}
                target="_blank"
                rel="noopener noreferrer"
              >
                {children}
              </a>
            );
          }

          return (
            <Link href={href}>
              {children}
            </Link>
          );
        },
      }}
    >
      {content}
    </ReactMarkdown>
  );
}