import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";

export default function MarkdownView({ children }: { children: string }) {
  return (
    <div className="max-w-none w-full py-8 px-4 sm:px-16 bg-slate-900/30 rounded-2xl border border-slate-800/50 backdrop-blur-sm shadow-2xl">
      <ReactMarkdown
        remarkPlugins={[remarkGfm, remarkMath]}
        rehypePlugins={[rehypeKatex]}
        components={{
          h1: ({ children }) => (
            <div className="text-center mb-12 mt-4">
              <h1 className="text-4xl sm:text-5xl font-bold tracking-tight text-white inline-block relative pb-4">
                {children}
                <span className="absolute bottom-0 left-1/4 right-1/4 h-1 bg-primary rounded-full opacity-60" />
              </h1>
            </div>
          ),
          h2: ({ children }) => (
            <h2 className="text-2xl sm:text-3xl font-bold mt-12 mb-6 text-white flex items-center gap-3 group">
              <span className="w-1.5 h-8 bg-primary rounded-full group-hover:scale-y-110 transition-transform" />
              {children}
            </h2>
          ),
          h3: ({ children }) => (
            <h3 className="text-xl font-semibold mt-8 mb-4 text-slate-100 flex items-center gap-2">
              <span className="w-1 h-1 rounded-full bg-primary/60" />
              {children}
            </h3>
          ),
          p: ({ children }) => (
            <p className="text-slate-300 leading-relaxed mb-6 text-lg font-light">
              {children}
            </p>
          ),
          blockquote: ({ children }) => (
            <div className="my-8 p-6 bg-primary/5 border-l-4 border-primary rounded-r-xl backdrop-blur-md">
              <div className="text-primary-foreground/90 italic text-lg leading-relaxed font-medium">
                {children}
              </div>
            </div>
          ),
          ul: ({ children }) => (
            <ul className="space-y-3 mb-8 ml-4">
              {children}
            </ul>
          ),
          li: ({ children }) => (
            <li className="flex items-start gap-3 text-slate-300 text-lg">
              <span className="mt-2.5 w-1.5 h-1.5 rounded-full bg-primary/40 shrink-0" />
              <span>{children}</span>
            </li>
          ),
          table: ({ children }) => (
            <div className="my-10 overflow-hidden rounded-xl border border-slate-800 shadow-xl bg-slate-900/50">
              <table className="w-full border-collapse text-left">
                {children}
              </table>
            </div>
          ),
          thead: ({ children }) => (
            <thead className="bg-slate-800/80 text-slate-200">
              {children}
            </thead>
          ),
          th: ({ children }) => (
            <th className="px-6 py-4 font-bold uppercase tracking-wider text-xs border-b border-slate-700">
              {children}
            </th>
          ),
          td: ({ children }) => (
            <td className="px-6 py-4 border-b border-slate-800 text-slate-300 text-sm">
              {children}
            </td>
          ),
          strong: ({ children }) => (
            <strong className="font-bold text-primary/90 underline decoration-primary/30 underline-offset-4">
              {children}
            </strong>
          ),
          hr: () => (
            <hr className="my-12 border-t border-slate-800/80" />
          ),
        }}
      >
        {children}
      </ReactMarkdown>
    </div>
  );
}