uiprototype2/src/components/TextNoteNode.tsx

import React, { useState, useRef, useEffect } from "react";
import { useAppStore } from "../store";
import { TextNote } from "../types";
import {
  AlignLeft,
  AlignCenter,
  AlignRight,
  Bold,
  Italic,
  Underline,
  List,
  ListOrdered,
  Link,
} from "lucide-react";

export const TextNoteNode = ({ note }: { note: TextNote }) => {
  const {
    setTextNotes,
    zoom,
    pan,
    isAnnotationMode,
    isClickThrough,
    selectedNodeIds,
    setSelectedNodeIds,
    updateSelectedNodes,
  } = useAppStore();
  const [isDragging, setIsDragging] = useState(false);
  const [isEditing, setIsEditing] = useState(false);
  const [localText, setLocalText] = useState(note.text);
  const contentEditableRef = useRef<HTMLDivElement>(null);

  const isSelected = selectedNodeIds.includes(note.id);

  useEffect(() => {
    if (isEditing && contentEditableRef.current) {
      if (contentEditableRef.current.innerHTML !== localText) {
        contentEditableRef.current.innerHTML = localText;
      }
      contentEditableRef.current.focus();
    }
  }, [isEditing]);

  const updateNote = (changes: Partial<TextNote>) => {
    setTextNotes((prev) =>
      prev.map((n) => (n.id === note.id ? { ...n, ...changes } : n)),
    );
  };

  const handlePointerDown = (e: React.PointerEvent) => {
    if (isClickThrough || isAnnotationMode) return;
    if (isEditing) return; // let user click inside text
    if ((e.target as HTMLElement).tagName.toLowerCase() === "a") {
      // let the link click happen
      e.stopPropagation();
      return;
    }

    e.stopPropagation();
    if (e.button === 2) {
      return;
    }

    if (!isSelected) {
      setTextNotes((prev) => {
        let idsToSelect = [note.id];
        if (note.groupId) {
          idsToSelect = prev
            .filter((n) => n.groupId === note.groupId)
            .map((n) => n.id);
        }
        if (e.shiftKey) {
          setSelectedNodeIds((sel) =>
            Array.from(new Set([...sel, ...idsToSelect])),
          );
        } else {
          setSelectedNodeIds(idsToSelect);
        }
        return prev;
      });
    }

    setIsDragging(true);
    e.currentTarget.setPointerCapture(e.pointerId);
  };

  const handlePointerMoveRoot = (e: React.PointerEvent) => {
    if (isResizing) {
      handleResizeMove(e);
    } else if (isDragging) {
      e.stopPropagation();
      updateSelectedNodes(e.movementX / zoom, e.movementY / zoom, note.id);
    }
  };

  const handlePointerUpRoot = (e: React.PointerEvent) => {
    if (isResizing) {
      handleResizeEnd(e);
    } else if (isDragging) {
      setIsDragging(false);
      e.currentTarget.releasePointerCapture(e.pointerId);
    }
  };

  const handleDoubleClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    setIsEditing(true);
  };

  const handleBlur = () => {
    setIsEditing(false);
    const newText = contentEditableRef.current?.innerHTML || "";
    setLocalText(newText);
    updateNote({ text: newText });
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    e.stopPropagation(); // prevent app-level shortcuts
    if (e.key === "Escape") {
      handleBlur();
    }
  };

  const [isResizing, setIsResizing] = useState(false);

  const handleResizeStart = (e: React.PointerEvent) => {
    e.stopPropagation();
    setIsResizing(true);
    e.currentTarget.setPointerCapture(e.pointerId);
  };

  const handleResizeMove = (e: React.PointerEvent) => {
    if (isResizing) {
      e.stopPropagation();
      updateNote({
        width: Math.max(100, note.width + e.movementX / zoom),
        height: Math.max(50, (note.height || 80) + e.movementY / zoom),
      });
    }
  };

  const handleResizeEnd = (e: React.PointerEvent) => {
    if (isResizing) {
      setIsResizing(false);
      e.currentTarget.releasePointerCapture(e.pointerId);
    }
  };

  const colors = ["#FFFFFF", "#FFD60A", "#FF453A", "#32D74B", "#0A84FF"];
  const fonts = ["Inter", "Courier New", "Times New Roman", "Georgia", "Arial"];

  // Apply default styles
  const alignment = note.alignment || "left";
  const isBold = note.isBold || false;
  const isItalic = note.isItalic || false;
  const isUnderline = note.isUnderline || false;
  const color = note.color || "#FFFFFF";
  const bgColor = note.bgColor || "rgba(0,0,0,0.6)";
  const fontSize = note.fontSize || 14;
  const fontFamily = note.fontFamily || "Inter";

  return (
    <div
      className="absolute group"
      style={{
        transform: `translate(${note.x}px, ${note.y}px)`,
        width: note.width,
        height: note.height || "auto",
        zIndex: 20,
        pointerEvents: isClickThrough || isAnnotationMode ? "none" : "auto",
      }}
      onPointerDown={handlePointerDown}
      onPointerMove={handlePointerMoveRoot}
      onPointerUp={handlePointerUpRoot}
      onDoubleClick={handleDoubleClick}
      onContextMenu={(e) => e.preventDefault()}
    >
      {/* Floating Toolbar */}
      {isEditing && (
        <div
          className="absolute bottom-full mb-2 left-0 flex items-center gap-1.5 p-1.5 bg-[#2A2A2E] border border-[#3A3A3E] rounded-md shadow-xl pointer-events-auto z-50 text-ui-secondary text-sm"
          onPointerDown={(e) => {
            e.preventDefault();
            e.stopPropagation();
          }}
        >
          <div className="flex items-center pr-1 border-r border-[#3A3A3E]">
            <select
              value={fontFamily}
              onChange={(e) => updateNote({ fontFamily: e.target.value })}
              className="bg-transparent text-white text-xs outline-none cursor-pointer py-1 max-w-[100px] font-sans"
            >
              {fonts.map((f) => (
                <option key={f} value={f} className="bg-[#2A2A2E]">
                  {f}
                </option>
              ))}
            </select>
          </div>
          <button
            onClick={() => document.execCommand("bold")}
            className={`p-1 pl-2 rounded hover:bg-white/10 hover:text-white`}
          >
            <Bold size={14} />
          </button>
          <button
            onClick={() => document.execCommand("italic")}
            className={`p-1 rounded hover:bg-white/10 hover:text-white`}
          >
            <Italic size={14} />
          </button>
          <button
            onClick={() => document.execCommand("underline")}
            className={`p-1 rounded hover:bg-white/10 hover:text-white`}
          >
            <Underline size={14} />
          </button>
          <button
            onClick={() => {
              const url = prompt("Enter link URL:");
              if (url) document.execCommand("createLink", false, url);
            }}
            className={`p-1 pr-2 rounded hover:bg-white/10 hover:text-white`}
          >
            <Link size={14} />
          </button>

          <div className="w-[1px] h-4 bg-[#3A3A3E]"></div>

          <button
            onClick={() => document.execCommand("insertUnorderedList")}
            className={`p-1 pl-2 rounded hover:bg-white/10 hover:text-white`}
          >
            <List size={14} />
          </button>
          <button
            onClick={() => document.execCommand("insertOrderedList")}
            className={`p-1 pr-2 rounded hover:bg-white/10 hover:text-white`}
          >
            <ListOrdered size={14} />
          </button>

          <div className="w-[1px] h-4 bg-[#3A3A3E]"></div>
          <button
            onClick={() => updateNote({ alignment: "left" })}
            className={`p-1 pl-2 rounded hover:bg-white/10 ${alignment === "left" ? "text-white" : ""}`}
          >
            <AlignLeft size={14} />
          </button>
          <button
            onClick={() => updateNote({ alignment: "center" })}
            className={`p-1 rounded hover:bg-white/10 ${alignment === "center" ? "text-white" : ""}`}
          >
            <AlignCenter size={14} />
          </button>
          <button
            onClick={() => updateNote({ alignment: "right" })}
            className={`p-1 pr-2 rounded hover:bg-white/10 ${alignment === "right" ? "text-white" : ""}`}
          >
            <AlignRight size={14} />
          </button>
          <div className="w-[1px] h-4 bg-[#3A3A3E]"></div>
          <div className="flex items-center gap-1 px-1">
            <button
              onClick={() =>
                updateNote({ fontSize: Math.max(10, fontSize - 2) })
              }
              className="hover:text-white px-1"
            >
              -
            </button>
            <span className="text-white text-xs w-6 text-center select-none">
              {fontSize}
            </span>
            <button
              onClick={() =>
                updateNote({ fontSize: Math.min(72, fontSize + 2) })
              }
              className="hover:text-white px-1"
            >
              +
            </button>
          </div>
          <div className="w-[1px] h-4 bg-[#3A3A3E]"></div>
          <div className="flex items-center gap-1.5 pl-1 pr-1">
            {colors.map((c) => (
              <button
                key={c}
                onClick={() => updateNote({ color: c })}
                className={`w-3.5 h-3.5 rounded-full ${color === c ? "ring-1 ring-offset-1 ring-offset-[#2A2A2E] ring-white" : ""} hover:scale-110 transition-transform`}
                style={{ backgroundColor: c }}
              />
            ))}
          </div>
        </div>
      )}

      <div
        className={`p-4 rounded-xl shadow-xl transition-all duration-200 ${isEditing ? "ring-1 ring-white/20 bg-black/80" : "hover:ring-1 hover:ring-white/10 bg-black/40 backdrop-blur-sm"}`}
        style={{
          backgroundColor: isEditing ? "#1A1A1A" : bgColor,
        }}
      >
        {isEditing ? (
          <div
            ref={contentEditableRef}
            className="w-full h-full bg-transparent outline-none hide-scrollbar overflow-y-auto min-h-[50px] rich-text-editor"
            style={{
              color: color,
              fontSize: `${fontSize}px`,
              fontFamily: fontFamily,
              textAlign: alignment,
            }}
            contentEditable
            suppressContentEditableWarning
            onBlur={handleBlur}
            onKeyDown={handleKeyDown}
            onPointerDown={(e) => e.stopPropagation()}
          />
        ) : (
          <div
            className="select-none break-words h-full rich-text-editor"
            style={{
              color: color,
              fontSize: `${fontSize}px`,
              fontFamily: fontFamily,
              textAlign: alignment,
            }}
            dangerouslySetInnerHTML={{
              __html:
                localText ||
                '<span class="text-white/30 italic">Double click to edit text</span>',
            }}
          />
        )}

        {/* Delete button (only visible on hover) */}
        {!isEditing && (
          <button
            className="absolute -top-2 -right-2 w-6 h-6 bg-[#FF453A] border hover:bg-red-500 border-white text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity shadow-lg z-30"
            onClick={(e) => {
              e.stopPropagation();
              setTextNotes((prev) => prev.filter((n) => n.id !== note.id));
            }}
          >
            <div className="w-2.5 h-[1.5px] bg-white rounded-full translate-y-[-0.5px]"></div>
          </button>
        )}

        {/* Resize Handle (only visible on hover/editing) */}
        <div
          className={`absolute bottom-0 right-0 w-4 h-4 cursor-nwse-resize opacity-0 ${isEditing ? "opacity-100" : "group-hover:opacity-100"} transition-opacity z-30 flex items-end justify-end p-1`}
          onPointerDown={handleResizeStart}
          onPointerUp={handleResizeEnd}
          onPointerMove={handleResizeMove}
        >
          <div className="w-2 h-2 rounded-tl-sm bg-white/50 border-b border-r border-white/80"></div>
        </div>
      </div>
    </div>
  );
};