/**
 * Toggle — emits canonical .prorank-toggle markup wrapped in a row layout.
 * See styles/components/_toggle.css for the design system.
 *
 * @example
 * <Toggle label="Enable Feature" checked={enabled} onChange={setEnabled} />
 * <Toggle
 *   label="Advanced Mode"
 *   description="Enable advanced features"
 *   checked={advanced}
 *   onChange={setAdvanced}
 *   size="lg"
 * />
 */

import React from 'react';

const Toggle = React.forwardRef(({
  label,
  description,
  helpText,
  id,
  name,
  checked = false,
  onChange,
  disabled = false,
  error,
  className = '',
  size = 'md',
  ...props
}, ref) => {
  const toggleId = id || name || `toggle-${Math.random().toString(36).substr(2, 9)}`;
  const hasError = Boolean(error);
  const helperDescription = description || helpText;

  const handleToggle = () => {
    if (!disabled && onChange) {
      onChange(!checked);
    }
  };

  const handleKeyDown = (e) => {
    if (e.key === ' ' || e.key === 'Enter') {
      e.preventDefault();
      handleToggle();
    }
  };

  const buttonClasses = [
    'prorank-toggle',
    `prorank-toggle--${size}`,
    checked ? 'prorank-toggle--checked' : '',
    disabled ? 'prorank-toggle--disabled' : '',
  ]
    .filter(Boolean)
    .join(' ');

  return (
    <div>
      <div className={`prorank-toggle-row ${className}`.trim()}>
        {(label || helperDescription) && (
          <div
            className="prorank-toggle-label"
            onClick={!disabled ? handleToggle : undefined}
            style={{ cursor: disabled ? 'default' : 'pointer' }}
          >
            {label && <strong>{label}</strong>}
            {helperDescription && (
              <span id={`${toggleId}-description`}>{helperDescription}</span>
            )}
          </div>
        )}

        <button
          ref={ref}
          id={toggleId}
          type="button"
          role="switch"
          aria-checked={checked}
          aria-invalid={hasError}
          aria-describedby={
            error ? `${toggleId}-error` : helperDescription ? `${toggleId}-description` : undefined
          }
          disabled={disabled}
          onClick={handleToggle}
          onKeyDown={handleKeyDown}
          className={buttonClasses}
          {...props}
        >
          <span className="prorank-toggle__track" />
          <span className="prorank-toggle__thumb" />
        </button>
      </div>

      {error && (
        <p
          id={`${toggleId}-error`}
          style={{ marginTop: 8, fontSize: 12, color: '#B91C1C' }}
          role="alert"
        >
          {error}
        </p>
      )}
    </div>
  );
});

Toggle.displayName = 'Toggle';

export default Toggle;