"use client";
import * as React from "react";
import ReactMarkdown, { type Components } from "react-markdown";
import remarkGfm from "remark-gfm";
import { CopyButton } from "@/components/ui/misc";
import { cn } from "@/lib/utils";

/**
 * Lightweight Markdown renderer for public pages (share view). GFM, monospace code blocks with a
 * copy button, no syntax highlighting, no raw HTML.
 */

function textOf(node: React.ReactNode): string {
  if (node == null || typeof node === "boolean") return "";
  if (typeof node === "string" || typeof node === "number") return String(node);
  if (Array.isArray(node)) return node.map(textOf).join("");
  if (React.isValidElement<{ children?: React.ReactNode }>(node)) return textOf(node.props.children);
  return "";
}

function Pre({ children }: React.HTMLAttributes<HTMLPreElement>) {
  const codeEl = React.Children.toArray(children).find((c) => React.isValidElement(c)) as React.ReactElement<{ className?: string; children?: React.ReactNode }> | undefined;
  const lang = codeEl?.props.className?.match(/language-([\w+-]+)/)?.[1];
  const raw = textOf(codeEl?.props.children ?? children).replace(/\n$/, "");
  return (
    <div className="group relative my-1 overflow-hidden rounded-lg border border-border bg-bg-subtle">
      <div className="flex h-8 items-center justify-between border-b border-border px-3">
        <span className="font-mono text-[11px] text-fg-subtle">{lang ?? "code"}</span>
        <CopyButton value={raw} size="xs" className="-mr-1.5 h-6 text-[11px] text-fg-subtle opacity-70 group-hover:opacity-100" />
      </div>
      <pre className="overflow-x-auto p-3 text-[12.5px] leading-6 scrollbar-thin">
        <code className={cn("font-mono", codeEl?.props.className)}>{codeEl ? codeEl.props.children : children}</code>
      </pre>
    </div>
  );
}

const components: Components = {
  pre: Pre,
  a: ({ href, children }) => (
    <a href={href} target="_blank" rel="noopener noreferrer nofollow">
      {children}
    </a>
  ),
  table: ({ children }) => (
    <div className="overflow-x-auto">
      <table>{children}</table>
    </div>
  ),
};

export function SimpleMarkdown({ children, className }: { children: string; className?: string }) {
  return (
    <div className={cn("prose-chat", className)}>
      <ReactMarkdown remarkPlugins={[remarkGfm]} components={components} skipHtml>
        {children}
      </ReactMarkdown>
    </div>
  );
}