import { useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Icon } from '../../Atoms/Icon/Icon';
import { Typography } from '../../Atoms/Typography/Typography';

export const DesplegablePerfil = ({
  isOpen = false,
  onClose,
  onProfileClick,
  onSettingsClick,
  onHelpClick,
  onLogoutClick,
  activeItem: externalActiveItem = null, // 'profile', 'settings', 'help', 'logout'
  triggerRef,
  className = '',
  ...props
}) => {
  const { t } = useTranslation();
  const dropdownRef = useRef(null);
  const isOpenRef = useRef(isOpen);
  const [internalActiveItem, setInternalActiveItem] = useState(null);
  
  // Usar el activeItem externo si se proporciona, sino usar el interno
  const activeItem = externalActiveItem !== null ? externalActiveItem : internalActiveItem;

  // Mantener la referencia del estado actualizada
  useEffect(() => {
    isOpenRef.current = isOpen;
  }, [isOpen]);

  // Cerrar al hacer click fuera del desplegable (excluyendo el botón trigger)
  useEffect(() => {
    const handleClickOutside = (event) => {
      // Verificar el estado actual - si ya está cerrado, no hacer nada
      if (!isOpenRef.current) {
        return;
      }

      // Si el click fue en el trigger, no hacer nada (el toggle ya lo maneja)
      if (triggerRef?.current && (
        triggerRef.current === event.target || 
        triggerRef.current.contains(event.target)
      )) {
        return;
      }

      // Si el click fue dentro del dropdown, no hacer nada
      if (dropdownRef.current && dropdownRef.current.contains(event.target)) {
        return;
      }
      
      // Cerrar si el click es fuera de ambos
      if (onClose) {
        onClose();
      }
    };

    if (isOpen) {
      // Usar click con un delay para que el toggle se ejecute primero
      // El delay permite que el estado se actualice antes de que se ejecute handleClickOutside
      const timeoutId = setTimeout(() => {
        document.addEventListener('click', handleClickOutside);
      }, 1);

      return () => {
        clearTimeout(timeoutId);
        document.removeEventListener('click', handleClickOutside);
      };
    }
  }, [isOpen, onClose, triggerRef]);

  if (!isOpen) return null;

  const handleMenuItemClick = (event, callback, itemKey) => {
    // Prevenir la propagación del evento para evitar que se cierre el desplegable
    event.stopPropagation();
    
    // Actualizar el item activo si no hay un activeItem externo
    if (externalActiveItem === null) {
      setInternalActiveItem(itemKey);
    }
    // Pasar el evento al callback para que pueda ser capturado y usado
    if (callback) {
      callback(event);
    }
    // Cerrar el desplegable al seleccionar un item,
    // manteniendo el item activo para conservar el resaltado al reabrir.
    if (onClose) {
      onClose();
    }
  };

  return (
    <div
      ref={dropdownRef}
      className={`absolute top-full right-0 mt-2 bg-white radius-12 shadow-lg ${className}`}
      style={{
        width: '224px',
        border: '1px solid var(--color-main)',
        boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
        zIndex: 9999,
      }}
      {...props}
    >
      <div className="pt-2 pb-2 flex flex-col items-center">
        {/* Opción: Mi Perfil */}
        <button
          onClick={(event) => handleMenuItemClick(event, onProfileClick, 'profile')}
          className="flex items-center text-left transition-colors cursor-pointer"
          style={{
            width: '200px',
            height: '40px',
            borderRadius: '8px',
            padding: '8px',
            gap: '16px',
            opacity: 1,
            ...(activeItem === 'profile' ? { backgroundColor: 'var(--color-grey-100)' } : {})
          }}
          aria-label={t('profile.menu.profile', { defaultValue: 'Mi Perfil' })}
        >
          <Icon
            name="UserIcon"
            variant="24-outline"
            size={24}
            className="color-gray-700"
          />
          <Typography
            variant="body-lg"
            className="color-gray-700 font-regular"
          >
            {t('profile.menu.profile', { defaultValue: 'Mi Perfil' })}
          </Typography>
        </button>

        {/* Opción: Configuración */}
        <button
          onClick={(event) => handleMenuItemClick(event, onSettingsClick, 'settings')}
          className="flex items-center text-left transition-colors cursor-pointer"
          style={{
            width: '200px',
            height: '40px',
            borderRadius: '8px',
            padding: '8px',
            gap: '16px',
            opacity: 1,
            ...(activeItem === 'settings' ? { backgroundColor: 'var(--color-grey-100)' } : {})
          }}
          aria-label={t('profile.menu.settings', { defaultValue: 'Configuración' })}
        >
          <Icon
            name="Cog6ToothIcon"
            variant="24-outline"
            size={24}
            className="color-gray-700"
          />
          <Typography
            variant="body-lg"
            className="color-gray-700 font-regular"
          >
            {t('profile.menu.settings', { defaultValue: 'Configuración' })}
          </Typography>
        </button>

        {/* Opción: Centro de ayuda */}
        <button
          onClick={(event) => handleMenuItemClick(event, onHelpClick, 'help')}
          className="flex items-center text-left transition-colors cursor-pointer"
          style={{
            width: '200px',
            height: '40px',
            borderRadius: '8px',
            padding: '8px',
            gap: '16px',
            opacity: 1,
            ...(activeItem === 'help' ? { backgroundColor: 'var(--color-grey-100)' } : {})
          }}
          aria-label={t('profile.menu.help', { defaultValue: 'Centro de ayuda' })}
        >
          <Icon
            name="QuestionMarkCircleIcon"
            variant="24-outline"
            size={24}
            className="color-gray-700"
          />
          <Typography
            variant="body-lg"
            className="color-gray-700 font-regular"
          >
            {t('profile.menu.help', { defaultValue: 'Centro de ayuda' })}
          </Typography>
        </button>

        {/* Separador */}
        <div className="mt-2.5 mb-0 flex justify-center">
          <div 
            style={{
              width: '200px',
              borderTop: '1px solid var(--color-main)',
            }}
          />
        </div>

        {/* Opción: Cerrar sesión */}
        <button
          onClick={(event) => handleMenuItemClick(event, onLogoutClick, 'logout')}
          className="flex items-center text-left transition-colors cursor-pointer mt-2.5"
          style={{
            width: '200px',
            height: '40px',
            borderRadius: '8px',
            padding: '8px',
            gap: '16px',
            opacity: 1,
            ...(activeItem === 'logout' ? { backgroundColor: 'var(--color-grey-100)' } : {})
          }}
          aria-label={t('profile.menu.logout', { defaultValue: 'Cerrar sesión' })}
        >
          <Icon
            name="ArrowRightOnRectangleIcon"
            variant="24-outline"
            size={24}
            className="color-gray-700"
          />
          <Typography
            variant="body-lg"
            className="color-gray-700 font-regular"
          >
            {t('profile.menu.logout', { defaultValue: 'Cerrar sesión' })}
          </Typography>
        </button>
      </div>
    </div>
  );
};

export default DesplegablePerfil;
