1  import React, { useState, useEffect } from 'react';
  2  import { isElectronAvailable, openDirectoryDialog, getDreamVaultPath, setDreamVaultPath as setDreamVaultPathService } from '../services/electronService';
  3  import { BLACK, BLUE, RED, WHITE } from '../constants/colors';
  4  
  5  const SettingsPanel = ({ isOpen, onClose }) => {
  6    const [dreamVaultPath, setDreamVaultPathState] = useState('');
  7    const [isElectronAvailableState, setIsElectronAvailableState] = useState(false);
  8    const [isManualInput, setIsManualInput] = useState(false);
  9  
 10    useEffect(() => {
 11      const checkElectronAvailability = async () => {
 12        const electronAvailable = isElectronAvailable();
 13        setIsElectronAvailableState(electronAvailable);
 14        console.log('Is Electron available:', electronAvailable);
 15  
 16        // Load saved DreamVault path
 17        if (electronAvailable) {
 18          const path = await getDreamVaultPath();
 19          setDreamVaultPathState(path);
 20        }
 21      };
 22  
 23      checkElectronAvailability();
 24    }, []);
 25  
 26    const handleSelectDirectory = async () => {
 27      console.log('handleSelectDirectory called');
 28      if (isElectronAvailableState) {
 29        try {
 30          console.log('Attempting to open directory dialog');
 31          const path = await openDirectoryDialog();
 32          console.log('Directory dialog result:', path);
 33          if (path) {
 34            setDreamVaultPathState(path);
 35            setIsManualInput(false);
 36          }
 37        } catch (error) {
 38          console.error('Error opening directory dialog:', error);
 39          setIsManualInput(true);
 40        }
 41      } else {
 42        console.log('Electron not available, switching to manual input');
 43        setIsManualInput(true);
 44      }
 45    };
 46  
 47    const handleManualInput = (e) => {
 48      setDreamVaultPathState(e.target.value);
 49    };
 50  
 51    const handleSave = async () => {
 52      console.log('Saving DreamVault path:', dreamVaultPath);
 53      if (isElectronAvailableState) {
 54        await setDreamVaultPathService(dreamVaultPath);
 55      }
 56      setIsManualInput(false);
 57      onClose();
 58    };
 59  
 60    if (!isOpen) return null;
 61  
 62    return (
 63      <div 
 64        style={{
 65          position: 'fixed',
 66          top: '50%',
 67          left: '50%',
 68          transform: 'translate(-50%, -50%)',
 69          backgroundColor: BLACK,
 70          color: WHITE,
 71          padding: '20px',
 72          borderRadius: '8px',
 73          boxShadow: `0 0 0 2px ${BLUE}`,
 74          zIndex: 1000,
 75        }}
 76        onClick={(e) => e.stopPropagation()}
 77      >
 78        <h2 style={{ color: WHITE }}>Settings</h2>
 79        <div style={{ marginBottom: '15px' }}>
 80          <label htmlFor="dreamVaultPath" style={{ color: WHITE }}>DreamVault Path:</label>
 81          <div style={{ display: 'flex', alignItems: 'center' }}>
 82            <input
 83              type="text"
 84              id="dreamVaultPath"
 85              value={dreamVaultPath}
 86              onChange={handleManualInput}
 87              readOnly={!isManualInput}
 88              style={{ 
 89                marginRight: '10px', 
 90                padding: '5px', 
 91                flex: 1, 
 92                backgroundColor: BLACK, 
 93                color: WHITE, 
 94                border: `1px solid ${BLUE}` 
 95              }}
 96            />
 97            <button 
 98              onClick={handleSelectDirectory} 
 99              style={{ 
100                padding: '5px 10px', 
101                backgroundColor: BLUE, 
102                color: WHITE, 
103                border: 'none', 
104                cursor: 'pointer' 
105              }}
106            >
107              📁 Select Directory
108            </button>
109          </div>
110        </div>
111        {isManualInput && (
112          <p style={{ fontSize: '0.8em', color: RED }}>
113            Enter the DreamVault path manually and click Save.
114          </p>
115        )}
116        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
117          <button 
118            onClick={onClose} 
119            style={{ 
120              marginRight: '10px', 
121              padding: '5px 10px', 
122              backgroundColor: RED, 
123              color: WHITE, 
124              border: 'none', 
125              cursor: 'pointer' 
126            }}
127          >
128            Cancel
129          </button>
130          <button 
131            onClick={handleSave} 
132            style={{ 
133              padding: '5px 10px', 
134              backgroundColor: BLUE, 
135              color: WHITE, 
136              border: 'none', 
137              cursor: 'pointer' 
138            }}
139          >
140            Save
141          </button>
142        </div>
143      </div>
144    );
145  };
146  
147  export default SettingsPanel;