import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

/**
 * Hilfetexte als Markdown – ohne rohes HTML.
 *
 * `react-markdown` laesst rohes HTML von sich aus fallen; `rehype-raw` wuerde es
 * wieder einschalten und ist deshalb bewusst nicht installiert. Ein Redakteur
 * darf Hilfetexte schreiben, aber kein Skript in die Abarbeitungsansicht
 * bringen, die jeder Techniker oeffnet.
 *
 * Links oeffnen in einem neuen Tab mit `rel="noreferrer"`, damit der Lauf beim
 * Klick nicht verlassen wird und die Zielseite nichts ueber die Herkunft erfaehrt.
 */
export function Markdown({ text, className }: { text: string; className?: string }) {
  return (
    <div className={`markdown text-sm text-nebentext ${className ?? ""}`}>
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        components={{
          /*
           * `react-markdown` leert den `href`, wenn das Protokoll nicht erlaubt
           * ist. Ein `<a href="">` laedt beim Klick die aktuelle Seite in einem
           * neuen Tab — verwirrender als gar kein Verweis. Der Text bleibt
           * stehen, nur das Anklickbare faellt weg.
           */
          a: ({ href, children }) =>
            href ? (
              <a
                href={href}
                target="_blank"
                rel="noreferrer"
                className="text-akzent underline underline-offset-2"
              >
                {children}
              </a>
            ) : (
              <span className="text-nebentext">{children}</span>
            ),
          /*
           * Bilder werden **nicht** gerendert, sondern als Alternativtext
           * gezeigt. Ein Bild in einem Hilfetext laege auf einem fremden Host,
           * und `img-src` erlaubt nur `self`, `data:` und `blob:` — es wuerde
           * also ohnehin nie erscheinen, nur ein kaputtes Symbol hinterlassen.
           * Anhaenge sind fuer Phase 2 vorgesehen; bis dahin ist der Text
           * ehrlicher als ein leerer Rahmen.
           */
          img: ({ alt }) => <span className="text-nebentext">[Bild{alt ? `: ${alt}` : ""}]</span>,
          code: ({ children }) => (
            <code className="mono rounded bg-flaeche-hoch px-1 py-0.5 text-[0.9em]">{children}</code>
          ),
          pre: ({ children }) => (
            <pre className="mono overflow-x-auto rounded-karte border border-linie bg-grund p-3 text-xs">
              {children}
            </pre>
          ),
          ul: ({ children }) => <ul className="list-disc pl-5">{children}</ul>,
          ol: ({ children }) => <ol className="list-decimal pl-5">{children}</ol>,
          p: ({ children }) => <p className="[&:not(:first-child)]:mt-2">{children}</p>,
        }}
      >
        {text}
      </ReactMarkdown>
    </div>
  );
}