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

const PROVIDER_ID = "unsplash";

export default function UnsplashGallery() {
  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 } = useUnsplash(
    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.urls?.regular || img.urls?.full,
            imageSrc: img.urls?.regular || img.urls?.small,
            imageAlt: img.alt_description || img.description || "Unsplash image",
            author: {
              url: img.user?.links?.html,
              avatar: img.user?.profile_image?.medium || img.user?.profile_image?.small,
              name: img.user?.name || img.user?.username,
            },
            previewUrl: img.links?.html,
          };
        });
        selectAll(PROVIDER_ID, images.map((img) => String(img.id)), imageData);
      }
    };
    window.addEventListener('bulkSelectAll', handleBulkSelect);
    return () => window.removeEventListener('bulkSelectAll', handleBulkSelect);
  }, [images, selectAll]);

  // Register images for modal navigation
  useEffect(() => {
    if (images.length > 0) {
      const list = images.map((image, idx) => ({
        imageSrc: image.urls?.full || image.urls?.regular,
        imageAlt: image.alt_description || image.description || "Unsplash photo",
        previewUrl: image.links?.html || image.urls?.full,
        author: { url: image.user?.links?.html, avatar: image.user?.profile_image?.small, name: image.user?.name || image.user?.username },
        importUrl: image.urls?.full || image.urls?.regular,
        downloadOptions: [
          { label: "Full", type: "full", url: image.urls?.full },
          { label: "Regular", type: "regular", url: image.urls?.regular },
          { label: "Small", type: "small", url: image.urls?.small },
        ].filter(o => o.url),
        providerId: PROVIDER_ID, imageId: String(image.id), providerBadge: "Unsplash", 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 Unsplash photos..."
        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.urls?.regular || image.urls?.full}
              imageAlt={image.alt_description || image.description || "Unsplash photo"}
              previewUrl={image.links?.html || image.urls?.full}
              author={{
                url: image.user?.links?.html,
                avatar: image.user?.profile_image?.small,
                name: image.user?.name || image.user?.username,
              }}
              importUrl={image.urls?.full || image.urls?.regular}
              downloadOptions={[
                { label: "Full", type: "full", url: image.urls?.full },
                { label: "Regular", type: "regular", url: image.urls?.regular },
                { label: "Small", type: "small", url: image.urls?.small },
                { label: "Thumb", type: "thumb", url: image.urls?.thumb },
              ].filter((o) => o.url)}
              variant="list"
              providerBadge="Unsplash"
            />
          ))}
        </ImageList>
      ) : (
        <ImageGrid>
          {images.map((image, index) => (
            <ImageCard
              key={image.id}
              index={index}
              providerId={PROVIDER_ID}
              imageId={String(image.id)}
              imageData={image}
              imageSrc={image.urls?.regular || image.urls?.full}
              imageAlt={image.alt_description || image.description || "Unsplash photo"}
              previewUrl={image.links?.html || image.urls?.full}
              author={{
                url: image.user?.links?.html,
                avatar: image.user?.profile_image?.small,
                name: image.user?.name || image.user?.username,
              }}
              importUrl={image.urls?.full || image.urls?.regular}
              downloadOptions={[
                { label: "Full", type: "full", url: image.urls?.full },
                { label: "Regular", type: "regular", url: image.urls?.regular },
                { label: "Small", type: "small", url: image.urls?.small },
                { label: "Thumb", type: "thumb", url: image.urls?.thumb },
              ].filter((o) => o.url)}
              providerBadge="Unsplash"
            />
          ))}
        </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 focus:ring-2 focus:ring-gray-600 focus:ring-offset-2 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>
  );
}