import { useState, useRef } from 'react';
import { IconClear } from '../icons';
import styles from './Input.module.scss';

export type InputSize = 'regular' | 'slim';

export interface InputLeadingChip {
  label: string;
  onDismiss: () => void;
}

export interface InputProps {
  /** Input value */
  value?: string;
  /** Placeholder text */
  placeholder?: string;
  /** Optional leading icon */
  leadingIcon?: React.ReactNode;
  /** Optional dismissible chip shown between the leading icon and the text field */
  leadingChip?: InputLeadingChip;
  /** Show clearable button */
  clearable?: boolean;
  /** Disabled state */
  disabled?: boolean;
  /** Read only state */
  readOnly?: boolean;
  /** Input type */
  type?: 'text' | 'email' | 'password' | 'number';
  /** Size variant - 'regular' (52px) or 'slim' (34px) */
  size?: InputSize;
  /** Change handler */
  onChange?: (value: string) => void;
  /** Focus handler */
  onFocus?: () => void;
  /** Blur handler */
  onBlur?: () => void;
  /** Clear handler */
  onClear?: () => void;
  /** Key down handler */
  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
  /** Additional CSS classes */
  className?: string;
  /** Input name attribute */
  name?: string;
  /** Input id attribute */
  id?: string;
}

export const Input = ({
  value = '',
  placeholder = '',
  leadingIcon,
  leadingChip,
  clearable = false,
  disabled = false,
  readOnly = false,
  type = 'text',
  size = 'regular',
  onChange,
  onFocus,
  onBlur,
  onClear,
  onKeyDown,
  className = '',
  name,
  id,
}: InputProps) => {
  const [isFocused, setIsFocused] = useState(false);
  const [isHovered, setIsHovered] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    onChange?.(e.target.value);
  };

  const handleFocus = () => {
    setIsFocused(true);
    onFocus?.();
  };

  const handleBlur = () => {
    setIsFocused(false);
    onBlur?.();
  };

  const handleClear = () => {
    onChange?.('');
    onClear?.();
    inputRef.current?.focus();
  };

  const containerClassName = [
    styles.container,
    size === 'slim' && styles.slim,
    isFocused && styles.focused,
    isHovered && !isFocused && styles.hovered,
    disabled && styles.disabled,
    className,
  ]
    .filter(Boolean)
    .join(' ');

  const showClearIcon = clearable && value && (isFocused || isHovered) && !disabled;

  return (
    <div
      className={containerClassName}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {leadingIcon && <span className={styles.leadingIcon}>{leadingIcon}</span>}

      {leadingChip && (
        <span className={styles.leadingChip}>
          {leadingChip.label}
          <button
            type="button"
            className={styles.leadingChipDismiss}
            onClick={leadingChip.onDismiss}
            aria-label={`Clear ${leadingChip.label} mode`}
            tabIndex={-1}
          >
            ×
          </button>
        </span>
      )}

      <input
        ref={inputRef}
        type={type}
        value={value}
        placeholder={placeholder}
        disabled={disabled}
        readOnly={readOnly}
        onChange={handleChange}
        onFocus={handleFocus}
        onBlur={handleBlur}
        onKeyDown={onKeyDown}
        className={styles.field}
        name={name}
        id={id}
      />

      {showClearIcon && (
        <button
          type="button"
          className={styles.clearButton}
          onClick={handleClear}
          aria-label="Clear input"
          tabIndex={-1}
        >
          <IconClear size={size === 'slim' ? 14 : 18} />
        </button>
      )}
    </div>
  );
};