/**
 * Lista de opciones seleccionables (estilo radio): contenedor con borde #38656D,
 * cada ítem con círculo #F0F3FC/#334681 y texto IBM Plex Sans 14px var(--color-main-800).
 * Reutiliza FONT_FAMILY_SANS y colores del sistema.
 */
import { FONT_FAMILY_SANS } from '../../../designTokens';

const CONTAINER_STYLE = {
  width: '126px',
  minHeight: '164px',
  opacity: 1,
  borderRadius: '12px',
  border: '1px solid #38656D',
  borderTop: '1px solid #38656D',
  padding: '8px',
  background: '#FFFFFF',
  boxSizing: 'border-box',
  display: 'flex',
  flexDirection: 'column',
  gap: '4px',
};

const ITEM_STYLE = {
  width: '92px',
  minHeight: '37px',
  gap: '6px',
  opacity: 1,
  borderRadius: '8px',
  padding: '8px',
  boxSizing: 'border-box',
  display: 'flex',
  flexDirection: 'row',
  alignItems: 'center',
  cursor: 'pointer',
};

const CIRCLE_WRAPPER_STYLE = {
  paddingTop: '2px',
  paddingRight: '8px',
  paddingBottom: '4px',
  paddingLeft: '0',
  boxSizing: 'border-box',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  flexShrink: 0,
};

const CIRCLE_BASE_STYLE = {
  width: '12px',
  height: '12px',
  borderRadius: '16px',
  border: '1px solid #334681',
  background: '#F0F3FC',
  boxSizing: 'border-box',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
};

/** Variantes de color del círculo por ítem. variant = 'default' | 'success' | 'error' | 'neutral' */
export const OPTIONS_CIRCLE_VARIANTS = {
  default: { border: '1px solid #334681', background: '#F0F3FC', innerFill: '#334681' },
  success: { border: '1px solid #0A742C', background: '#D3FFDF', innerFill: '#0A742C' },
  error: { border: '1px solid #B30808', background: '#F8DBDB', innerFill: '#B30808' },
  neutral: { border: '1px solid #5F5F5F', background: '#DDDDDD', innerFill: '#5F5F5F' },
};

/** Estilo del círculo y texto cuando el ítem está deshabilitado. */
const DISABLED_OPTION_STYLE = {
  circle: { border: '1px solid #5F5F5F', background: '#DDDDDD', innerFill: '#5F5F5F' },
  textColor: '#DDDDDD',
};

const CIRCLE_SELECTED_INNER_BASE = {
  width: '6px',
  height: '6px',
  borderRadius: '50%',
};

const TEXT_STYLE = {
  fontFamily: FONT_FAMILY_SANS,
  fontWeight: 400,
  fontStyle: 'normal',
  fontSize: '14px',
  lineHeight: '21px',
  letterSpacing: '0px',
  color: 'var(--color-main-800)',
  margin: 0,
  flex: 1,
  minWidth: 0,
};

export const Options = ({
  items = [],
  value,
  onChange,
  name = 'options',
  containerStyle,
  containerClassName = '',
  itemClassName = '',
  disabled = false,
  ...props
}) => {
  return (
    <div
      className={`anima-options__container ${containerClassName}`}
      style={{ ...CONTAINER_STYLE, ...(containerStyle || {}) }}
      role="listbox"
      aria-activedescendant={value != null ? `${name}-${value}` : undefined}
      {...props}
    >
      {items.map((item) => {
        const itemValue = typeof item === 'object' && item !== null && 'value' in item ? item.value : item;
        const label = typeof item === 'object' && item !== null && 'label' in item ? item.label : String(item);
        const itemDisabled = typeof item === 'object' && item !== null && item.disabled === true;
        const variantKey =
          typeof item === 'object' && item !== null && item.variant && OPTIONS_CIRCLE_VARIANTS[item.variant]
            ? item.variant
            : 'default';
        const circleVariant = OPTIONS_CIRCLE_VARIANTS[variantKey] || OPTIONS_CIRCLE_VARIANTS.default;
        const isSelected = value !== undefined && value !== null && String(value) === String(itemValue);

        return (
          <div
            key={String(itemValue)}
            id={`${name}-${itemValue}`}
            role="option"
            aria-selected={isSelected}
            aria-disabled={itemDisabled}
            className={itemClassName}
            style={{
              ...ITEM_STYLE,
              ...(itemDisabled && { opacity: 0.9, cursor: 'not-allowed' }),
            }}
            onClick={() => !disabled && !itemDisabled && onChange && onChange(itemValue)}
            onKeyDown={(e) => {
              if (disabled || itemDisabled) return;
              if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                onChange && onChange(itemValue);
              }
            }}
          >
            <div style={CIRCLE_WRAPPER_STYLE}>
              <div
                style={{
                  ...CIRCLE_BASE_STYLE,
                  ...(itemDisabled ? DISABLED_OPTION_STYLE.circle : circleVariant),
                }}
              >
                {isSelected && !itemDisabled && (
                  <div style={{ ...CIRCLE_SELECTED_INNER_BASE, background: circleVariant.innerFill }} />
                )}
              </div>
            </div>
            <span style={{ ...TEXT_STYLE, ...(itemDisabled && { color: DISABLED_OPTION_STYLE.textColor }) }}>
              {label}
            </span>
          </div>
        );
      })}
    </div>
  );
};

export default Options;
