"use client"

import React from "react"
import ReactMarkdown from "react-markdown"
import remarkGfm from "remark-gfm"
import { SyntaxHighlighter } from "@/lib/syntax-highlighter"
import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism"

export function GeneratedTestsContent({ generatedTests }: { generatedTests: string }) {
  const testsContent = generatedTests.trim()
  const hasCodeBlocks = testsContent.includes("```")
  const content = hasCodeBlocks ? testsContent : "```python\n" + testsContent + "\n```"

  return (
    <div className="prose prose-sm prose-invert max-w-none">
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        components={{
          pre: ({ children, ...props }) => {
            return (
              <div className="not-prose">
                <pre className="bg-slate-900/50 rounded-md overflow-x-auto" {...props}>
                  {children}
                </pre>
              </div>
            )
          },
          code: props => {
            const { inline, className, children, ...restProps } = props as {
              inline?: boolean
              className?: string
              children: React.ReactNode
              [key: string]: unknown
            }
            const match = /language-(\w+)/.exec(className || "")
            const language = match ? match[1] : null

            return !inline && language ? (
              <SyntaxHighlighter
                style={vscDarkPlus}
                language={language}
                PreTag="div"
                className="!bg-slate-900/50 !text-[10px] sm:!text-xs rounded-md"
                customStyle={{
                  margin: 0,
                  padding: "0.5rem",
                  backgroundColor: "rgb(15 23 42 / 0.5)",
                  fontSize: "0.625rem",
                  lineHeight: "1.4",
                }}
                {...restProps}
              >
                {String(children).replace(/\n$/, "")}
              </SyntaxHighlighter>
            ) : (
              <code
                className="bg-slate-700/50 px-1 py-0.5 rounded text-[10px] sm:text-xs text-cyan-300 font-mono"
                {...restProps}
              >
                {children}
              </code>
            )
          },
          p: ({ children }) => (
            <p className="text-xs sm:text-sm text-slate-300 mb-2 sm:mb-3">{children}</p>
          ),
          h1: ({ children }) => (
            <h1 className="text-base sm:text-lg font-bold text-white mb-1.5 sm:mb-2">{children}</h1>
          ),
          h2: ({ children }) => (
            <h2 className="text-sm sm:text-base font-semibold text-white mb-1.5 sm:mb-2">
              {children}
            </h2>
          ),
          h3: ({ children }) => (
            <h3 className="text-xs sm:text-sm font-semibold text-white mb-1">{children}</h3>
          ),
          ul: ({ children }) => (
            <ul className="list-disc list-inside text-xs sm:text-sm text-slate-300 mb-2 sm:mb-3">
              {children}
            </ul>
          ),
          ol: ({ children }) => (
            <ol className="list-decimal list-inside text-xs sm:text-sm text-slate-300 mb-2 sm:mb-3">
              {children}
            </ol>
          ),
          li: ({ children }) => (
            <li className="text-xs sm:text-sm text-slate-300 mb-0.5 sm:mb-1">{children}</li>
          ),
        }}
      >
        {content}
      </ReactMarkdown>
    </div>
  )
}
