import React, { useState } from 'react';
import { exportSettings, importSettings } from './settingUtils'; // Import utility functions

const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
  const [activeSection, setActiveSection] = useState('general');
  const [preferredLanguage, setPreferredLanguage] = useState('en');
  const [preferredCurrency, setPreferredCurrency] = useState('usd');
  const [dateFormat, setDateFormat] = useState('mm/dd/yyyy');
  const [timeFormat, setTimeFormat] = useState('12-hour');
  const [timeZone, setTimeZone] = useState('GMT');
  const [disableOnlineAI, setDisableOnlineAI] = useState(false);
  const [disableChatHistory, setDisableChatHistory] = useState(false);
  const [disableAIMemory, setDisableAIMemory] = useState(false);
  const [openSourceMode, setOpenSourceMode] = useState(false);
  const [newName, setNewName] = useState('');
  const [newEmail, setNewEmail] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [preferredMessurement, setPreferredMessurement] = useState('Metric');

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

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

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

  


  // 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={preferredMessurement}
              onChange={(e) => setPreferredMessurement(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>
            <div className="settings-option">
              <label>
                <input
                  type="checkbox"
                  checked={disableOnlineAI}
                  onChange={() => setDisableOnlineAI(!disableOnlineAI)}
                />
                Disable Online AI
              </label>
            </div>
            <div className="settings-option">
              <label>
                <input
                  type="checkbox"
                  checked={disableChatHistory}
                  onChange={() => setDisableChatHistory(!disableChatHistory)}
                />
                Disable Chat History
              </label>
            </div>
            <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;
                    setSelectedTheme(theme); // Update state for selected theme
                    
                    // Apply the appropriate theme based on selection
                    switch (theme) {
                      case 'IOMARKET':
                        document.documentElement.style.setProperty('--header-background-color', '#7e7e7e'); // Header background color
                        document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color
                        document.documentElement.style.setProperty('--background-color', '#8B9635'); // Main background color
                        document.documentElement.style.setProperty('--text-color', '#474D22'); // Main text color
                        document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Input fields background
                        document.documentElement.style.setProperty('--input-button-color', '#8B9635'); // Button color
                        document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b'); // Button hover color
                        document.documentElement.style.setProperty('--user-message-background-color', '#8B9635'); // User messages background
                        document.documentElement.style.setProperty('--user-message-text-color', '#000'); // User messages text color
                        document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB'); // AI messages background
                        document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // AI messages text color
                        document.documentElement.style.setProperty('--button-background-color', '#8B9635'); // Button background color
                        document.documentElement.style.setProperty('--button-hover-background-color', '#6b7c2b'); // Button hover color
                        document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Models section background
                        document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background
                        document.documentElement.style.setProperty('--left-panel-background-color', '#79832e'); // Left panel background
                        document.documentElement.style.setProperty('--conversation-background-color', '#79832e'); // Conversation container background
                        document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background
                        document.documentElement.style.setProperty('--faq-background-color', '#474D22'); // FAQ section background
                        document.documentElement.style.setProperty('--faq-heading-color', '#8B9635'); // FAQ heading color
                        document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe'); // FAQ items background
                        document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22'); // FAQ items heading color
                        document.documentElement.style.setProperty('--faq-item-text-color', '#333'); // FAQ items text color
                        document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background
                        document.documentElement.style.setProperty('--pop-up-text', '#000'); // Pop-up text color
                        document.documentElement.style.setProperty('--input-border-color', '#8B9635'); // Input border color
                        document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
                        document.documentElement.style.setProperty('--font-size', '16px'); // Font size
                        break;
                      case 'WHITE':
                        document.documentElement.style.setProperty('--header-background-color', '#ffffff'); // White header background
                        document.documentElement.style.setProperty('--header-text-color', '#000000'); // Header text color
                        document.documentElement.style.setProperty('--background-color', '#f0f0f0'); // Main background color
                        document.documentElement.style.setProperty('--text-color', '#000000'); // Main text color
                        document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Input fields background
                        document.documentElement.style.setProperty('--input-button-color', '#007bff'); // Button color
                        document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3'); // Button hover color
                        document.documentElement.style.setProperty('--user-message-background-color', '#ffffff'); // User messages background
                        document.documentElement.style.setProperty('--user-message-text-color', '#000000'); // User messages text color
                        document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9'); // AI messages background
                        document.documentElement.style.setProperty('--ai-message-text-color', '#000000'); // AI messages text color
                        document.documentElement.style.setProperty('--button-background-color', '#007bff'); // Button background color
                        document.documentElement.style.setProperty('--button-hover-background-color', '#0056b3'); // Button hover color
                        document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Models section background
                        document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background
                        document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff'); // Left panel background
                        document.documentElement.style.setProperty('--conversation-background-color', '#ffffff'); // Conversation container background
                        document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background
                        document.documentElement.style.setProperty('--faq-background-color', '#ffffff'); // FAQ section background
                        document.documentElement.style.setProperty('--faq-heading-color', '#007bff'); // FAQ heading color
                        document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9'); // FAQ items background
                        document.documentElement.style.setProperty('--faq-item-heading-color', '#000000'); // FAQ items heading color
                        document.documentElement.style.setProperty('--faq-item-text-color', '#333333'); // FAQ items text color
                        document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background
                        document.documentElement.style.setProperty('--pop-up-text', '#000000'); // Pop-up text color
                        document.documentElement.style.setProperty('--input-border-color', '#ced4da'); // Input border color
                        document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
                        document.documentElement.style.setProperty('--font-size', '16px'); // Font size
                        break;
                      case 'BLACK':
                        document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // Dark header background
                        document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color
                        document.documentElement.style.setProperty('--background-color', '#121212'); // Main background color
                        document.documentElement.style.setProperty('--text-color', '#e0e0e0'); // Main text color
                        document.documentElement.style.setProperty('--input-background-color', '#1e1e1e'); // Input fields background
                        document.documentElement.style.setProperty('--input-button-color', '#3c3c3c'); // Button color
                        document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Button hover color
                        document.documentElement.style.setProperty('--user-message-background-color', '#000000'); // User messages background
                        document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // User messages text color
                        document.documentElement.style.setProperty('--ai-message-background-color', '#202020'); // AI messages background
                        document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // AI messages text color
                        document.documentElement.style.setProperty('--button-background-color', '#3c3c3c'); // Button background color
                        document.documentElement.style.setProperty('--button-hover-background-color', '#5a5a5a'); // Button hover color
                        document.documentElement.style.setProperty('--models-background-color', '#1e1e1e'); // Models section background
                        document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // History background
                        document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Left panel background
                        document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Conversation container background
                        document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Documents background
                        document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // FAQ section background
                        document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // FAQ heading color
                        document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // FAQ items background
                        document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // FAQ items heading color
                        document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // FAQ items text color
                        document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // FAQ items hover background
                        document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // Pop-up text color
                        document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color
                        document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
                        document.documentElement.style.setProperty('--font-size', '16px'); // Font size
                        break;
                      case 'CUSTOM':
                        // Handle custom theme logic here
                        break;
                      default:
                        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>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="'Arial', sans-serif">Arial</option>
                      <option value="'Calibri', sans-serif">Calibri</option>
                      <option value="'Helvetica', sans-serif">Helvetica</option>
                      <option value="'Times New Roman', serif">Times New Roman</option>
                    </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={() => setOpenSourceMode(!openSourceMode)}
                />
                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>
        );

        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,
    preferredMessurement, 
    dateFormat,
    timeFormat,
    timeZone,
    disableOnlineAI,
    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;