import { useTranslation } from 'react-i18next';
import { Typography } from '../../Atoms/Typography/Typography';
import { CardGrande } from '../CardGrande/CardGrande';
import { FONT_FAMILY_SANS } from '../../../designTokens';
import { BadgeContainer } from '../../Atoms/BadgeContainer/BadgeContainer';
import { Icon } from '../../Atoms/Icon/Icon';
import { PrimaryActionButton } from '../../Atoms/PrimaryActionButton/PrimaryActionButton';

export const Cuenta = ({
  title,
  titleClassName = '',
  titleStyle,

  // Bloque informativo debajo del título
  showBadgeContainer = true,
  badgeContainerProps,
  badgeIconName = 'UserIcon',
  badgeIconVariant = '24-outline',
  badgeIconSize = 20,
  badgeIconColor = '#29474C',
  badgeIconStyle,
  infoLabel,
  infoValue = 'usuario@empresa.com',
  infoLabelClassName = '',
  infoLabelStyle,
  infoValueClassName = '',
  infoValueStyle,

  // Segunda sección (Email)
  showEmailSection = true,
  emailBadgeContainerProps,
  emailIconName = 'EnvelopeIcon',
  emailIconVariant = '24-outline',
  emailIconSize = 20,
  emailIconColor = '#29474C',
  emailIconStyle,
  emailLabel,
  emailValue = 'usuario@empresa.com',
  emailLabelClassName = '',
  emailLabelStyle,
  emailValueClassName = '',
  emailValueStyle,

  // Acción
  showChangePasswordButton = true,
  changePasswordButtonText,
  onChangePasswordClick,
  changePasswordButtonDisabled = false,
  changePasswordButtonClassName = '',
  changePasswordButtonStyle,

  className = '',
  style,
  children,
  ...props
}) => {
  const { t } = useTranslation();
  const resolvedTitle = title ?? t('point.cuenta.title');
  const resolvedInfoLabel = infoLabel ?? t('point.cuenta.userLabel');
  const resolvedEmailLabel = emailLabel ?? t('point.cuenta.emailLabel');
  const resolvedChangePasswordButtonText =
    changePasswordButtonText ?? t('point.cuenta.changePassword');

  const resolvedBadgeContainerProps = {
    size: 36,
    borderRadius: 10,
    paddingX: 0,
    ...(badgeContainerProps || {}),
  };
  const resolvedEmailBadgeContainerProps = {
    size: 36,
    borderRadius: 10,
    paddingX: 0,
    ...(emailBadgeContainerProps || {}),
  };

  return (
    <CardGrande className={`anima-cuenta__container ${className}`.trim()} style={style} {...props}>
      <div
        className="anima-cuenta__title-container"
        style={{
          width: '100%',
          paddingTop: '24px',
          paddingRight: '24px',
          paddingBottom: '4px',
          paddingLeft: '24px',
          boxSizing: 'border-box',
          borderTopLeftRadius: '16px',
          borderTopRightRadius: '16px',
        }}
      >
        <Typography
          variant="body-md"
          className={`anima-cuenta__title ${titleClassName}`.trim()}
          style={{
            fontFamily: FONT_FAMILY_SANS || 'IBM Plex Sans, sans-serif',
            fontWeight: 400,
            fontStyle: 'normal',
            fontSize: '20px',
            lineHeight: '30px',
            letterSpacing: '0%',
            verticalAlign: 'middle',
            margin: 0,
            leadingTrim: 'none',
            color: '#29474C',
            ...(titleStyle || {}),
          }}
        >
          {resolvedTitle}
        </Typography>
      </div>

      {(showBadgeContainer || showEmailSection) ? (
        <div
          style={{
            width: '100%',
            paddingTop: '16px',
            paddingRight: '24px',
            paddingBottom: '24px',
            paddingLeft: '24px',
            boxSizing: 'border-box',
            display: 'flex',
            flexDirection: 'column',
            gap: '16px',
          }}
        >
          {showBadgeContainer ? (
            <div
              className="anima-cuenta__badge-container-row"
              style={{
                width: '100%',
                display: 'flex',
                justifyContent: 'flex-start',
                alignItems: 'center',
                gap: '16px',
              }}
            >
              <BadgeContainer
                {...resolvedBadgeContainerProps}
                style={{
                  flexShrink: 0,
                  transform: 'translateY(2px)',
                  ...(resolvedBadgeContainerProps?.style || {}),
                }}
              >
                <Icon
                  name={badgeIconName}
                  variant={badgeIconVariant}
                  size={badgeIconSize}
                  style={{
                    color: badgeIconColor,
                    ...(badgeIconStyle || {}),
                  }}
                />
              </BadgeContainer>

              <div
                className="anima-cuenta__info-text"
                style={{
                  minWidth: 0,
                  flex: '1 1 auto',
                }}
              >
                {resolvedInfoLabel ? (
                  <Typography
                    variant="body-sm"
                    className={infoLabelClassName}
                    style={{
                      fontFamily: FONT_FAMILY_SANS || 'IBM Plex Sans, sans-serif',
                      fontWeight: 400,
                      fontStyle: 'normal',
                      fontSize: '14px',
                      lineHeight: '21px',
                      letterSpacing: '1%',
                      color: 'var(--color-grey-600, #6B7280)',
                      margin: 0,
                      leadingTrim: 'none',
                      ...(infoLabelStyle || {}),
                    }}
                  >
                    {resolvedInfoLabel}
                  </Typography>
                ) : null}

                {infoValue ? (
                  <Typography
                    variant="body-md"
                    className={infoValueClassName}
                    style={{
                      fontFamily: FONT_FAMILY_SANS || 'IBM Plex Sans, sans-serif',
                      fontWeight: 400,
                      fontStyle: 'normal',
                      fontSize: '16px',
                      lineHeight: '150%',
                      letterSpacing: '0px',
                      color: '#29474C',
                      margin: 0,
                      leadingTrim: 'none',
                      ...(infoValueStyle || {}),
                    }}
                  >
                    {infoValue}
                  </Typography>
                ) : null}
              </div>
            </div>
          ) : null}

          {showEmailSection ? (
            <div
              className="anima-cuenta__email-row"
              style={{
                width: '100%',
                display: 'flex',
                justifyContent: 'flex-start',
                alignItems: 'center',
                gap: '16px',
              }}
            >
              <BadgeContainer
                {...resolvedEmailBadgeContainerProps}
                style={{
                  flexShrink: 0,
                  transform: 'translateY(2px)',
                  ...(resolvedEmailBadgeContainerProps?.style || {}),
                }}
              >
                <Icon
                  name={emailIconName}
                  variant={emailIconVariant}
                  size={emailIconSize}
                  style={{
                    color: emailIconColor,
                    ...(emailIconStyle || {}),
                  }}
                />
              </BadgeContainer>

              <div
                className="anima-cuenta__email-text"
                style={{
                  minWidth: 0,
                  flex: '1 1 auto',
                }}
              >
                {resolvedEmailLabel ? (
                  <Typography
                    variant="body-sm"
                    className={emailLabelClassName}
                    style={{
                      fontFamily: FONT_FAMILY_SANS || 'IBM Plex Sans, sans-serif',
                      fontWeight: 400,
                      fontStyle: 'normal',
                      fontSize: '14px',
                      lineHeight: '21px',
                      letterSpacing: '1%',
                      color: 'var(--color-grey-600, #6B7280)',
                      margin: 0,
                      leadingTrim: 'none',
                      ...(emailLabelStyle || {}),
                    }}
                  >
                    {resolvedEmailLabel}
                  </Typography>
                ) : null}

                {emailValue ? (
                  <Typography
                    variant="body-md"
                    className={emailValueClassName}
                    style={{
                      fontFamily: FONT_FAMILY_SANS || 'IBM Plex Sans, sans-serif',
                      fontWeight: 400,
                      fontStyle: 'normal',
                      fontSize: '16px',
                      lineHeight: '150%',
                      letterSpacing: '0px',
                      color: '#29474C',
                      margin: 0,
                      leadingTrim: 'none',
                      ...(emailValueStyle || {}),
                    }}
                  >
                    {emailValue}
                  </Typography>
                ) : null}
              </div>
            </div>
          ) : null}

          {showChangePasswordButton ? (
            <div
              className="anima-cuenta__change-password-row"
              style={{
                width: '100%',
                display: 'flex',
                justifyContent: 'flex-start',
                alignItems: 'center',
                marginTop: '4px',
              }}
            >
              <PrimaryActionButton
                text={resolvedChangePasswordButtonText}
                variant="outline"
                fullWidth
                onClick={onChangePasswordClick}
                disabled={changePasswordButtonDisabled}
                className={changePasswordButtonClassName}
                style={{
                  backgroundColor: '#FFFFFF',
                  ...(changePasswordButtonStyle || {}),
                }}
              />
            </div>
          ) : null}
        </div>
      ) : null}

      {children ? <div style={{ width: '100%' }}>{children}</div> : null}
    </CardGrande>
  );
};

export default Cuenta;

