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

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

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

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

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

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

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

  // Theme selection
  const [selectedTheme, setSelectedTheme] = useState<string>('IOMARKET'); // Default value can be 'IOMARKET'


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

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

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

        case 'theme':
          return (
            <div className="settings-section">
              <h2>Theme Settings</h2>
        
              {/* 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'); // New 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'); // Background color for input fields
                        document.documentElement.style.setProperty('--input-button-color', '#8B9635'); // Button color
                        document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b'); // Hover color for input buttons
                        document.documentElement.style.setProperty('--user-message-background-color', '#8B9635'); // Background color for user messages
                        document.documentElement.style.setProperty('--user-message-text-color', '#000'); // Text color for user messages
                        document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB'); // Background color for AI messages
                        document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // Text color for AI messages
                        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'); // Background for models section
                        document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // Background color for history
                        document.documentElement.style.setProperty('--left-panel-background-color', '#79832e'); // Background color for left panel
                        document.documentElement.style.setProperty('--conversation-background-color', '#79832e'); // Background color for conversation container
                        document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Background color for documents
                        document.documentElement.style.setProperty('--faq-background-color', '#474D22'); // Background color for FAQ section
                        document.documentElement.style.setProperty('--faq-heading-color', '#8B9635'); // Heading color for FAQ section
                        document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe'); // Background color for FAQ items
                        document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22'); // Heading color for FAQ items
                        document.documentElement.style.setProperty('--faq-item-text-color', '#333'); // Text color for FAQ items
                        document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // Hover background color for FAQ items
                        document.documentElement.style.setProperty('--pop-up-text', '#000'); // Text color for pop-ups
                        document.documentElement.style.setProperty('--input-border-color', '#8B9635'); // Input border color
                        document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Default 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 color
                        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'); // Background color for input fields
                        document.documentElement.style.setProperty('--input-button-color', '#007bff'); // Button color
                        document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3'); // Hover color for input buttons
                        document.documentElement.style.setProperty('--user-message-background-color', '#ffffff'); // Background color for user messages
                        document.documentElement.style.setProperty('--user-message-text-color', '#000000'); // Text color for user messages
                        document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9'); // Background color for AI messages
                        document.documentElement.style.setProperty('--ai-message-text-color', '#000000'); // Text color for AI messages
                        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'); // Background for models section
                        document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // Background color for history
                        document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff'); // Background color for left panel
                        document.documentElement.style.setProperty('--conversation-background-color', '#ffffff'); // Background color for conversation container
                        document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Background color for documents
                        document.documentElement.style.setProperty('--faq-background-color', '#ffffff'); // Background color for FAQ section
                        document.documentElement.style.setProperty('--faq-heading-color', '#007bff'); // Heading color for FAQ section
                        document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9'); // Background color for FAQ items
                        document.documentElement.style.setProperty('--faq-item-heading-color', '#000000'); // Heading color for FAQ items
                        document.documentElement.style.setProperty('--faq-item-text-color', '#333333'); // Text color for FAQ items
                        document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // Hover background color for FAQ items
                        document.documentElement.style.setProperty('--pop-up-text', '#000000'); // Text color for pop-ups
                        document.documentElement.style.setProperty('--input-border-color', '#ced4da'); // Input border color
                        document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Default 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 color
                        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'); // Background color for input fields
                        document.documentElement.style.setProperty('--input-button-color', '#3c3c3c'); // Button color
                        document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Hover color for input buttons
                        document.documentElement.style.setProperty('--user-message-background-color', '#2c2c2c'); // Background color for user messages
                        document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // Text color for user messages
                        document.documentElement.style.setProperty('--ai-message-background-color', '#2a2a2a'); // Background color for AI messages
                        document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // Text color for AI messages
                        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'); // Background for models section
                        document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // Background color for history
                        document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Background color for left panel
                        document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Background color for conversation container
                        document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Background color for documents
                        document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // Background color for FAQ section
                        document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // Heading color for FAQ section
                        document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // Background color for FAQ items
                        document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // Heading color for FAQ items
                        document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // Text color for FAQ items
                        document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // Hover background color for FAQ items
                        document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // Text color for pop-ups
                        document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color
                        document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Default font family
                        document.documentElement.style.setProperty('--font-size', '16px'); // Font size 
                        break;
                      case 'CUSTOM':
                        // Do nothing, CUSTOM will display the customization options
                        break;
                      default:
                        break;
                    }
                  }} // Handle theme selection
                >
                  <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); // Update the CSS variable
                      }}
                    />
                    <span>{fontSize}</span>
                  </div>
                  <div className="settings-option">
                    <p>Background Color</p>
                    <input
                      type="color"
                      value={backgroundColor}
                      onChange={(e) => setBackgroundColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>Text Color</p>
                    <input
                      type="color"
                      value={textColor}
                      onChange={(e) => setTextColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>Input Background Color</p>
                    <input
                      type="color"
                      value={inputBackgroundColor}
                      onChange={(e) => setInputBackgroundColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>Input Button Color</p>
                    <input
                      type="color"
                      value={inputButtonColor}
                      onChange={(e) => setInputButtonColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>Input Button Hover Color</p>
                    <input
                      type="color"
                      value={inputButtonHoverColor}
                      onChange={(e) => setInputButtonHoverColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>User Message Background Color</p>
                    <input
                      type="color"
                      value={userMessageBackgroundColor}
                      onChange={(e) => setUserMessageBackgroundColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>User Message Text Color</p>
                    <input
                      type="color"
                      value={userMessageTextColor}
                      onChange={(e) => setUserMessageTextColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>AI Message Background Color</p>
                    <input
                      type="color"
                      value={aiMessageBackgroundColor}
                      onChange={(e) => setAiMessageBackgroundColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>AI Message Text Color</p>
                    <input
                      type="color"
                      value={aiMessageTextColor}
                      onChange={(e) => setAiMessageTextColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>Button Background Color</p>
                    <input
                      type="color"
                      value={buttonBackgroundColor}
                      onChange={(e) => setButtonBackgroundColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>Button Hover Background Color</p>
                    <input
                      type="color"
                      value={buttonHoverBackgroundColor}
                      onChange={(e) => setButtonHoverBackgroundColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>Models Background Color</p>
                    <input
                      type="color"
                      value={modelsBackgroundColor}
                      onChange={(e) => setModelsBackgroundColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>History Background Color</p>
                    <input
                      type="color"
                      value={historyBackgroundColor}
                      onChange={(e) => setHistoryBackgroundColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>Left Panel Background Color</p>
                    <input
                      type="color"
                      value={leftPanelBackgroundColor}
                      onChange={(e) => setLeftPanelBackgroundColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>Conversation Background Color</p>
                    <input
                      type="color"
                      value={conversationBackgroundColor}
                      onChange={(e) => setConversationBackgroundColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>Pop-up Text Color</p>
                    <input
                      type="color"
                      value={popUpTextColor}
                      onChange={(e) => setPopUpTextColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>Input Border Color</p>
                    <input
                      type="color"
                      value={inputBorderColor}
                      onChange={(e) => setInputBorderColor(e.target.value)}
                    />
                  </div>
                  <div className="settings-option">
                    <p>Font Family</p>
                    <select
                      value={fontFamily}
                      onChange={(e) => setFontFamily(e.target.value)}
                    >
                      <option value="'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>Free and Open Source Software (FOSS) 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>Change Name</label>
              <input
                type="text"
                value={newName}
                onChange={(e) => setNewName(e.target.value)}
              />
            </div>
            <div className="settings-option">
              <label>Change Email</label>
              <input
                type="email"
                value={newEmail}
                onChange={(e) => setNewEmail(e.target.value)}
              />
            </div>
            <div className="settings-option">
              <label>Change Password</label>
              <input
                type="password"
                value={newPassword}
                onChange={(e) => setNewPassword(e.target.value)}
              />
            </div>
          </div>
        );

      default:
        return null;
    }
  };

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

  );
};

export default Settings;
