'use client';

import React, { useState, forwardRef } from 'react';

interface ToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  pressed?: boolean;
  onPressedChange?: (pressed: boolean) => void;
  variant?: 'default' | 'outline';
  size?: 'sm' | 'md' | 'lg';
  children?: React.ReactNode;
}

const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
  ({ 
    pressed: controlledPressed, 
    onPressedChange, 
    variant = 'default', 
    size = 'md', 
    className = '', 
    children, 
    onClick,
    disabled,
    ...props 
  }, ref) => {
    const [uncontrolledPressed, setUncontrolledPressed] = useState(false);
    
    const isControlled = controlledPressed !== undefined;
    const pressed = isControlled ? controlledPressed : uncontrolledPressed;
    
    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
      if (!disabled) {
        const newPressed = !pressed;
        
        if (!isControlled) {
          setUncontrolledPressed(newPressed);
        }
        
        if (onPressedChange) {
          onPressedChange(newPressed);
        }
        
        if (onClick) {
          onClick(e);
        }
      }
    };
    
    // Size classes
    const sizeClasses = {
      sm: 'w-7 h-7 text-sm',
      md: 'w-9 h-9 text-base',
      lg: 'w-11 h-11 text-lg'
    };
    
    // Variant classes
    const variantClasses = {
      default: pressed 
        ? 'bg-gray-200 text-gray-900 hover:bg-gray-300' 
        : 'bg-white text-gray-700 hover:bg-gray-100',
      outline: pressed 
        ? 'border-2 border-gray-400 bg-transparent text-gray-900' 
        : 'border border-gray-300 bg-transparent text-gray-700 hover:bg-gray-50'
    };
    
    const baseClasses = `
      flex items-center justify-center 
      rounded-md font-medium 
      transition-all duration-200 
      focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 
      active:scale-95 
      disabled:opacity-50 disabled:cursor-not-allowed
      ${sizeClasses[size]}
      ${variantClasses[variant]}
      ${className}
    `;
    
    return (
      <button
        ref={ref}
        type="button"
        role="switch"
        aria-checked={pressed}
        data-state={pressed ? 'on' : 'off'}
        disabled={disabled}
        className={baseClasses.trim()}
        onClick={handleClick}
        {...props}
      >
        {children}
      </button>
    );
  }
);

Toggle.displayName = 'Toggle';

export { Toggle };
export type { ToggleProps };