/**
 * Input con estilo primary del design system (Config Marca Tenant / formularios config).
 * 42px altura, borde #38656D, IBM Plex Sans. Soporta label opcional, error (estilo reutilizable) y overrides por props.
 */
import { useState } from 'react';
import { FONT_FAMILY_SANS, INPUT_ERROR_TEXT_STYLE, COLOR_INPUT_ERROR } from '../../../designTokens';

/** Clase para estilos globales del placeholder (ver `style.css`). */
const PRIMARY_INPUT_FIELD_CLASS = 'anima-primary-input__field';

export const PrimaryInput = ({
  label = '',
  labelStyle,
  labelClassName = '',
  placeholder = '',
  type = 'text',
  value,
  defaultValue,
  onChange,
  disabled = false,
  error = '',
  /** Se fusiona con el estilo del texto bajo el input (p. ej. mismatch en NewPassword). */
  errorTextStyle,
  required = false,
  showRequiredIndicator = true,
  className = '',
  style = {},
  id,
  name,
  clearPlaceholderOnFocus = false,
  focusBorderOnFocus = false,
  focusBorderColor = '#38656D',
  onFocus,
  onBlur,
  ...props
}) => {
  const [isFocused, setIsFocused] = useState(false);

  const handleFocus = (event) => {
    setIsFocused(true);
    if (typeof onFocus === 'function') onFocus(event);
  };

  const handleBlur = (event) => {
    setIsFocused(false);
    if (typeof onBlur === 'function') onBlur(event);
  };

  const baseInputStyle = {
    width: '100%',
    height: '42px',
    paddingTop: '10px',
    paddingRight: '12px',
    paddingBottom: '10px',
    paddingLeft: '12px',
    borderRadius: '8px',
    borderWidth: error ? '2px' : '1px',
    borderStyle: 'solid',
    borderColor: error ? COLOR_INPUT_ERROR : '#38656D',
    backgroundColor: '#FFFFFF',
    fontFamily: FONT_FAMILY_SANS,
    fontWeight: 400,
    fontStyle: 'normal',
    fontSize: '16px',
    lineHeight: '24px',
    letterSpacing: '0px',
    color: 'var(--color-main-800)',
    boxSizing: 'border-box',
    outline: 'none',
    ...(focusBorderOnFocus && isFocused && !error
      ? {
          borderWidth: '2px',
          borderStyle: 'solid',
          borderColor: focusBorderColor,
        }
      : {}),
    ...(disabled && { backgroundColor: '#F3F4F6', cursor: 'not-allowed' }),
    ...style,
  };

  const isControlled = value !== undefined && onChange != null;

  return (
    <div style={{ width: '100%' }}>
      {label && (
        <label
          htmlFor={id}
          className={labelClassName}
          style={{
            display: 'block',
            marginBottom: '8px',
            fontFamily: FONT_FAMILY_SANS,
            fontWeight: 500,
            fontSize: '14px',
            lineHeight: '21px',
            letterSpacing: '0.01em',
            color: 'var(--color-main-800)',
            ...(labelStyle || {}),
          }}
        >
          {label}
          {required && showRequiredIndicator && <span style={{ color: '#000000', marginLeft: '4px' }}>*</span>}
        </label>
      )}
      <input
        type={type}
        id={id}
        name={name}
        placeholder={clearPlaceholderOnFocus && isFocused ? '' : placeholder}
        disabled={disabled}
        required={required}
        {...(isControlled ? { value, onChange } : { defaultValue })}
        className={[PRIMARY_INPUT_FIELD_CLASS, className].filter(Boolean).join(' ')}
        style={baseInputStyle}
        onFocus={handleFocus}
        onBlur={handleBlur}
        {...props}
      />
      {error && (
        <p
          style={{
            margin: '4px 0 0',
            ...INPUT_ERROR_TEXT_STYLE,
            ...(errorTextStyle || {}),
          }}
        >
          {error}
        </p>
      )}
    </div>
  );
};

export default PrimaryInput;
