'use client';

import * as React from 'react';

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

/**
 * EN: Switch component props interface
 * VI: Interface cho props của component Switch
 */
export interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
  /**
   * EN: Whether the switch is checked / VI: Switch có được bật hay không
   */
  checked?: boolean;
  /**
   * EN: Default checked state (uncontrolled) / VI: Trạng thái checked mặc định (uncontrolled)
   */
  defaultChecked?: boolean;
  /**
   * EN: Callback when checked state changes / VI: Callback khi trạng thái checked thay đổi
   */
  onCheckedChange?: (checked: boolean) => void;
  /**
   * EN: Whether the switch is disabled / VI: Switch có bị vô hiệu hóa hay không
   */
  disabled?: boolean;
}

/**
 * EN: Switch component - Toggle switch for binary settings
 * VI: Component Switch - Toggle switch cho các cài đặt nhị phân
 *
 * @example
 * ```tsx
 * <Switch checked={enabled} onCheckedChange={setEnabled} />
 * <Switch defaultChecked disabled />
 * ```
 */
const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
  ({ className, checked, defaultChecked, onCheckedChange, disabled, ...props }, ref) => {
    const [internalChecked, setInternalChecked] = React.useState(defaultChecked ?? false);
    const isControlled = checked !== undefined;
    const isChecked = isControlled ? checked : internalChecked;

    const handleClick = () => {
      if (disabled) return;
      const newChecked = !isChecked;
      if (!isControlled) {
        setInternalChecked(newChecked);
      }
      onCheckedChange?.(newChecked);
    };

    const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
      if (disabled) return;
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        handleClick();
      }
    };

    return (
      <button
        type="button"
        role="switch"
        aria-checked={isChecked}
        ref={ref}
        disabled={disabled}
        onClick={handleClick}
        onKeyDown={handleKeyDown}
        className={cn(
          // EN: Base switch styles / VI: Styles cơ bản cho switch
          'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent',
          'transition-colors duration-150 ease-in-out',
          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#3B82F6] focus-visible:ring-offset-2 focus-visible:ring-offset-[#0A0A0A]',
          'disabled:cursor-not-allowed disabled:opacity-50',
          // EN: Checked state - blue background / VI: Trạng thái checked - nền xanh
          isChecked ? 'bg-[#3B82F6]' : 'bg-[#374151]',
          className
        )}
        {...props}
      >
        {/* EN: Switch thumb / VI: Thumb của switch */}
        <span
          className={cn(
            // EN: Base thumb styles / VI: Styles cơ bản cho thumb
            'pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg',
            'transform transition-transform duration-150 ease-in-out',
            // EN: Checked state - translate to right / VI: Trạng thái checked - dịch sang phải
            isChecked ? 'translate-x-5' : 'translate-x-0'
          )}
        />
      </button>
    );
  }
);

Switch.displayName = 'Switch';

export { Switch };
