// https://ui.shadcn.com/docs/components/input
import { cva, type VariantProps } from 'class-variance-authority'
import type * as React from 'react'
import { cn } from '../../utils/cn'
import { getInputControlTextClassName } from '../inputControlStyles'

export const INPUT_WIDTH_OPTIONS = ['responsive', 'hug', 'full'] as const
export type InputWidth = (typeof INPUT_WIDTH_OPTIONS)[number]

export const INPUT_SIZE_OPTIONS = ['default', 'sm', 'xs'] as const
export type InputSize = (typeof INPUT_SIZE_OPTIONS)[number]

export const getInputWidhtStyles = (width: InputWidth | undefined | null) => {
  switch (width) {
    case 'full':
      return 'w-full'
    case 'hug':
      return 'w-[256px]'
    default:
      return 'w-full md:w-[256px]'
  }
}

export const inputVariants = cva(
  cn(
    'flex rounded border border-solid border-input-border bg-input text-input-foreground transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-input-muted-foreground',
    'hover:border-input-border-hover hover:bg-input [&.hover]:border-input-border-hover [&.hover]:bg-input',
    'focus:border-input-border-active focus-visible:border-input-border-active focus-visible:shadow-none focus-visible:outline-none [&.focus]:border-input-border-active [&.focus]:shadow-none [&.focus]:outline-none',
    'disabled:cursor-not-allowed disabled:border-input-border-disabled disabled:bg-input-disabled disabled:text-input-muted-more-foreground disabled:placeholder:text-input-muted-more-foreground',
  ),
  {
    variants: {
      size: {
        default: cn(
          getInputControlTextClassName('default'),
          'h-12 px-4 py-3.5',
        ),
        sm: cn(getInputControlTextClassName('sm'), 'h-10 px-3 py-2.5'),
        xs: cn(getInputControlTextClassName('xs'), 'h-8 px-3 py-1.5'),
      },
      width: {
        responsive: getInputWidhtStyles('responsive'),
        hug: getInputWidhtStyles('hug'),
        full: getInputWidhtStyles('full'),
      },
      error: {
        true: 'border-input-border-error hover:border-input-border-error',
        false: '',
      },
    },
    defaultVariants: {
      size: 'default',
      width: 'responsive',
      error: false,
    },
  },
)

export interface InputProps
  extends Omit<React.ComponentProps<'input'>, 'size' | 'width'>,
    VariantProps<typeof inputVariants> {
  /** Controls the height and text density of the input. */
  size?: InputSize
  /**
   * Width behavior.
   * - `responsive` (default): full width on mobile, 256px fixed on desktop.
   * - `hug`: always 256px fixed.
   * - `full`: always fills the container.
   */
  width?: InputWidth
  /** When true, applies error border and color styles. */
  error?: boolean | null
  ref?: React.Ref<HTMLInputElement>
}

/**
 * Unstyled HTML `<input>` with Blocks design tokens applied. Use directly for
 * simple cases. For inputs with icons, clear buttons, or validation states,
 * use FieldInput instead.
 */
const Input = ({
  className,
  type,
  size,
  width,
  error,
  ref,
  ...props
}: InputProps) => {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(inputVariants({ size, width, error }), className)}
      ref={ref}
      {...props}
    />
  )
}

Input.displayName = 'Input'

export { Input }