import { useEffect, useRef, useState } from 'react';
import { 
  FaPaperclip, 
  FaCubes, 
  FaGoogle, 
  FaMicrosoft, 
  FaSlack, 
  FaChevronRight,
  FaFileAlt,
  FaTable,
  FaDesktop,
  FaStickyNote,
  FaTasks,
  FaCalendarAlt,
  FaFolderOpen,
  FaEnvelope,
  FaFileWord,
  FaFileExcel,
  FaFilePowerpoint,
  FaClipboardList,
  FaExchangeAlt,
  FaCloud
} from 'react-icons/fa';
import './AddContentDropdown.css';

function AddContentDropdown({ 
  isOpen, 
  onClose, 
  toggleButtonRef, 
  onAddFilesClick, 
  onServiceClick,
  selectedServices = { google: [], microsoft: [], slack: false }
}) {
  const dropdownRef = useRef(null);
  const [openSubMenus, setOpenSubMenus] = useState({
    connectApps: false,
    googleWorkspace: false,
    microsoft365: false
  });

  // Effect to handle clicks outside the dropdown to close it
  useEffect(() => {
    const handleClickOutside = (event) => {
      // Do not close if the click is on the toggle button itself
      if (toggleButtonRef && toggleButtonRef.current && toggleButtonRef.current.contains(event.target)) {
        return;
      }

      // Close the dropdown if the click is outside of it
      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
        onClose();
        // Reset all sub-menus when closing
        setOpenSubMenus({
          connectApps: false,
          googleWorkspace: false,
          microsoft365: false
        });
      }
    };

    if (isOpen) {
      document.addEventListener('mousedown', handleClickOutside);
    } else {
      document.removeEventListener('mousedown', handleClickOutside);
    }

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [isOpen, onClose, toggleButtonRef]);

  // Reset sub-menus when dropdown closes
  useEffect(() => {
    if (!isOpen) {
      setOpenSubMenus({
        connectApps: false,
        googleWorkspace: false,
        microsoft365: false
      });
    }
  }, [isOpen]);

  const handleConnectAppsHover = () => {
    setOpenSubMenus(prev => ({
      ...prev,
      connectApps: true
    }));
  };

  const handleGoogleWorkspaceHover = () => {
    setOpenSubMenus(prev => ({
      ...prev,
      googleWorkspace: true,
      // Close Microsoft 365 when hovering Google Workspace
      microsoft365: false
    }));
  };

  const handleMicrosoft365Hover = () => {
    setOpenSubMenus(prev => ({
      ...prev,
      microsoft365: true,
      // Close Google Workspace when hovering Microsoft 365
      googleWorkspace: false
    }));
  };

  const handleSlackHover = () => {
    // Close service sub-menus when hovering Slack
    setOpenSubMenus(prev => ({
      ...prev,
      googleWorkspace: false,
      microsoft365: false
    }));
  };

  const handleAddFilesHover = () => {
    // Close Connect Apps menu when hovering Add Files
    setOpenSubMenus({
      connectApps: false,
      googleWorkspace: false,
      microsoft365: false
    });
  };

  // Simplified handlers - just call onServiceClick
  const handleGoogleServiceClick = (service) => {
    if (onServiceClick && typeof onServiceClick === 'function') {
      onServiceClick('google', service);
    }
  };

  const handleMicrosoftServiceClick = (service) => {
    if (onServiceClick && typeof onServiceClick === 'function') {
      onServiceClick('microsoft', service);
    }
  };

  const handleSlackClick = () => {
    if (onServiceClick && typeof onServiceClick === 'function') {
      onServiceClick('slack', 'slack');
    }
  };

  // Helper to check if a service is selected
  const isServiceSelected = (provider, service) => {
    if (provider === 'slack') {
      return selectedServices.slack || false;
    }
    return selectedServices[provider]?.includes(service) || false;
  };

  return (
    <div className={`add-content-dropdown ${isOpen ? 'open' : ''}`} ref={dropdownRef}>
      <ul>
        <li onClick={onAddFilesClick} onMouseEnter={handleAddFilesHover}>
          <div className="menu-item-content">
            <FaPaperclip className="dropdown-icon" />
            <span>Add Files and Links</span>
          </div>
        </li>  
        <li className={`has-submenu ${openSubMenus.connectApps ? 'active' : ''}`} onMouseEnter={handleConnectAppsHover}>
          <div className="menu-item-content">
            <FaCubes className="dropdown-icon" />
            <span>Connect Apps</span>
          </div>
          <FaChevronRight className="submenu-arrow" />
          <div className={`sub-dropdown ${openSubMenus.connectApps ? 'open' : ''}`}>
            <ul>
              <li className={`has-submenu ${openSubMenus.googleWorkspace ? 'active' : ''}`} onMouseEnter={handleGoogleWorkspaceHover}>
                <div className="menu-item-content">
                  <FaGoogle className="dropdown-icon" />
                  <span>Google Workspace</span>
                </div>
                <FaChevronRight className="submenu-arrow" />
                <div className={`sub-dropdown ${openSubMenus.googleWorkspace ? 'open' : ''}`}>
                  <ul>
                    <li 
                      onClick={() => handleGoogleServiceClick('docs')} 
                      className={isServiceSelected('google', 'docs') ? 'selected' : ''}
                    >
                      <div className="menu-item-content">
                        <FaFileAlt className="dropdown-icon" />
                        <span>Docs</span>
                      </div>
                    </li>
                    <li 
                      onClick={() => handleGoogleServiceClick('sheets')} 
                      className={isServiceSelected('google', 'sheets') ? 'selected' : ''}
                    >
                      <div className="menu-item-content">
                        <FaTable className="dropdown-icon" />
                        <span>Sheets</span>
                      </div>
                    </li>
                    <li 
                      onClick={() => handleGoogleServiceClick('slides')} 
                      className={isServiceSelected('google', 'slides') ? 'selected' : ''}
                    >
                      <div className="menu-item-content">
                        <FaDesktop className="dropdown-icon" />
                        <span>Slides</span>
                      </div>
                    </li>
                    <li 
                      onClick={() => handleGoogleServiceClick('keep')} 
                      className={isServiceSelected('google', 'keep') ? 'selected' : ''}
                    >
                      <div className="menu-item-content">
                        <FaStickyNote className="dropdown-icon" />
                        <span>Keep</span>
                      </div>
                    </li>
                    <li 
                      onClick={() => handleGoogleServiceClick('tasks')} 
                      className={isServiceSelected('google', 'tasks') ? 'selected' : ''}
                    >
                      <div className="menu-item-content">
                        <FaTasks className="dropdown-icon" />
                        <span>Tasks</span>
                      </div>
                    </li>
                    <li 
                      onClick={() => handleGoogleServiceClick('calendar')} 
                      className={isServiceSelected('google', 'calendar') ? 'selected' : ''}
                    >
                      <div className="menu-item-content">
                        <FaCalendarAlt className="dropdown-icon" />
                        <span>Calendar</span>
                      </div>
                    </li>
                    <li 
                      onClick={() => handleGoogleServiceClick('drive')} 
                      className={isServiceSelected('google', 'drive') ? 'selected' : ''}
                    >
                      <div className="menu-item-content">
                        <FaFolderOpen className="dropdown-icon" />
                        <span>Drive</span>
                      </div>
                    </li>
                    <li 
                      onClick={() => handleGoogleServiceClick('gmail')} 
                      className={isServiceSelected('google', 'gmail') ? 'selected' : ''}
                    >
                      <div className="menu-item-content">
                        <FaEnvelope className="dropdown-icon" />
                        <span>Gmail</span>
                      </div>
                    </li>
                  </ul>
                </div>
              </li>
              <li className={`has-submenu ${openSubMenus.microsoft365 ? 'active' : ''}`} onMouseEnter={handleMicrosoft365Hover}>
                <div className="menu-item-content">
                  <FaMicrosoft className="dropdown-icon" />
                  <span>Microsoft 365</span>
                </div>
                <FaChevronRight className="submenu-arrow" />
                <div className={`sub-dropdown ${openSubMenus.microsoft365 ? 'open' : ''}`}>
                  <ul>
                    <li 
                      onClick={() => handleMicrosoftServiceClick('word')} 
                      className={isServiceSelected('microsoft', 'word') ? 'selected' : ''}
                    >
                      <div className="menu-item-content">
                        <FaFileWord className="dropdown-icon" />
                        <span>Word</span>
                      </div>
                    </li>
                    <li 
                      onClick={() => handleMicrosoftServiceClick('excel')} 
                      className={isServiceSelected('microsoft', 'excel') ? 'selected' : ''}
                    >
                      <div className="menu-item-content">
                        <FaFileExcel className="dropdown-icon" />
                        <span>Excel</span>
                      </div>
                    </li>
                    <li 
                      onClick={() => handleMicrosoftServiceClick('powerpoint')} 
                      className={isServiceSelected('microsoft', 'powerpoint') ? 'selected' : ''}
                    >
                      <div className="menu-item-content">
                        <FaFilePowerpoint className="dropdown-icon" />
                        <span>PowerPoint</span>
                      </div>
                    </li>
                    <li 
                      onClick={() => handleMicrosoftServiceClick('onenote')} 
                      className={isServiceSelected('microsoft', 'onenote') ? 'selected' : ''}
                    >
                      <div className="menu-item-content">
                        <FaStickyNote className="dropdown-icon" />
                        <span>OneNote</span>
                      </div>
                    </li>
                    <li 
                      onClick={() => handleMicrosoftServiceClick('todo')} 
                      className={isServiceSelected('microsoft', 'todo') ? 'selected' : ''}
                    >
                      <div className="menu-item-content">
                        <FaClipboardList className="dropdown-icon" />
                        <span>To Do</span>
                      </div>
                    </li>
                    <li 
                      onClick={() => handleMicrosoftServiceClick('exchange')} 
                      className={isServiceSelected('microsoft', 'exchange') ? 'selected' : ''}
                    >
                      <div className="menu-item-content">
                        <FaExchangeAlt className="dropdown-icon" />
                        <span>Exchange</span>
                      </div>
                    </li>
                    <li 
                      onClick={() => handleMicrosoftServiceClick('onedrive')} 
                      className={isServiceSelected('microsoft', 'onedrive') ? 'selected' : ''}
                    >
                      <div className="menu-item-content">
                        <FaCloud className="dropdown-icon" />
                        <span>OneDrive</span>
                      </div>
                    </li>
                    <li 
                      onClick={() => handleMicrosoftServiceClick('outlook')} 
                      className={isServiceSelected('microsoft', 'outlook') ? 'selected' : ''}
                    >
                      <div className="menu-item-content">
                        <FaEnvelope className="dropdown-icon" />
                        <span>Outlook</span>
                      </div>
                    </li>
                  </ul>
                </div>
              </li>
              <li 
                onMouseEnter={handleSlackHover} 
                onClick={handleSlackClick} 
                className={isServiceSelected('slack', 'slack') ? 'selected' : ''}
              >
                <div className="menu-item-content">
                  <FaSlack className="dropdown-icon" />
                  <span>Slack</span>
                  {isServiceSelected('slack', 'slack') && sessionStorage.getItem('slack_workspace') && (
                    <span className="workspace-info">
                      ({JSON.parse(sessionStorage.getItem('slack_workspace')).team_name})
                    </span>
                  )}
                </div>
              </li>
            </ul>
          </div>
        </li>    
      </ul>
    </div>
  );
}

export default AddContentDropdown;