import { useState, useEffect, useRef } from 'react';
import { VOCAB } from './collection-vocabulary.js';

/**
 * Card browser state: search/filters, infinite scroll, bulk selection, favorites.
 */
export function useCardsPage() {

  const [cards, setCards] = useState([]);
  const [loading, setLoading] = useState(true);
  const [loadingMore, setLoadingMore] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedTCG, setSelectedTCG] = useState('all');
  const [selectedRarity, setSelectedRarity] = useState('all');
  const [selectedSet, setSelectedSet] = useState('all');
  const [selectedValueRange, setSelectedValueRange] = useState('all');
  const [viewMode, setViewMode] = useState('grid'); // grid or list
  const [pagination, setPagination] = useState({
    page: 1,
    limit: 50,
    total: 0,
    pages: 0
  });
  const [filters, setFilters] = useState({
    games: [],
    rarities: [],
    sets: []
  });
  const [hasMore, setHasMore] = useState(true);
  const loadingMoreRef = useRef(false);
  const hasMoreRef = useRef(true);
  
  // Bulk selection state
  const [selectedCards, setSelectedCards] = useState([]);
  const [favoritedCards, setFavoritedCards] = useState(new Set());
  
  // Modal states
  const [showCollectionModal, setShowCollectionModal] = useState(false);
  const [cardsToAdd, setCardsToAdd] = useState([]);

  // Mana symbol settings
  const [manaSymbolSettings, setManaSymbolSettings] = useState({ useSVG: false });

  // Fetch cards from database
  const fetchCards = async (isLoadMore = false) => {
    try {
      if (isLoadMore) {
        setLoadingMore(true);
        loadingMoreRef.current = true;
      } else {
        setLoading(true);
      }
      
      const params = new URLSearchParams({
        query: searchQuery,
        game: selectedTCG,
        rarity: selectedRarity,
        set: selectedSet,
        minPrice: selectedValueRange === 'under-50' ? '0' : 
                 selectedValueRange === '50-100' ? '50' : 
                 selectedValueRange === '100-500' ? '100' : 
                 selectedValueRange === '500-1000' ? '500' : 
                 selectedValueRange === 'over-1000' ? '1000' : '',
        maxPrice: selectedValueRange === '50-100' ? '100' : 
                 selectedValueRange === '100-500' ? '500' : 
                 selectedValueRange === '500-1000' ? '1000' : '',
        page: pagination.page.toString(),
        limit: pagination.limit.toString()
      });

      const response = await fetch(`/api/cards/search?${params}`);
      const data = await response.json();

      if (data.success) {
        
        
        if (isLoadMore) {
          setCards(prevCards => [...prevCards, ...data.cards]);
        } else {
          setCards(data.cards);
        }
        setPagination(data.pagination);
        setFilters(data.filters);
        const hasMoreCards = data.pagination.page < data.pagination.pages;
        setHasMore(hasMoreCards);
        hasMoreRef.current = hasMoreCards;
      } else {
        console.error('Failed to fetch cards:', data.error);
        if (!isLoadMore) {
          setCards([]);
        }
      }
    } catch (error) {
      console.error('Error fetching cards:', error);
      if (!isLoadMore) {
        setCards([]);
      }
    } finally {
      setLoading(false);
      setLoadingMore(false);
      loadingMoreRef.current = false;
    }
  };

  // Load user's favorited cards
  const loadFavoritedCards = async () => {
    try {
      const token = localStorage.getItem('auth_token');
      if (!token) return;

      const response = await fetch('/api/favorites?type=card', {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      });

      if (response.ok) {
        const data = await response.json();
        const favoriteIds = new Set(data.favorites.map(fav => parseInt(fav.item_id)));
        setFavoritedCards(favoriteIds);
      }
    } catch (error) {
      console.error('Error loading favorited cards:', error);
    }
  };

  // Initial load
  useEffect(() => {
    /* eslint-disable react-hooks/set-state-in-effect -- reset list state when filters change, then fetch */
    setPagination(prev => ({ ...prev, page: 1 }));
    setCards([]);
    setHasMore(true);
    hasMoreRef.current = true;
    fetchCards(false);
    loadFavoritedCards(); // Load user's favorites
    /* eslint-enable react-hooks/set-state-in-effect */
    // eslint-disable-next-line react-hooks/exhaustive-deps -- filter-driven reload; fetchCards closes over latest search state
  }, [selectedTCG, selectedRarity, selectedSet, selectedValueRange]);

  // Handle search with debounce
  const [searchTimeout, setSearchTimeout] = useState(null);
  
  const handleSearchChange = (value) => {
    setSearchQuery(value);
    
    // Clear existing timeout
    if (searchTimeout) {
      clearTimeout(searchTimeout);
    }
    
    // Set new timeout for search
    const newTimeout = setTimeout(() => {
      setPagination(prev => ({ ...prev, page: 1 }));
      setCards([]);
      setHasMore(true);
      hasMoreRef.current = true;
      fetchCards(false);
    }, 500); // 500ms delay
    
    setSearchTimeout(newTimeout);
  };

  // Cleanup timeout on unmount
  useEffect(() => {
    return () => {
      if (searchTimeout) {
        clearTimeout(searchTimeout);
      }
    };
  }, [searchTimeout]);

  // Load more cards
  const loadMoreCards = async () => {

    
    if (!loadingMoreRef.current && hasMoreRef.current) {
      const nextPage = pagination.page + 1;

      setPagination(prev => ({ ...prev, page: nextPage }));
      
      // Use the next page number directly in the fetch
      try {
        setLoadingMore(true);
        loadingMoreRef.current = true;
        
        const params = new URLSearchParams({
          query: searchQuery,
          game: selectedTCG,
          rarity: selectedRarity,
          set: selectedSet,
          minPrice: selectedValueRange === 'under-50' ? '0' : 
                   selectedValueRange === '50-100' ? '50' : 
                   selectedValueRange === '100-500' ? '100' : 
                   selectedValueRange === '500-1000' ? '500' : 
                   selectedValueRange === 'over-1000' ? '1000' : '',
          maxPrice: selectedValueRange === '50-100' ? '100' : 
                   selectedValueRange === '100-500' ? '500' : 
                   selectedValueRange === '500-1000' ? '1000' : '',
          page: nextPage.toString(),
          limit: pagination.limit.toString()
        });

        const response = await fetch(`/api/cards/search?${params}`);
        const data = await response.json();

        if (data.success) {
          
          setCards(prevCards => [...prevCards, ...data.cards]);
          setPagination(data.pagination);
          setFilters(data.filters);
          const hasMoreCards = data.pagination.page < data.pagination.pages;
          setHasMore(hasMoreCards);
          hasMoreRef.current = hasMoreCards;
        } else {
          console.error('Failed to fetch more cards:', data.error);
        }
      } catch (error) {
        console.error('Error fetching more cards:', error);
      } finally {
        setLoadingMore(false);
        loadingMoreRef.current = false;
      }
    }
  };

  // Update refs when state changes
  useEffect(() => {
    hasMoreRef.current = hasMore;
    loadingMoreRef.current = loadingMore;
  }, [hasMore, loadingMore]);

  // Intersection Observer for infinite scroll
  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting && hasMoreRef.current && !loadingMoreRef.current) {
            loadMoreCards();
          }
        });
      },
      {
        rootMargin: '50px',
        threshold: 0.1
      }
    );

    const setupObserver = () => {
      const sentinel = document.getElementById('infinite-scroll-sentinel');
      if (sentinel) {
        observer.observe(sentinel);
      } else {
        setTimeout(setupObserver, 100);
      }
    };

    setupObserver();

    return () => {
      const sentinel = document.getElementById('infinite-scroll-sentinel');
      if (sentinel) {
        observer.unobserve(sentinel);
      }
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps -- observer setup once; loadMoreCards uses refs for latest state
  }, []);

  const getRarityColor = (rarity) => {
    // Map database rarity values to colors
    const rarityColorMap = {
      'common': '#6B7280',
      'uncommon': '#10B981',
      'rare': '#F59E0B',
      'mythic': '#FFD700',
      'holographic': '#FF6B6B',
      'enchanted': '#A855F7',
      'secret rare': '#FF6B6B',
      'ultra rare': '#A855F7'
    };
    return rarityColorMap[rarity?.toLowerCase()] || '#6B7280';
  };

  const tcgOptions = [
    { value: 'MTG', label: 'Magic: The Gathering', color: 'purple', icon: '🔮' },
    { value: 'Pokemon', label: 'Pokemon', color: 'blue', icon: '⚡' },
    { value: 'Lorcana', label: 'Disney Lorcana', color: 'pink', icon: '✨' }
  ];

  const rarityOptions = [
    { value: 'all', label: 'All Rarities' },
    { value: 'common', label: 'Common' },
    { value: 'uncommon', label: 'Uncommon' },
    { value: 'rare', label: 'Rare' },
    { value: 'mythic', label: 'Mythic' },
    { value: 'enchanted', label: 'Enchanted' },
    ...filters.rarities.filter(rarity => 
      !['all', 'common', 'uncommon', 'rare', 'mythic', 'enchanted'].includes(rarity)
    ).map(rarity => ({
      value: rarity,
      label: rarity,
      color: getRarityColor(rarity)
    }))
  ];

  const setOptions = [
    { value: 'all', label: 'All Sets' },
    ...filters.sets.map(set => ({
      value: set,
      label: set
    }))
  ];

  const valueRangeOptions = [
    { value: 'all', label: 'All Values' },
    { value: 'under-50', label: 'Under $50' },
    { value: '50-100', label: '$50 - $100' },
    { value: '100-500', label: '$100 - $500' },
    { value: '500-1000', label: '$500 - $1,000' },
    { value: 'over-1000', label: 'Over $1,000' }
  ];



  const formatCurrency = (amount) => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD'
    }).format(amount);
  };

  const getRarityLabel = (rarity) => {
    const rarityOption = rarityOptions.find(option => option.value === rarity);
    return rarityOption ? rarityOption.label : rarity;
  };

  // Bulk selection handlers
  const handleToggleSelect = (card) => {
    setSelectedCards(prev => {
      const isSelected = prev.some(c => c.id === card.id);
      if (isSelected) {
        return prev.filter(c => c.id !== card.id);
      } else {
        return [...prev, card];
      }
    });
  };

  const handleClearSelection = () => {
    setSelectedCards([]);
  };

  const handleToggleFavorite = async (card) => {
    try {
      const isFavorited = favoritedCards.has(card.id);
      const method = isFavorited ? 'DELETE' : 'POST';
      
      const response = await fetch('/api/favorites', {
        method,
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
        },
        body: JSON.stringify({
          itemType: 'card',
          itemId: card.id
        })
      });

      if (response.ok) {
        setFavoritedCards(prev => {
          const newSet = new Set(prev);
          if (isFavorited) {
            newSet.delete(card.id);
          } else {
            newSet.add(card.id);
          }
          return newSet;
        });
      }
    } catch (error) {
      console.error('Error toggling favorite:', error);
    }
  };

  // Bulk action handlers
  const handleBulkAddToCollection = (cards) => {
    setCardsToAdd(cards);
    setShowCollectionModal(true);
  };

  const handleBulkAddToDeck = (cards) => {
    console.log('Adding to deck:', cards);
    alert(`Adding ${cards.length} cards to deck (functionality coming soon)`);
  };

  const handleBulkMarkAsOwned = async (cards) => {
    try {
      const token = localStorage.getItem('auth_token');
      if (!token) {
        alert(`Please log in to ${VOCAB.ADD_TO_MY_COLLECTION.toLowerCase()}`);
        return;
      }

      let successCount = 0;
      for (const card of cards) {
        try {
          const response = await fetch(`/api/cards/${card.id}/ownership`, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'Authorization': `Bearer ${token}`
            },
            body: JSON.stringify({ quantity: 1 })
          });

          if (response.ok) {
            successCount++;
          }
        } catch (error) {
          console.error(`Error marking card ${card.id} as owned:`, error);
        }
      }

      if (successCount === cards.length) {
        alert(`Successfully added ${cards.length} cards to ${VOCAB.MY_COLLECTION}!`);
      } else {
        alert(`Added ${successCount} out of ${cards.length} cards to ${VOCAB.MY_COLLECTION}. Some operations may have failed.`);
      }

      // Clear selection after successful operation
      setSelectedCards([]);
    } catch (error) {
      console.error('Error in bulk mark as owned:', error);
      alert(`Failed to add cards to ${VOCAB.MY_COLLECTION}. Please try again.`);
    }
  };

  const handleBulkRemoveFromOwned = async (cards) => {
    try {
      const token = localStorage.getItem('auth_token');
      if (!token) {
        alert(`Please log in to ${VOCAB.REMOVE_FROM_MY_COLLECTION.toLowerCase()}`);
        return;
      }

      let successCount = 0;
      for (const card of cards) {
        try {
          const response = await fetch(`/api/cards/${card.id}/ownership`, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'Authorization': `Bearer ${token}`
            },
            body: JSON.stringify({ quantity: 0 })
          });

          if (response.ok) {
            successCount++;
          }
        } catch (error) {
          console.error(`Error removing card ${card.id} from owned:`, error);
        }
      }

      if (successCount === cards.length) {
        alert(`Successfully removed ${cards.length} cards from ${VOCAB.MY_COLLECTION}!`);
      } else {
        alert(`Removed ${successCount} out of ${cards.length} cards from ${VOCAB.MY_COLLECTION}. Some operations may have failed.`);
      }

      // Clear selection after successful operation
      setSelectedCards([]);
    } catch (error) {
      console.error('Error in bulk remove from owned:', error);
      alert(`Failed to remove cards from ${VOCAB.MY_COLLECTION}. Please try again.`);
    }
  };

  const handleBulkFavorite = async (cards) => {
    try {
      for (const card of cards) {
        if (!favoritedCards.has(card.id)) {
          await fetch('/api/favorites', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
            },
            body: JSON.stringify({
              itemType: 'card',
              itemId: card.id
            })
          });
        }
      }
      
      setFavoritedCards(prev => {
        const newSet = new Set(prev);
        cards.forEach(card => newSet.add(card.id));
        return newSet;
      });
      
      alert(`Added ${cards.length} cards to favorites`);
    } catch (error) {
      console.error('Error bulk favoriting:', error);
    }
  };

  const handleBulkDelete = (cards) => {
    console.log('Bulk delete:', cards);
    alert(`Bulk delete functionality coming soon for ${cards.length} cards`);
  };

  // Collection modal handlers
  const handleAddToCollections = (results, selectedCollectionIds, cards) => {
    const successCount = results.filter(r => r.success).length;
    const totalAttempts = results.length;
    
    if (successCount === totalAttempts) {
      alert(`Successfully added ${cards.length} card${cards.length !== 1 ? 's' : ''} to ${selectedCollectionIds.length} list${selectedCollectionIds.length !== 1 ? 's' : ''}!`);
    } else {
      alert(`Added ${successCount} out of ${totalAttempts} cards. Some additions may have failed.`);
    }
    
    // Clear selection after successful addition
    setSelectedCards([]);
  };

  const showInitialLoading = loading && cards.length === 0;

  return {
    cards,
    loading,
    loadingMore,
    showInitialLoading,
    searchQuery,
    selectedTCG,
    setSelectedTCG,
    selectedRarity,
    setSelectedRarity,
    selectedSet,
    setSelectedSet,
    selectedValueRange,
    setSelectedValueRange,
    viewMode,
    setViewMode,
    filters,
    hasMore,
    selectedCards,
    favoritedCards,
    showCollectionModal,
    setShowCollectionModal,
    cardsToAdd,
    handleSearchChange,
    fetchCards,
    loadMoreCards,
    hasMoreRef,
    setPagination,
    setCards,
    setHasMore,
    tcgOptions,
    rarityOptions,
    setOptions,
    valueRangeOptions,
    handleToggleSelect,
    handleClearSelection,
    handleToggleFavorite,
    handleBulkAddToCollection,
    handleBulkAddToDeck,
    handleBulkMarkAsOwned,
    handleBulkRemoveFromOwned,
    handleBulkFavorite,
    handleBulkDelete,
    handleAddToCollections,
  };
}

