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

const VARIANT_CONFIG = {
  success: {
    icon: 'CheckCircleIcon',
    iconBg: '#D3FFDF',
    iconFg: '#0A742C',
  },
  error: {
    icon: 'XCircleIcon',
    iconBg: '#FFE0E0',
    iconFg: '#B30808',
  },
  info: {
    icon: 'InformationCircleIcon',
    iconBg: '#E1EEFF',
    iconFg: '#1D4ED8',
  },
};

export const ModalInformativo = ({
  isOpen = false,
  onClose,
  variant = 'success', // 'success' | 'error' | 'info'
  title,
  description,
  buttonLabel,
  onButtonClick,
  /** 'viewport' = fixed respecto de la pantalla (default). 'parent' = absolute respecto del contenedor padre (el padre debe ser position: relative). */
  attach = 'viewport',
  /** Estilos extra para el contenedor (card) del modal. */
  containerStyle,
  showOverlay = true,
  closeOnOverlayClick = true,
  className = '',
  ...props
}) => {
  const { t } = useTranslation();

  useEffect(() => {
    if (!isOpen) return;
    if (typeof document === 'undefined') return;
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.body.style.overflow = prevOverflow;
    };
  }, [isOpen]);

  if (!isOpen) return null;

  const resolvedVariant = VARIANT_CONFIG[variant] ? variant : 'info';
  const { icon, iconBg, iconFg } = VARIANT_CONFIG[resolvedVariant];

  const resolvedTitle = title ?? t('point.modalInformativo.title');
  const resolvedDescription = description ?? t('point.modalInformativo.description');
  const resolvedButtonLabel = buttonLabel ?? t('point.modalInformativo.buttonLabel');

  const isParentAttach = attach === 'parent';

  return (
    <div
      className={`${isParentAttach ? 'absolute' : 'fixed'} inset-0 z-50 overflow-y-auto`}
      onClick={() => {
        if (!closeOnOverlayClick) return;
        if (typeof onClose === 'function') onClose();
      }}
      {...props}
    >
      {showOverlay && <div className="fixed inset-0 bg-gray-500 bg-opacity-75" />}

      <div className={`flex items-center justify-center ${isParentAttach ? 'h-full' : 'min-h-screen'} px-4 py-10`}>
        <div
          className={`w-full max-w-2xl bg-white ${className}`}
          style={{
            borderRadius: '16px',
            border: '1px solid #c4c4c4',
            backgroundColor: '#ffffff',
            boxSizing: 'border-box',
            overflow: 'hidden',
            ...containerStyle,
          }}
          onClick={(e) => e.stopPropagation()}
        >
          <div
            className="text-center"
            style={{
              height: containerStyle?.height ? '100%' : undefined,
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'flex-start',
              padding: '24px',
              gap: '12px',
              boxSizing: 'border-box',
            }}
          >
            <div className="flex justify-center" style={{ flexShrink: 0 }}>
              <div
                style={{
                  width: '63.99067306518555px',
                  height: '64px',
                  borderRadius: '12px',
                  padding: '8px',
                  backgroundColor: iconBg,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <Icon
                  name={icon}
                  variant="24-outline"
                  size={48}
                  style={{ color: iconFg, width: '48px', height: '48px', opacity: 1 }}
                />
              </div>
            </div>

            <Typography
              variant="h3"
              style={{
                fontFamily: 'IBM Plex Sans',
                fontWeight: 400,
                fontStyle: 'normal',
                fontSize: '24px',
                lineHeight: '36px',
                letterSpacing: '0px',
                textAlign: 'center',
                color: '#29474C',
                leadingTrim: 'none',
                margin: 0,
                flexShrink: 0,
              }}
            >
              {resolvedTitle}
            </Typography>

            <Typography
              variant="body-lg"
              style={{
                fontFamily: 'IBM Plex Sans',
                fontWeight: 400,
                fontStyle: 'normal',
                fontSize: '14px',
                lineHeight: '21px',
                letterSpacing: '1%',
                textAlign: 'center',
                color: '#5F5F5F',
                leadingTrim: 'none',
                margin: 0,
                overflow: 'hidden',
                display: '-webkit-box',
                WebkitBoxOrient: 'vertical',
                WebkitLineClamp: 4,
              }}
            >
              {resolvedDescription}
            </Typography>

            <div style={{ marginTop: 'auto', paddingTop: '12px', width: '100%', flexShrink: 0 }}>
              <PrimaryActionButton
                variant="primary"
                fullWidth
                onClick={onButtonClick}
                style={{ height: '48px', borderRadius: '12px' }}
                textStyle={{
                  fontFamily: 'IBM Plex Sans',
                  fontWeight: 400,
                  fontStyle: 'normal',
                  fontSize: '16px',
                  lineHeight: '24px',
                  letterSpacing: '0%',
                  verticalAlign: 'middle',
                  leadingTrim: 'none',
                  color: '#FFFFFF',
                }}
                text={resolvedButtonLabel}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ModalInformativo;

