import React, { createContext, useContext, useEffect, useState } from 'react';

type InputMode = 'mouse' | 'gamepad';

interface InputModeContextType {
  mode: InputMode;
  setMode: (mode: InputMode) => void;
}

const InputModeContext = createContext<InputModeContextType | undefined>(undefined);

export const InputModeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [mode, setMode] = useState<InputMode>('mouse');

  useEffect(() => {
    // Spatial Engine Override
    if (mode === 'mouse') {
      document.body.classList.remove('gamepad-active');
    } else {
      document.body.classList.add('gamepad-active');
    }
  }, [mode]);

  useEffect(() => {
    const onMouseMove = () => {
      setMode('mouse');
    };
    const onMouseDown = () => {
      setMode('mouse');
    };

    window.addEventListener('mousemove', onMouseMove, { passive: true });
    window.addEventListener('mousedown', onMouseDown, { passive: true });

    return () => {
      window.removeEventListener('mousemove', onMouseMove);
      window.removeEventListener('mousedown', onMouseDown);
    };
  }, []);

  return (
    <InputModeContext.Provider value={{ mode, setMode }}>
      {children}
    </InputModeContext.Provider>
  );
};

export const useInputMode = () => {
  const context = useContext(InputModeContext);
  if (context === undefined) {
    throw new Error('useInputMode must be used within an InputModeProvider');
  }
  return context;
};