import React, { useState, useRef, useEffect } from "react";
import { useDebounce } from "../../../hooks/useDebounce";
import { useInfiniteScroll } from "../../../hooks/useInfiniteScroll";
import { useGenerator } from "../../../context/GeneratorContext";
import { usePexels } from "../../../hooks/usePexels";
import { usePixabay } from "../../../hooks/usePixabay";
import { useUnsplash } from "../../../hooks/useUnsplash";
import { useOpenverse } from "../../../hooks/useOpenverse";
import { useWikimedia } from "../../../hooks/useWikimedia";
import { useGiphy } from "../../../hooks/useGiphy";
import {
  SearchBar,
  ImageCard,
  ImageGrid,
  ImageList,
  ImageSkeleton,
  EmptyState,
  ErrorMessage,
} from "../../shared";
import { initialsAvatar } from "../../../utils/helpers";

const PROVIDER_ID = "global";

// Provider metadata for badges
const PROVIDER_META = {
  pexels: { name: "Pexels", color: "#05a081" },
  pixabay: { name: "Pixabay", color: "#2ec66d" },
  unsplash: { name: "Unsplash", color: "#000000" },
  openverse: { name: "Openverse", color: "#c52b9b" },
  wikimedia: { name: "Wikimedia", color: "#3366cc" },
  giphy: { name: "Giphy", color: "#00ff99" },
};

