stack/apps/web/src/components/mindmap/MermaidViewer.tsx

'use client';

import { useCallback, useEffect, useRef, useState } from 'react';
import mermaid from 'mermaid';

interface MermaidViewerProps {
  diagram: string;
  className?: string;
  onNodeClick?: (nodeId: string) => void;
}

export function MermaidViewer({ diagram, className = '', onNodeClick }: MermaidViewerProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [error, setError] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  const renderDiagram = useCallback(async () => {
    if (!containerRef.current || !diagram) {
      setIsLoading(false);
      return;
    }

    setIsLoading(true);
    setError(null);

    try {
      // Initialize mermaid with theme based on document
      const isDark = document.documentElement.classList.contains('dark');
      mermaid.initialize({
        startOnLoad: false,
        theme: isDark ? 'dark' : 'default',
        flowchart: {
          useMaxWidth: true,
          htmlLabels: true,
          curve: 'basis',
        },
        securityLevel: 'loose',
      });

      // Generate unique ID for this render
      const id = `mermaid-${Date.now()}`;

      // Render the diagram
      const { svg } = await mermaid.render(id, diagram);

      if (containerRef.current) {
        containerRef.current.innerHTML = svg;

        // Add click handlers to nodes if callback provided
        if (onNodeClick) {
          const nodes = containerRef.current.querySelectorAll('.node');
          nodes.forEach((node) => {
            node.addEventListener('click', () => {
              const nodeId = node.id?.replace(/^flowchart-/, '').replace(/-\d+$/, '');
              if (nodeId) {
                onNodeClick(nodeId);
              }
            });
            (node as HTMLElement).style.cursor = 'pointer';
          });
        }
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to render diagram');
    } finally {
      setIsLoading(false);
    }
  }, [diagram, onNodeClick]);

  useEffect(() => {
    renderDiagram();
  }, [renderDiagram]);

  // Re-render on theme change
  useEffect(() => {
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.attributeName === 'class') {
          renderDiagram();
        }
      });
    });

    observer.observe(document.documentElement, { attributes: true });

    return () => observer.disconnect();
  }, [renderDiagram]);

  if (!diagram) {
    return (
      <div className={`flex items-center justify-center p-8 text-gray-500 ${className}`}>
        No diagram data available
      </div>
    );
  }

  if (error) {
    return (
      <div className={`flex flex-col items-center justify-center p-8 ${className}`}>
        <div className="text-red-500 mb-2">Failed to render diagram</div>
        <div className="text-sm text-gray-500">{error}</div>
        <pre className="mt-4 p-4 bg-gray-100 dark:bg-gray-800 rounded text-xs overflow-auto max-w-full">
          {diagram}
        </pre>
      </div>
    );
  }

  return (
    <div className={`relative ${className}`}>
      {isLoading && (
        <div className="absolute inset-0 flex items-center justify-center bg-white/50 dark:bg-gray-900/50">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500" />
        </div>
      )}
      <div
        ref={containerRef}
        className="mermaid-container overflow-auto"
        style={{ minHeight: '200px' }}
      />
    </div>
  );
}