import React, { useState, useEffect, useCallback, useRef } from 'react';
import { View, TouchableOpacity, ActivityIndicator, StyleSheet, Dimensions, Platform, Text } from 'react-native';
import { Image as ExpoImage } from 'expo-image';
import { MaterialIcons } from '@expo/vector-icons';
import { useTheme } from '../../contexts/ThemeContext';
import { useSettings } from '../../hooks/useSettings';
import { catalogService, StreamingContent } from '../../services/catalogService';
import { DropUpMenu } from './DropUpMenu';

interface ContentItemProps {
  item: StreamingContent;
  onPress: (id: string, type: string) => void;
}

const { width } = Dimensions.get('window');

// Dynamic poster calculation based on screen width - show 1/4 of next poster
const calculatePosterLayout = (screenWidth: number) => {
  // Detect if device is a tablet (width >= 768px is common tablet breakpoint)
  const isTablet = screenWidth >= 768;

  const MIN_POSTER_WIDTH = isTablet ? 140 : 100; // Bigger minimum for tablets
  const MAX_POSTER_WIDTH = isTablet ? 180 : 130; // Bigger maximum for tablets
  const LEFT_PADDING = 16; // Left padding
  const SPACING = 8; // Space between posters

  // Calculate available width for posters (reserve space for left padding)
  const availableWidth = screenWidth - LEFT_PADDING;

  // Try different numbers of full posters to find the best fit
  let bestLayout = { numFullPosters: 3, posterWidth: isTablet ? 160 : 120 };

  for (let n = 3; n <= 6; n++) {
    // Calculate poster width needed for N full posters + 0.25 partial poster
    // Formula: N * posterWidth + (N-1) * spacing + 0.25 * posterWidth = availableWidth - rightPadding
    // Simplified: posterWidth * (N + 0.25) + (N-1) * spacing = availableWidth - rightPadding
    // We'll use minimal right padding (8px) to maximize space
    const usableWidth = availableWidth - 8;
    const posterWidth = (usableWidth - (n - 1) * SPACING) / (n + 0.25);

    if (posterWidth >= MIN_POSTER_WIDTH && posterWidth <= MAX_POSTER_WIDTH) {
      bestLayout = { numFullPosters: n, posterWidth };
    }
  }

  return {
    numFullPosters: bestLayout.numFullPosters,
    posterWidth: bestLayout.posterWidth,
    spacing: SPACING,
    partialPosterWidth: bestLayout.posterWidth * 0.25 // 1/4 of next poster
  };
};

const posterLayout = calculatePosterLayout(width);
const POSTER_WIDTH = posterLayout.posterWidth;

const PLACEHOLDER_BLURHASH = 'LEHV6nWB2yk8pyo0adR*.7kCMdnj';

