tessera-ctl/apps/web/src/components/dashboard/widgets/note-widget.tsx

'use client';

import { useCallback, useEffect, useRef, useState } from 'react';
import { useTranslations } from 'next-intl';
import MDEditor, { commands } from '@uiw/react-md-editor';
import rehypeSanitize from 'rehype-sanitize';
import type { WidgetProps } from '../widget-registry';
import { updateWidgetConfig } from '@/lib/dashboard-api';
import { NoteCheckbox, toggleTaskLine } from './note-task-list';

const DEBOUNCE_MS = 1500;

// quick-260916-iex: Aufgabenlisten sind in der Ansicht direkt abhakbar —
// `components.input` ersetzt das per rehypeSanitize deaktivierte `input`
// durch NoteCheckbox (siehe note-task-list.tsx). Stabile Konstante ausserhalb
// der Komponente, damit react-markdown nicht bei jedem Render neu diffed.
// Typ direkt von MDEditor abgeleitet statt aus dem transitiven Paket
// `@uiw/react-markdown-preview` importiert (das ist keine direkte
// Dependency von apps/web und daher unter pnpms strikter Isolation nicht
// von hier aus aufloesbar).
type PreviewOptions = NonNullable<
  React.ComponentProps<typeof MDEditor>['previewOptions']
>;

const PREVIEW_OPTIONS: PreviewOptions = {
  rehypePlugins: [[rehypeSanitize]],
  components: { input: NoteCheckbox },
};

const NOTE_COMMANDS = [
  commands.bold,
  commands.italic,
  commands.strikethrough,
  commands.divider,
  commands.unorderedListCommand,
  commands.checkedListCommand,
  commands.divider,
  commands.link,
  commands.code,
];

export function NoteWidget({ instanceId, config }: WidgetProps) {
  const t = useTranslations('widgets');
  const [title, setTitle] = useState<string>(
    (config.title as string) || t('note.defaultTitle'),
  );
  const [content, setContent] = useState<string>(
    (config.content as string) || '',
  );
  const [isEditing, setIsEditing] = useState(false);
  const [saveError, setSaveError] = useState(false);

  const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
  const abortRef = useRef<AbortController | undefined>(undefined);

  useEffect(() => {
    return () => {
      clearTimeout(timerRef.current);
      abortRef.current?.abort();
    };
  }, []);

  const save = useCallback(
    async (newContent: string, newTitle: string) => {
      abortRef.current?.abort();
      abortRef.current = new AbortController();
      try {
        await updateWidgetConfig(instanceId, { content: newContent, title: newTitle }, abortRef.current.signal);
        setSaveError(false);
      } catch (err: unknown) {
        if (err instanceof DOMException && err.name === 'AbortError') return;
        setSaveError(true);
      }
    },
    [instanceId],
  );

  const scheduleSave = useCallback(
    (newContent: string, newTitle: string) => {
      clearTimeout(timerRef.current);
      timerRef.current = setTimeout(() => save(newContent, newTitle), DEBOUNCE_MS);
    },
    [save],
  );

  const handleContentChange = useCallback(
    (val?: string) => {
      const newContent = val ?? '';
      setContent(newContent);
      scheduleSave(newContent, title);
    },
    [scheduleSave, title],
  );

  const handleTitleChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const newTitle = e.target.value;
      setTitle(newTitle);
      scheduleSave(content, newTitle);
    },
    [scheduleSave, content],
  );

  // quick-260916-iex: Klick auf ein Aufgaben-Kaestchen in der Ansicht kippt
  // genau diese Zeile und speichert sofort (kein Entprellen — ein Klick ist
  // eine abgeschlossene Handlung). Ein noch laufender Entprell-Timer aus dem
  // Tippen wird verworfen, damit er den ungekippten Text nicht nachschiebt.
  const handlePreviewClick = useCallback(
    (event: React.MouseEvent<HTMLDivElement>) => {
      if (isEditing) return;
      const target = event.target;
      if (!(target instanceof HTMLInputElement) || target.type !== 'checkbox') {
        return;
      }
      const boxes = Array.from(
        event.currentTarget.querySelectorAll<HTMLInputElement>(
          'input[type="checkbox"]',
        ),
      );
      const index = boxes.indexOf(target);
      const next = toggleTaskLine(content, index);
      if (next === content) return;
      setContent(next);
      clearTimeout(timerRef.current);
      void save(next, title);
    },
    [isEditing, content, title, save],
  );

  return (
    <div className="flex h-full flex-col overflow-hidden" data-color-mode="auto">
      {/* Header: title + pencil toggle */}
      <div className="relative flex items-center border-b border-border px-1.5 py-1.5 gap-2">
        <input
          type="text"
          className="flex-1 bg-transparent text-sm font-semibold text-foreground outline-none placeholder:text-muted-foreground"
          value={title}
          onChange={handleTitleChange}
          placeholder={t('note.defaultTitle')}
        />
        {saveError && (
          <span
            className="h-2 w-2 shrink-0 rounded-full bg-destructive"
            title={t('note.autosaveError')}
          />
        )}
        <button
          onClick={() => setIsEditing((v) => !v)}
          className={`flex h-6 w-6 shrink-0 items-center justify-center rounded transition-colors hover:bg-muted ${isEditing ? 'text-destructive' : 'text-muted-foreground'}`}
          title={isEditing ? t('note.viewMode') : t('note.editMode')}
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
          </svg>
        </button>
      </div>

      {/* Content: preview or editor */}
      <div
        className="flex-1 overflow-auto"
        data-testid="note-preview"
        onClick={handlePreviewClick}
      >
        <MDEditor
          data-testid="md-editor"
          value={content}
          onChange={isEditing ? handleContentChange : undefined}
          commands={NOTE_COMMANDS}
          preview={isEditing ? 'edit' : 'preview'}
          hideToolbar={!isEditing}
          height="100%"
          visibleDragbar={false}
          previewOptions={PREVIEW_OPTIONS}
        />
      </div>
    </div>
  );
}