import type { Components } from "react-markdown";
import { NostrEntity } from "./NostrEmbeds";

// Shared markdown renderers for blog article bodies. The `remarkNostr` plugin
// rewrites NIP-27 `nostr:` references into links with that scheme, which the
// `a` renderer below swaps for live profile/note embeds.
export const markdownComponents: Components = {
  h1: ({ children }) => (
    <h1 className="text-3xl font-bold text-on-surface mb-4 mt-10">{children}</h1>
  ),
  h2: ({ children }) => (
    <h2 className="text-2xl font-bold text-on-surface mb-4 mt-8">{children}</h2>
  ),
  h3: ({ children }) => (
    <h3 className="text-xl font-bold text-on-surface mb-3 mt-6">{children}</h3>
  ),
  h4: ({ children }) => (
    <h4 className="text-lg font-semibold text-on-surface mb-2 mt-4">{children}</h4>
  ),
  p: ({ children }) => (
    <p className="text-on-surface-variant leading-relaxed mb-6">{children}</p>
  ),
  a: ({ href, children }) => {
    if (href?.startsWith("nostr:")) {
      return <NostrEntity bech32={href.slice("nostr:".length)} />;
    }
    return (
      <a
        href={href}
        className="text-primary hover:underline"
        target="_blank"
        rel="noopener noreferrer"
      >
        {children}
      </a>
    );
  },
  ul: ({ children }) => (
    <ul className="list-disc ml-6 mb-6 space-y-2 text-on-surface-variant">{children}</ul>
  ),
  ol: ({ children }) => (
    <ol className="list-decimal ml-6 mb-6 space-y-2 text-on-surface-variant">{children}</ol>
  ),
  li: ({ children }) => (
    <li className="leading-relaxed">{children}</li>
  ),
  blockquote: ({ children }) => (
    <blockquote className="border-l-4 border-primary/30 pl-4 italic text-on-surface-variant mb-6">
      {children}
    </blockquote>
  ),
  code: ({ className, children }) => {
    const isBlock = className?.includes("language-");
    if (isBlock) {
      return (
        <code className={`${className} block`}>
          {children}
        </code>
      );
    }
    return (
      <code className="bg-surface-container-high px-2 py-1 rounded text-sm text-primary">
        {children}
      </code>
    );
  },
  pre: ({ children }) => (
    <pre className="bg-surface-container-highest p-4 rounded-lg overflow-x-auto mb-6 text-sm">
      {children}
    </pre>
  ),
  img: ({ src, alt }) => (
    <img src={src} alt={alt || ""} className="rounded-lg max-w-full mb-6" />
  ),
  hr: () => <hr className="border-surface-container-high my-8" />,
  table: ({ children }) => (
    <div className="overflow-x-auto mb-6">
      <table className="w-full text-left text-on-surface-variant">{children}</table>
    </div>
  ),
  th: ({ children }) => (
    <th className="px-4 py-2 font-semibold text-on-surface bg-surface-container-high">
      {children}
    </th>
  ),
  td: ({ children }) => (
    <td className="px-4 py-2">{children}</td>
  ),
};