import {
  forwardRef,
  useId,
  type SelectHTMLAttributes
} from 'react';

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

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

export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
  readonly label?: string;
  readonly hideLabel?: boolean;
  readonly hint?: string;
  readonly error?: string;
  readonly options: readonly SelectOption[];
  readonly placeholder?: string;
  readonly containerClassName?: string;
  readonly selectSize?: 'sm' | 'md' | 'lg';
}

const sizeClasses = {
  sm: 'h-9 rounded-xl px-3 pr-9 text-sm',
  md: 'h-11 rounded-2xl px-4 pr-10 text-sm',
  lg: 'h-12 rounded-2xl px-4 pr-10 text-base'
} as const;

export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
  {
    className,
    containerClassName,
    error,
    hideLabel = false,
    hint,
    id,
    label,
    options,
    placeholder,
    selectSize = 'md',
    ...props
  },
  ref,
) {
  const generatedId = useId();
  const selectId = id ?? generatedId;
  const hintId = hint ? `${selectId}-hint` : undefined;
  const errorId = error ? `${selectId}-error` : undefined;
  const describedBy = [hintId, errorId, props['aria-describedby']].filter(Boolean).join(' ');

  return (
    <div className={cn('space-y-2', containerClassName)}>
      {label ? (
        <label
          htmlFor={selectId}
          className={cn(
            'block text-sm font-semibold text-foreground',
            hideLabel && 'sr-only',
          )}
        >
          {label}
        </label>
      ) : null}

      <select
        ref={ref}
        id={selectId}
        aria-invalid={error ? true : undefined}
        aria-describedby={describedBy || undefined}
        className={cn(
          'interactive-ring w-full appearance-none border border-border/80 bg-surface/80 text-foreground shadow-inner transition duration-200 hover:border-accent/40 focus:border-accent',
          'bg-[linear-gradient(45deg,transparent_50%,rgb(var(--color-muted))_50%),linear-gradient(135deg,rgb(var(--color-muted))_50%,transparent_50%)] bg-[length:5px_5px,5px_5px] bg-[position:calc(100%-18px)_50%,calc(100%-13px)_50%] bg-no-repeat',
          sizeClasses[selectSize],
          error && 'border-danger/60 focus:border-danger',
          className,
        )}
        {...props}
      >
        {placeholder ? <option value="">{placeholder}</option> : null}
        {options.map((option) => (
          <option key={option.value} value={option.value} disabled={option.disabled}>
            {option.label}
          </option>
        ))}
      </select>

      {hint ? (
        <p id={hintId} className="text-xs leading-5 text-muted">
          {hint}
        </p>
      ) : null}

      {error ? (
        <p id={errorId} className="text-xs font-medium leading-5 text-danger">
          {error}
        </p>
      ) : null}
    </div>
  );
});