import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import { cn } from "@/lib/utils";

// GFM tables (the config reference's Field/Type/Default/Notes tables) are wider than a phone
// screen and don't wrap - without their own scroll container the table forces the whole page
// to scroll horizontally instead. The typography plugin's table styles still apply to `table`
// here (its selectors match any descendant, not just direct children of `.prose`), so this
// wrapper only adds the scroll boundary.
function Table(props: React.ComponentProps<"table">) {
  return (
    <div className="overflow-x-auto">
      <table {...props} />
    </div>
  );
}

export function MarkdownViewer({ content }: { content: string }) {
  return (
    <div
      className={cn(
        "prose prose-neutral dark:prose-invert max-w-none",
        "prose-pre:bg-muted prose-pre:text-foreground",
        // Typography's default inline `code` style is just bold text wrapped in decorative
        // backtick characters - swap that for the same muted pill used for inline code
        // elsewhere in the app (see the "no scripts configured" message on the dashboard).
        "prose-code:before:content-none prose-code:after:content-none",
        "prose-code:rounded prose-code:bg-muted prose-code:px-1.5 prose-code:py-0.5 prose-code:font-mono prose-code:font-normal prose-code:text-foreground",
        // Long unbroken strings (env var names, paths) in table cells or inline code would
        // otherwise force their column/line wider than the viewport instead of wrapping.
        "prose-td:break-words prose-th:break-words prose-code:break-words",
      )}
    >
      <ReactMarkdown remarkPlugins={[remarkGfm]} components={{ table: Table }}>
        {content}
      </ReactMarkdown>
    </div>
  );
}