'use client';

import * as React from 'react';

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

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

/**
 * EN: Select component with label and validation states
 * VI: Component Select với label và các trạng thái validation
 *
 * @example
 * ```tsx
 * <Select label="Language" value={lang} onChange={(e) => setLang(e.target.value)}>
 *   <option value="en">English</option>
 *   <option value="vi">Vietnamese</option>
 * </Select>
 * ```
 */
const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
  (
    {
      className,
      label,
      helperText,
      errorMessage,
      validationState = 'default',
      disabled,
      id,
      children,
      ...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 selectId = id || generatedId;
    const labelId = `${selectId}-label`;
    const helperId = `${selectId}-helper`;
    const errorId = `${selectId}-error`;

    // 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' : validationState === 'success' ? 'success' : 'default';

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

        {/* EN: Select wrapper with icon / VI: Wrapper select với icon */}
        <div className="relative">
          <select
            id={selectId}
            ref={ref}
            disabled={disabled}
            className={cn(
              // EN: Base styles / VI: Styles cơ bản
              'flex w-full rounded-md border bg-[#121212] px-3 py-2 pr-10 text-base text-[#FAFAFA]',
              'appearance-none',
              'transition-all duration-150',
              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
              // EN: Default state / VI: Trạng thái mặc định
              state === 'default' &&
                'border-[#2A2A2A] focus-visible:border-[#3B82F6] focus-visible:ring-[#3B82F6]',
              // 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-[#EF4444] focus-visible:border-[#EF4444] focus-visible:ring-[#EF4444]',
              // EN: Success state / VI: Trạng thái thành công
              state === 'success' &&
                'border-[#10B981] focus-visible:border-[#10B981] focus-visible:ring-[#10B981]',
              // EN: Disabled state / VI: Trạng thái vô hiệu hóa
              disabled && 'cursor-not-allowed opacity-50 bg-[#1A1A1A] border-[#2A2A2A]',
              className
            )}
            aria-invalid={state === 'error' ? 'true' : 'false'}
            aria-describedby={
              errorMessage ? errorId : helperText ? helperId : undefined
            }
            {...props}
          >
            {children}
          </select>
          
          {/* EN: Dropdown arrow icon / VI: Icon mũi tên dropdown */}
          <div
            className={cn(
              'pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3',
              disabled && 'opacity-50'
            )}
            aria-hidden="true"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="h-4 w-4 text-[#A0A0A0]"
            >
              <path d="m6 9 6 6 6-6" />
            </svg>
          </div>
        </div>

        {/* EN: Helper text / VI: Text hướng dẫn */}
        {helperText && state === 'default' && !errorMessage && (
          <p id={helperId} className="mt-1.5 text-sm text-[#A0A0A0]" 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-[#EF4444] 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>
        )}
      </div>
    );
  }
);

Select.displayName = 'Select';

export { Select };
