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

const PROVIDER_ID = "pexels";

export default function PexelsGallery() {
  const [query, setQuery] = useState("");
  const debouncedQuery = useDebounce(query, 500);
  const { viewMode, itemsPerPage, loadMoreMode, getFilters, selectAll, setPreviewImageList } = useGenerator();
  const filters = getFilters(PROVIDER_ID);
  const hasMoreRef = useRef(true);
  const loadingRef = useRef(false);
  const { page, loadMore, resetPage, observerTarget } = useInfiniteScroll(1, {
    hasMoreRef,
    loadingRef,
  });
  const { images, loading, scrollLoading, error, hasMore } = usePexels(
    debouncedQuery,
    page,
    filters,
    itemsPerPage
  );
  useEffect(() => {
    hasMoreRef.current = loadMoreMode === "auto" ? hasMore : false;
    loadingRef.current = scrollLoading;
  }, [hasMore, scrollLoading, loadMoreMode]);

  // Reset page when filters or settings change
  useEffect(() => {
    resetPage(1);
  }, [filters.orientation, filters.color, filters.order, itemsPerPage, resetPage]);

  // Handle bulk select all
  useEffect(() => {
    const handleBulkSelect = (e) => {
      if (e.detail.providerId === PROVIDER_ID && images.length > 0) {
        const imageData = {};
        images.forEach((img) => {
          const key = `${PROVIDER_ID}:${img.id}`;
          imageData[key] = {
            importUrl: img.src?.original,
            imageSrc: img.src?.original,
            imageAlt: img.alt || "Pexels photo",
            author: {
              url: img.photographer_url,
              avatar: img.photographer_avatar || initialsAvatar(img.photographer || ""),
              name: img.photographer,
            },
            previewUrl: img.url,
          };
        });
        selectAll(PROVIDER_ID, images.map((img) => String(img.id)), imageData);
      }
    };
    window.addEventListener('bulkSelectAll', handleBulkSelect);
    return () => window.removeEventListener('bulkSelectAll', handleBulkSelect);
  }, [images, selectAll]);

  useEffect(() => {
    if (images.length > 0) {
      const list = images.map((img, idx) => ({
        imageSrc: img.src?.original, imageAlt: img.alt || "Pexels photo", previewUrl: img.url,
        author: { url: img.photographer_url, avatar: img.photographer_avatar || initialsAvatar(img.photographer || ""), name: img.photographer },
        importUrl: img.src?.original,
        downloadOptions: [{ label: "Original", type: "original", url: img.src?.original }, { label: "Large", type: "large", url: img.src?.large2x || img.src?.large }, { label: "Medium", type: "medium", url: img.src?.medium }].filter(o => o.url),
        providerId: PROVIDER_ID, imageId: String(img.id), providerBadge: "Pexels", index: idx,
      }));
      setPreviewImageList(list);
    }
  }, [images, setPreviewImageList]);

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

  const isEmpty = !loading && !error && images.length === 0;

  return (
    <div>
      <SearchBar
        value={query}
        onChange={handleSearchChange}
        placeholder="Search images..."
        showSubmitButton={true}
        providerId={PROVIDER_ID}
        isSearching={loading && debouncedQuery.length > 0}
      />

      <ErrorMessage message={error} />

      {loading ? (
        <ImageSkeleton variant={viewMode} />
      ) : isEmpty ? (
        <EmptyState variant="noResults" query={debouncedQuery || undefined} />
      ) : viewMode === "list" ? (
        <ImageList>
          {images.map((image, index) => (
            <ImageCard
              key={image.id}
              index={index}
              providerId={PROVIDER_ID}
              imageId={String(image.id)}
              imageData={image}
              imageSrc={image.src?.original}
              imageAlt={image.alt || "Pexels photo"}
              previewUrl={image.url}
              author={{
                url: image.photographer_url,
                avatar:
                  image.photographer_avatar ||
                  initialsAvatar(image.photographer || ""),
                name: image.photographer,
              }}
              importUrl={image.src?.original}
              downloadOptions={[
                { label: "Original", type: "original", url: image.src?.original },
                { label: "Large", type: "large", url: image.src?.large },
                { label: "Medium", type: "medium", url: image.src?.medium },
                { label: "Small", type: "small", url: image.src?.small },
                { label: "Tiny", type: "tiny", url: image.src?.tiny },
              ].filter((o) => o?.url)}
              variant="list"
              providerBadge="Pexels"
            />
          ))}
        </ImageList>
      ) : (
        <ImageGrid>
          {images.map((image, index) => (
            <ImageCard
              key={image.id}
              index={index}
              providerId={PROVIDER_ID}
              imageId={String(image.id)}
              imageData={image}
              imageSrc={image.src?.original}
              imageAlt={image.alt || "Pexels photo"}
              previewUrl={image.url}
              author={{
                url: image.photographer_url,
                avatar:
                  image.photographer_avatar ||
                  initialsAvatar(image.photographer || ""),
                name: image.photographer,
              }}
              importUrl={image.src?.original}
              downloadOptions={[
                { label: "Original", type: "original", url: image.src?.original },
                { label: "Large", type: "large", url: image.src?.large },
                { label: "Medium", type: "medium", url: image.src?.medium },
                { label: "Small", type: "small", url: image.src?.small },
                { label: "Tiny", type: "tiny", url: image.src?.tiny },
              ].filter((o) => o?.url)}
              providerBadge="Pexels"
            />
          ))}
        </ImageGrid>
      )}

      {loadMoreMode === "auto" && <div ref={observerTarget} className="h-4" aria-hidden="true" />}

      {loadMoreMode === "manual" && !loading && hasMore && images.length > 0 && (
        <div className="text-center mt-6">
          <button
            type="button"
            onClick={loadMore}
            disabled={scrollLoading}
            className="px-5 py-2.5 text-sm font-medium text-white rounded-xl bg-gray-800 hover:bg-gray-900 disabled:opacity-50"
          >
            {scrollLoading ? "Loading more..." : "Load More"}
          </button>
        </div>
      )}

      {scrollLoading && (
        <p className="text-center mt-4 text-sm text-gray-500" aria-live="polite">
          Loading more images...
        </p>
      )}

      {!loading && !scrollLoading && images.length > 0 && !hasMore && (
        <p className="text-center mt-4 text-sm text-gray-500">No more results.</p>
      )}
    </div>
  );
}