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

'use client';

import { useState, useCallback } from 'react';
import { MermaidViewer } from './MermaidViewer';
import { ReactFlowEditor } from './ReactFlowEditor';
import { useGraphData, KnowledgeNode, NodeCreateInput, EdgeCreateInput } from './hooks/useGraphData';
import { NodeCreateModal } from './controls/NodeCreateModal';
import { ExportButton } from './controls/ExportButton';

type ViewMode = 'interactive' | 'mermaid';
type MermaidStyle = 'flowchart' | 'mindmap';

interface MindmapViewerProps {
  rootId?: string;
  maxDepth?: number;
  className?: string;
  readOnly?: boolean;
}

export function MindmapViewer({
  rootId,
  maxDepth = 3,
  className = '',
  readOnly = false,
}: MindmapViewerProps) {
  const [viewMode, setViewMode] = useState<ViewMode>('interactive');
  const [mermaidStyle, setMermaidStyle] = useState<MermaidStyle>('flowchart');
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [selectedNode, setSelectedNode] = useState<KnowledgeNode | null>(null);
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResults, setSearchResults] = useState<KnowledgeNode[]>([]);
  const [isSearching, setIsSearching] = useState(false);

  const {
    graph,
    mermaid,
    statistics,
    isLoading,
    error,
    fetchMermaid,
    createNode,
    updateNode,
    deleteNode,
    createEdge,
    searchNodes,
  } = useGraphData({ ...(rootId && { rootId }), maxDepth });

  const handleViewModeChange = useCallback(
    async (mode: ViewMode) => {
      setViewMode(mode);
      if (mode === 'mermaid') {
        await fetchMermaid(mermaidStyle);
      }
    },
    [fetchMermaid, mermaidStyle]
  );

  const handleMermaidStyleChange = useCallback(
    async (style: MermaidStyle) => {
      setMermaidStyle(style);
      if (viewMode === 'mermaid') {
        await fetchMermaid(style);
      }
    },
    [viewMode, fetchMermaid]
  );

  const handleCreateNode = useCallback(
    async (nodeData: NodeCreateInput) => {
      await createNode(nodeData);
      setShowCreateModal(false);
    },
    [createNode]
  );

  const handleDeleteNode = useCallback(
    async (id: string) => {
      await deleteNode(id);
      setSelectedNode(null);
    },
    [deleteNode]
  );

  const handleCreateEdge = useCallback(
    async (edgeData: EdgeCreateInput) => {
      await createEdge(edgeData);
    },
    [createEdge]
  );

  const handleSearch = useCallback(
    async (query: string) => {
      setSearchQuery(query);
      if (!query.trim()) {
        setSearchResults([]);
        return;
      }
      
      setIsSearching(true);
      try {
        const results = await searchNodes(query);
        setSearchResults(results);
      } catch (err) {
        // Search failed - results will remain empty
        setSearchResults([]);
      } finally {
        setIsSearching(false);
      }
    },
    [searchNodes]
  );

  const handleSelectSearchResult = useCallback(
    (node: KnowledgeNode) => {
      setSelectedNode(node);
      setSearchResults([]);
      setSearchQuery('');
    },
    []
  );


  if (error) {
    return (
      <div className={`flex items-center justify-center p-8 ${className}`}>
        <div className="text-center">
          <div className="text-red-500 mb-2">Error loading graph</div>
          <div className="text-sm text-gray-500">{error}</div>
        </div>
      </div>
    );
  }

  return (
    <div className={`flex flex-col h-full ${className}`}>
      {/* Toolbar */}
      <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
        <div className="flex items-center gap-4">
          {/* View mode toggle */}
          <div className="flex rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
            <button
              onClick={() => handleViewModeChange('interactive')}
              className={`px-3 py-1.5 text-sm font-medium transition-colors ${
                viewMode === 'interactive'
                  ? 'bg-blue-500 text-white'
                  : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
              }`}
            >
              Interactive
            </button>
            <button
              onClick={() => handleViewModeChange('mermaid')}
              className={`px-3 py-1.5 text-sm font-medium transition-colors ${
                viewMode === 'mermaid'
                  ? 'bg-blue-500 text-white'
                  : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
              }`}
            >
              Diagram
            </button>
          </div>

          {/* Mermaid style selector (only shown in mermaid mode) */}
          {viewMode === 'mermaid' && (
            <select
              value={mermaidStyle}
              onChange={(e) => handleMermaidStyleChange(e.target.value as MermaidStyle)}
              className="px-3 py-1.5 text-sm rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300"
            >
              <option value="flowchart">Flowchart</option>
              <option value="mindmap">Mindmap</option>
            </select>
          )}

          {/* Search bar */}
          <div className="relative">
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => handleSearch(e.target.value)}
              placeholder="Search nodes..."
              className="px-3 py-1.5 pl-8 text-sm rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 w-48"
            />
            <svg
              className="absolute left-2 top-2 w-4 h-4 text-gray-400"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
              />
            </svg>
            
            {/* Search results dropdown */}
            {searchResults.length > 0 && (
              <div className="absolute top-full left-0 mt-1 w-64 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded shadow-lg max-h-64 overflow-y-auto z-50">
                {searchResults.map((result) => (
                  <button
                    key={result.id}
                    onClick={() => handleSelectSearchResult(result)}
                    className="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm"
                  >
                    <div className="font-medium text-gray-900 dark:text-gray-100">
                      {result.title}
                    </div>
                    <div className="text-xs text-gray-500 dark:text-gray-400 capitalize">
                      {result.node_type}
                    </div>
                  </button>
                ))}
              </div>
            )}
            
            {isSearching && (
              <div className="absolute right-2 top-2">
                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500" />
              </div>
            )}
          </div>

          {/* Statistics */}
          {statistics && (
            <div className="text-sm text-gray-500 dark:text-gray-400">
              {statistics.node_count} nodes, {statistics.edge_count} edges
            </div>
          )}
        </div>

        <div className="flex items-center gap-2">
          {!readOnly && (
            <button
              onClick={() => setShowCreateModal(true)}
              className="px-3 py-1.5 text-sm font-medium bg-green-500 text-white rounded hover:bg-green-600 transition-colors"
            >
              + Add Node
            </button>
          )}
          <ExportButton graph={graph} mermaid={mermaid} />
        </div>
      </div>

      {/* Main content */}
      <div className="flex-1 relative">
        {isLoading && (
          <div className="absolute inset-0 flex items-center justify-center bg-white/50 dark:bg-gray-900/50 z-10">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500" />
          </div>
        )}

        {viewMode === 'interactive' && graph && (
          <ReactFlowEditor
            graphData={graph}
            onNodeSelect={setSelectedNode}
            {...(!readOnly && {
              onNodeUpdate: updateNode,
              onNodeDelete: handleDeleteNode,
              onEdgeCreate: handleCreateEdge,
            })}
            readOnly={readOnly}
            className="h-full"
          />
        )}

        {viewMode === 'mermaid' && mermaid && (
          <MermaidViewer diagram={mermaid.diagram} className="h-full p-4" />
        )}

        {!graph && !isLoading && (
          <div className="flex flex-col items-center justify-center h-full text-gray-500 dark:text-gray-400">
            <svg
              className="w-16 h-16 mb-4 opacity-50"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={1}
                d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"
              />
            </svg>
            <p className="text-lg font-medium">No nodes yet</p>
            <p className="text-sm mt-1">Create your first node to get started</p>
            {!readOnly && (
              <button
                onClick={() => setShowCreateModal(true)}
                className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
              >
                Create Node
              </button>
            )}
          </div>
        )}
      </div>

      {/* Selected node details panel */}
      {selectedNode && (
        <div className="border-t border-gray-200 dark:border-gray-700 p-4 bg-gray-50 dark:bg-gray-800">
          <div className="flex items-start justify-between">
            <div>
              <h3 className="font-medium text-gray-900 dark:text-gray-100">
                {selectedNode.title}
              </h3>
              <p className="text-sm text-gray-500 dark:text-gray-400 capitalize">
                {selectedNode.node_type}
                {selectedNode.domain && ` • ${selectedNode.domain}`}
              </p>
              {selectedNode.content && (
                <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
                  {selectedNode.content}
                </p>
              )}
            </div>
            <button
              onClick={() => setSelectedNode(null)}
              className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
            >
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
        </div>
      )}

      {/* Create node modal */}
      {showCreateModal && (
        <NodeCreateModal
          onClose={() => setShowCreateModal(false)}
          onCreate={handleCreateNode}
        />
      )}
    </div>
  );
}