interstellar_ai/app/components/Settings.tsx

import React, { useState, useEffect } from 'react';

const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
  const [activeSection, setActiveSection] = useState('general');

  // Theme settings state
  const [backgroundColor, setBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim());
  const [textColor, setTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim());
  const [inputBackgroundColor, setInputBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-background-color').trim());
  const [inputButtonColor, setInputButtonColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-button-color').trim());
  const [inputButtonHoverColor, setInputButtonHoverColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-button-hover-color').trim());
  const [userMessageBackgroundColor, setUserMessageBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--user-message-background-color').trim());
  const [userMessageTextColor, setUserMessageTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--user-message-text-color').trim());
  const [aiMessageBackgroundColor, setAiMessageBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--ai-message-background-color').trim());
  const [aiMessageTextColor, setAiMessageTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--ai-message-text-color').trim());
  const [buttonBackgroundColor, setButtonBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--button-background-color').trim());
  const [buttonHoverBackgroundColor, setButtonHoverBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--button-hover-background-color').trim());
  const [modelsBackgroundColor, setModelsBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--models-background-color').trim());
  const [historyBackgroundColor, setHistoryBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--history-background-color').trim());
  const [leftPanelBackgroundColor, setLeftPanelBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--left-panel-background-color').trim());
  const [conversationBackgroundColor, setConversationBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--conversation-background-color').trim());
  const [popUpTextColor, setPopUpTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--pop-up-text').trim());
  const [inputBorderColor, setInputBorderColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-border-color').trim());
  const [fontFamily, setFontFamily] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim());
  const [fontSize, setFontSize] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim());

  // General settings state
  const [preferredLanguage, setPreferredLanguage] = useState<string>('English');
  const [preferredCurrency, setPreferredCurrency] = useState<string>('USD');
  const [dateFormat, setDateFormat] = useState<string>('MM/DD/YYYY');
  const [timeFormat, setTimeFormat] = useState<string>('12-hour');
  const [timeZone, setTimeZone] = useState<string>('UTC');

  // Privacy settings state
  const [disableOnlineAI, setDisableOnlineAI] = useState<boolean>(false);
  const [disableChatHistory, setDisableChatHistory] = useState<boolean>(false);
  const [disableAIMemory, setDisableAIMemory] = useState<boolean>(false);

  // FOSS settings state
  const [openSourceMode, setOpenSourceMode] = useState<boolean>(false);

  // Account settings state
  const [newName, setNewName] = useState<string>('');
  const [newEmail, setNewEmail] = useState<string>('');
  const [newPassword, setNewPassword] = useState<string>('');

  // Effect to update CSS variables on theme state change
  useEffect(() => {
    document.documentElement.style.setProperty('--background-color', backgroundColor);
    document.documentElement.style.setProperty('--text-color', textColor);
    document.documentElement.style.setProperty('--input-background-color', inputBackgroundColor);
    document.documentElement.style.setProperty('--input-button-color', inputButtonColor);
    document.documentElement.style.setProperty('--input-button-hover-color', inputButtonHoverColor);
    document.documentElement.style.setProperty('--user-message-background-color', userMessageBackgroundColor);
    document.documentElement.style.setProperty('--user-message-text-color', userMessageTextColor);
    document.documentElement.style.setProperty('--ai-message-background-color', aiMessageBackgroundColor);
    document.documentElement.style.setProperty('--ai-message-text-color', aiMessageTextColor);
    document.documentElement.style.setProperty('--button-background-color', buttonBackgroundColor);
    document.documentElement.style.setProperty('--button-hover-background-color', buttonHoverBackgroundColor);
    document.documentElement.style.setProperty('--models-background-color', modelsBackgroundColor);
    document.documentElement.style.setProperty('--history-background-color', historyBackgroundColor);
    document.documentElement.style.setProperty('--left-panel-background-color', leftPanelBackgroundColor);
    document.documentElement.style.setProperty('--conversation-background-color', conversationBackgroundColor);
    document.documentElement.style.setProperty('--pop-up-text', popUpTextColor);
    document.documentElement.style.setProperty('--input-border-color', inputBorderColor);
    document.documentElement.style.setProperty('--font-family', fontFamily);
    document.documentElement.style.setProperty('--font-size', fontSize);
  }, [
    backgroundColor,
    textColor,
    inputBackgroundColor,
    inputButtonColor,
    inputButtonHoverColor,
    userMessageBackgroundColor,
    userMessageTextColor,
    aiMessageBackgroundColor,
    aiMessageTextColor,
    buttonBackgroundColor,
    buttonHoverBackgroundColor,
    modelsBackgroundColor,
    historyBackgroundColor,
    leftPanelBackgroundColor,
    conversationBackgroundColor,
    popUpTextColor,
    inputBorderColor,
    fontFamily,
    fontSize
  ]);

  const renderSettingsContent = () => {
    switch (activeSection) {
      case 'general':
        return (
          <div className="settings-section">
            <h2>General Settings</h2>
            <div className="settings-option">
              <label>Preferred Language</label>
              <input
                type="text"
                value={preferredLanguage}
                onChange={(e) => setPreferredLanguage(e.target.value)}
              />
            </div>
            <div className="settings-option">
              <label>Preferred Currency</label>
              <input
                type="text"
                value={preferredCurrency}
                onChange={(e) => setPreferredCurrency(e.target.value)}
              />
            </div>
            <div className="settings-option">
              <label>Date Format</label>
              <input
                type="text"
                value={dateFormat}
                onChange={(e) => setDateFormat(e.target.value)}
              />
            </div>
            <div className="settings-option">
              <label>Time Format</label>
              <input
                type="text"
                value={timeFormat}
                onChange={(e) => setTimeFormat(e.target.value)}
              />
            </div>
            <div className="settings-option">
              <label>Time Zone</label>
              <input
                type="text"
                value={timeZone}
                onChange={(e) => setTimeZone(e.target.value)}
              />
            </div>
          </div>
        );

      case 'privacy':
        return (
          <div className="settings-section">
            <h2>Privacy Settings</h2>
            <div className="settings-option">
              <label>
                <input
                  type="checkbox"
                  checked={disableOnlineAI}
                  onChange={() => setDisableOnlineAI(!disableOnlineAI)}
                />
                Disable Online AI
              </label>
            </div>
            <div className="settings-option">
              <label>
                <input
                  type="checkbox"
                  checked={disableChatHistory}
                  onChange={() => setDisableChatHistory(!disableChatHistory)}
                />
                Disable Chat History Save
              </label>
            </div>
            <div className="settings-option">
              <label>
                <input
                  type="checkbox"
                  checked={disableAIMemory}
                  onChange={() => setDisableAIMemory(!disableAIMemory)}
                />
                Disable AI Memory
              </label>
            </div>
            <div className="settings-option">
              <button onClick={() => {/* Export data logic */}}>Export My Data</button>
            </div>
          </div>
        );

        case 'theme':
          return (
            <div className="settings-section">
              <h2>Theme Settings</h2>
              <div className="settings-option">
              <p>Font Size</p>
              <input
                type="range"
                min="12"
                max="30"
                value={parseInt(fontSize, 10)} // Ensure value is a number
                onChange={(e) => {
                  const newSize = `${e.target.value}px`;
                  setFontSize(newSize);
                  document.documentElement.style.setProperty('--font-size', newSize); // Update the CSS variable
                }}
              />
              <span>{fontSize}</span>
              </div>
              <div className="settings-option">
                <p>Background Color</p>
                <input
                  type="color"
                  value={backgroundColor}
                  onChange={(e) => setBackgroundColor(e.target.value)}
                />
              </div>
              <div className="settings-option">
                <p>Text Color</p>
                <input
                  type="color"
                  value={textColor}
                  onChange={(e) => setTextColor(e.target.value)}
                />
              </div>
              <div className="settings-option">
                <p>Input Background Color</p>
                <input
                  type="color"
                  value={inputBackgroundColor}
                  onChange={(e) => setInputBackgroundColor(e.target.value)}
                />
              </div>
              <div className="settings-option">
                <p>Input Button Color</p>
                <input
                  type="color"
                  value={inputButtonColor}
                  onChange={(e) => setInputButtonColor(e.target.value)}
                />
              </div>
              <div className="settings-option">
                <p>Input Button Hover Color</p>
                <input
                  type="color"
                  value={inputButtonHoverColor}
                  onChange={(e) => setInputButtonHoverColor(e.target.value)}
                />
              </div>
              <div className="settings-option">
                <p>User Message Background Color</p>
                <input
                  type="color"
                  value={userMessageBackgroundColor}
                  onChange={(e) => setUserMessageBackgroundColor(e.target.value)}
                />
              </div>
              <div className="settings-option">
                <p>User Message Text Color</p>
                <input
                  type="color"
                  value={userMessageTextColor}
                  onChange={(e) => setUserMessageTextColor(e.target.value)}
                />
              </div>
              <div className="settings-option">
                <p>AI Message Background Color</p>
                <input
                  type="color"
                  value={aiMessageBackgroundColor}
                  onChange={(e) => setAiMessageBackgroundColor(e.target.value)}
                />
              </div>
              <div className="settings-option">
                <p>AI Message Text Color</p>
                <input
                  type="color"
                  value={aiMessageTextColor}
                  onChange={(e) => setAiMessageTextColor(e.target.value)}
                />
              </div>
              <div className="settings-option">
                <p>Button Background Color</p>
                <input
                  type="color"
                  value={buttonBackgroundColor}
                  onChange={(e) => setButtonBackgroundColor(e.target.value)}
                />
              </div>
              <div className="settings-option">
                <p>Button Hover Background Color</p>
                <input
                  type="color"
                  value={buttonHoverBackgroundColor}
                  onChange={(e) => setButtonHoverBackgroundColor(e.target.value)}
                />
              </div>
              <div className="settings-option">
                <p>Models Background Color</p>
                <input
                  type="color"
                  value={modelsBackgroundColor}
                  onChange={(e) => setModelsBackgroundColor(e.target.value)}
                />
              </div>
              <div className="settings-option">
                <p>History Background Color</p>
                <input
                  type="color"
                  value={historyBackgroundColor}
                  onChange={(e) => setHistoryBackgroundColor(e.target.value)}
                />
              </div>
              <div className="settings-option">
                <p>Left Panel Background Color</p>
                <input
                  type="color"
                  value={leftPanelBackgroundColor}
                  onChange={(e) => setLeftPanelBackgroundColor(e.target.value)}
                />
              </div>
              <div className="settings-option">
                <p>Conversation Background Color</p>
                <input
                  type="color"
                  value={conversationBackgroundColor}
                  onChange={(e) => setConversationBackgroundColor(e.target.value)}
                />
              </div>
              <div className="settings-option">
                <p>Pop-up Text Color</p>
                <input
                  type="color"
                  value={popUpTextColor}
                  onChange={(e) => setPopUpTextColor(e.target.value)}
                />
              </div>
              <div className="settings-option">
                <p>Input Border Color</p>
                <input
                  type="color"
                  value={inputBorderColor}
                  onChange={(e) => setInputBorderColor(e.target.value)}
                />
              </div>
              <div className="settings-option">
                <p>Font Family</p>
                <select
                  value={fontFamily}
                  onChange={(e) => setFontFamily(e.target.value)}
                >
                  <option value="'Arial', sans-serif">Arial</option>
                  <option value="'Calibri', sans-serif">Calibri</option>
                  <option value="'Helvetica', sans-serif">Helvetica</option>
                  <option value="'Times New Roman', serif">Times New Roman</option>
                  <option value="'Poppins', sans-serif">Poppins</option>
                </select>
              </div>
            </div>
          );
        
      case 'foss':
        return (
          <div className="settings-section">
            <h2>FOSS Settings</h2>
            <div className="settings-option">
              <label>
                <input
                  type="checkbox"
                  checked={openSourceMode}
                  onChange={() => setOpenSourceMode(!openSourceMode)}
                />
                Enable Open Source Mode
              </label>
              <p>(ONLY OPEN SOURCE MODULES WORK IN THERE)</p>
            </div>
          </div>
        );

      case 'account':
        return (
          <div className="settings-section">
            <h2>Account Settings</h2>
            <div className="settings-option">
              <label>Change Name</label>
              <input
                type="text"
                value={newName}
                onChange={(e) => setNewName(e.target.value)}
              />
            </div>
            <div className="settings-option">
              <label>Change Email</label>
              <input
                type="email"
                value={newEmail}
                onChange={(e) => setNewEmail(e.target.value)}
              />
            </div>
            <div className="settings-option">
              <label>Change Password</label>
              <input
                type="password"
                value={newPassword}
                onChange={(e) => setNewPassword(e.target.value)}
              />
            </div>
            <div className="danger-zone">
              <h3>DANGER ZONE</h3>
              <button onClick={() => {/* Delete account logic */}}>Delete Account</button>
            </div>
          </div>
        );

      default:
        return null;
    }
  };

  return (
    <div className="popup-overlay">
      <div className="settings-content">
        <div className="settings-container">
          <div className="sidebar">
            <ul>
              <li onClick={() => setActiveSection('general')}>General</li>
              <li onClick={() => setActiveSection('privacy')}>Privacy</li>
              <li onClick={() => setActiveSection('theme')}>Theme</li>
              <li onClick={() => setActiveSection('foss')}>FOSS</li>
              <li onClick={() => setActiveSection('account')}>Account</li>
            </ul>
          </div>
          <div className="settings-main">
            <h2>Settings for {accountName}</h2>
            {renderSettingsContent()}
            <button className="close-popup" onClick={closeSettings}>Close</button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Settings;