export default function GlobalGallery() {
  const [query, setQuery] = useState("");
  const debouncedQuery = useDebounce(query, 500);
  const { viewMode, itemsPerPage, loadMoreMode, getFilters, selectAll, setPreviewImageList } = useGenerator();
  const filters = getFilters(PROVIDER_ID);

  // Infinite scroll state
  const hasMoreRef = useRef(true);
  const loadingRef = useRef(false);
  const [isLoadingMore, setIsLoadingMore] = useState(false);
  const { page, loadMore, resetPage, observerTarget } = useInfiniteScroll(1, {
    hasMoreRef,
    loadingRef,
  });

  // Check which providers are enabled from config
  const config = typeof AI_IMAGE_AdminConfig !== "undefined" ? AI_IMAGE_AdminConfig : {};
  const providerEnabledConfig = config.provider_enabled || {};
  const enabledProviders = {
    pexels: providerEnabledConfig.pexels !== false,
    pixabay: providerEnabledConfig.pixabay !== false,
    unsplash: providerEnabledConfig.unsplash !== false,
    openverse: providerEnabledConfig.openverse !== false,
    wikimedia: providerEnabledConfig.wikimedia !== false,
    giphy: providerEnabledConfig.giphy !== false,
  };

  // Get provider order from config
  const providerOrder = config.provider_order || ['pexels', 'pixabay', 'openverse', 'wikimedia', 'unsplash', 'giphy'];
  const providerOrderMap = {};
  providerOrder.forEach((provider, index) => {
    providerOrderMap[provider] = index;
  });

  // Fetch from enabled providers only with pagination
  const pexelsData = enabledProviders.pexels ? usePexels(debouncedQuery, page, filters, itemsPerPage) : { images: [], loading: false, scrollLoading: false, error: null, hasMore: false };
  const pixabayData = enabledProviders.pixabay ? usePixabay(debouncedQuery || "", page, filters, itemsPerPage) : { images: [], loading: false, scrollLoading: false, error: null, hasMore: false };
  const unsplashData = enabledProviders.unsplash ? useUnsplash(debouncedQuery, page, filters, itemsPerPage) : { images: [], loading: false, scrollLoading: false, error: null, hasMore: false };
  const openverseData = enabledProviders.openverse ? useOpenverse(debouncedQuery || "", page, filters, itemsPerPage) : { images: [], loading: false, scrollLoading: false, error: null, hasMore: false };
  const wikimediaData = enabledProviders.wikimedia ? useWikimedia(debouncedQuery || "", page, filters, itemsPerPage) : { images: [], loading: false, scrollLoading: false, error: null, hasMore: false };
  const giphyData = enabledProviders.giphy ? useGiphy(debouncedQuery, page, filters, itemsPerPage) : { images: [], loading: false, scrollLoading: false, error: null, hasMore: false };

  // Reset page when query or filters change
  useEffect(() => {
    resetPage(1);
  }, [debouncedQuery, filters.color, filters.license, filters.rating, filters.order, filters.source, filters.category, resetPage]);

  // Combine all images with provider info (no limit)
  const allImages = [];

  if (enabledProviders.pexels && pexelsData.images) {
    pexelsData.images.forEach((img) => {
      allImages.push({
        provider: "pexels",
        id: img.id,
        data: img,
        imageSrc: img.src?.large || img.src?.medium || img.src?.original,
        imageAlt: img.alt || "Pexels image",
        previewUrl: img.url,
        author: {
          name: img.photographer,
          url: img.photographer_url,
          avatar: initialsAvatar(img.photographer),
        },
        importUrl: img.src?.large || img.src?.original,
        downloadOptions: [
          { label: "Original", url: img.src?.original },
          { label: "Large", url: img.src?.large2x },
          { label: "Medium", url: img.src?.large },
          { label: "Small", url: img.src?.medium },
        ].filter((opt) => opt.url),
      });
    });
  }

  if (enabledProviders.pixabay && pixabayData.images) {
    pixabayData.images.forEach((img) => {
      allImages.push({
        provider: "pixabay",
        id: img.id,
        data: img,
        imageSrc: img.webformatURL,
        imageAlt: img.tags || "Pixabay image",
        previewUrl: img.pageURL,
        author: {
          name: img.user,
          url: `https://pixabay.com/users/${img.user}-${img.user_id}/`,
          avatar: img.userImageURL || initialsAvatar(img.user),
        },
        importUrl: img.largeImageURL,
        downloadOptions: [
          { label: "Large", url: img.largeImageURL },
          { label: "Medium", url: img.webformatURL },
        ].filter((opt) => opt.url),
      });
    });
  }

  if (enabledProviders.unsplash && unsplashData.images) {
    unsplashData.images.forEach((img) => {
      allImages.push({
        provider: "unsplash",
        id: img.id,
        data: img,
        imageSrc: img.urls?.regular || img.urls?.small,
        imageAlt: img.alt_description || img.description || "Unsplash image",
        previewUrl: img.links?.html,
        author: {
          name: img.user?.name || img.user?.username,
          url: img.user?.links?.html,
          avatar: img.user?.profile_image?.medium || img.user?.profile_image?.small,
        },
        importUrl: img.urls?.regular || img.urls?.full,
        downloadOptions: [
          { label: "Full", url: img.urls?.full },
          { label: "Regular", url: img.urls?.regular },
          { label: "Small", url: img.urls?.small },
        ].filter((opt) => opt.url),
      });
    });
  }

  if (enabledProviders.openverse && openverseData.images) {
    openverseData.images.forEach((img) => {
      allImages.push({
        provider: "openverse",
        id: img.id,
        data: img,
        imageSrc: img.thumbnail || img.url,
        imageAlt: img.title || "Openverse image",
        previewUrl: img.foreign_landing_url,
        author: {
          name: img.creator || "Unknown",
          url: img.creator_url,
          avatar: initialsAvatar(img.creator || "Unknown"),
        },
        importUrl: img.url,
        downloadOptions: [{ label: "Original", url: img.url }],
      });
    });
  }

  if (enabledProviders.wikimedia && wikimediaData.images) {
    wikimediaData.images.forEach((img) => {
      allImages.push({
        provider: "wikimedia",
        id: img.id,
        data: img,
        imageSrc: img.thumbnail || img.url,
        imageAlt: img.title || img.description || "Wikimedia image",
        previewUrl: img.page_url,
        author: {
          name: img.author || "Wikimedia contributor",
          url: img.page_url || "https://commons.wikimedia.org",
          avatar: initialsAvatar(img.author || "Wikimedia"),
        },
        importUrl: img.url,
        downloadOptions: [
          { label: "Original", url: img.url },
          { label: "Preview", url: img.thumbnail },
        ].filter((opt) => opt.url),
      });
    });
  }

  if (enabledProviders.giphy && giphyData.images) {
    giphyData.images.forEach((img) => {
      const origUrl = img.images?.original?.url;
      const downsizedUrl = img.images?.downsized?.url;
      allImages.push({
        provider: "giphy",
        id: img.id,
        data: img,
        imageSrc: origUrl || downsizedUrl || img.images?.fixed_width?.url,
        imageAlt: img.title || "GIF",
        previewUrl: img.url,
        author: {
          name: img.username || "Giphy",
          url: img.username ? `https://giphy.com/${img.username}` : "https://giphy.com",
          avatar: initialsAvatar(img.username || "Giphy"),
        },
        importUrl: origUrl,
        downloadOptions: [
          { label: "Original", url: origUrl },
          { label: "Downsized", url: downsizedUrl },
        ].filter((opt) => opt.url),
        // GIF animation control (small still for grid, animate on hover)
        gifStillUrl: img.images?.fixed_height_still?.url || img.images?.fixed_width_still?.url,
        gifAnimatedUrl: img.images?.fixed_height?.url || img.images?.fixed_width?.url || origUrl,
      });
    });
  }

  // Sort by configured provider order
  allImages.sort((a, b) => {
    const orderA = providerOrderMap[a.provider] !== undefined ? providerOrderMap[a.provider] : 999;
    const orderB = providerOrderMap[b.provider] !== undefined ? providerOrderMap[b.provider] : 999;
    return orderA - orderB;
  });

  // Register images for modal navigation
  useEffect(() => {
    if (allImages.length > 0) {
      const list = allImages.map((img, idx) => ({
        imageSrc: img.imageSrc, imageAlt: img.imageAlt, previewUrl: img.previewUrl,
        author: img.author, importUrl: img.importUrl, downloadOptions: img.downloadOptions,
        providerId: img.provider, imageId: String(img.id), providerBadge: PROVIDER_META[img.provider]?.name, index: idx,
        gifStillUrl: img.gifStillUrl, gifAnimatedUrl: img.gifAnimatedUrl,
      }));
      setPreviewImageList(list);
    }
  }, [allImages.length, setPreviewImageList]);

  const handleSearchChange = (value) => {
    setQuery(value);
  };

  const handleLoadMore = () => {
    setIsLoadingMore(true);
    loadMore();
  };

  const isLoading = 
    (enabledProviders.pexels && pexelsData.loading) ||
    (enabledProviders.pixabay && pixabayData.loading) ||
    (enabledProviders.unsplash && unsplashData.loading) ||
    (enabledProviders.openverse && openverseData.loading) ||
    (enabledProviders.wikimedia && wikimediaData.loading) ||
    (enabledProviders.giphy && giphyData.loading);

  const isScrollLoading =
    isLoadingMore ||
    (enabledProviders.pexels && pexelsData.scrollLoading) ||
    (enabledProviders.pixabay && pixabayData.scrollLoading) ||
    (enabledProviders.unsplash && unsplashData.scrollLoading) ||
    (enabledProviders.openverse && openverseData.scrollLoading) ||
    (enabledProviders.wikimedia && wikimediaData.scrollLoading) ||
    (enabledProviders.giphy && giphyData.scrollLoading);

  const hasError = 
    (enabledProviders.pexels && pexelsData.error) ||
    (enabledProviders.pixabay && pixabayData.error) ||
    (enabledProviders.unsplash && unsplashData.error) ||
    (enabledProviders.openverse && openverseData.error) ||
    (enabledProviders.wikimedia && wikimediaData.error) ||
    (enabledProviders.giphy && giphyData.error);

  // Check if any provider has more results
  const hasMore =
    (enabledProviders.pexels && pexelsData.hasMore) ||
    (enabledProviders.pixabay && pixabayData.hasMore) ||
    (enabledProviders.unsplash && unsplashData.hasMore) ||
    (enabledProviders.openverse && openverseData.hasMore) ||
    (enabledProviders.wikimedia && wikimediaData.hasMore) ||
    (enabledProviders.giphy && giphyData.hasMore);

  const isEmpty = !isLoading && allImages.length === 0;

  // Update refs for infinite scroll (only enable auto-scroll if loadMoreMode is "auto")
  useEffect(() => {
    hasMoreRef.current = loadMoreMode === "auto" ? hasMore : false;
    loadingRef.current = isScrollLoading;
  }, [hasMore, isScrollLoading, page, allImages.length, loadMoreMode]);

  // Reset isLoadingMore when any provider finishes loading
  useEffect(() => {
    const anyProviderLoading =
      (enabledProviders.pexels && pexelsData.scrollLoading) ||
      (enabledProviders.pixabay && pixabayData.scrollLoading) ||
      (enabledProviders.unsplash && unsplashData.scrollLoading) ||
      (enabledProviders.openverse && openverseData.scrollLoading) ||
      (enabledProviders.wikimedia && wikimediaData.scrollLoading) ||
      (enabledProviders.giphy && giphyData.scrollLoading);
    
    if (!anyProviderLoading && isLoadingMore) {
      setIsLoadingMore(false);
    }
  }, [
    pexelsData.scrollLoading,
    pixabayData.scrollLoading,
    unsplashData.scrollLoading,
    openverseData.scrollLoading,
    wikimediaData.scrollLoading,
    giphyData.scrollLoading,
    isLoadingMore,
    enabledProviders
  ]);

  // Handle bulk select all
  useEffect(() => {
    const handleBulkSelect = (e) => {
      if (e.detail.providerId === PROVIDER_ID && allImages.length > 0) {
        const imageData = {};
        allImages.forEach((img) => {
          const key = `${img.provider}:${img.id}`;
          imageData[key] = {
            importUrl: img.importUrl,
            imageSrc: img.imageSrc,
            imageAlt: img.imageAlt,
            author: img.author,
            previewUrl: img.previewUrl,
          };
        });
        // For global, we select from all providers
        const allIds = allImages.map((img) => ({ providerId: img.provider, imageId: String(img.id) }));
        // We'll use a different approach - select each provider's images
        allImages.forEach((img) => {
          const key = `${img.provider}:${img.id}`;
          const data = imageData[key];
          if (data) {
            selectAll(img.provider, [String(img.id)], { [key]: data });
          }
        });
      }
    };
    window.addEventListener('bulkSelectAll', handleBulkSelect);
    return () => window.removeEventListener('bulkSelectAll', handleBulkSelect);
  }, [allImages, selectAll]);

  return (
    <div>
      <SearchBar
        value={query}
        onChange={handleSearchChange}
        placeholder="Search across all providers..."
        providerId={PROVIDER_ID}
        isSearching={isLoading && debouncedQuery.length > 0}
      />

      {isLoading && allImages.length === 0 && (
        <ImageSkeleton count={15} variant={viewMode} />
      )}

      {hasError && allImages.length === 0 && (
        <ErrorMessage>
          Error loading images from one or more providers. Please try again.
        </ErrorMessage>
      )}

      {isEmpty && (
        <EmptyState
          variant="no_results"
          title="No images found"
          description="Try a different search term or check if at least one provider is enabled in settings."
        />
      )}

      {allImages.length > 0 && (
        <>
          {viewMode === "list" ? (
            <ImageList>
              {allImages.map((img, index) => (
                <ImageCard
                  key={`${img.provider}-${img.id}`}
                  index={index}
                  imageSrc={img.imageSrc}
                  imageAlt={img.imageAlt}
                  previewUrl={img.previewUrl}
                  author={img.author}
                  importUrl={img.importUrl}
                  downloadOptions={img.downloadOptions}
                  providerId={img.provider}
                  imageId={String(img.id)}
                  imageData={img.data}
                  providerBadge={PROVIDER_META[img.provider]?.name}
                  variant="list"
                  gifStillUrl={img.gifStillUrl}
                  gifAnimatedUrl={img.gifAnimatedUrl}
                />
              ))}
            </ImageList>
          ) : (
            <ImageGrid>
              {allImages.map((img, index) => (
                <ImageCard
                  key={`${img.provider}-${img.id}`}
                  index={index}
                  imageSrc={img.imageSrc}
                  imageAlt={img.imageAlt}
                  previewUrl={img.previewUrl}
                  author={img.author}
                  importUrl={img.importUrl}
                  downloadOptions={img.downloadOptions}
                  providerId={img.provider}
                  imageId={String(img.id)}
                  gifStillUrl={img.gifStillUrl}
                  gifAnimatedUrl={img.gifAnimatedUrl}
                  imageData={img.data}
                  providerBadge={PROVIDER_META[img.provider]?.name}
                  variant="grid"
                />
              ))}
            </ImageGrid>
          )}

          {/* Infinite scroll sentinel (only active when loadMoreMode is "auto") */}
          {loadMoreMode === "auto" && (
            <div 
              ref={observerTarget} 
              className="h-20 w-full flex items-center justify-center"
              style={{ minHeight: '80px' }}
            >
              {/* Invisible trigger for infinite scroll */}
            </div>
          )}

          {/* Loading indicator */}
          {isScrollLoading && (
            <div className="mt-8 mb-4">
              <ImageSkeleton count={8} variant={viewMode} />
            </div>
          )}

          {/* Load More Button (shows in manual mode or as fallback in auto mode) */}
          {!isScrollLoading && hasMore && (
            <div className="mt-8 mb-4 flex justify-center">
              <button
                onClick={handleLoadMore}
                disabled={isLoadingMore}
                className="inline-flex items-center gap-2 px-6 py-3 bg-gray-800 text-white text-sm font-semibold rounded-md hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-600 focus:ring-offset-2 transition-all shadow-sm hover:shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {isLoadingMore ? (
                  <>
                    <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                    </svg>
                    Loading...
                  </>
                ) : (
                  <>
                    <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                      <path strokeLinecap="round" strokeLinejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                    </svg>
                    Load More Images
                  </>
                )}
              </button>
            </div>
          )}

          {/* No more results message */}
          {!hasMore && !isScrollLoading && (
            <div className="mt-8 mb-4 text-center">
              <p className="text-sm text-gray-500">
                No more images to load. Showing all {allImages.length} results from all providers.
              </p>
            </div>
          )}
        </>
      )}
    </div>
  );
}