/**
 * TriStateToggle – Three-state toggle: disabled → test → enabled.
 *
 * Visual states:
 *   - disabled (left)  : gray track
 *   - test    (center) : orange track, "מצב בדיקה"
 *   - enabled (right)  : primary/teal track
 *
 * @since 1.7.0
 */

export type TriState = 'disabled' | 'test' | 'enabled'

export interface TriStateToggleProps {
  value: TriState
  onChange: (value: TriState) => void
  disabled?: boolean
  ariaLabel?: string
  className?: string
}

/** Track background per state */
const TRACK_BG: Record<TriState, string> = {
  disabled: 'bg-gray-300',
  test: 'bg-amber-400',
  enabled: 'bg-primary-500',
}

/**
 * Knob translate position.
 * The track is w-16 (64px) and knob is w-5 (20px).
 *   left   = 2px
 *   center = 22px  (64/2 - 20/2 = 22)
 *   right  = 42px  (64 - 20 - 2 = 42)
 */
const KNOB_LEFT_CLASS: Record<TriState, string> = {
  disabled: 'translate-x-0',
  test: 'translate-x-[20px]',
  enabled: 'translate-x-[40px]',
}

export function TriStateToggle({
  value,
  onChange,
  disabled = false,
  ariaLabel,
  className = '',
}: TriStateToggleProps) {
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (disabled) return
    if (e.key === ' ' || e.key === 'Enter') {
      e.preventDefault()
      // Keyboard toggles cyclically for accessibility parity with switches
      if (value === 'disabled') onChange('test')
      else if (value === 'test') onChange('enabled')
      else onChange('disabled')
    }
    // Arrow keys for finer control
    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
      e.preventDefault()
      if (value === 'disabled') onChange('test')
      else if (value === 'test') onChange('enabled')
    }
    if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
      e.preventDefault()
      if (value === 'enabled') onChange('test')
      else if (value === 'test') onChange('disabled')
    }
  }

  return (
    <div
      role="slider"
      aria-valuemin={0}
      aria-valuemax={2}
      aria-valuenow={value === 'disabled' ? 0 : value === 'test' ? 1 : 2}
      aria-valuetext={value}
      aria-label={ariaLabel ?? `Toggle: ${value}`}
      aria-disabled={disabled}
      tabIndex={0}
      onKeyDown={handleKeyDown}
      className={[
        'relative inline-flex items-center w-16 h-6 rounded-full transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:ring-offset-2',
        TRACK_BG[value],
        disabled ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer',
        className,
      ].join(' ')}
    >
      {/* Click zones: left=disabled, center=test, right=enabled */}
      <span className="absolute inset-0 grid grid-cols-3">
        <button
          type="button"
          tabIndex={-1}
          disabled={disabled}
          aria-hidden="true"
          onClick={() => onChange('disabled')}
          className="h-full w-full cursor-pointer bg-transparent"
        />
        <button
          type="button"
          tabIndex={-1}
          disabled={disabled}
          aria-hidden="true"
          onClick={() => onChange('test')}
          className="h-full w-full cursor-pointer bg-transparent"
        />
        <button
          type="button"
          tabIndex={-1}
          disabled={disabled}
          aria-hidden="true"
          onClick={() => onChange('enabled')}
          className="h-full w-full cursor-pointer bg-transparent"
        />
      </span>

      {/* Knob */}
      <span
        className={[
          'absolute top-[2px] left-[2px] w-5 h-5 bg-white rounded-full shadow border border-gray-200 transition-transform duration-200 ease-in-out',
          KNOB_LEFT_CLASS[value],
        ].join(' ')}
      />
    </div>
  )
}
