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

interface MarkdownRendererProps {
  content: string;
  variant?: 'default' | 'thinking';
}

export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
  content,
  variant = 'default',
}) => {
  if (variant === 'thinking') {
    return (
      <div className="break-words text-[13px] leading-6 text-term-text-muted [&_strong]:font-semibold [&_strong]:text-term-text-muted [&_em]:italic">
        <ReactMarkdown
          remarkPlugins={[remarkGfm]}
          components={{
            p: ({ children }) => <p className="my-1.5">{children}</p>,
            ul: ({ children }) => (
              <ul className="my-2 list-disc space-y-0.5 pl-4">{children}</ul>
            ),
            ol: ({ children }) => (
              <ol className="my-2 list-decimal space-y-0.5 pl-4">
                {children}
              </ol>
            ),
            li: ({ children }) => <li className="pl-0.5">{children}</li>,
            code: ({ className, children }) => {
              const value = String(children).replace(/\n$/, '');
              const isBlock =
                Boolean(className?.includes('language-')) || value.includes('\n');
              return isBlock ? (
                <code className="block overflow-x-auto rounded-lg border border-term-border bg-term-bg px-3 py-2 font-mono text-[12px] leading-5 text-term-text-muted break-all">
                  {value}
                </code>
              ) : (
                <code className="rounded bg-term-surface px-1 py-0.5 font-mono text-[0.9em] text-warning break-all">
                  {value}
                </code>
              );
            },
            pre: ({ children }) => (
              <pre className="my-3 overflow-x-auto">{children}</pre>
            ),
            blockquote: ({ children }) => (
              <blockquote className="my-2 border-l-2 border-term-border pl-3 text-term-text-muted">
                {children}
              </blockquote>
            ),
            h1: ({ children }) => (
              <h1 className="mb-2 mt-1 text-[1.2rem] font-semibold text-term-text-muted">
                {children}
              </h1>
            ),
            h2: ({ children }) => (
              <h2 className="mb-2 mt-3 text-[1.1rem] font-semibold text-term-text-muted">
                {children}
              </h2>
            ),
            h3: ({ children }) => (
              <h3 className="mb-2 mt-2 text-[1rem] font-semibold text-term-text-muted">
                {children}
              </h3>
            ),
            a: ({ href, children }) => (
              <a
                href={href}
                target="_blank"
                rel="noreferrer"
                className="break-all text-info/80 underline decoration-info/40 underline-offset-4 transition-colors hover:text-info"
              >
                {children}
              </a>
            ),
            hr: () => <hr className="my-3 border-term-border" />,
            table: ({ children }) => (
              <div className="my-3 overflow-x-auto">
                <table className="min-w-full border-collapse text-left text-[12px]">
                  {children}
                </table>
              </div>
            ),
            thead: ({ children }) => (
              <thead className="border-b border-term-border text-term-text-muted">
                {children}
              </thead>
            ),
            tbody: ({ children }) => <tbody>{children}</tbody>,
            tr: ({ children }) => (
              <tr className="border-b border-term-border-subtle last:border-b-0">
                {children}
              </tr>
            ),
            th: ({ children }) => (
              <th className="px-2 py-1.5 font-semibold">{children}</th>
            ),
            td: ({ children }) => (
              <td className="px-2 py-1.5 align-top text-term-text-muted">
                {children}
              </td>
            ),
          }}
        >
          {content}
        </ReactMarkdown>
      </div>
    );
  }

  return (
    <div className="break-words text-[14px] leading-7 text-term-text [&_strong]:font-semibold [&_strong]:text-term-text">
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        components={{
          h1: ({ children }) => (
            <h1 className="mb-3 mt-1 text-[1.35rem] font-semibold tracking-[-0.02em] text-term-text">
              {children}
            </h1>
          ),
          h2: ({ children }) => (
            <h2 className="mb-2 mt-4 text-[1.15rem] font-semibold text-term-text">
              {children}
            </h2>
          ),
          h3: ({ children }) => (
            <h3 className="mb-2 mt-3 text-[1rem] font-semibold text-term-text">
              {children}
            </h3>
          ),
          p: ({ children }) => <p className="my-2">{children}</p>,
          ul: ({ children }) => (
            <ul className="my-3 list-disc space-y-1 pl-5">{children}</ul>
          ),
          ol: ({ children }) => (
            <ol className="my-3 list-decimal space-y-1 pl-5">{children}</ol>
          ),
          li: ({ children }) => <li className="pl-1">{children}</li>,
          blockquote: ({ children }) => (
            <blockquote className="my-3 border-l-2 border-info/50 pl-4 italic text-term-text-muted">
              {children}
            </blockquote>
          ),
          a: ({ href, children }) => (
            <a
              href={href}
              target="_blank"
              rel="noreferrer"
              className="break-all text-info underline decoration-info/50 underline-offset-4 transition-colors hover:text-term-text"
            >
              {children}
            </a>
          ),
          hr: () => <hr className="my-4 border-term-border" />,
          table: ({ children }) => (
            <div className="my-4 overflow-x-auto">
              <table className="min-w-full border-collapse text-left text-[13px]">
                {children}
              </table>
            </div>
          ),
          thead: ({ children }) => (
            <thead className="border-b border-term-border text-term-text-muted">
              {children}
            </thead>
          ),
          tbody: ({ children }) => <tbody>{children}</tbody>,
          tr: ({ children }) => (
            <tr className="border-b border-term-border-subtle last:border-b-0">
              {children}
            </tr>
          ),
          th: ({ children }) => (
            <th className="px-3 py-2 font-semibold">{children}</th>
          ),
          td: ({ children }) => (
            <td className="px-3 py-2 align-top text-term-text">
              {children}
            </td>
          ),
          code: ({ className, children }) => {
            const value = String(children).replace(/\n$/, '');
            const isBlock =
              Boolean(className?.includes('language-')) || value.includes('\n');

            return isBlock ? (
              <code className="block overflow-x-auto rounded-xl border border-term-border bg-term-bg px-4 py-3 font-mono text-[13px] leading-6 text-term-text break-all">
                {value}
              </code>
            ) : (
              <code className="rounded bg-term-surface px-1.5 py-0.5 font-mono text-[0.92em] text-warning break-all">
                {value}
              </code>
            );
          },
          pre: ({ children }) => (
            <pre className="my-4 overflow-x-auto">{children}</pre>
          ),
        }}
      >
        {content}
      </ReactMarkdown>
    </div>
  );
};
