'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.
 *
 * quick-260925-bow: `variant="plain"` laesst Rahmen, Hintergrund und
 * Innenabstand weg — so rendert das "Was ist neu"-Fenster seine Abschnitte mit
 * demselben Renderer wie die Seite /changelog (Vorgabe `card`, Seite
 * unveraendert).
 */
export function ChangelogView({
  markdown,
  variant = 'card',
}: {
  markdown: string;
  variant?: 'card' | 'plain';
}) {
  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={variant === 'card' ? 'rounded-md border border-border bg-card p-4' : undefined}
    >
      <MDEditor.Markdown
        source={markdown}
        rehypePlugins={[[rehypeSanitize]]}
        wrapperElement={{ 'data-color-mode': mode }}
        style={{ background: 'transparent' }}
      />
    </div>
  );
}