import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Icon } from '../../Atoms/Icon/Icon';
import { Typography } from '../../Atoms/Typography/Typography';

// Constantes de diseño reutilizables
const ICON_SIZE = 24;
const ICON_COLOR_ACTIVE = '#FFFFFF';
const ICON_COLOR_INACTIVE = '#374151';
const BACKGROUND_COLOR_ACTIVE = '#2D5C63';
const TEXT_COLOR_ACTIVE = '#FFFFFF';
const TEXT_COLOR_INACTIVE = '#374151';
const NAV_HEIGHT = '94px';
const BORDER_RADIUS = '20px';
/** Radio de los ítems y del contenedor interior */
const BORDER_RADIUS_INNER = '20px';
const SHADOW_COLOR = 'rgba(0, 0, 0, 0.1)';

function useDefaultNavItems() {
  const { t } = useTranslation();
  return useMemo(
    () => [
      { id: 'inicio', label: t('point.nav.home'), icon: 'Squares2X2Icon' },
      { id: 'docs', label: t('point.nav.docs'), icon: 'DocumentTextIcon' },
      { id: 'equipo', label: t('point.nav.team'), icon: 'UserGroupIcon' },
      { id: 'perfil', label: t('point.nav.profile'), icon: 'UserIcon' },
    ],
    [t]
  );
}

export const NavPoint = ({
  /** Ancho en px: visible cuando viewport <= breakpointPx, oculto cuando > breakpointPx */
  breakpointPx = 1024,
  items,
  activeItem,
  onItemClick,
  /** Color del borde exterior (2px). Si no se pasa, se usa el color de fondo del ítem activo (#2D5C63). */
  borderColor,
  className = '',
  ...props
}) => {
  const defaultItems = useDefaultNavItems();
  const resolvedItems = items ?? defaultItems;
  const navBorderColor = borderColor ?? BACKGROUND_COLOR_ACTIVE;
  const handleItemClick = (itemId) => {
    if (onItemClick) {
      onItemClick(itemId);
    }
  };

  const getBorderRadius = (isActive) => {
    if (!isActive) return '0';
    return BORDER_RADIUS_INNER;
  };

  return (
    <>
      <style>{`
        .nav-point {
          border-radius: ${BORDER_RADIUS} !important;
          overflow: hidden !important;
          min-height: ${NAV_HEIGHT} !important;
          height: ${NAV_HEIGHT} !important;
        }
        /* Mostrar NavPoint hasta breakpointPx (inclusive) */
        @media (max-width: ${breakpointPx}px) {
          .nav-point {
            display: block !important;
          }
        }
        /* Ocultar NavPoint desde breakpointPx + 1 */
        @media (min-width: ${breakpointPx + 1}px) {
          .nav-point {
            display: none !important;
          }
        }
        .nav-point > div {
          overflow: hidden;
          height: 100%;
          border-radius: ${BORDER_RADIUS_INNER};
        }
        .nav-point-item {
          min-width: 0;
          min-height: 0;
          height: 100%;
        }
        .nav-point-text {
          display: block !important;
          visibility: visible !important;
          opacity: 1 !important;
          max-height: none !important;
          overflow: hidden;
          white-space: nowrap !important;
          text-overflow: ellipsis;
          width: 100%;
          text-align: center !important;
        }
      `}</style>
      <nav
        className={`fixed left-0 right-0 z-50 bg-white shadow-md nav-point ${className}`}
        style={{ 
          bottom: '1.5rem',
          left: '50%',
          transform: 'translateX(-50%)',
          maxWidth: '545px',
          width: '100%',
          boxShadow: `0 -2px 8px ${SHADOW_COLOR}`,
          borderRadius: BORDER_RADIUS,
          border: `2px solid ${navBorderColor}`,
          overflow: 'hidden',
          minHeight: NAV_HEIGHT,
          height: NAV_HEIGHT,
          padding: '8px',
          boxSizing: 'border-box',
        }}
        {...props}
      >
      <div className="flex items-center h-full" style={{ overflow: 'hidden', borderRadius: BORDER_RADIUS_INNER }}>
        {resolvedItems.map((item, index) => {
          const isActive = activeItem === item.id;
          
          return (
            <button
              key={item.id}
              onClick={() => handleItemClick(item.id)}
              className="flex flex-col items-center justify-center px-4 py-3 transition-colors duration-200 cursor-pointer flex-1 relative nav-point-item"
              style={{
                backgroundColor: isActive ? BACKGROUND_COLOR_ACTIVE : 'transparent',
                borderRadius: getBorderRadius(isActive),
              }}
            >
              <Icon
                name={item.icon}
                variant="24-outline"
                size={ICON_SIZE}
                style={{ color: isActive ? ICON_COLOR_ACTIVE : ICON_COLOR_INACTIVE }}
              />
              <Typography
                variant="body-sm"
                className={`mt-1 ${isActive ? 'font-medium' : 'font-regular'} nav-point-text`}
                style={{ 
                  color: isActive ? TEXT_COLOR_ACTIVE : TEXT_COLOR_INACTIVE,
                  fontSize: '1rem',
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  width: '100%',
                  textAlign: 'center',
                }}
              >
                {item.label}
              </Typography>
            </button>
          );
        })}
      </div>
    </nav>
    </>
  );
};

export default NavPoint;
