'use client';

import { useEffect, useState } from 'react';
import MDEditor from '@uiw/react-md-editor';
import rehypeSanitize from 'rehype-sanitize';
import { useTheme } from 'next-themes';

/**
 * Gerenderte Aenderungsliste fuer die Seite "Was ist neu" (quick-260916-dcz).
 *
 * Nutzt `MDEditor.Markdown` aus dem bereits installierten `@uiw/react-md-editor`
 * (wie die Vorschau des Notiz-Widgets) mit `rehype-sanitize` — kein neues
 * Paket, kein dangerouslySetInnerHTML. Der Farbmodus folgt `next-themes`
 * erst nach dem Mount (vorher 'light'), damit Server- und Client-Markup
 * uebereinstimmen (mounted-Guard wie in AppShell). Der Markdown-Text kommt
 * als Prop von der Server-Seite; dieses Modul importiert `@/lib/changelog`
 * bewusst NICHT, damit der Text nicht in Client-Chunks landet.
 */
export function ChangelogView({ markdown }: { markdown: string }) {
  const { resolvedTheme } = useTheme();
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  const mode: 'light' | 'dark' = mounted && resolvedTheme === 'dark' ? 'dark' : 'light';

  return (
    <div data-testid="changelog-markdown" className="rounded-md border border-border bg-card p-4">
      <MDEditor.Markdown
        source={markdown}
        rehypePlugins={[[rehypeSanitize]]}
        wrapperElement={{ 'data-color-mode': mode }}
        style={{ background: 'transparent' }}
      />
    </div>
  );
}