import React, { createContext, useContext, useEffect, ReactNode } from 'react';
import {
	ResponsiveConfig,
	DEFAULT_RESPONSIVE_CONFIG,
	mergeResponsiveConfig,
} from '../../lib/responsive-config';
import { validateViewportMeta } from '../../lib/responsive-utils';
import { useViewport, ViewportInfo } from '../../hooks/useViewport';

interface ResponsiveContextValue {
	config: ResponsiveConfig;
	viewport: ViewportInfo;
}

const ResponsiveContext = createContext<ResponsiveContextValue | undefined>(
	undefined
);

interface ResponsiveProviderProps {
	children: ReactNode;
	config?: Partial<ResponsiveConfig>;
}

/**
 * Provider component for responsive configuration and viewport information
 */
export function ResponsiveProvider({
	children,
	config: userConfig,
}: ResponsiveProviderProps) {
	const config = mergeResponsiveConfig(userConfig);
	const viewport = useViewport(config.breakpoints);

	useEffect(() => {
		// Validate viewport meta tag on mount
		if (config.enabled) {
			validateViewportMeta();
		}
	}, [config.enabled]);

	const value: ResponsiveContextValue = {
		config,
		viewport,
	};

	return (
		<ResponsiveContext.Provider value={value}>
			{children}
		</ResponsiveContext.Provider>
	);
}

/**
 * Hook to access responsive configuration and viewport information
 * @return ResponsiveContextValue with config and viewport data
 */
export function useResponsive(): ResponsiveContextValue {
	const context = useContext(ResponsiveContext);

	if (context === undefined) {
		// Fallback to defaults if provider is not found
		// In development, this would typically be logged as a warning
		return {
			config: DEFAULT_RESPONSIVE_CONFIG,
			viewport: {
				width: typeof window !== 'undefined' ? window.innerWidth : 1024,
				height:
					typeof window !== 'undefined' ? window.innerHeight : 768,
				isMobile: false,
				isTablet: false,
				isDesktop: true,
				orientation: 'landscape',
			},
		};
	}

	return context;
}