import type { VariantProps } from 'class-variance-authority'
import type { ChangeEventHandler, CSSProperties, FocusEventHandler } from 'react'
import { cn } from '@langgenius/dify-ui/cn'
import { cva } from 'class-variance-authority'
import { noop } from 'es-toolkit/function'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import { CopyFeedbackNew } from '../copy-feedback'

export const inputVariants = cva(
  '',
  {
    variants: {
      size: {
        regular: 'rounded-lg px-3 system-sm-regular',
        large: 'rounded-[10px] px-4 system-md-regular',
      },
    },
    defaultVariants: {
      size: 'regular',
    },
  },
)

/**
 * @deprecated Use `@langgenius/dify-ui/input` for primitive inputs and
 * `@langgenius/dify-ui/field` for form composition. Search inputs should use
 * a dedicated composition built on the primitive input.
 */
export type InputProps = {
  showLeftIcon?: boolean
  showClearIcon?: boolean
  showCopyIcon?: boolean
  onClear?: () => void
  disabled?: boolean
  destructive?: boolean
  wrapperClassName?: string
  styleCss?: CSSProperties
  unit?: string
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & VariantProps<typeof inputVariants>

const removeLeadingZeros = (value: string) => value.replace(/^(-?)0+(?=\d)/, '$1')

/**
 * @deprecated Use `@langgenius/dify-ui/input` for primitive inputs and
 * `@langgenius/dify-ui/field` for form composition. Search inputs should use
 * a dedicated composition built on the primitive input.
 */
const Input = React.forwardRef<HTMLInputElement, InputProps>(({
  size,
  disabled,
  destructive,
  showLeftIcon,
  showClearIcon,
  showCopyIcon,
  onClear,
  wrapperClassName,
  className,
  styleCss,
  value,
  placeholder,
  onChange = noop,
  onBlur = noop,
  unit,
  ...props
}, ref) => {
  const { t } = useTranslation()
  const handleNumberChange: ChangeEventHandler<HTMLInputElement> = (e) => {
    if (value === 0) {
      // remove leading zeros
      const formattedValue = removeLeadingZeros(e.target.value)
      if (e.target.value !== formattedValue)
        e.target.value = formattedValue
    }
    onChange(e)
  }
  const handleNumberBlur: FocusEventHandler<HTMLInputElement> = (e) => {
    // remove leading zeros
    const formattedValue = removeLeadingZeros(e.target.value)
    if (e.target.value !== formattedValue) {
      e.target.value = formattedValue
      onChange({
        ...e,
        type: 'change',
        target: {
          ...e.target,
          value: formattedValue,
        },
      })
    }
    onBlur(e)
  }
  return (
    <div className={cn('relative w-full', wrapperClassName)}>
      {showLeftIcon && <span className={cn('absolute top-1/2 left-2 i-ri-search-line size-4 -translate-y-1/2 text-components-input-text-placeholder')} />}
      <input
        ref={ref}
        style={styleCss}
        className={cn(
          'w-full appearance-none border border-transparent bg-components-input-bg-normal py-[7px] text-components-input-text-filled caret-primary-600 outline-hidden placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs',
          inputVariants({ size }),
          showLeftIcon && 'pl-[26px]',
          showLeftIcon && size === 'large' && 'pl-7',
          showClearIcon && value && 'pr-[26px]',
          showClearIcon && value && size === 'large' && 'pr-7',
          (destructive || showCopyIcon) && 'pr-[26px]',
          (destructive || showCopyIcon) && size === 'large' && 'pr-7',
          disabled && 'cursor-not-allowed border-transparent bg-components-input-bg-disabled text-components-input-text-filled-disabled hover:border-transparent hover:bg-components-input-bg-disabled',
          destructive && 'border-components-input-border-destructive bg-components-input-bg-destructive text-components-input-text-filled hover:border-components-input-border-destructive hover:bg-components-input-bg-destructive focus:border-components-input-border-destructive focus:bg-components-input-bg-destructive',
          className,
        )}
        placeholder={placeholder ?? (showLeftIcon
          ? (t('operation.search', { ns: 'common' }) || '')
          : (t('placeholder.input', { ns: 'common' }) || ''))}
        value={value}
        onChange={props.type === 'number' ? handleNumberChange : onChange}
        onBlur={props.type === 'number' ? handleNumberBlur : onBlur}
        disabled={disabled}
        {...props}
      />
      {!!(showClearIcon && value && !disabled && !destructive) && (
        <button
          type="button"
          aria-label={t('operation.clear', { ns: 'common' })}
          className={cn('group absolute top-1/2 right-2 -translate-y-1/2 cursor-pointer border-none bg-transparent p-px')}
          onClick={onClear}
        >
          <span className="i-ri-close-circle-fill size-3.5 cursor-pointer text-text-quaternary group-hover:text-text-tertiary" aria-hidden="true" />
        </button>
      )}
      {destructive && (
        <span className="absolute top-1/2 right-2 i-ri-error-warning-line size-4 -translate-y-1/2 text-text-destructive-secondary" />
      )}
      {showCopyIcon && (
        <div className={cn('group absolute top-1/2 right-0 -translate-y-1/2 cursor-pointer')}>
          <CopyFeedbackNew
            content={String(value ?? '')}
            className="size-7! hover:bg-transparent"
          />
        </div>
      )}
      {
        unit && (
          <div className="absolute top-1/2 right-2 -translate-y-1/2 system-sm-regular text-text-tertiary">
            {unit}
          </div>
        )
      }
    </div>
  )
})

Input.displayName = 'Input'

export default Input