import React, { useEffect } from "react";
import { useGenerator } from "../../../context/GeneratorContext";
import {
  ImageCard,
  ImageGrid,
  ImageList,
  EmptyState,
} from "../../shared";
import { initialsAvatar } from "../../../utils/helpers";

const PROVIDER_ID = "favorites";

export default function FavoritesGallery() {
  const { viewMode, getFavoritesList, selectAll, setPreviewImageList } = useGenerator();
  const list = getFavoritesList();

  // Update preview image list whenever favorites change
  useEffect(() => {
    if (list.length > 0) {
      const previewList = list.map((item, idx) => ({
        imageSrc: item.imageSrc || item.urls?.regular || item.url,
        imageAlt: item.imageAlt || item.title || item.alt_description || "Favorite",
        previewUrl: item.previewUrl || item.url || item.links?.html,
        author: item.author || {
          url: item.creator_url || item.user?.links?.html,
          avatar: item.photographer_avatar || item.user?.profile_image?.small || initialsAvatar(item.creator || item.photographer || item.user?.name || "?"),
          name: item.creator || item.photographer || item.user?.name || item.user?.username,
        },
        importUrl: item.importUrl || item.url || item.src?.original || item.urls?.full,
        downloadOptions: item.downloadOptions || [],
        providerId: item.providerId,
        imageId: String(item.imageId || item.id),
        providerBadge: item.providerId ? item.providerId.charAt(0).toUpperCase() + item.providerId.slice(1) : undefined,
        index: idx,
      }));
      setPreviewImageList(previewList);
    } else {
      setPreviewImageList([]);
    }
  }, [list, setPreviewImageList]);

  // Handle bulk select all
  useEffect(() => {
    const handleBulkSelect = (e) => {
      if (e.detail.providerId === PROVIDER_ID && list.length > 0) {
        const imageData = {};
        list.forEach((item) => {
          const imageId = String(item.imageId || item.id);
          const key = `${item.providerId}:${imageId}`;
          imageData[key] = {
            importUrl: item.importUrl || item.url || item.src?.original || item.urls?.full,
            imageSrc: item.imageSrc || item.urls?.regular || item.url,
            imageAlt: item.imageAlt || item.title || item.alt_description || "Favorite",
            author: item.author || {
              url: item.creator_url || item.user?.links?.html,
              avatar: item.photographer_avatar || item.user?.profile_image?.small || initialsAvatar(item.creator || item.photographer || item.user?.name || "?"),
              name: item.creator || item.photographer || item.user?.name || item.user?.username,
            },
            previewUrl: item.previewUrl || item.url || item.links?.html,
          };
        });
        
        // Group by original provider and select all from each
        const byProvider = {};
        list.forEach((item) => {
          const providerId = item.providerId;
          const imageId = String(item.imageId || item.id);
          if (!byProvider[providerId]) {
            byProvider[providerId] = { ids: [], data: {} };
          }
          byProvider[providerId].ids.push(imageId);
          byProvider[providerId].data[`${providerId}:${imageId}`] = imageData[`${providerId}:${imageId}`];
        });
        
        // Call selectAll for each provider
        Object.entries(byProvider).forEach(([providerId, { ids, data }]) => {
          selectAll(providerId, ids, data);
        });
      }
    };
    window.addEventListener('bulkSelectAll', handleBulkSelect);
    return () => window.removeEventListener('bulkSelectAll', handleBulkSelect);
  }, [list, selectAll]);

  if (list.length === 0) {
    return <EmptyState variant="noFavorites" />;
  }

  const cardProps = (item) => {
    const imageSrc = item.imageSrc || item.urls?.regular || item.url;
    const imageAlt = item.imageAlt || item.title || item.alt_description || "Favorite";
    const author = item.author || {
      url: item.creator_url || item.user?.links?.html,
      avatar: item.photographer_avatar || item.user?.profile_image?.small || initialsAvatar(item.creator || item.photographer || item.user?.name || "?"),
      name: item.creator || item.photographer || item.user?.name || item.user?.username,
    };
    const importUrl = item.importUrl || item.url || item.src?.original || item.urls?.full;
    const downloadOptions = item.downloadOptions || [];
    const previewUrl = item.previewUrl || item.url || item.links?.html;

    return {
      providerId: item.providerId,
      imageId: String(item.imageId || item.id),
      imageData: item,
      imageSrc,
      imageAlt,
      previewUrl,
      author,
      importUrl,
      downloadOptions,
      providerBadge: item.providerId ? item.providerId.charAt(0).toUpperCase() + item.providerId.slice(1) : undefined,
    };
  };

  if (viewMode === "list") {
    return (
      <ImageList>
        {list.map((item, i) => (
          <ImageCard
            key={`${item.providerId}-${item.imageId || item.id}-${i}`}
            index={i}
            variant="list"
            {...cardProps(item)}
          />
        ))}
      </ImageList>
    );
  }

  return (
    <ImageGrid>
      {list.map((item, i) => (
        <ImageCard
          key={`${item.providerId}-${item.imageId || item.id}-${i}`}
          index={i}
          {...cardProps(item)}
        />
      ))}
    </ImageGrid>
  );
}