import React, { useState, useEffect } from 'react';
import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme } from './theme';
import { exportSettings, importSettings } from './settingUtils'; // Import utility functions
import { getAllLocalStorageItems } from '../backend/GetLocalStorage';
import {
  sendToDatabase,
  createAccount,
  changePassword,
  getData,
  changeData,
  checkCredentials,
  deleteAccount,
} from '../backend/database';
import { equal } from 'assert';

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') || '');
    const [currentPassword, setCurrentPassword] = useState('');

    // 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());
    const [faqBackgroundColor, setFaqBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-background-color').trim());
    const [faqHeadingColor, setFaqHeadingColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-heading-color').trim());
    const [faqItemBackgroundColor, setFaqItemBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-background-color').trim());
    const [faqItemHeadingColor, setFaqItemHeadingColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-heading-color').trim());
    const [faqItemTextColor, setFaqItemTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-text-color').trim());
    const [faqItemHoverBackgroundColor, setFaqItemHoverBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-hover-background-color').trim());
    const [popupBackgroundColor, setPopupBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--popup-background-color').trim());
    const [overlayTextColor, setOverlayTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--overlay-text-color').trim());


    // Theme selection
    const [selectedTheme, setSelectedTheme] = useState<string>('');

    useEffect(() => {
      const savedTheme = localStorage.getItem('selectedTheme');
      if (savedTheme) {
        setSelectedTheme(savedTheme);
        // Apply the saved theme on initial load
        switch (savedTheme) {
          case 'IOMARKET':
            applyIOMarketTheme();
            break;
          case 'WHITE':
            applyWhiteTheme();
            break;
          case 'BLACK':
            applyBlackTheme();
            break;
          case 'CUSTOM':
            // Handle custom theme application here if necessary
            break;
          default:
            applyIOMarketTheme();
            break;
        }
      }   
    }, []); // Runs only once when the component mounts

    // API Keys
    const [mistral, setmistral] = 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,
          mistral,
          openai,
          anthropic,
          google,
          // Additional theme settings
          faqBackgroundColor,
          faqHeadingColor,
          faqItemBackgroundColor,
          faqItemHeadingColor,
          faqItemTextColor,
          faqItemHoverBackgroundColor,
          popupBackgroundColor,
          overlayTextColor,
      };
        // 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,
    mistral,
    openai,
    anthropic,
    google,
    // Additional theme settings
    faqBackgroundColor,
    faqHeadingColor,
    faqItemBackgroundColor,
    faqItemHeadingColor,
    faqItemTextColor,
    faqItemHoverBackgroundColor,
    popupBackgroundColor,
    overlayTextColor,
  ]);

  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
    if (openSourceMode){
      newValue += " (FOSS)"
    } 
    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.burgerMenu);
        document.documentElement.style.setProperty('--burger-menu-background-color', settings.burgerMenu);
      }

      // Additional theme settings
      if (settings.faqBackgroundColor) {
        document.documentElement.style.setProperty('--faq-background-color', settings.faqBackgroundColor);
      }

      if (settings.faqHeadingColor) {
        document.documentElement.style.setProperty('--faq-heading-color', settings.faqHeadingColor);
      }

      if (settings.faqItemBackgroundColor) {
        document.documentElement.style.setProperty('--faq-item-background-color', settings.faqItemBackgroundColor);
      }

      if (settings.faqItemHeadingColor) {
        document.documentElement.style.setProperty('--faq-item-heading-color', settings.faqItemHeadingColor);
      }

      if (settings.faqItemTextColor) {
        document.documentElement.style.setProperty('--faq-item-text-color', settings.faqItemTextColor);
      }

      if (settings.faqItemHoverBackgroundColor) {
        document.documentElement.style.setProperty('--faq-item-hover-background-color', settings.faqItemHoverBackgroundColor);
      }

      if (settings.popupBackgroundColor) {
        document.documentElement.style.setProperty('--popup-background-color', settings.popupBackgroundColor);
      }

      if (settings.overlayTextColor) {
        document.documentElement.style.setProperty('--overlay-text-color', settings.overlayTextColor);
      }
    };


    // Function to handle updating all credentials
    const handleUpdateCredentials = async () => {
      // Update account information
      const newData = {
        name: newName || accountName, // Keep old name if new name is not provided
        email: newEmail || '', // Optionally use empty string if not provided
      };
  
      // First change the data
      const dataSuccess = await changeData(accountName, currentPassword, newData);
      
      // Then change the password if a new password is provided
      const passwordSuccess = newPassword ? 
        await changePassword(accountName, currentPassword, newPassword) : 
        true; // If no new password, treat as success
  
      if (dataSuccess && passwordSuccess) {
        alert('Credentials updated successfully!');
        closeSettings(); // Close settings after updating
      } else {
        alert('Failed to update credentials. Please check your current password.');
      }
    };
  
    // Function to handle account deletion
    const handleDeleteAccount = async () => {
      const success = await deleteAccount(accountName, currentPassword);
      if (success) {
        alert('Account deleted successfully!');
        closeSettings(); // Close settings after deletion
        // Optionally, redirect or reset state here
      } else {
        alert('Account deletion failed. Please check your password.');
      }
    };


  // 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">
                  {/* Offline */}
                  <div
                    className={`slider-option ${selectedOption === 'Offline' ? 'active' : ''}`}
                    onClick={() => handleRadioChange('Offline')} // Allow selection only if not in open-source mode
                  >
                    Offline tools{openSourceMode ? ' (FOSS)' : ''}
                  </div>

                  {/* Online */}
                  <div
                    className={`slider-option ${selectedOption === 'Online' ? 'active' : ''}`}
                    onClick={() => handleRadioChange('Online')}
                  >
                    Online tools{openSourceMode ? ' (FOSS)' : ''}
                  </div>

                  {/* None */}
                  <div
                    className={`slider-option ${selectedOption === 'None' ? 'active' : ''}`}
                    onClick={() => handleRadioChange('None')}
                  >
                    None{openSourceMode ? ' (FOSS)' : ''}
                  </div>
                </div>        
                    <br />
                    <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;
                      if (theme !== "default") {
                        setSelectedTheme(theme);
                        localStorage.setItem("selectedTheme", theme);
          
                        // Apply the appropriate theme based on selection
                        switch (theme) {
                          case 'IOMARKET':
                            applyIOMarketTheme();
                            break;
                          case 'WHITE':
                            applyWhiteTheme();
                            break;
                          case 'BLACK':
                            applyBlackTheme();
                            break;
                          case 'CUSTOM':
                            // Handle custom theme logic here if necessary
                            break;
                          default:
                            applyIOMarketTheme();
                            break;
                        }
                      }
                    }}
                  >
                    <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' && (
                  <>
                    {/* Font Size */}
                    <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>

                    {/* Background Color */}
                    <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>

                    {/* Text Color */}
                    <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>

                    {/* Input Background Color */}
                    <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>

                    {/* Input Button Color */}
                    <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>

                    {/* Input Button Hover Color */}
                    <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>

                    {/* User Message Background Color */}
                    <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>

                    {/* User Message Text Color */}
                    <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>

                    {/* AI Message Background Color */}
                    <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>

                    {/* AI Message Text Color */}
                    <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>

                    {/* Button Background Color */}
                    <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>

                    {/* Button Hover Background Color */}
                    <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>

                    {/* Models Background Color */}
                    <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>

                    {/* History Background Color */}
                    <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>

                    {/* Left Panel Background Color */}
                    <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>

                    {/* Conversation Background Color */}
                    <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>

                    {/* Pop-up Text Color */}
                    <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>

                    {/* Input Border Color */}
                    <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>

                    {/* Font Family */}
                    <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>

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

                    {/* FAQ Heading Color */}
                    <div className="settings-option">
                      <p>FAQ Heading Color</p>
                      <input
                        type="color"
                        value={faqHeadingColor}
                        onChange={(e) => {
                          const newColor = e.target.value;
                          setFaqHeadingColor(newColor);
                          document.documentElement.style.setProperty('--faq-heading-color', newColor);
                        }}
                      />
                    </div>

                    {/* FAQ Item Background Color */}
                    <div className="settings-option">
                      <p>FAQ Item Background Color</p>
                      <input
                        type="color"
                        value={faqItemBackgroundColor}
                        onChange={(e) => {
                          const newColor = e.target.value;
                          setFaqItemBackgroundColor(newColor);
                          document.documentElement.style.setProperty('--faq-item-background-color', newColor);
                        }}
                      />
                    </div>

                    {/* FAQ Item Heading Color */}
                    <div className="settings-option">
                      <p>FAQ Item Heading Color</p>
                      <input
                        type="color"
                        value={faqItemHeadingColor}
                        onChange={(e) => {
                          const newColor = e.target.value;
                          setFaqItemHeadingColor(newColor);
                          document.documentElement.style.setProperty('--faq-item-heading-color', newColor);
                        }}
                      />
                    </div>

                    {/* FAQ Item Text Color */}
                    <div className="settings-option">
                      <p>FAQ Item Text Color</p>
                      <input
                        type="color"
                        value={faqItemTextColor}
                        onChange={(e) => {
                          const newColor = e.target.value;
                          setFaqItemTextColor(newColor);
                          document.documentElement.style.setProperty('--faq-item-text-color', newColor);
                        }}
                      />
                    </div>

                    {/* FAQ Item Hover Background Color */}
                    <div className="settings-option">
                      <p>FAQ Item Hover Background Color</p>
                      <input
                        type="color"
                        value={faqItemHoverBackgroundColor}
                        onChange={(e) => {
                          const newColor = e.target.value;
                          setFaqItemHoverBackgroundColor(newColor);
                          document.documentElement.style.setProperty('--faq-item-hover-background-color', newColor);
                        }}
                      />
                    </div>

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

                    {/* Overlay Text Color */}
                    <div className="settings-option">
                      <p>Overlay Text Color</p>
                      <input
                        type="color"
                        value={overlayTextColor}
                        onChange={(e) => {
                          const newColor = e.target.value;
                          setOverlayTextColor(newColor);
                          document.documentElement.style.setProperty('--overlay-text-color', newColor);
                        }}
                      />
                    </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
                        } else {
                          setSelectedOption('None'); // Or any other default value when disabling
                        }
                      }}
                    />
                    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">
              <label>Current Password</label>
              <input
                type="password"
                value={currentPassword}
                onChange={(e) => setCurrentPassword(e.target.value)}
              />
            </div>
            <div className="settings-option">
              <button
                onClick={handleUpdateCredentials} // Update all credentials
                className="update-credentials-button"
              >
                Update Credentials
              </button>
            </div>
            <div className="settings-option">
              <button
                onClick={handleDeleteAccount} // Delete account
                className="delete-account-button"
              >
                Delete Account
              </button>
            </div>
          </div>
        );

        case 'api':
          return (
            <div className="settings-section">
              <div className="settings-option">
                <label>La Plateforme</label>
                <input
                  type="text"
                  value={mistral}
                  onChange={(e) => setmistral(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
    mistral,
    openai,
    anthropic,
    google,
  
    // Additional theme settings if needed
    faqBackgroundColor,
    faqHeadingColor,
    faqItemBackgroundColor,
    faqItemHeadingColor,
    faqItemTextColor,
    faqItemHoverBackgroundColor,
    popupBackgroundColor,
    overlayTextColor,  
};


  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>
            <button className="apply" onClick={() => { 
                  applySettings; 
                  getAllLocalStorageItems(); 
                  closeSettings(); 
              }}>
                  Apply
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Settings;