"use client";

import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import rehypeHighlight from "rehype-highlight";
import { ExternalLink } from "lucide-react";

import { CopyButton } from "./copy-button";

interface MarkdownContentProps {
  content: string;
}

/** Parse `language-xyz` from a `<code>` className that rehype-highlight emits. */
function languageLabel(className: string | undefined): string | null {
  if (!className) return null;
  const match = /(?:^|\s)language-([a-z0-9+\-]+)/i.exec(className);
  return match && match[1] ? match[1].toLowerCase() : null;
}

export function MarkdownContent({ content }: MarkdownContentProps) {
  return (
    <ReactMarkdown
      remarkPlugins={[remarkGfm]}
      rehypePlugins={[rehypeHighlight]}
      components={{
        pre({ children, ...props }) {
          // Pull language + raw text out of the inner <code> so we can show a
          // language pill and keep CopyButton functional.
          const codeElement = children as React.ReactElement<{
            children?: string;
            className?: string;
          }>;
          const codeContent =
            typeof codeElement?.props?.children === "string" ? codeElement.props.children : "";
          const lang = languageLabel(codeElement?.props?.className);

          return (
            <div className="group border-foreground/10 bg-card/60 my-3 overflow-hidden rounded-xl border">
              {(lang || codeContent) && (
                <div className="border-foreground/8 text-foreground/55 flex items-center justify-between border-b px-3 py-1.5 font-mono text-[10px] tracking-wider uppercase">
                  <span>{lang ?? "text"}</span>
                  {codeContent && (
                    <CopyButton text={codeContent} className="opacity-100 transition-opacity" />
                  )}
                </div>
              )}
              <pre className="overflow-x-auto p-3.5 text-[12.5px] leading-relaxed" {...props}>
                {children}
              </pre>
            </div>
          );
        },
        code({ className, children, ...props }) {
          const isInline = !className;
          if (isInline) {
            return (
              <code
                className="bg-foreground/8 text-foreground rounded px-1.5 py-0.5 font-mono text-[0.85em]"
                {...props}
              >
                {children}
              </code>
            );
          }
          return (
            <code className={className} {...props}>
              {children}
            </code>
          );
        },
        a({ href, children, ...props }) {
          const isExternal = !!href && /^https?:\/\//i.test(href);
          return (
            <a
              href={href}
              target={isExternal ? "_blank" : undefined}
              rel={isExternal ? "noopener noreferrer" : undefined}
              className="text-foreground hover:text-brand-hover decoration-brand hover:decoration-brand inline-flex items-baseline gap-0.5 font-medium underline decoration-2 underline-offset-[3px] transition-colors"
              {...props}
            >
              {children}
              {isExternal && (
                <ExternalLink className="text-foreground/60 inline h-[0.8em] w-[0.8em] shrink-0 -translate-y-[1px]" />
              )}
            </a>
          );
        },
        p({ children, ...props }) {
          return (
            <p className="mb-3 leading-relaxed last:mb-0" {...props}>
              {children}
            </p>
          );
        },
        ul({ children, ...props }) {
          return (
            <ul
              className="marker:text-foreground/40 mb-3 ml-5 list-disc space-y-1 last:mb-0"
              {...props}
            >
              {children}
            </ul>
          );
        },
        ol({ children, ...props }) {
          return (
            <ol
              className="marker:text-foreground/40 mb-3 ml-5 list-decimal space-y-1 last:mb-0"
              {...props}
            >
              {children}
            </ol>
          );
        },
        li({ children, ...props }) {
          return (
            <li className="leading-relaxed" {...props}>
              {children}
            </li>
          );
        },
        h1({ children, ...props }) {
          return (
            <h1
              className="font-display mt-4 mb-2 text-xl font-bold tracking-tight first:mt-0"
              {...props}
            >
              {children}
            </h1>
          );
        },
        h2({ children, ...props }) {
          return (
            <h2
              className="font-display mt-4 mb-2 text-lg font-semibold tracking-tight first:mt-0"
              {...props}
            >
              {children}
            </h2>
          );
        },
        h3({ children, ...props }) {
          return (
            <h3 className="font-display mt-3 mb-2 text-base font-semibold first:mt-0" {...props}>
              {children}
            </h3>
          );
        },
        blockquote({ children, ...props }) {
          return (
            <blockquote
              className="border-brand/40 text-foreground/75 my-3 border-l-2 pl-4 italic"
              {...props}
            >
              {children}
            </blockquote>
          );
        },
        table({ children, ...props }) {
          return (
            <div className="border-foreground/10 my-3 overflow-x-auto rounded-lg border">
              <table className="min-w-full text-sm" {...props}>
                {children}
              </table>
            </div>
          );
        },
        thead({ children, ...props }) {
          return (
            <thead className="bg-foreground/[0.04]" {...props}>
              {children}
            </thead>
          );
        },
        th({ children, ...props }) {
          return (
            <th
              className="border-foreground/10 border-b px-3 py-2 text-left font-mono text-[11px] font-semibold tracking-wider uppercase"
              {...props}
            >
              {children}
            </th>
          );
        },
        td({ children, ...props }) {
          return (
            <td className="border-foreground/8 border-b px-3 py-2 last:border-0" {...props}>
              {children}
            </td>
          );
        },
        hr({ ...props }) {
          return <hr className="border-foreground/10 my-4" {...props} />;
        },
      }}
    >
      {content}
    </ReactMarkdown>
  );
}
