/**
 * Input Component - ProRank SEO
 *
 * Shared text input primitive backed by the shipped ProRank form styles.
 */

import React from 'react';
import clsx from 'clsx';

const sizeStyles = {
  sm: { fontSize: '13px', padding: '7px 12px' },
  md: { fontSize: '14px', padding: '8px 12px' },
  lg: { fontSize: '16px', padding: '10px 14px' },
};

const Input = React.forwardRef(({
  label,
  id,
  name,
  type = 'text',
  placeholder,
  value,
  onChange,
  onBlur,
  error,
  helperText,
  disabled = false,
  required = false,
  className = '',
  inputClassName = '',
  leftIcon: LeftIcon,
  rightIcon: RightIcon,
  fullWidth = true,
  size = 'md',
  ...props
}, ref) => {
  const inputId = id || name || `input-${Math.random().toString(36).slice(2, 11)}`;
  const hasError = Boolean(error);
  const spacing = sizeStyles[size] || sizeStyles.md;

  const wrapperStyle = {
    display: 'grid',
    gap: '8px',
    width: fullWidth ? '100%' : undefined,
    opacity: disabled ? 0.6 : 1,
  };

  const inputStyle = {
    ...spacing,
    paddingLeft: LeftIcon ? '38px' : spacing.padding.split(' ')[1],
    paddingRight: RightIcon ? '38px' : spacing.padding.split(' ')[1],
  };

  const iconStyle = {
    position: 'absolute',
    top: '50%',
    transform: 'translateY(-50%)',
    display: 'flex',
    alignItems: 'center',
    color: hasError ? '#dc2626' : '#6b7280',
    pointerEvents: 'none',
  };

  return (
    <div className={className} style={wrapperStyle}>
      {label && (
        <label
          htmlFor={inputId}
          style={{
            fontSize: '13px',
            fontWeight: 600,
            color: hasError ? '#b91c1c' : '#374151',
          }}
        >
          {label}
          {required && <span style={{ color: '#dc2626', marginLeft: 4 }}>*</span>}
        </label>
      )}

      <div style={{ position: 'relative' }}>
        {LeftIcon && (
          <div style={{ ...iconStyle, left: '12px' }}>
            <LeftIcon style={{ width: 16, height: 16 }} />
          </div>
        )}

        <input
          ref={ref}
          id={inputId}
          name={name}
          type={type}
          value={value}
          onChange={(event) => onChange?.(event.target.value)}
          onBlur={onBlur}
          placeholder={placeholder}
          disabled={disabled}
          required={required}
          aria-invalid={hasError}
          aria-describedby={
            error ? `${inputId}-error` : helperText ? `${inputId}-helper` : undefined
          }
          className={clsx('prorank-input', { error: hasError }, inputClassName)}
          style={inputStyle}
          {...props}
        />

        {RightIcon && (
          <div style={{ ...iconStyle, right: '12px' }}>
            <RightIcon style={{ width: 16, height: 16 }} />
          </div>
        )}
      </div>

      {error && (
        <p
          id={`${inputId}-error`}
          role="alert"
          style={{ margin: 0, fontSize: '12px', color: '#b91c1c' }}
        >
          {error}
        </p>
      )}

      {helperText && !error && (
        <p
          id={`${inputId}-helper`}
          style={{ margin: 0, fontSize: '12px', color: '#6b7280' }}
        >
          {helperText}
        </p>
      )}
    </div>
  );
});

Input.displayName = 'Input';

export default Input;