import React, { useState, useEffect, useRef } from 'react';
import { FiHeart } from 'react-icons/fi';
import { useNavigate } from 'react-router-dom';

// Import custom hooks and components
import { useSEO } from '../hooks/useSEO';
import WaterfallGrid from '../components/WaterfallGrid';
import ShareButton from '../components/ShareButton';
import { useInView } from 'react-intersection-observer';

// Import Zustand stores and Firebase services
import { useAuthStore, useGalleryStore } from '../stores';
import type { GalleryImage } from '../stores/galleryStore';
import { db } from '../firebase';
import { doc, updateDoc, arrayUnion, arrayRemove } from 'firebase/firestore';

const Gallery: React.FC = () => {
  const navigate = useNavigate();
  const [likedImages, setLikedImages] = useState<Set<string>>(new Set());
  const [likeLoading, setLikeLoading] = useState<Set<string>>(new Set());
  const [optimisticLikeCounts, setOptimisticLikeCounts] = useState<Map<string, number>>(new Map());

  const { user, isAuthenticated } = useAuthStore();

  // Use gallery store
  const {
    images,
    loading,
    error,
    hasMore,
    loadMore,
    fetchImages
  } = useGalleryStore();

  // SEO optimization for Gallery page
  useSEO({
    title: 'AiFigure Gallery - Explore Amazing AI-Generated Action Figures | Community Showcase',
    description: 'Browse our community gallery of stunning AI-generated action figures. Discover unique creations from artists worldwide, get inspired, and join the AiFigure community. Free AI art generation platform.',
    keywords: 'AI action figures gallery, AI generated toys showcase, custom figurines community, AI collectibles display, free AI art community, action figure creator gallery, AI image generation portfolio',
    ogTitle: 'AiFigure Gallery - Explore Amazing AI-Generated Action Figures | Community Showcase',
    ogDescription: 'Browse our community gallery of stunning AI-generated action figures. Discover unique creations from artists worldwide, get inspired, and join the AiFigure community.',
    ogImage: 'https://aifigure.com/gallery-og-image.jpg',
    ogUrl: window.location.href,
    twitterTitle: 'AiFigure Gallery - Explore Amazing AI-Generated Action Figures | Community Showcase',
    twitterDescription: 'Browse our community gallery of stunning AI-generated action figures. Discover unique creations from artists worldwide, get inspired, and join the AiFigure community.',
    twitterImage: 'https://aifigure.com/gallery-og-image.jpg',
    canonical: window.location.href,
    type: 'website',
  });

  // Initialize gallery images if not already loaded
  useEffect(() => {
    console.log('🎯 Gallery: Checking if images need to be fetched', {
      imagesLength: images.length,
      loading,
      error: !!error,
      isAuthenticated
    });

    if (images.length === 0 && !loading && !error) {
      console.log('🎯 Gallery: Initial fetch - no images in store');
      fetchImages(true);
    }
  }, [images.length, loading, error, fetchImages, isAuthenticated]); // Include dependencies

  // Use react-intersection-observer for more reliable detection
  const { ref: loadMoreRef, inView: isIntersecting } = useInView({
    threshold: 0.3, // More sensitive - trigger when 30% visible
    rootMargin: '50px', // Smaller margin for earlier detection
    triggerOnce: false, // Allow multiple triggers
    delay: 100, // Small delay to prevent false positives
  });

  // Prevent multiple simultaneous loads
  const lastLoadTime = useRef<number>(0);
  const loadAttempts = useRef<number>(0);

  // Debug state for development
  const [debugMode] = useState(() => {
    return new URLSearchParams(window.location.search).get('debug') === 'infinite-scroll';
  });

  // Store element reference for scroll fallback
  const elementRef = React.useRef<Element | null>(null);

  // Fallback scroll detection for when intersection observer fails
  React.useEffect(() => {
    let scrollTimeout: NodeJS.Timeout;

    const handleScroll = () => {
      // Clear existing timeout
      if (scrollTimeout) clearTimeout(scrollTimeout);

      // Set new timeout to check scroll position
      scrollTimeout = setTimeout(() => {
        if (!elementRef.current || !hasMore || loading) return;

        const element = elementRef.current;
        const rect = element.getBoundingClientRect();
        const windowHeight = window.innerHeight;

        // Check if element is near viewport (within 200px of bottom)
        const isNearBottom = rect.top <= windowHeight + 200 && rect.bottom >= 0;

        console.log('📜 Scroll fallback check:', {
          isNearBottom,
          elementTop: rect.top,
          windowHeight,
          hasMore,
          loading
        });

        if (isNearBottom && hasMore && !loading) {
          const now = Date.now();
          const timeSinceLastLoad = now - lastLoadTime.current;

          if (timeSinceLastLoad > 300) {
            console.log('🔄 Fallback scroll triggered: loading more images');
            loadAttempts.current += 1;
            lastLoadTime.current = now;
            setTimeout(() => loadMore(), 100);
          }
        }
      }, 100); // Debounce scroll events
    };

    // Add fallback scroll detection as backup (always enabled for reliability)
    console.log('📜 Scroll fallback enabled as backup mechanism');
    window.addEventListener('scroll', handleScroll, { passive: true });

    return () => {
      if (scrollTimeout) clearTimeout(scrollTimeout);
      window.removeEventListener('scroll', handleScroll);
    };
  }, [hasMore, loading, loadMore]);

  // Load more when intersection observer triggers
  React.useEffect(() => {
    const now = Date.now();
    const timeSinceLastLoad = now - lastLoadTime.current;

    console.log('👀 Intersection state: isIntersecting =', isIntersecting, ', hasMore =', hasMore, ', loading =', loading, ', timeSinceLastLoad =', timeSinceLastLoad);

    // Debug element position
    if (debugMode && elementRef.current) {
      const rect = elementRef.current.getBoundingClientRect();
      console.log('📍 Trigger element position:', {
        top: rect.top,
        bottom: rect.bottom,
        height: rect.height,
        viewportHeight: window.innerHeight
      });
    }

    // More aggressive loading: trigger when element is in view and conditions are met
    if (isIntersecting && hasMore && !loading && timeSinceLastLoad > 300) {
      console.log('🔄 Infinite scroll triggered: loading more images');
      loadAttempts.current += 1;
      lastLoadTime.current = now;

      // Add a small delay to ensure smooth scrolling
      setTimeout(() => {
        loadMore();
      }, 100);
    } else if (isIntersecting && !hasMore) {
      console.log('🎉 No more images to load');
    } else if (isIntersecting && loading) {
      console.log('⏳ Already loading, skipping...');
    } else if (isIntersecting && timeSinceLastLoad <= 300) {
      console.log('⚡ Throttled: too soon since last load');
    }
  }, [isIntersecting, hasMore, loading, loadMore, debugMode]);

  // Initialize liked images when images or user changes
  useEffect(() => {
    if (user && images.length > 0) {
      const userLikedImages = new Set<string>();
      images.forEach(image => {
        if (image.likes?.includes(user.uid)) {
          userLikedImages.add(image.id);
        }
      });
      setLikedImages(userLikedImages);
    } else {
      // For anonymous users, show no liked images (they can still like but it won't persist)
      setLikedImages(new Set());
    }
    // Reset optimistic counts when images change
    setOptimisticLikeCounts(new Map());
  }, [images, user]);

  // Restore scroll position when returning from image page
  useEffect(() => {
    const restoreScrollPosition = sessionStorage.getItem('restoreScrollPosition');
    if (restoreScrollPosition) {
      const scrollPos = parseInt(restoreScrollPosition, 10);
      if (scrollPos > 0) {
        // Use setTimeout to ensure the page has rendered
        setTimeout(() => {
          window.scrollTo({ top: scrollPos, behavior: 'auto' });
        }, 100);
      }
      sessionStorage.removeItem('restoreScrollPosition');
    }
  }, []);

  // Handle like/unlike functionality with optimistic updates
  const handleLike = async (imageId: string, currentLikes: string[] = [], currentCount: number = 0) => {
    if (likeLoading.has(imageId)) return;

    // For anonymous users, only show visual feedback without persistence
    if (!user) {
      alert('Please sign in to save your likes permanently');
      return;
    }

    const imageRef = doc(db, 'publicImages', imageId);
    const wasLiked = likedImages.has(imageId);

    // Optimistic UI update - update immediately
    setLikedImages(prev => {
      const newSet = new Set(prev);
      if (wasLiked) {
        newSet.delete(imageId);
      } else {
        newSet.add(imageId);
      }
      return newSet;
    });

    // Update optimistic like count
    setOptimisticLikeCounts(prev => {
      const newMap = new Map(prev);
      newMap.set(imageId, wasLiked ? currentCount - 1 : currentCount + 1);
      return newMap;
    });

    setLikeLoading(prev => new Set(prev).add(imageId));

    try {
      if (wasLiked) {
        // Unlike: remove user from likes array
        await updateDoc(imageRef, {
          likes: arrayRemove(user.uid),
          likesCount: Math.max(0, currentLikes.length - 1)
        });
      } else {
        // Like: add user to likes array
        await updateDoc(imageRef, {
          likes: arrayUnion(user.uid),
          likesCount: currentLikes.length + 1
        });
      }
    } catch (error) {
      console.error('Error updating like:', error);

      // Revert optimistic updates on error
      setLikedImages(prev => {
        const newSet = new Set(prev);
        if (wasLiked) {
          newSet.add(imageId); // Re-add if it was liked before
        } else {
          newSet.delete(imageId); // Remove if it wasn't liked before
        }
        return newSet;
      });

      // Revert optimistic like count
      setOptimisticLikeCounts(prev => {
        const newMap = new Map(prev);
        newMap.set(imageId, currentCount);
        return newMap;
      });

      alert('Failed to update like. Please try again.');
    } finally {
      setLikeLoading(prev => {
        const newSet = new Set(prev);
        newSet.delete(imageId);
        return newSet;
      });
    }
  };

  // Handle image click to navigate to image page
  const handleImageClick = (image: GalleryImage) => {
    // Store current scroll position
    const scrollPosition = window.scrollY;
    navigate(`/image/${image.id}`, {
      state: { scrollPosition },
      replace: false
    });
  };



  return (
    <div className="min-h-screen bg-black text-white">
      {/* Debug Panel */}
      {debugMode && (
        <div className="fixed top-20 right-4 bg-gray-900 border border-gray-700 rounded-lg p-4 z-50 text-xs font-mono max-w-xs">
          <div className="text-blue-400 font-bold mb-2">🔧 Infinite Scroll Debug</div>
          <div className="space-y-1 text-gray-300">
            <div>Images: {images.length}</div>
            <div>Loading: {loading ? '✅' : '❌'}</div>
            <div>Has More: {hasMore ? '✅' : '❌'}</div>
            <div>Intersecting: {isIntersecting ? '✅' : '❌'}</div>
            <div>Load Attempts: {loadAttempts.current}</div>
            <div>Time Since Load: {Date.now() - lastLoadTime.current}ms</div>
            <div>Trigger Visible: {isIntersecting ? '✅' : '❌'}</div>
            <div>IO Supported: {typeof IntersectionObserver !== 'undefined' ? '✅' : '❌'}</div>
          </div>
        </div>
      )}


      {/* Header - constrained width */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="text-center mb-12">
          <h1 className="pb-2 text-4xl font-bold mb-4 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
            {!isAuthenticated ? 'AI Action Figure Generator' : 'Community Gallery'}
          </h1>
          <p className="text-xl text-gray-400 max-w-2xl mx-auto">
            {!isAuthenticated ? 'Create your amazing action figures with one click!' : 'Explore amazing AI-generated action figures created by our community'}
          </p>
          {!isAuthenticated &&
            <><h1 className="pb-4 mt-4 text-4xl font-bold  bg-gradient-to-r from-yellow-400 to-purple-400 bg-clip-text text-transparent">
              Sign up to create your own figures for FREE!
            </h1>
              <button
                onClick={() => navigate('/auth')}
                className="mt-6 px-8 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-purple-500 text-white font-bold text-lg shadow-lg hover:from-blue-600 hover:to-purple-600 transition-all"
              >
                Sign Up Free
              </button>
            </>}
        </div>
      </div>

      {/* Gallery Grid - full width */}
      <div className="w-full px-4 sm:px-6 lg:px-8">
        {/* Error State */}
        {error && (
          <div className="text-center py-16">
            <div className="w-24 h-24 bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-4">
              <span className="text-red-400 text-4xl font-bold">!</span>
            </div>
            <h3 className="text-xl font-semibold text-red-400 mb-2">Error Loading Gallery</h3>
            <p className="text-gray-500 mb-4">{error}</p>
            <button
              onClick={() => window.location.reload()}
              className="px-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
            >
              Try Again
            </button>
          </div>
        )}

        {/* Gallery Grid */}
        {!error && (
          <>
            {images.length === 0 && !loading ? (
              <div className="text-center py-16">
                <div className="w-24 h-24 bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-4">
                  <svg className="w-12 h-12 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                  </svg>
                </div>
                <h3 className="text-xl font-semibold text-gray-300 mb-2">No images yet</h3>
                <p className="text-gray-500">Be the first to share your AI-generated action figures!</p>
              </div>
            ) : (
              <div className="relative">
                <WaterfallGrid
                  items={images.map(img => ({
                    id: img.id,
                    imageUrl: img.imageUrl,
                  }))}
                  baseColumnWidth={280}
                  gap={16}
                  onItemClick={(item) => {
                    const fullImage = images.find(img => img.id === item.id);
                    if (fullImage) handleImageClick(fullImage);
                  }}
                >
                  {(item, style) => {
                    const fullImage = images.find(img => img.id === item.id);
                    if (!fullImage) return null;

                    return (
                      <div className="group relative bg-gray-900 overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300">
                        <img
                          src={item.imageUrl}
                          alt="AI generated action figure"
                          className="w-full h-full object-cover transition-transform duration-500 ease-out group-hover:scale-110"
                          style={{
                            ...style,
                            transformOrigin: 'center center'
                          }}
                        />
                        <div className="absolute inset-0">
                          <div className="absolute bottom-0 left-0 right-0 p-4">
                            <div className="flex items-center justify-between text-white">
                              <div className="text-sm">
                                {/* <p className="font-medium truncate">
                                  {fullImage.userEmail?.split('@')[0] || 'Anonymous'}
                                </p>
                                <p className="text-gray-300 text-xs">
                                  {fullImage.createdAt.toLocaleDateString()}
                                </p> */}
                              </div>
                              <div className="flex items-center space-2 gap-1">
                                {/* Like Button */}
                                <div
                                  className={`flex items-center space-x-1 bg-black/30 rounded-full px-2 py-1 cursor-pointer transition-all duration-200 ${likedImages.has(fullImage.id) ? 'bg-red-500/30' : 'hover:bg-black/50'
                                    }`}
                                  onClick={(e) => {
                                    e.stopPropagation();
                                    const currentCount = fullImage.likesCount || fullImage.likes?.length || 0;
                                    handleLike(fullImage.id, fullImage.likes || [], currentCount);
                                  }}
                                >
                                  <FiHeart
                                    className={`w-4 h-4 transition-colors duration-200 ${likedImages.has(fullImage.id)
                                      ? 'text-red-500 fill-current'
                                      : 'text-red-400'
                                      } ${likeLoading.has(fullImage.id) ? 'animate-pulse' : ''
                                      }`}
                                  />
                                  <span className="text-xs flex items-center">
                                    {likeLoading.has(fullImage.id) ? (
                                      <div className="w-3 h-3 border border-gray-400 border-t-transparent rounded-full animate-spin ml-1"></div>
                                    ) : (
                                      optimisticLikeCounts.get(fullImage.id) ?? fullImage.likesCount ?? fullImage.likes?.length ?? 0
                                    )}
                                  </span>
                                </div>

                                {/* Share Button */}
                                <ShareButton
                                  imageUrl={item.imageUrl}
                                  imageId={fullImage.id}
                                  title={`Amazing AI Action Figure - Created with AiFigure`}
                                  description={`Check out this incredible AI-generated action figure! Created using advanced AI technology at AiFigure.`}
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    );
                  }}
                </WaterfallGrid>

                {/* Loading skeletons for initial load */}
                {/* {loading && images.length === 0 && (
                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mt-8">
                    {Array.from({ length: 12 }).map((_, index) => (
                      <LoadingSkeleton key={index} />
                    ))}
                  </div>
                )} */}

                {loading && images.length === 0 && (
                  <div className="flex justify-center items-center py-16">
                    <div className="flex flex-col items-center">
                      <div className="animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent mb-4"></div>
                      <span className="text-gray-400 text-lg">Loading gallery...</span>
                    </div>
                  </div>
                )}

                {/* Infinite scroll trigger - made taller and more visible */}
                <div
                  ref={(node) => {
                    loadMoreRef(node); // Set ref for useInView
                    elementRef.current = node; // Set ref for scroll fallback
                  }}
                  className=" h-32 flex flex-col items-center justify-center mt-8 mb-4"
                  data-testid="infinite-scroll-trigger"
                >
                  {loading && images.length > 0 && (
                    <div className="flex flex-col items-center space-y-2">
                      <div className="animate-spin rounded-full h-8 w-8 border-3 border-blue-500 border-t-transparent"></div>
                    </div>
                  )}

                  {images.length === 0 && !loading && (
                    <div className="text-gray-500 text-sm">
                      No images found
                    </div>
                  )}
                </div>
              </div>
            )}
          </>
        )}

        <div className='cursor-pointer fixed bottom-10 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full p-4 text-white left-1/2 -translate-x-1/2 mx-auto text-center font-bold'
          onClick={() => navigate('/create')}
        >
          + Create your own now
        </div>

      </div>


    </div >
  );
};

export default Gallery;