import { useState, useEffect, useCallback } from 'react';
import {
  BREAKPOINTS,
  getDeviceType,
  getCurrentBreakpoint,
  isBreakpoint,
  isBetweenBreakpoints,
  isMobile,
  isTablet,
  isDesktop,
  isMobileOrTablet,
  type BreakpointKey,
  type DeviceType,
} from '../services/responsiveService';

export interface ResponsiveState {
  width: number;
  height: number;
  deviceType: DeviceType;
  breakpoint: BreakpointKey;
  isMobile: boolean;
  isTablet: boolean;
  isDesktop: boolean;
  isMobileOrTablet: boolean;
}

export interface UseResponsiveReturn extends ResponsiveState {
  /**
   * Check if current width matches or exceeds a breakpoint
   */
  matches: (breakpoint: BreakpointKey) => boolean;
  /**
   * Check if current width is between two breakpoints
   */
  between: (min: BreakpointKey, max: BreakpointKey) => boolean;
  /**
   * Get the current window dimensions
   */
  dimensions: { width: number; height: number };
}

/**
 * Custom hook for responsive design
 * Tracks window size and provides responsive utilities
 * 
 * @example
 * ```tsx
 * const { isMobile, isTablet, isDesktop, matches, width } = useResponsive();
 * 
 * if (isMobile) {
 *   return <MobileComponent />;
 * }
 * 
 * if (matches('lg')) {
 *   return <DesktopComponent />;
 * }
 * ```
 */
export const useResponsive = (): UseResponsiveReturn => {
  const [dimensions, setDimensions] = useState(() => {
    // Initialize with current window dimensions
    if (typeof window !== 'undefined') {
      return {
        width: window.innerWidth,
        height: window.innerHeight,
      };
    }
    return { width: 0, height: 0 };
  });

  useEffect(() => {
    // Handler to update dimensions
    const handleResize = () => {
      setDimensions({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    // Set initial dimensions
    handleResize();

    // Add event listener
    window.addEventListener('resize', handleResize);

    // Cleanup
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  // Memoize computed values
  const deviceType = getDeviceType(dimensions.width);
  const breakpoint = getCurrentBreakpoint(dimensions.width);
  const mobile = isMobile(dimensions.width);
  const tablet = isTablet(dimensions.width);
  const desktop = isDesktop(dimensions.width);
  const mobileOrTablet = isMobileOrTablet(dimensions.width);

  // Memoize utility functions
  const matches = useCallback(
    (breakpointKey: BreakpointKey) => {
      return isBreakpoint(dimensions.width, breakpointKey);
    },
    [dimensions.width]
  );

  const between = useCallback(
    (min: BreakpointKey, max: BreakpointKey) => {
      return isBetweenBreakpoints(dimensions.width, min, max);
    },
    [dimensions.width]
  );

  return {
    width: dimensions.width,
    height: dimensions.height,
    deviceType,
    breakpoint,
    isMobile: mobile,
    isTablet: tablet,
    isDesktop: desktop,
    isMobileOrTablet: mobileOrTablet,
    matches,
    between,
    dimensions,
  };
};

