1  import React, { useState } from 'react';
 2  import { BLACK, BLUE, RED, WHITE } from '../constants/colors';
 3  import { createNewNode } from '../services/electronService';
 4  
 5  const NodeCreationPanel = ({ isOpen, onClose }) => {
 6    const [nodeName, setNodeName] = useState('');
 7    const [error, setError] = useState(null);
 8  
 9    const handleCreate = async () => {
10      try {
11        setError(null);
12        if (!nodeName.trim()) {
13          throw new Error('Node name cannot be empty');
14        }
15        const result = await createNewNode(nodeName.trim());
16        console.log('Node creation result:', result);
17        onClose();
18      } catch (error) {
19        console.error(`Error creating new node ${nodeName}:`, error);
20        setError(`Failed to create new node: ${error.message}`);
21      }
22    };
23  
24    if (!isOpen) return null;
25  
26    return (
27      <div style={{
28        position: 'fixed',
29        top: '50%',
30        left: '50%',
31        transform: 'translate(-50%, -50%)',
32        backgroundColor: BLACK,
33        color: WHITE,
34        padding: '20px',
35        borderRadius: '8px',
36        zIndex: 1000,
37        boxShadow: `0 0 0 2px ${BLUE}`,
38      }}>
39        <h2 style={{ color: WHITE }}>Create New Node</h2>
40        <div style={{ display: 'flex', justifyContent: 'center', margin: '0 20px' }}>
41          <input
42            type="text"
43            value={nodeName}
44            onChange={(e) => setNodeName(e.target.value)}
45            placeholder="Enter node name"
46            style={{
47              width: '100%',
48              padding: '5px',
49              marginBottom: '10px',
50              backgroundColor: BLACK,
51              color: WHITE,
52              border: `1px solid ${BLUE}`,
53              borderRadius: '4px',
54              outline: 'none',
55            }}
56            onFocus={(e) => {
57              e.target.style.border = `1px solid ${RED}`;
58            }}
59            onBlur={(e) => {
60              e.target.style.border = `1px solid ${BLUE}`;
61            }}
62          />
63        </div>
64        {error && <div style={{ color: RED, marginBottom: '10px' }}>{error}</div>}
65        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '20px' }}>
66          <button onClick={onClose} style={{ 
67            marginRight: '10px',
68            padding: '5px 10px',
69            backgroundColor: RED,
70            color: WHITE,
71            border: 'none',
72            borderRadius: '4px',
73            cursor: 'pointer'
74          }}>
75            Cancel
76          </button>
77          <button onClick={handleCreate} style={{
78            padding: '5px 10px',
79            backgroundColor: BLUE,
80            color: WHITE,
81            border: 'none',
82            borderRadius: '4px',
83            cursor: 'pointer',
84          }}>
85            Create
86          </button>
87        </div>
88      </div>
89    );
90  };
91  
92  export default NodeCreationPanel;