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

const TITLE_STYLE_SMALL = {
  fontFamily: FONT_FAMILY_SANS,
  fontWeight: 400,
  fontStyle: 'normal',
  fontSize: '14px',
  lineHeight: '21px',
  letterSpacing: '0.01em',
  color: '#29474C',
  margin: 0,
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
};

const TITLE_STYLE_DEFAULT = {
  fontFamily: FONT_FAMILY_SANS,
  fontWeight: 400,
  fontStyle: 'normal',
  fontSize: '20px',
  lineHeight: '30px',
  letterSpacing: '0%',
  verticalAlign: 'middle',
  color: 'var(--color-cyan-19)',
  margin: 0,
};

/**
 * Contenido unificado de Card: header (title + status opcional), body (children), footer (actions opcional).
 * Soporta titleVariant 'default' (20px) o 'small' (14px) y status como texto o Badge.
 */
export const CardContent = ({
  title = 'Notificaciones',
  titleVariant = 'default',
  status = null,
  statusAsBadge = false,
  statusVariant = 'default',
  children = null,
  actions = null,
  width,
  height,
  onClick,
  ariaLabel,
  className = '',
  style = {},
  ...props
}) => {
  const hasActions = actions != null;
  const isInteractive = typeof onClick === 'function';

  const containerStyle = {
    borderRadius: '14px',
    border: '1px solid #C4C4C4',
    backgroundColor: 'var(--color-white-solid, #FFFFFF)',
    opacity: 1,
    display: 'flex',
    flexDirection: 'column',
    boxSizing: 'border-box',
    ...(width != null && { width: typeof width === 'number' ? `${width}px` : width }),
    ...(height != null && { height: typeof height === 'number' ? `${height}px` : height }),
    ...(height == null && { minHeight: '476px' }),
    ...(isInteractive && { cursor: 'pointer' }),
    ...style,
  };

  const handleKeyDown = (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      onClick?.(e);
    }
  };

  const titleStyle = titleVariant === 'small' ? TITLE_STYLE_SMALL : TITLE_STYLE_DEFAULT;

  return (
    <div
      className={`bg-white w-full ${className}`}
      style={containerStyle}
      role={isInteractive ? 'button' : undefined}
      tabIndex={isInteractive ? 0 : undefined}
      onClick={isInteractive ? onClick : undefined}
      onKeyDown={isInteractive ? handleKeyDown : undefined}
      aria-label={isInteractive ? ariaLabel : undefined}
      {...props}
    >
      {/* Header: title + status */}
      <div
        style={{
          paddingTop: '24px',
          paddingRight: '24px',
          paddingBottom: '6px',
          paddingLeft: '24px',
          opacity: 1,
          flexShrink: 0,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
        }}
      >
        <div style={{ flex: 1, minWidth: 0, opacity: 1 }}>
          <Typography component="span" style={titleStyle}>
            {title}
          </Typography>
        </div>
        {status != null && status !== '' && (
          statusAsBadge ? (
            <Badge variant={statusVariant} size="medium">
              {status}
            </Badge>
          ) : (
            <span
              style={{
                minWidth: '90px',
                height: '24px',
                borderRadius: '12px',
                paddingTop: '2px',
                paddingRight: '12px',
                paddingBottom: '4px',
                paddingLeft: '12px',
                backgroundColor: '#E6F7F0',
                color: '#2D5C63',
                opacity: 1,
                fontSize: '14px',
                fontWeight: 500,
                flexShrink: 0,
                marginLeft: 8,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              {status}
            </span>
          )
        )}
      </div>

      {/* Body */}
      {children != null && (
        <div
          style={{
            flex: 1,
            paddingTop: titleVariant === 'small' ? 16 : '24px',
            paddingRight: titleVariant === 'small' ? 23 : '24px',
            paddingLeft: titleVariant === 'small' ? 23 : '24px',
            paddingBottom: hasActions ? '0' : '24px',
            gap: '16px',
            opacity: 1,
            display: 'flex',
            flexDirection: 'column',
            minHeight: 0,
            overflow: 'auto',
          }}
        >
          {children}
        </div>
      )}

      {/* Footer (actions) - mismos estilos que CardsEmpresas */}
      {hasActions && (
        <div
          style={{
            minHeight: 26,
            height: 'auto',
            gap: 12,
            opacity: 1,
            margin: '0 24px 24px 24px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'flex-end',
            flexWrap: 'nowrap',
            flexShrink: 0,
          }}
        >
          {actions}
        </div>
      )}
    </div>
  );
};

export default CardContent;
