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

"use client";

import { useState, useCallback } from "react";
import { MermaidViewer } from "./MermaidViewer";
import { ReactFlowEditor } from "./ReactFlowEditor";
import type { KnowledgeNode, NodeCreateInput, EdgeCreateInput } from "./hooks/useGraphData";
import { useGraphData } 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>
  );
}