import { Typography } from '../../Atoms/Typography/Typography';
import { Icon } from '../../Atoms/Icon/Icon';
import { Button } from '../../Atoms/Button/Button';
import { FONT_FAMILY_SANS } from '../../../designTokens';

export const IdentidadVisual = ({
  isNarrow = false,
  identidadVisualTitle = '',
  identidadVisualTitleStyle,
  identidadVisualTitleClassName = '',
  marcaActualTitle = '',
  marcaActualTitleStyle,
  marcaActualTitleClassName = '',
  marcaActualImage,
  marcaActualImageAlt = '',
  marcaActualNucleusText = '',
  marcaActualNucleusTextStyle,
  marcaActualNucleusTextClassName = '',
  formatoText = 'Formato cuadrado\nPNG de máximo 2Mb',
  formatoTextStyle,
  formatoTextClassName = '',
  uploadButtonText = 'Subir imagen',
  uploadButtonOnClick,
  uploadButtonStyle,
  uploadButtonClassName = '',
  containerStyle,
  containerClassName = '',
  ...props
}) => {
  return (
    <div
      className={`anima-identidadvisual__container ${containerClassName}`}
      style={{
        width: '100%',
        ...(isNarrow ? { minHeight: 0, paddingBottom: 0 } : { minHeight: '256px', paddingBottom: '24px' }),
        gap: '12px',
        opacity: 1,
        boxSizing: 'border-box',
        display: 'flex',
        flexDirection: 'column',
        ...(containerStyle || {}),
      }}
      {...props}
    >
      {identidadVisualTitle && (
        <div style={{ width: '100%', minHeight: 0, opacity: 1, boxSizing: 'border-box' }}>
          <Typography
            variant="body-sm"
            className={identidadVisualTitleClassName}
            style={{
              fontFamily: FONT_FAMILY_SANS,
              fontWeight: 500,
              fontStyle: 'normal',
              fontSize: '14px',
              lineHeight: '21px',
              letterSpacing: '0.01em',
              color: 'var(--color-main-800)',
              margin: 0,
              ...(identidadVisualTitleStyle || {}),
            }}
          >
            {identidadVisualTitle}
          </Typography>
        </div>
      )}

      {isNarrow ? (
        <>
          {/* Narrow: marca actual = [logo box] + texto en fila, centrado */}
          <div
            style={{
              width: '100%',
              display: 'flex',
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'center',
              gap: '12px',
              minWidth: 0,
            }}
          >
            <div
              style={{
                width: '56px',
                height: '56px',
                flexShrink: 0,
                borderRadius: '12px',
                border: '1px solid #38656D',
                backgroundColor: '#FFFFFF',
                boxSizing: 'border-box',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                overflow: 'hidden',
              }}
            >
              {marcaActualImage ? (
                <img
                  src={marcaActualImage}
                  alt={marcaActualImageAlt}
                  style={{ width: '100%', height: '100%', objectFit: 'contain' }}
                />
              ) : (
                <Typography
                  variant="mono-lg"
                  className={marcaActualNucleusTextClassName}
                  style={{
                    fontFamily: FONT_FAMILY_SANS,
                    fontWeight: 500,
                    fontSize: '24px',
                    lineHeight: '24px',
                    color: '#38656D',
                    margin: 0,
                    ...(marcaActualNucleusTextStyle || {}),
                  }}
                >
                  {marcaActualNucleusText}
                </Typography>
              )}
            </div>
            {marcaActualTitle && (
              <Typography
                variant="body-md"
                className={marcaActualTitleClassName}
                style={{
                  fontFamily: FONT_FAMILY_SANS,
                  fontWeight: 500,
                  fontSize: '16px',
                  lineHeight: '24px',
                  color: 'var(--color-cyan-19)',
                  margin: 0,
                  ...(marcaActualTitleStyle || {}),
                }}
              >
                {marcaActualTitle}
              </Typography>
            )}
          </div>

          {/* Narrow: formato = fila [icono] [texto], luego botón a la derecha */}
          <div
            style={{
              width: '100%',
              padding: '16px',
              borderRadius: '16px',
              backgroundColor: '#F0F3FC',
              boxSizing: 'border-box',
              display: 'flex',
              flexDirection: 'column',
              gap: '12px',
            }}
          >
            <div
              style={{
                display: 'flex',
                flexDirection: 'row',
                alignItems: 'center',
                gap: '12px',
                minWidth: 0,
              }}
            >
              <div
                style={{
                  width: '48px',
                  height: '48px',
                  flexShrink: 0,
                  borderRadius: '8px',
                  border: '1.5px dashed #38656D',
                  boxSizing: 'border-box',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <Icon
                  name="PhotoIcon"
                  size={24}
                  style={{ width: '24px', height: '24px', color: 'var(--color-main-800)', opacity: 1 }}
                />
              </div>
              {formatoText && (
                <Typography
                  variant="body-sm"
                  className={formatoTextClassName}
                  style={{
                    flex: 1,
                    fontFamily: FONT_FAMILY_SANS,
                    fontWeight: 400,
                    fontSize: '14px',
                    lineHeight: '21px',
                    letterSpacing: '0.01em',
                    color: '#5F5F5F',
                    margin: 0,
                    whiteSpace: 'pre-line',
                    ...(formatoTextStyle || {}),
                  }}
                >
                  {formatoText}
                </Typography>
              )}
            </div>
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <Button
                onClick={uploadButtonOnClick}
                className={uploadButtonClassName}
                style={{
                  width: '110px',
                  height: '37px',
                  padding: '8px 12px',
                  borderRadius: '8px',
                  backgroundColor: '#38656D',
                  border: 'none',
                  boxSizing: 'border-box',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  cursor: 'pointer',
                  ...(uploadButtonStyle || {}),
                }}
              >
                <Typography
                  variant="body-sm"
                  style={{
                    fontFamily: FONT_FAMILY_SANS,
                    fontWeight: 500,
                    fontSize: '14px',
                    lineHeight: '21px',
                    letterSpacing: '0.01em',
                    color: '#FFFFFF',
                    margin: 0,
                    textAlign: 'center',
                  }}
                >
                  {uploadButtonText}
                </Typography>
              </Button>
            </div>
          </div>
        </>
      ) : (
        <>
          {/* Desktop: marca actual (card) + formato (columna) en fila */}
          <div
            style={{
              width: '100%',
              minHeight: '199px',
              gap: '40px',
              opacity: 1,
              boxSizing: 'border-box',
              display: 'flex',
              flexDirection: 'row',
              alignItems: 'flex-start',
              flexWrap: 'nowrap',
              minWidth: 0,
            }}
          >
            <div
              style={{
                flex: '0 0 170px',
                minWidth: 0,
                maxWidth: '170px',
                height: '196px',
                paddingTop: '16px',
                paddingRight: '36px',
                paddingBottom: '16px',
                paddingLeft: '36px',
                gap: '32px',
                borderRadius: '20px',
                backgroundColor: '#FFFFFF',
                opacity: 1,
                boxSizing: 'border-box',
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                overflow: 'hidden',
              }}
            >
              {marcaActualTitle && (
                <div style={{ width: '98px', minHeight: '24px', paddingLeft: '4px', opacity: 1, boxSizing: 'border-box' }}>
                  <Typography
                    variant="body-md"
                    className={marcaActualTitleClassName}
                    style={{
                      width: '94px',
                      minHeight: '24px',
                      fontFamily: FONT_FAMILY_SANS,
                      fontWeight: 500,
                      fontStyle: 'normal',
                      fontSize: '16px',
                      lineHeight: '24px',
                      letterSpacing: '0px',
                      color: 'var(--color-cyan-19)',
                      margin: 0,
                      ...(marcaActualTitleStyle || {}),
                    }}
                  >
                    {marcaActualTitle}
                  </Typography>
                </div>
              )}
              <div
                style={{
                  width: '72px',
                  height: '128px',
                  gap: '10px',
                  opacity: 1,
                  boxSizing: 'border-box',
                  display: 'inline-flex',
                  flexDirection: 'column',
                  alignItems: 'center',
                }}
              >
                <div
                  style={{
                    width: '72px',
                    height: '72px',
                    borderRadius: '16px',
                    borderWidth: '1px',
                    borderStyle: 'solid',
                    borderColor: '#38656D',
                    padding: '16px',
                    backgroundColor: '#FFFFFF',
                    opacity: 1,
                    boxSizing: 'border-box',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    overflow: 'hidden',
                  }}
                >
                  {marcaActualImage ? (
                    <img
                      src={marcaActualImage}
                      alt={marcaActualImageAlt}
                      style={{ width: '100%', height: '100%', objectFit: 'contain' }}
                    />
                  ) : (
                    <Typography
                      variant="mono-lg"
                      className={marcaActualNucleusTextClassName}
                      style={{
                        width: '23px',
                        minHeight: '24px',
                        fontFamily: FONT_FAMILY_SANS,
                        fontWeight: 500,
                        fontStyle: 'normal',
                        fontSize: '32px',
                        lineHeight: '24px',
                        letterSpacing: '0px',
                        color: '#38656D',
                        margin: 0,
                        ...(marcaActualNucleusTextStyle || {}),
                      }}
                    >
                      {marcaActualNucleusText}
                    </Typography>
                  )}
                </div>
              </div>
            </div>
            <div
              style={{
                flex: '1 1 0',
                minWidth: 0,
                minHeight: '199px',
                paddingTop: '20px',
                paddingRight: '12px',
                paddingBottom: '20px',
                paddingLeft: '12px',
                gap: '16px',
                borderRadius: '16px',
                backgroundColor: '#F0F3FC',
                opacity: 1,
                boxSizing: 'border-box',
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
                overflow: 'hidden',
              }}
            >
              <div
                style={{
                  width: '48px',
                  height: '48px',
                  borderRadius: '8px',
                  borderWidth: '1.5px',
                  borderStyle: 'dashed',
                  borderColor: '#38656D',
                  padding: '16px',
                  opacity: 1,
                  boxSizing: 'border-box',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  position: 'relative',
                }}
              >
                <div style={{ width: '24px', height: '24px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon
                    name="PhotoIcon"
                    size={24}
                    style={{ width: '24px', height: '24px', color: 'var(--color-main-800)', opacity: 1 }}
                  />
                </div>
              </div>
              {formatoText && (
                <div style={{ width: '194px', minHeight: '42px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Typography
                    variant="body-sm"
                    className={formatoTextClassName}
                    style={{
                      width: '135px',
                      minHeight: '42px',
                      fontFamily: FONT_FAMILY_SANS,
                      fontWeight: 400,
                      fontStyle: 'normal',
                      fontSize: '14px',
                      lineHeight: '21px',
                      letterSpacing: '1%',
                      textAlign: 'center',
                      color: '#5F5F5F',
                      margin: 0,
                      whiteSpace: 'pre-line',
                      ...(formatoTextStyle || {}),
                    }}
                  >
                    {formatoText}
                  </Typography>
                </div>
              )}
              <Button
                onClick={uploadButtonOnClick}
                className={uploadButtonClassName}
                style={{
                  width: '110px',
                  height: '37px',
                  paddingTop: '8px',
                  paddingRight: '12px',
                  paddingBottom: '8px',
                  paddingLeft: '12px',
                  borderRadius: '8px',
                  backgroundColor: '#38656D',
                  border: 'none',
                  opacity: 1,
                  boxSizing: 'border-box',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  cursor: 'pointer',
                  ...(uploadButtonStyle || {}),
                }}
              >
                <Typography
                  variant="body-sm"
                  style={{
                    width: '86px',
                    minHeight: '21px',
                    fontFamily: FONT_FAMILY_SANS,
                    fontWeight: 500,
                    fontStyle: 'normal',
                    fontSize: '14px',
                    lineHeight: '21px',
                    letterSpacing: '1%',
                    color: '#FFFFFF',
                    margin: 0,
                    textAlign: 'center',
                  }}
                >
                  {uploadButtonText}
                </Typography>
              </Button>
            </div>
          </div>
        </>
      )}
    </div>
  );
};

export default IdentidadVisual;
