'use client'

import React from 'react'

export interface SelectOption {
  value: string
  label: string
  disabled?: boolean
}

export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
  label?: string
  error?: string
  helperText?: string
  options: SelectOption[]
  placeholder?: string
  fullWidth?: boolean
}

export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
  (
    {
      label,
      error,
      helperText,
      options,
      placeholder,
      fullWidth = false,
      className = '',
      id,
      required,
      disabled,
      ...props
    },
    ref
  ) => {
    const selectId = id || `select-${Math.random().toString(36).substr(2, 9)}`
    const errorId = `${selectId}-error`
    const helperId = `${selectId}-helper`

    const hasError = Boolean(error)

    const baseStyles = 'block w-full rounded-md border transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-0 px-4 py-2'
    const normalStyles = 'border-gray-300 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white'
    const errorStyles = 'border-error-500 focus:border-error-500 focus:ring-error-500'
    const disabledStyles = 'disabled:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-60 dark:disabled:bg-gray-900'

    const selectClassName = `${baseStyles} ${hasError ? errorStyles : normalStyles} ${disabledStyles} ${className}`.trim()
    const containerWidth = fullWidth ? 'w-full' : ''

    return (
      <div className={containerWidth}>
        {label && (
          <label
            htmlFor={selectId}
            className="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1"
          >
            {label}
            {required && <span className="text-error-500 ml-1" aria-label="required">*</span>}
          </label>
        )}

        <select
          ref={ref}
          id={selectId}
          className={selectClassName}
          aria-invalid={hasError}
          aria-describedby={
            hasError ? errorId : helperText ? helperId : undefined
          }
          required={required}
          disabled={disabled}
          {...props}
        >
          {placeholder && (
            <option value="" disabled>
              {placeholder}
            </option>
          )}
          {options.map((option) => (
            <option
              key={option.value}
              value={option.value}
              disabled={option.disabled}
            >
              {option.label}
            </option>
          ))}
        </select>

        {error && (
          <p className="mt-1 text-sm text-error-500" id={errorId} role="alert">
            {error}
          </p>
        )}

        {helperText && !error && (
          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400" id={helperId}>
            {helperText}
          </p>
        )}
      </div>
    )
  }
)

Select.displayName = 'Select'