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';

const DEBOUNCE_MS = 1500;

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],
  );

  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">
        <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={{
            rehypePlugins: [[rehypeSanitize]],
          }}
        />
      </div>
    </div>
  );
}