interstellar_ai/app/components/Settings.tsx

import React, { useState, useEffect } from 'react';
import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme } from './theme';
import { exportSettings, importSettings } from './settingUtils'; // Import utility functions

const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {

    const getItemFromLocalStorage = (key: string) => {
      const item = localStorage.getItem(key);
      
      if (item) {
        try {
          return JSON.parse(item); // Attempt to parse the item
        } catch (e) {
          console.error(`Error parsing JSON for key "${key}":`, e);
          return false; // Return false if parsing fails
        }
      }
      
      return false; // Default to false if item is null or empty
    };

    interface SettingsProps {
      closeSettings: () => void;
      accountName: string;
      handleLogout: () => void; // Add this line to accept handleLogout as a prop
    }

    // Active section
    const [activeSection, setActiveSection] = useState(() => localStorage.getItem('activeSection') || 'general');

    // Language setting
    const [preferredLanguage, setPreferredLanguage] = useState(() => localStorage.getItem('preferredLanguage') || 'en');

    // Currency setting
    const [preferredCurrency, setPreferredCurrency] = useState(() => localStorage.getItem('preferredCurrency') || 'usd');

    // Date and time format settings
    const [dateFormat, setDateFormat] = useState(() => localStorage.getItem('dateFormat') || 'mm/dd/yyyy');
    const [timeFormat, setTimeFormat] = useState(() => localStorage.getItem('timeFormat') || '12-hour');
    const [timeZone, setTimeZone] = useState(() => localStorage.getItem('timeZone') || 'GMT');

    // Online AI and chat history settings
    const [selectedOption, setSelectedOption] = useState('Offline'); // Default to 'Offline'
    const [disableChatHistory, setDisableChatHistory] = useState(() => getItemFromLocalStorage('disableChatHistory'));
    const [disableAIMemory, setDisableAIMemory] = useState(() => getItemFromLocalStorage('disableAIMemory'));
    const [openSourceMode, setOpenSourceMode] = useState(() => getItemFromLocalStorage('openSourceMode'));

    // User credentials
    const [newName, setNewName] = useState(() => localStorage.getItem('newName') || '');
    const [newEmail, setNewEmail] = useState(() => localStorage.getItem('newEmail') || '');
    const [newPassword, setNewPassword] = useState(() => localStorage.getItem('newPassword') || '');

    // Measurement setting
    const [preferredMeasurement, setPreferredMeasurement] = useState(() => localStorage.getItem('preferredMeasurement') || 'Metric');

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

    // Theme selection
    const [selectedTheme, setSelectedTheme] = useState(() => localStorage.getItem('selectedTheme') || 'default');

    // API Keys
    const [laPlateforme, setLaPlateforme] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
    const [openAI, setOpenAI] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-openai').trim());
    const [anthropic, setAnthropic] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-anthropic').trim());
    const [google, setGoogle] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-google').trim());

    const [isLoggedIn, setIsLoggedIn] = useState(false);

    const handleLogout = () => {
      setIsLoggedIn(false);
      localStorage.removeItem('accountName');
      localStorage.removeItem('accountEmail');
      localStorage.removeItem('accountPassword');
    };
    
    // Effect hooks to update localStorage whenever any state changes
    useEffect(() => {
      const settings = {
          activeSection,
          preferredLanguage,
          preferredCurrency,
          dateFormat,
          timeFormat,
          timeZone,
          selectedOption,
          disableChatHistory,
          disableAIMemory,
          openSourceMode,
          newName,
          newEmail,
          newPassword,
          preferredMeasurement,
          backgroundColor,
          textColor,
          inputBackgroundColor,
          inputButtonColor,
          inputButtonHoverColor,
          userMessageBackgroundColor,
          userMessageTextColor,
          aiMessageBackgroundColor,
          aiMessageTextColor,
          buttonBackgroundColor,
          buttonHoverBackgroundColor,
          modelsBackgroundColor,
          historyBackgroundColor,
          leftPanelBackgroundColor,
          conversationBackgroundColor,
          popUpTextColor,
          inputBorderColor,
          fontFamily,
          fontSize,
          burgerMenu,
          selectedTheme,
          laPlateforme,
          openAI,
          anthropic,
          google,
      };

      // Update local storage
      for (const [key, value] of Object.entries(settings)) {
          if (typeof value === 'boolean') {
              localStorage.setItem(key, JSON.stringify(value));
          } else {
              localStorage.setItem(key, value);
          }
      }
  }, [
      activeSection,
      preferredLanguage,
      preferredCurrency,
      dateFormat,
      timeFormat,
      timeZone,
      selectedOption,
      disableChatHistory,
      disableAIMemory,
      openSourceMode,
      newName,
      newEmail,
      newPassword,
      preferredMeasurement,
      backgroundColor,
      textColor,
      inputBackgroundColor,
      inputButtonColor,
      inputButtonHoverColor,
      userMessageBackgroundColor,
      userMessageTextColor,
      aiMessageBackgroundColor,
      aiMessageTextColor,
      buttonBackgroundColor,
      buttonHoverBackgroundColor,
      modelsBackgroundColor,
      historyBackgroundColor,
      leftPanelBackgroundColor,
      conversationBackgroundColor,
      popUpTextColor,
      inputBorderColor,
      fontFamily,
      fontSize,
      burgerMenu,
      selectedTheme,
      laPlateforme,
      openAI,
      anthropic,
      google,
  ]);

  useEffect(() => {
    const savedOption = localStorage.getItem('radioSelection');
    if (savedOption) {
      setSelectedOption(savedOption); // Set saved selection
    }
  }, []);

  const handleRadioChange = (newValue: string) => {
    setSelectedOption(newValue);  // Update the state with the selected option
    localStorage.setItem('radioSelection', newValue);  // Save the selection for persistence
  };

  // Apply imported settings to the CSS variables
  const applySettings = (settings: any) => {
    if (settings.backgroundColor) {
      setBackgroundColor(settings.backgroundColor);
      document.documentElement.style.setProperty('--background-color', settings.backgroundColor);
    }
    
    if (settings.textColor) {
      setTextColor(settings.textColor);
      document.documentElement.style.setProperty('--text-color', settings.textColor);
    }
    
    if (settings.inputBackgroundColor) {
      setInputBackgroundColor(settings.inputBackgroundColor);
      document.documentElement.style.setProperty('--input-background-color', settings.inputBackgroundColor);
    }
    
    if (settings.inputButtonColor) {
      setInputButtonColor(settings.inputButtonColor);
      document.documentElement.style.setProperty('--input-button-color', settings.inputButtonColor);
    }
    
    if (settings.inputButtonHoverColor) {
      setInputButtonHoverColor(settings.inputButtonHoverColor);
      document.documentElement.style.setProperty('--input-button-hover-color', settings.inputButtonHoverColor);
    }
    
    if (settings.userMessageBackgroundColor) {
      setUserMessageBackgroundColor(settings.userMessageBackgroundColor);
      document.documentElement.style.setProperty('--user-message-background-color', settings.userMessageBackgroundColor);
    }
    
    if (settings.userMessageTextColor) {
      setUserMessageTextColor(settings.userMessageTextColor);
      document.documentElement.style.setProperty('--user-message-text-color', settings.userMessageTextColor);
    }
    
    if (settings.aiMessageBackgroundColor) {
      setAiMessageBackgroundColor(settings.aiMessageBackgroundColor);
      document.documentElement.style.setProperty('--ai-message-background-color', settings.aiMessageBackgroundColor);
    }
    
    if (settings.aiMessageTextColor) {
      setAiMessageTextColor(settings.aiMessageTextColor);
      document.documentElement.style.setProperty('--ai-message-text-color', settings.aiMessageTextColor);
    }
    
    if (settings.buttonBackgroundColor) {
      setButtonBackgroundColor(settings.buttonBackgroundColor);
      document.documentElement.style.setProperty('--button-background-color', settings.buttonBackgroundColor);
    }
    
    if (settings.buttonHoverBackgroundColor) {
      setButtonHoverBackgroundColor(settings.buttonHoverBackgroundColor);
      document.documentElement.style.setProperty('--button-hover-background-color', settings.buttonHoverBackgroundColor);
    }
    
    if (settings.modelsBackgroundColor) {
      setModelsBackgroundColor(settings.modelsBackgroundColor);
      document.documentElement.style.setProperty('--models-background-color', settings.modelsBackgroundColor);
    }
    
    if (settings.historyBackgroundColor) {
      setHistoryBackgroundColor(settings.historyBackgroundColor);
      document.documentElement.style.setProperty('--history-background-color', settings.historyBackgroundColor);
    }
    
    if (settings.leftPanelBackgroundColor) {
      setLeftPanelBackgroundColor(settings.leftPanelBackgroundColor);
      document.documentElement.style.setProperty('--left-panel-background-color', settings.leftPanelBackgroundColor);
    }
    
    if (settings.conversationBackgroundColor) {
      setConversationBackgroundColor(settings.conversationBackgroundColor);
      document.documentElement.style.setProperty('--conversation-background-color', settings.conversationBackgroundColor);
    }
    
    if (settings.popUpTextColor) {
      setPopUpTextColor(settings.popUpTextColor);
      document.documentElement.style.setProperty('--pop-up-text', settings.popUpTextColor);
    }
    
    if (settings.inputBorderColor) {
      setInputBorderColor(settings.inputBorderColor);
      document.documentElement.style.setProperty('--input-border-color', settings.inputBorderColor);
    }
    
    if (settings.fontFamily) {
      setFontFamily(settings.fontFamily);
      document.documentElement.style.setProperty('--font-family', settings.fontFamily);
    }
    
    if (settings.fontSize) {
      setFontSize(settings.fontSize);
      document.documentElement.style.setProperty('--font-size', settings.fontSize);
    }
    
    if (settings.burgerMenu) {
      setBurgerMenu(settings.fontSize);
      document.documentElement.style.setProperty('--burger-menu-background-color:', settings.burgerMenu);
    }  
  };

  


  // Render settings content based on the active section
  const renderSettingsContent = () => {
    switch (activeSection) {
      case 'general':
        return (
          <div className="settings-section">
          <h2>General Settings</h2>
    
          <div className="settings-option">
            <label>Preferred Language</label>
            <select
              value={preferredLanguage}
              onChange={(e) => setPreferredLanguage(e.target.value)}
            >
              <option value="en">English</option>
              <option value="es">Spanish</option>
              <option value="fr">French</option>
              <option value="de">German</option>
              <option value="it">Italian</option>
              <option value="pt">Portuguese</option>
              <option value="zh">Chinese</option>
              <option value="ja">Japanese</option>
              <option value="ru">Russian</option>
              <option value="ar">Arabic</option>
            </select>
          </div>
    
          <div className="settings-option">
            <label>Preferred Currency</label>
            <select
              value={preferredCurrency}
              onChange={(e) => setPreferredCurrency(e.target.value)}
            >
              <option value="usd">USD</option>
              <option value="eur">EUR</option>
              <option value="gbp">GBP</option>
              <option value="jpy">JPY</option>
              <option value="cad">CAD</option>
              <option value="aud">AUD</option>
              <option value="chf">CHF</option>
              <option value="cny">CNY</option>
              <option value="inr">INR</option>
            </select>
          </div>
    
          <div className="settings-option">
            <label>Date Format</label>
            <select
              value={dateFormat}
              onChange={(e) => setDateFormat(e.target.value)}
            >
              <option value="mm/dd/yyyy">MM/DD/YYYY</option>
              <option value="dd/mm/yyyy">DD/MM/YYYY</option>
              <option value="yyyy-mm-dd">YYYY-MM-DD</option>
              <option value="mm-dd-yyyy">MM-DD-YYYY</option>
              <option value="dd-mm-yyyy">DD-MM-YYYY</option>
            </select>
          </div>
    
          <div className="settings-option">
            <label>Time Format</label>
            <select
              value={timeFormat}
              onChange={(e) => setTimeFormat(e.target.value)}
            >
              <option value="12-hour">12 Hour</option>
              <option value="24-hour">24 Hour</option>
            </select>
          </div>
    
          <div className="settings-option">
            <label>Time Zone</label>
            <select
              value={timeZone}
              onChange={(e) => setTimeZone(e.target.value)}
            >
              <option value="GMT">GMT</option>
              <option value="EST">EST</option>
              <option value="CST">CST</option>
              <option value="MST">MST</option>
              <option value="PST">PST</option>
              <option value="UTC">UTC</option>
              <option value="BST">BST</option>
              <option value="IST">IST</option>
              <option value="CET">CET</option>
              <option value="JST">JST</option>
            </select>
          </div>
    
          {/* New Preferred Measurement Option */}
          <div className="settings-option">
            <label>Preferred Measurement</label>
            <select
              value={preferredMeasurement}
              onChange={(e) => setPreferredMeasurement(e.target.value)}
            >
              <option value="Metric">Metric</option>
              <option value="Imperial">Imperial</option>
            </select>
          </div>
        </div>
      );

      case 'privacy':
        return (
          <div className="settings-section">
            <h2>Privacy Settings</h2>
            {/* AI Mode Radio Options */}
            <div className="settings-option">
              <p>Disable Options:</p>
              <div className="slider">
                <div
                  className={`slider-option ${selectedOption === 'Offline' ? 'active' : ''} ${openSourceMode ? 'disabled' : ''}`}
                  onClick={() => !openSourceMode && handleRadioChange('Offline')} // Handle selection only if not in open source mode
                >
                  Offline tools
                </div>
                <div
                  className={`slider-option ${selectedOption === 'AI Online' ? 'active' : ''} ${openSourceMode ? 'disabled' : ''}`}
                  onClick={() => !openSourceMode && handleRadioChange('AI Online')}
                >
                  Online tools
                </div>
                <div
                  className={`slider-option ${selectedOption === 'None' ? 'active' : ''} ${openSourceMode ? 'disabled' : ''}`}
                  onClick={() => !openSourceMode && handleRadioChange('None')}
                >
                  None
                </div>
              </div>
              <br />
              {openSourceMode && (
                <p style={{ color: 'grey' }}>These options are deactivated because you are in FOSS mode.</p>
              )}
              <p>
                After changing the preferred settings, please reload the website so it can update itself properly.
              </p>
            </div>

            {/* Disable Chat History Checkbox */}
            <div className="settings-option">
              <label>
                <input
                  type="checkbox"
                  checked={disableChatHistory}
                  onChange={() => setDisableChatHistory(!disableChatHistory)}
                />
                Disable Chat History
              </label>
            </div>

            {/* Disable AI Memory Checkbox */}
            <div className="settings-option">
              <label>
                <input
                  type="checkbox"
                  checked={disableAIMemory}
                  onChange={() => setDisableAIMemory(!disableAIMemory)}
                />
                Disable AI Memory
              </label>
            </div>
          </div>
        );


        case 'theme':
          return (
            <div className="settings-section">
              <h2>Theme Settings</h2>
        
              {/* Dropdown to select theme */}
              <div className="settings-option">
                <p>Select Theme</p>
                <select
                  value={selectedTheme}
                  onChange={(e) => {
                    const theme = e.target.value; // Get the selected value from the event
                    setSelectedTheme(theme); // Update state for selected theme
                    
                    // Apply the appropriate theme based on selection
                    switch (theme) { // Use 'theme' instead of 'selectedTheme'
                      case 'IOMARKET':
                        applyIOMarketTheme(); // Call the function to apply the IOMARKET theme
                        break;
                      case 'WHITE':
                        applyWhiteTheme(); // Call the function to apply the WHITE theme
                        break;
                      case 'BLACK':
                        applyBlackTheme(); // Call the function to apply the BLACK theme
                        break;
                      case 'CUSTOM':
                        // Handle custom theme logic here if necessary
                        break;
                      default:
                        applyIOMarketTheme(); // Fallback to the IOMARKET theme
                        break;
                    }
                  }} // Handle theme selection
                >
                  <option value="default">Select your style...</option>
                  <option value="IOMARKET">IOMARKET</option>
                  <option value="WHITE">WHITE</option>
                  <option value="BLACK">BLACK</option>
                  <option value="CUSTOM">CUSTOM</option>
                </select>
              </div>

              {/* Conditionally render theme settings only if "CUSTOM" is selected */}
              {selectedTheme === 'CUSTOM' && (
                <>
                  <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);
                      }}
                    />
                    <span>{fontSize}</span>
                  </div>

                  <div className="settings-option">
                    <p>Background Color</p>
                    <input
                      type="color"
                      value={backgroundColor}
                      onChange={(e) => {
                        const newColor = e.target.value;
                        setBackgroundColor(newColor);
                        document.documentElement.style.setProperty('--background-color', newColor);
                      }}
                    />
                  </div>

                  <div className="settings-option">
                    <p>Text Color</p>
                    <input
                      type="color"
                      value={textColor}
                      onChange={(e) => {
                        const newColor = e.target.value;
                        setTextColor(newColor);
                        document.documentElement.style.setProperty('--text-color', newColor);
                      }}
                    />
                  </div>

                  <div className="settings-option">
                    <p>Input Background Color</p>
                    <input
                      type="color"
                      value={inputBackgroundColor}
                      onChange={(e) => {
                        const newColor = e.target.value;
                        setInputBackgroundColor(newColor);
                        document.documentElement.style.setProperty('--input-background-color', newColor);
                      }}
                    />
                  </div>

                  <div className="settings-option">
                    <p>Input Button Color</p>
                    <input
                      type="color"
                      value={inputButtonColor}
                      onChange={(e) => {
                        const newColor = e.target.value;
                        setInputButtonColor(newColor);
                        document.documentElement.style.setProperty('--input-button-color', newColor);
                      }}
                    />
                  </div>

                  <div className="settings-option">
                    <p>Input Button Hover Color</p>
                    <input
                      type="color"
                      value={inputButtonHoverColor}
                      onChange={(e) => {
                        const newColor = e.target.value;
                        setInputButtonHoverColor(newColor);
                        document.documentElement.style.setProperty('--input-button-hover-color', newColor);
                      }}
                    />
                  </div>

                  <div className="settings-option">
                    <p>User Message Background Color</p>
                    <input
                      type="color"
                      value={userMessageBackgroundColor}
                      onChange={(e) => {
                        const newColor = e.target.value;
                        setUserMessageBackgroundColor(newColor);
                        document.documentElement.style.setProperty('--user-message-background-color', newColor);
                      }}
                    />
                  </div>

                  <div className="settings-option">
                    <p>User Message Text Color</p>
                    <input
                      type="color"
                      value={userMessageTextColor}
                      onChange={(e) => {
                        const newColor = e.target.value;
                        setUserMessageTextColor(newColor);
                        document.documentElement.style.setProperty('--user-message-text-color', newColor);
                      }}
                    />
                  </div>

                  <div className="settings-option">
                    <p>AI Message Background Color</p>
                    <input
                      type="color"
                      value={aiMessageBackgroundColor}
                      onChange={(e) => {
                        const newColor = e.target.value;
                        setAiMessageBackgroundColor(newColor);
                        document.documentElement.style.setProperty('--ai-message-background-color', newColor);
                      }}
                    />
                  </div>

                  <div className="settings-option">
                    <p>AI Message Text Color</p>
                    <input
                      type="color"
                      value={aiMessageTextColor}
                      onChange={(e) => {
                        const newColor = e.target.value;
                        setAiMessageTextColor(newColor);
                        document.documentElement.style.setProperty('--ai-message-text-color', newColor);
                      }}
                    />
                  </div>

                  <div className="settings-option">
                    <p>Button Background Color</p>
                    <input
                      type="color"
                      value={buttonBackgroundColor}
                      onChange={(e) => {
                        const newColor = e.target.value;
                        setButtonBackgroundColor(newColor);
                        document.documentElement.style.setProperty('--button-background-color', newColor);
                      }}
                    />
                  </div>

                  <div className="settings-option">
                    <p>Button Hover Background Color</p>
                    <input
                      type="color"
                      value={buttonHoverBackgroundColor}
                      onChange={(e) => {
                        const newColor = e.target.value;
                        setButtonHoverBackgroundColor(newColor);
                        document.documentElement.style.setProperty('--button-hover-background-color', newColor);
                      }}
                    />
                  </div>

                  <div className="settings-option">
                    <p>Models Background Color</p>
                    <input
                      type="color"
                      value={modelsBackgroundColor}
                      onChange={(e) => {
                        const newColor = e.target.value;
                        setModelsBackgroundColor(newColor);
                        document.documentElement.style.setProperty('--models-background-color', newColor);
                      }}
                    />
                  </div>

                  <div className="settings-option">
                    <p>History Background Color</p>
                    <input
                      type="color"
                      value={historyBackgroundColor}
                      onChange={(e) => {
                        const newColor = e.target.value;
                        setHistoryBackgroundColor(newColor);
                        document.documentElement.style.setProperty('--history-background-color', newColor);
                      }}
                    />
                  </div>

                  <div className="settings-option">
                    <p>Left Panel Background Color</p>
                    <input
                      type="color"
                      value={leftPanelBackgroundColor}
                      onChange={(e) => {
                        const newColor = e.target.value;
                        setLeftPanelBackgroundColor(newColor);
                        document.documentElement.style.setProperty('--left-panel-background-color', newColor);
                      }}
                    />
                  </div>

                  <div className="settings-option">
                    <p>Conversation Background Color</p>
                    <input
                      type="color"
                      value={conversationBackgroundColor}
                      onChange={(e) => {
                        const newColor = e.target.value;
                        setConversationBackgroundColor(newColor);
                        document.documentElement.style.setProperty('--conversation-background-color', newColor);
                      }}
                    />
                  </div>

                  <div className="settings-option">
                    <p>Pop-up Text Color</p>
                    <input
                      type="color"
                      value={popUpTextColor}
                      onChange={(e) => {
                        const newColor = e.target.value;
                        setPopUpTextColor(newColor);
                        document.documentElement.style.setProperty('--pop-up-text', newColor);
                      }}
                    />
                  </div>

                  <div className="settings-option">
                    <p>Burger Menu Color</p>
                    <input
                      type="color"
                      value={burgerMenu}
                      onChange={(e) => {
                        const newColor = e.target.value;
                        setBurgerMenu(newColor);
                        document.documentElement.style.setProperty('--burger-menu-background-color', newColor);
                      }}
                    />
                  </div>

                  <div className="settings-option">
                    <p>Input Border Color</p>
                    <input
                      type="color"
                      value={inputBorderColor}
                      onChange={(e) => {
                        const newColor = e.target.value;
                        setInputBorderColor(newColor);
                        document.documentElement.style.setProperty('--input-border-color', newColor);
                      }}
                    />
                  </div>

                  <div className="settings-option">
                    <p>Font Family</p>
                    <select
                      value={fontFamily}
                      onChange={(e) => {
                        const newFont = e.target.value;
                        setFontFamily(newFont);
                        document.documentElement.style.setProperty('--font-family', newFont);
                      }}
                    >
                      <option value="'Poppins', sans-serif">Poppins</option>
                      <option value="'Inconsolata', monospace">Inconsolata</option>
                      <option value="'Merriweather', serif">Merriweather</option>
                      <option value="'Noto Sans', sans-serif">Noto Sans</option>
                      <option value="'Noto Serif', serif">Noto Serif</option>
                      <option value="'Playfair Display', serif">Playfair Display</option>
                      <option value="'Roboto', sans-serif">Roboto</option>
                      <option value="'Ubuntu', sans-serif">Ubuntu</option>
                      <option value="'Bangers', cursive">Bangers</option>
                      <option value="'Caveat', cursive">Caveat</option>
                      <option value="'Frederika the Great', cursive">Frederika the Great</option>
                      <option value="'Rock Salt', cursive">Rock Salt</option>
                      <option value="'Sofadi One', sans-serif">Sofadi One</option>
                      <option value="'Zilla Slab Highlight', serif">Zilla Slab Highlight</option>
                    </select>
                  </div>

                </>
              )}
            </div>
          );


          case 'foss':
            return (
              <div className="settings-section">
                <h2>Open Source Settings</h2>
                <div className="settings-option">
                  <label>
                    <input
                      type="checkbox"
                      checked={openSourceMode}
                      onChange={() => {
                        const newValue = !openSourceMode;
                        setOpenSourceMode(newValue);
                        // Update radio selection based on the new openSourceMode value
                        if (newValue) {
                          setSelectedOption('FOSS'); // Set to FOSS if enabling open source mode
                          localStorage.setItem('radioSelection', 'FOSS'); // Update localStorage
                        } else {
                          setSelectedOption('None'); // Or any other default value when disabling
                          localStorage.setItem('radioSelection', 'None'); // Update localStorage
                        }
                      }}
                    />
                    Enable Open Source Mode
                  </label>
                </div>
              </div>
            );
          

      case 'account':
        return (
          <div className="settings-section">
            <h2>Account Settings</h2>
            <div className="settings-option">
              <label>New Name</label>
              <input
                type="text"
                value={newName}
                onChange={(e) => setNewName(e.target.value)}
              />
            </div>
            <div className="settings-option">
              <label>New Email</label>
              <input
                type="email"
                value={newEmail}
                onChange={(e) => setNewEmail(e.target.value)}
              />
            </div>
            <div className="settings-option">
              <label>New Password</label>
              <input
                type="password"
                value={newPassword}
                onChange={(e) => setNewPassword(e.target.value)}
              />
            </div>
            <div className="settings-option">
              <button
                onClick={() => {
                  handleLogout();
                  closeSettings(); // Optionally close settings after logout
                }}
                className="logout-button"
              >
                Logout
              </button>
            </div>
          </div>
        );

        case 'api':
          return (
            <div className="settings-section">
              <div className="settings-option">
                <label>La Plateforme</label>
                <input
                  type="text"
                  value={laPlateforme}
                  onChange={(e) => setLaPlateforme(e.target.value)}
                />
              </div>
              <div className="settings-option">
                <label>OpenAI</label>
                <input
                  type="text"
                  value={openAI}
                  onChange={(e) => setOpenAI(e.target.value)}
                />
              </div>
              <div className="settings-option">
                <label>Anthropic</label>
                <input
                  type="text"
                  value={anthropic}
                  onChange={(e) => setAnthropic(e.target.value)}
                />
              </div>
              <div className="settings-option">
                <label>Google</label>
                <input
                  type="text"
                  value={google}
                  onChange={(e) => setGoogle(e.target.value)}
                />
              </div>
            </div>
          );

        case 'im/export':
          return (
            <div className="settings-section">
              <h2>Import & Export</h2>
              <div className="settings-option">
                <h3>Export the settings</h3>  
                <button onClick={() => exportSettings(currentSettings)} className='export-button'>Export Settings</button>
              </div>
              <div className="settings-option">
                <h3>Import the settings</h3>  
                <input type="file" onChange={handleImport} accept=".json" className='import-file'/>
              </div>
              </div>
          );

      default:
        return null;
    }
  };

  // Handle file import
  const handleImport = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.files && event.target.files.length > 0) {
      const file = event.target.files[0];
      importSettings(file, applySettings);
    }
  };

  // Gather all settings into an object
  const currentSettings = {
    backgroundColor,
    textColor,
    inputBackgroundColor,
    inputButtonColor,
    inputButtonHoverColor,
    userMessageBackgroundColor,
    userMessageTextColor,
    aiMessageBackgroundColor,
    aiMessageTextColor,
    buttonBackgroundColor,
    buttonHoverBackgroundColor,
    modelsBackgroundColor,
    historyBackgroundColor,
    leftPanelBackgroundColor,
    conversationBackgroundColor,
    popUpTextColor,
    inputBorderColor,
    fontFamily,
    fontSize,
    preferredLanguage,
    preferredCurrency,
    preferredMeasurement, 
    dateFormat,
    timeFormat,
    timeZone,
    selectedOption,
    disableChatHistory,
    disableAIMemory,
    openSourceMode,

    // API Keys
   laPlateforme,
   openAI,
   anthropic,
   google
};


  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>
              <li onClick={() => setActiveSection('api')}>API Keys</li>
              <li onClick={() => setActiveSection('im/export')}>Import/Export</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;