import { Typography } from '../../Atoms/Typography/Typography';
import { Badge } from '../../Atoms/Badge/Badge';
import { Skeleton } from '../../Atoms/Skeleton/Skeleton';
import { FONT_FAMILY_SANS } from '../../../designTokens';

export const TenantActive = ({
  // Estado de carga (skeleton)
  loading = false,
  // Sección izquierda: ID Tenant
  idTenantLabel = 'ID TENANT',
  idTenantLabelStyle,
  idTenantLabelClassName = '',
  idTenantValue = '',
  idTenantValueStyle,
  idTenantValueClassName = '',
  idTenantBadgeBorderColor = '#334681',
  idTenantBadgeBackgroundColor = '#F0F3FC',
  idTenantBadgeStyle,
  idTenantBadgeClassName = '',
  
  // Sección derecha: Estado Tenant
  estadoTenantLabel = 'ESTADO TENANT',
  estadoTenantLabelStyle,
  estadoTenantLabelClassName = '',
  estadoTenantValue = '',
  estadoTenantValueStyle,
  estadoTenantValueClassName = '',
  estadoTenantBadgeBorderColor = '#0A742C',
  estadoTenantBadgeBackgroundColor = 'transparent',
  estadoTenantBadgeStyle,
  estadoTenantBadgeClassName = '',
  
  // Contenedores
  containerStyle,
  containerClassName = '',
  contentContainerStyle,
  contentContainerClassName = '',
  itemsContainerStyle,
  itemsContainerClassName = '',
  leftSectionStyle,
  leftSectionClassName = '',
  rightSectionStyle,
  rightSectionClassName = '',
  
  // Breakpoints (resolución): por defecto 1023 (columna) y 380 (reducir padding)
  breakpointColumnMaxPx = 1023,
  breakpointPaddingReduceMaxPx = 380,
  
  className = '',
  ...props
}) => {
  return (
    <div
      className={`anima-tenantactive__container ${containerClassName} ${className}`}
      style={{
        width: '100%',
        minHeight: '56px',
        paddingTop: '16px',
        paddingRight: '24px',
        paddingBottom: '16px',
        paddingLeft: '24px',
        borderRadius: '16px',
        border: '1px solid rgb(196, 196, 196)',
        backgroundColor: '#FFFFFF',
        opacity: 1,
        boxSizing: 'border-box',
        overflow: 'hidden',
        ...(containerStyle || {}),
      }}
      {...props}
    >
      <style>{`
        @media (max-width: ${breakpointColumnMaxPx}px) {
          .anima-tenantactive__items {
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 20px !important;
          }
          .anima-tenantactive__left-section,
          .anima-tenantactive__right-section {
            width: 100% !important;
            min-width: 0 !important;
          }
          .anima-tenantactive__left-section {
            justify-content: space-between;
          }
          .anima-tenantactive__right-section {
            justify-content: space-between;
          }
          .anima-tenantactive__badge {
            min-width: 0 !important;
          }
        }
        @media (max-width: ${breakpointPaddingReduceMaxPx}px) {
          .anima-tenantactive__container {
            padding-left: 12px !important;
            padding-right: 12px !important;
          }
        }
      `}</style>
      {/* Contenedor del contenido */}
      <div
        className={`anima-tenantactive__content ${contentContainerClassName}`}
        style={{
          width: '100%',
          minHeight: '24px',
          opacity: 1,
          boxSizing: 'border-box',
          ...(contentContainerStyle || {}),
        }}
      >
        {/* Contenedor de ambos items (flex, uno al lado del otro; en mobile columna: fila 1 = ID, fila 2 = Estado) */}
        <div
          className={`anima-tenantactive__items ${itemsContainerClassName}`}
          style={{
            width: '100%',
            minHeight: '24px',
            display: 'flex',
            flexDirection: 'row',
            gap: '24px',
            alignItems: 'center',
            justifyContent: 'space-between',
            flexWrap: 'wrap',
            boxSizing: 'border-box',
            ...(itemsContainerStyle || {}),
          }}
        >
          {loading ? (
            <>
              {/* Skeleton: sección izquierda — texto (label) + badge */}
              <div
                className={`anima-tenantactive__left-section ${leftSectionClassName}`}
                style={{
                  display: 'flex',
                  flexDirection: 'row',
                  alignItems: 'center',
                  gap: '24px',
                  flex: '1 1 auto',
                  minWidth: 0,
                  boxSizing: 'border-box',
                  ...(leftSectionStyle || {}),
                }}
              >
                <Skeleton variant="rectangular" height={21} width={90} />
                <Skeleton variant="rectangular" height={24} width={168} />
              </div>
              {/* Skeleton: sección derecha — texto (label) + badge */}
              <div
                className={`anima-tenantactive__right-section ${rightSectionClassName}`}
                style={{
                  display: 'flex',
                  flexDirection: 'row',
                  alignItems: 'center',
                  gap: '24px',
                  flex: '1 1 auto',
                  minWidth: 0,
                  boxSizing: 'border-box',
                  ...(rightSectionStyle || {}),
                }}
              >
                <Skeleton variant="rectangular" height={21} width={130} />
                <Skeleton variant="rectangular" height={24} width={168} />
              </div>
            </>
          ) : (
            <>
          {/* Contenedor izquierdo: ID TENANT */}
          <div
            className={`anima-tenantactive__left-section ${leftSectionClassName}`}
            style={{
              display: 'flex',
              flexDirection: 'row',
              alignItems: 'center',
              gap: '24px',
              flex: '1 1 auto',
              minWidth: 0,
              boxSizing: 'border-box',
              ...(leftSectionStyle || {}),
            }}
          >
            {/* Label ID TENANT */}
            {idTenantLabel && (
              <Typography
                variant="body-md"
                className={idTenantLabelClassName}
                style={{
                  fontFamily: FONT_FAMILY_SANS,
                  fontWeight: 400,
                  fontStyle: 'normal',
                  fontSize: '14px',
                  lineHeight: '21px',
                  letterSpacing: '1%',
                  textTransform: 'uppercase',
                  color: 'var(--color-main-800)',
                  whiteSpace: 'nowrap',
                  flexShrink: 0,
                  ...(idTenantLabelStyle || {}),
                }}
              >
                {idTenantLabel}
              </Typography>
            )}
            
            {/* Badge ID Tenant */}
            {idTenantValue && (
              <Badge
                variant="primary"
                size="medium"
                className={`anima-tenantactive__badge anima-tenantactive__badge-id ${idTenantBadgeClassName}`}
                style={{
                  minWidth: '168px',
                  flexShrink: 0,
                  justifyContent: 'flex-end',
                  ...(idTenantBadgeStyle || {}),
                }}
              >
                {idTenantValue}
              </Badge>
            )}
          </div>
          
          {/* Contenedor derecho: ESTADO TENANT */}
          <div
            className={`anima-tenantactive__right-section ${rightSectionClassName}`}
            style={{
              display: 'flex',
              flexDirection: 'row',
              alignItems: 'center',
              gap: '24px',
              flex: '1 1 auto',
              minWidth: 0,
              boxSizing: 'border-box',
              ...(rightSectionStyle || {}),
            }}
          >
            {/* Label ESTADO TENANT */}
            {estadoTenantLabel && (
              <Typography
                variant="body-md"
                className={estadoTenantLabelClassName}
                style={{
                  fontFamily: FONT_FAMILY_SANS,
                  fontWeight: 400,
                  fontStyle: 'normal',
                  fontSize: '14px',
                  lineHeight: '21px',
                  letterSpacing: '1%',
                  textTransform: 'uppercase',
                  color: 'var(--color-main-800)',
                  whiteSpace: 'nowrap',
                  flexShrink: 0,
                  ...(estadoTenantLabelStyle || {}),
                }}
              >
                {estadoTenantLabel}
              </Typography>
            )}
            
            {/* Badge Estado Tenant */}
            {estadoTenantValue && (
              <Badge
                variant="successOutline"
                size="medium"
                className={`anima-tenantactive__badge anima-tenantactive__badge-estado ${estadoTenantBadgeClassName}`}
                style={{
                  minWidth: '168px',
                  flexShrink: 0,
                  justifyContent: 'flex-end',
                  ...(estadoTenantBadgeStyle || {}),
                }}
              >
                {estadoTenantValue}
              </Badge>
            )}
          </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
};

export default TenantActive;
