import React, { useMemo, useDeferredValue, useTransition, startTransition } from 'react';
import { createRoot } from 'react-dom/client';

// Advanced memoization with dependency optimization
const ExpensiveComponent = React.memo(({ data, filters, onUpdate }: {
  data: DataItem[];
  filters: FilterConfig;
  onUpdate: (item: DataItem) => void;
}) => {
  // Defer non-urgent updates to maintain responsiveness
  const deferredFilters = useDeferredValue(filters);
  
  // Memoize expensive computations with proper dependencies
  const processedData = useMemo(() => {
    return data
      .filter(item => matchesFilters(item, deferredFilters))
      .sort((a, b) => scoreRelevance(b, deferredFilters) - scoreRelevance(a, deferredFilters))
      .slice(0, 100); // Limit rendering for performance
  }, [data, deferredFilters]);

  // Use transition for non-urgent state updates
  const [isPending, startTransition] = useTransition();

  const handleUpdate = (item: DataItem) => {
    startTransition(() => {
      onUpdate(item);
    });
  };

  return (
    <div className={isPending ? 'opacity-50' : ''}>
      {processedData.map(item => (
        <OptimizedListItem
          key={item.id}
          item={item}
          onUpdate={handleUpdate}
        />
      ))}
    </div>
  );
}, (prevProps, nextProps) => {
  // Custom comparison function for complex props
  return (
    prevProps.data === nextProps.data &&
    JSON.stringify(prevProps.filters) === JSON.stringify(nextProps.filters) &&
    prevProps.onUpdate === nextProps.onUpdate
  );
});

// Virtualized list component for large datasets
const VirtualizedList = ({ items }: { items: DataItem[] }) => {
  const [startIndex, setStartIndex] = useState(0);
  const [endIndex, setEndIndex] = useState(20);
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const handleScroll = () => {
      const scrollTop = container.scrollTop;
      const itemHeight = 60; // Fixed item height
      const containerHeight = container.clientHeight;
      
      const newStartIndex = Math.floor(scrollTop / itemHeight);
      const newEndIndex = Math.min(
        items.length,
        newStartIndex + Math.ceil(containerHeight / itemHeight) + 5
      );

      setStartIndex(newStartIndex);
      setEndIndex(newEndIndex);
    };

    container.addEventListener('scroll', handleScroll, { passive: true });
    return () => container.removeEventListener('scroll', handleScroll);
  }, [items.length]);

  const visibleItems = items.slice(startIndex, endIndex);
  const totalHeight = items.length * 60;
  const offsetY = startIndex * 60;

  return (
    <div ref={containerRef} style={{ height: 400, overflow: 'auto' }}>
      <div style={{ height: totalHeight, position: 'relative' }}>
        <div style={{ transform: `translateY(${offsetY}px)` }}>
          {visibleItems.map((item, index) => (
            <ListItem key={item.id} item={item} />
          ))}
        </div>
      </div>
    </div>
  );
};

// Advanced memory management patterns
class MemoryOptimizedCache<K, V> {
  private cache = new Map<K, V>();
  private accessTimes = new Map<K, number>();
  private maxSize: number;

  constructor(maxSize = 1000) {
    this.maxSize = maxSize;
  }

  get(key: K): V | undefined {
    const value = this.cache.get(key);
    if (value !== undefined) {
      this.accessTimes.set(key, Date.now());
    }
    return value;
  }

  set(key: K, value: V): void {
    if (this.cache.size >= this.maxSize) {
      this.evictLeastRecentlyUsed();
    }
    
    this.cache.set(key, value);
    this.accessTimes.set(key, Date.now());
  }

  private evictLeastRecentlyUsed(): void {
    let oldestKey: K | undefined;
    let oldestTime = Infinity;

    for (const [key, time] of this.accessTimes) {
      if (time < oldestTime) {
        oldestTime = time;
        oldestKey = key;
      }
    }

    if (oldestKey !== undefined) {
      this.cache.delete(oldestKey);
      this.accessTimes.delete(oldestKey);
    }
  }
}

// Hook for memory-efficient data fetching
function useOptimizedQuery<T>(
  queryKey: string,
  queryFn: () => Promise<T>,
  options: {
    staleTime?: number;
    cacheTime?: number;
    refetchOnWindowFocus?: boolean;
  } = {}
) {
  const [data, setData] = useState<T | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<Error | null>(null);
  
  const cache = useRef(new MemoryOptimizedCache<string, {
    data: T;
    timestamp: number;
  }>());
  
  const abortControllerRef = useRef<AbortController | null>(null);

  const executeQuery = useCallback(async () => {
    // Cancel previous request
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
    }

    const cachedResult = cache.current.get(queryKey);
    const now = Date.now();
    
    // Return cached data if still fresh
    if (cachedResult && (now - cachedResult.timestamp) < (options.staleTime || 300000)) {
      setData(cachedResult.data);
      return;
    }

    setIsLoading(true);
    setError(null);
    
    abortControllerRef.current = new AbortController();
    
    try {
      const result = await queryFn();
      
      // Only update if not aborted
      if (!abortControllerRef.current.signal.aborted) {
        cache.current.set(queryKey, { data: result, timestamp: now });
        setData(result);
      }
    } catch (err) {
      if (!abortControllerRef.current.signal.aborted) {
        setError(err as Error);
      }
    } finally {
      if (!abortControllerRef.current.signal.aborted) {
        setIsLoading(false);
      }
    }
  }, [queryKey, queryFn, options.staleTime]);

  useEffect(() => {
    executeQuery();
    
    // Cleanup on unmount
    return () => {
      if (abortControllerRef.current) {
        abortControllerRef.current.abort();
      }
    };
  }, [executeQuery]);

  // Handle window focus refetch
  useEffect(() => {
    if (!options.refetchOnWindowFocus) return;

    const handleFocus = () => executeQuery();
    window.addEventListener('focus', handleFocus);
    
    return () => window.removeEventListener('focus', handleFocus);
  }, [executeQuery, options.refetchOnWindowFocus]);

  return { data, isLoading, error, refetch: executeQuery };
}