Input

'use client';

import { useState, useId, forwardRef, type InputHTMLAttributes, type ReactNode } from 'react';
import { HugeiconsIcon } from '@hugeicons/react';
import { Cancel01Icon } from '@hugeicons/core-free-icons';
import {
  type InputVariant,
  type InputState,
  type InputSize,
  variantStyles,
  sizeStyles,
  stateColors,
} from './input-shared';

export type { InputVariant, InputState, InputSize } from './input-shared';

export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
  variant?: InputVariant;
  state?: InputState;
  inputSize?: InputSize;
  label?: string;
  helperText?: string;
  errorText?: string;
  successText?: string;
  warningText?: string;
  prefixIcon?: ReactNode;
  suffixIcon?: ReactNode;
  prefix?: string;
  suffix?: string;
  showCharCount?: boolean;
  maxLength?: number;
  fullWidth?: boolean;
  clearable?: boolean;
  onClear?: () => void;
  containerClassName?: string;
}

export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
  {
    variant = 'default',
    state = 'default',
    inputSize = 'md',
    label,
    helperText,
    errorText,
    successText,
    warningText,
    prefixIcon,
    suffixIcon,
    prefix,
    suffix,
    showCharCount = false,
    maxLength,
    fullWidth = true,
    clearable = false,
    onClear,
    containerClassName = '',
    className = '',
    disabled,
    value,
    defaultValue,
    onChange,
    id,
    ...rest
  },
  ref
) {
  const [internalValue, setInternalValue] = useState(defaultValue?.toString() || '');
  const currentValue = value !== undefined ? value.toString() : internalValue;
  const charCount = currentValue.length;
  const showClear = clearable && charCount > 0 && !disabled;

  const autoId = useId();
  const inputId = id || `input-${autoId}`;
  const feedbackId = `${inputId}-feedback`;

  const activeState = disabled ? 'default' : state;
  const feedbackText = errorText || successText || warningText || helperText;
  const feedbackState = errorText ? 'error' : successText ? 'success' : warningText ? 'warning' : 'default';
  const isInvalid = feedbackState === 'error' || activeState === 'error';

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

  const handleClear = () => {
    if (value === undefined) {
      setInternalValue('');
    }
    onClear?.();
  };

  return (
    <div className={`${fullWidth ? 'w-full' : 'inline-flex flex-col'} ${containerClassName}`}>
      {label && (
        <label
          htmlFor={inputId}
          className={`block font-medium text-(--text) mb-1.5 ${sizeStyles[inputSize].label}`}
        >
          {label}
        </label>
      )}
      <div className="relative flex items-center">
        {prefix && (
          <span className="absolute left-0 flex items-center justify-center h-full px-3 text-(--text-muted) text-sm border-r border-(--border) bg-(--surface-sunken) rounded-l-lg">
            {prefix}
          </span>
        )}
        {prefixIcon && !prefix && (
          <span className="absolute left-3 flex items-center text-(--text-muted)">
            {prefixIcon}
          </span>
        )}
        <input
          ref={ref}
          id={inputId}
          value={value}
          defaultValue={value === undefined ? defaultValue : undefined}
          onChange={handleChange}
          maxLength={maxLength}
          disabled={disabled}
          aria-invalid={isInvalid || undefined}
          aria-describedby={feedbackText ? feedbackId : undefined}
          className={[
            'w-full rounded-lg outline-none transition-colors text-(--text)',
            variantStyles[variant][activeState],
            sizeStyles[inputSize].input,
            disabled ? 'opacity-50 cursor-not-allowed' : '',
            prefixIcon && !prefix ? 'pl-10' : '',
            prefix ? 'pl-16' : '',
            suffixIcon || (showCharCount && maxLength) ? 'pr-10' : '',
            showClear && !suffixIcon ? 'pr-9' : '',
            showClear && suffixIcon ? 'pr-16' : '',
            suffix ? 'pr-16' : '',
            className,
          ].filter(Boolean).join(' ')}
          {...rest}
        />
        {showClear && (
          <button
            type="button"
            onClick={handleClear}
            aria-label="Clear input"
            className={`absolute ${suffixIcon ? 'right-9' : 'right-2'} p-1 rounded-md text-(--text-muted) hover:text-(--text) hover:bg-(--surface-sunken) transition-colors focus-visible:outline-2 focus-visible:outline-(--ring) focus-visible:outline-offset-2`}
          >
            <HugeiconsIcon icon={Cancel01Icon} size={14} aria-hidden="true" />
          </button>
        )}
        {suffixIcon && (
          <span className="absolute right-3 flex items-center text-(--text-muted)">
            {suffixIcon}
          </span>
        )}
        {suffix && (
          <span className="absolute right-0 flex items-center justify-center h-full px-3 text-(--text-muted) text-sm border-l border-(--border) bg-(--surface-sunken) rounded-r-lg">
            {suffix}
          </span>
        )}
      </div>
      <div className="flex items-center justify-between mt-1.5 gap-2">
        {feedbackText && (
          <p
            id={feedbackId}
            role={feedbackState === 'error' ? 'alert' : undefined}
            className={`${sizeStyles[inputSize].helper} ${stateColors[feedbackState]}`}
          >
            {feedbackText}
          </p>
        )}
        {showCharCount && maxLength && (
          <p className={`${sizeStyles[inputSize].helper} text-(--text-muted) ml-auto tabular-nums`}>
            {charCount}/{maxLength}
          </p>
        )}
      </div>
    </div>
  );
});