const ContentItem = ({ item, onPress }: ContentItemProps) => {
  const [menuVisible, setMenuVisible] = useState(false);
  const [isWatched, setIsWatched] = useState(false);
  const [imageLoaded, setImageLoaded] = useState(false);
  const [imageError, setImageError] = useState(false);
  const [shouldLoadImage, setShouldLoadImage] = useState(false);
  const [retryCount, setRetryCount] = useState(0);
  const { currentTheme } = useTheme();
  const { settings } = useSettings();
  const posterRadius = typeof settings.posterBorderRadius === 'number' ? settings.posterBorderRadius : 12;
  const posterWidth = React.useMemo(() => {
    switch (settings.posterSize) {
      case 'small':
        return Math.max(100, Math.min(POSTER_WIDTH - 10, POSTER_WIDTH));
      case 'large':
        return Math.min(POSTER_WIDTH + 20, POSTER_WIDTH + 30);
      default:
        return POSTER_WIDTH;
    }
  }, [settings.posterSize]);

  // Intersection observer simulation for lazy loading
  const itemRef = useRef<View>(null);

  const handleLongPress = useCallback(() => {
    setMenuVisible(true);
  }, []);

  const handlePress = useCallback(() => {
    onPress(item.id, item.type);
  }, [item.id, item.type, onPress]);

  const handleOptionSelect = useCallback((option: string) => {
    switch (option) {
      case 'library':
        if (item.inLibrary) {
          catalogService.removeFromLibrary(item.type, item.id);
        } else {
          catalogService.addToLibrary(item);
        }
        break;
      case 'watched':
        setIsWatched(prev => !prev);
        break;
      case 'playlist':
        break;
      case 'share':
        break;
    }
  }, [item]);

  const handleMenuClose = useCallback(() => {
    setMenuVisible(false);
  }, []);

  // Lazy load images - only load when likely to be visible
  useEffect(() => {
    const timer = setTimeout(() => {
      setShouldLoadImage(true);
    }, 50); // Reduced delay for faster loading

    return () => clearTimeout(timer);
  }, []);

  // Get optimized poster URL for smaller tiles
  const getOptimizedPosterUrl = useCallback((originalUrl: string) => {
    if (!originalUrl || originalUrl.includes('placeholder')) {
      return 'https://via.placeholder.com/154x231/333/666?text=No+Image';
    }

    // If we've had an error, try metahub fallback
    if (retryCount > 0 && !originalUrl.includes('metahub.space')) {
      return `https://images.metahub.space/poster/small/${item.id}/img`;
    }

    // For TMDB images, use smaller sizes
    if (originalUrl.includes('image.tmdb.org')) {
      // Replace any size with w154 (fits 100-130px tiles perfectly)
      return originalUrl.replace(/\/w\d+\//, '/w154/');
    }

    // For metahub images, use smaller sizes
    if (originalUrl.includes('images.metahub.space')) {
      return originalUrl.replace('/medium/', '/small/');
    }

    // Return original URL for other sources to avoid breaking them
    return originalUrl;
  }, [retryCount, item.id]);

  return (
    <>
      <View style={[styles.itemContainer, { width: posterWidth }]}>
        <TouchableOpacity
          style={[styles.contentItem, { width: posterWidth, borderRadius: posterRadius }]}
          activeOpacity={0.7}
          onPress={handlePress}
          onLongPress={handleLongPress}
          delayLongPress={300}
        >
          <View ref={itemRef} style={[styles.contentItemContainer, { borderRadius: posterRadius }] }>
            {/* Only load image when shouldLoadImage is true (lazy loading) */}
            {shouldLoadImage && item.poster ? (
              <ExpoImage
                source={{ uri: getOptimizedPosterUrl(item.poster) }}
                style={[styles.poster, { backgroundColor: currentTheme.colors.elevation1, borderRadius: posterRadius }]}
                contentFit="cover"
                cachePolicy="memory-disk" // Use both memory and disk cache
                transition={200} // Add smooth transition
                placeholder={{ blurhash: PLACEHOLDER_BLURHASH } as any}
                placeholderContentFit="cover"
                allowDownscaling
                onLoad={() => {
                  setImageLoaded(true);
                  setImageError(false);
                }}
                onError={(error) => {
                  console.warn('Image load error for:', item.poster, error);
                  // Try fallback URL on first error
                  if (retryCount === 0 && item.poster && !item.poster.includes('metahub.space')) {
                    setRetryCount(1);
                    // Don't set error state yet, let it try the fallback
                    return;
                  }
                  setImageError(true);
                  setImageLoaded(false);
                }}
                priority="normal" // Increase priority for better loading
                recyclingKey={item.id} // Add recycling key for better performance
              />
            ) : (
              // Show placeholder until lazy load triggers
              <View style={[styles.poster, { backgroundColor: currentTheme.colors.elevation1, justifyContent: 'center', alignItems: 'center', borderRadius: posterRadius }] }>
                <Text style={{ color: currentTheme.colors.textMuted, fontSize: 10, textAlign: 'center' }}>
                  {item.name.substring(0, 20)}...
                </Text>
              </View>
            )}
            {imageError && (
              <View style={[styles.loadingOverlay, { backgroundColor: currentTheme.colors.elevation1 }]}>
                <MaterialIcons name="broken-image" size={24} color={currentTheme.colors.textMuted} />
              </View>
            )}
            {isWatched && (
              <View style={styles.watchedIndicator}>
                <MaterialIcons name="check-circle" size={22} color={currentTheme.colors.success} />
              </View>
            )}
            {item.inLibrary && (
              <View style={styles.libraryBadge}>
                <MaterialIcons name="bookmark" size={16} color={currentTheme.colors.white} />
              </View>
            )}
          </View>
        </TouchableOpacity>
        {settings.showPosterTitles && (
          <Text style={[styles.title, { color: currentTheme.colors.text }]} numberOfLines={2}>
            {item.name}
          </Text>
        )}
      </View>

      <DropUpMenu
        visible={menuVisible}
        onClose={handleMenuClose}
        item={item}
        onOptionSelect={handleOptionSelect}
      />
    </>
  );
};

const styles = StyleSheet.create({
  itemContainer: {
    width: POSTER_WIDTH,
  },
  contentItem: {
    width: POSTER_WIDTH,
    aspectRatio: 2 / 3,
    margin: 0,
    borderRadius: 12,
    overflow: 'hidden',
    position: 'relative',
    elevation: Platform.OS === 'android' ? 2 : 0,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    borderWidth: 0.5,
    borderColor: 'rgba(255,255,255,0.12)',
    marginBottom: 8,
  },
  contentItemContainer: {
    width: '100%',
    height: '100%',
    borderRadius: 12,
    overflow: 'hidden',
    position: 'relative',
  },
  poster: {
    width: '100%',
    height: '100%',
    borderRadius: 12,
  },
  loadingOverlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
  },
  watchedIndicator: {
    position: 'absolute',
    top: 8,
    right: 8,
    borderRadius: 12,
    padding: 2,
  },
  libraryBadge: {
    position: 'absolute',
    top: 8,
    left: 8,
    borderRadius: 8,
    padding: 4,
  },
  title: {
    fontSize: 13,
    fontWeight: '500',
    marginTop: 4,
    textAlign: 'center',
  }
});

export default React.memo(ContentItem, (prev, next) => {
  // Aggressive memoization - only re-render if ID changes (different item entirely)
  // This keeps loaded posters stable during fast scrolls
  return prev.item.id === next.item.id;
});