import * as React from 'react';

import { cn } from '@/lib/utils';

/**
 * EN: Input component props interface
 * VI: Interface cho props của component Input
 */
export interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  /**
   * EN: Validation state - affects styling / VI: Trạng thái validation - ảnh hưởng đến styling
   */
  validationState?: 'default' | 'error' | 'success';
  /**
   * EN: Error message to display below input / VI: Thông báo lỗi hiển thị dưới input
   */
  errorMessage?: string;
  /**
   * EN: Success message to display below input / VI: Thông báo thành công hiển thị dưới input
   */
  successMessage?: string;
  /**
   * EN: Label text for the input / VI: Text label cho input
   */
  label?: string;
  /**
   * EN: Helper text to display below input / VI: Text hướng dẫn hiển thị dưới input
   */
  helperText?: string;
}

/**
 * EN: Input component with validation states
 * VI: Component Input với các trạng thái validation
 *
 * @example
 * ```tsx
 * <Input placeholder="Enter email" />
 * <Input validationState="error" errorMessage="Invalid email" />
 * <Input validationState="success" successMessage="Email is valid" />
 * <Input disabled placeholder="Disabled input" />
 * ```
 */
const Input = React.forwardRef<HTMLInputElement, InputProps>(
  (
    {
      className,
      type = 'text',
      validationState = 'default',
      errorMessage,
      successMessage,
      label,
      helperText,
      disabled,
      id,
      ...props
    },
    ref
  ) => {
    // EN: Generate unique ID if not provided / VI: Tạo ID duy nhất nếu không được cung cấp
    const generatedId = React.useId();
    const inputId = id || generatedId;
    const labelId = `${inputId}-label`;
    const helperId = `${inputId}-helper`;
    const errorId = `${inputId}-error`;
    const successId = `${inputId}-success`;

    // EN: Determine validation state based on props / VI: Xác định trạng thái validation dựa trên props
    const state =
      errorMessage || validationState === 'error'
        ? 'error'
        : successMessage || validationState === 'success'
        ? 'success'
        : 'default';

    return (
      <div className="w-full">
        {/* EN: Label / VI: Nhãn */}
        {label && (
          <label
            htmlFor={inputId}
            id={labelId}
            className="block text-sm font-medium text-text-secondary mb-2"
          >
            {label}
          </label>
        )}

        {/* EN: Input field / VI: Trường input */}
        <input
          type={type}
          id={inputId}
          ref={ref}
          disabled={disabled}
          className={cn(
            // EN: Base styles / VI: Styles cơ bản
            'flex w-full rounded-md border bg-bg-secondary px-3 py-2 text-base text-text-primary',
            'placeholder:text-text-tertiary',
            'transition-all duration-fast ease-out',
            'file:border-0 file:bg-transparent file:text-sm file:font-medium',
            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary',
            // EN: Default state / VI: Trạng thái mặc định
            state === 'default' &&
              'border-border-primary focus-visible:border-accent-primary focus-visible:ring-accent-primary',
            // EN: Focus state with glow effect / VI: Trạng thái focus với hiệu ứng glow
            state === 'default' &&
              !disabled &&
              'focus-visible:shadow-[0_0_20px_rgba(59,130,246,0.3)]',
            // EN: Error state / VI: Trạng thái lỗi
            state === 'error' &&
              'border-accent-error focus-visible:border-accent-error focus-visible:ring-accent-error',
            // EN: Success state / VI: Trạng thái thành công
            state === 'success' &&
              'border-accent-success focus-visible:border-accent-success focus-visible:ring-accent-success',
            // EN: Disabled state / VI: Trạng thái vô hiệu hóa
            disabled &&
              'cursor-not-allowed opacity-50 bg-bg-tertiary border-border-primary',
            className
          )}
          aria-invalid={state === 'error' ? 'true' : 'false'}
          aria-describedby={
            errorMessage
              ? errorId
              : successMessage
              ? successId
              : helperText
              ? helperId
              : undefined
          }
          {...props}
        />

        {/* EN: Helper text / VI: Text hướng dẫn */}
        {helperText && state === 'default' && !errorMessage && !successMessage && (
          <p
            id={helperId}
            className="mt-1.5 text-sm text-text-tertiary"
            role="note"
          >
            {helperText}
          </p>
        )}

        {/* EN: Error message / VI: Thông báo lỗi */}
        {errorMessage && (
          <p
            id={errorId}
            className="mt-1.5 text-sm text-accent-error flex items-center gap-1"
            role="alert"
          >
            <svg
              className="h-4 w-4"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              aria-hidden="true"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
            {errorMessage}
          </p>
        )}

        {/* EN: Success message / VI: Thông báo thành công */}
        {successMessage && (
          <p
            id={successId}
            className="mt-1.5 text-sm text-accent-success flex items-center gap-1"
            role="status"
          >
            <svg
              className="h-4 w-4"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              aria-hidden="true"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M5 13l4 4L19 7"
              />
            </svg>
            {successMessage}
          </p>
        )}
      </div>
    );
  }
);

Input.displayName = 'Input';

export { Input };
