import { useEntityList } from "@replyke/core";

const ProductFeed = () => {
  const entityList = useEntityList({
    listId: "product-feed",
    infuseData: async (foreignId) => {
      try {
        const response = await fetch(`/api/inventory/${foreignId}`);
        return response.ok ? await response.json() : null;
      } catch (error) {
        console.error(`Failed to fetch inventory for ${foreignId}:`, error);
        return null;
      }
    }
  });

  useEffect(() => {
    entityList.fetchEntities(
      { sortBy: "hot" },
      { sourceId: "products", limit: 20 }
    );
  }, []);

  return (
    <div>
      {entityList.infusedEntities.map((entity) => (
        <div key={entity.id}>
          <h2>{entity.title}</h2>
          <p>{entity.content}</p>
          {/* External data is under the 'infusion' property */}
          <p>Stock: {entity.infusion?.stock}</p>
          <p>Price: ${entity.infusion?.price}</p>
        </div>
      ))}
    </div>
  );
};

const infuseInventoryData = async (foreignId) => {
  const inventory = await fetch(`/api/inventory/${foreignId}`);
  return inventory.json(); // { stock: 25, price: 49.99, warehouse: "NYC" }
};

const infuseUserData = async (foreignId) => {
  const profile = await fetch(`/api/users/${foreignId}`);
  return profile.json(); // { avatar: "...", verified: true, followers: 1250 }
};

const infuseAnalytics = async (foreignId) => {
  const stats = await fetch(`/api/analytics/${foreignId}`);
  return stats.json(); // { views: 5420, engagement: 0.12, trending: true }
};

const infuseData = async (foreignId) => {
  try {
    const response = await fetch(`/api/external/${foreignId}`);

    if (!response.ok) {
      console.warn(`External data not found for ${foreignId}`);
      return null;
    }

    return await response.json();
  } catch (error) {
    console.error(`Failed to fetch external data for ${foreignId}:`, error);
    return null; // Return null on error, don't throw
  }
};

// Original entity from Replyke
const entity = {
  id: "123",
  foreignId: "product-456",
  title: "Amazing Widget",
  content: "A great product...",
  // ... other Replyke fields
};

// External data returned by infuseData
const externalData = {
  stock: 25,
  price: 49.99,
  warehouse: "NYC"
};

// Final result in infusedEntities
const infusedEntity = {
  id: "123",
  foreignId: "product-456",
  title: "Amazing Widget",
  content: "A great product...",
  // External data safely nested under 'infusion'
  infusion: {
    stock: 25,
    price: 49.99,
    warehouse: "NYC"
  }
};

// ✅ Correct - access via infusion property
entity.infusion?.stock
entity.infusion?.price
entity.infusion?.warehouse

// ❌ Wrong - external data is not merged at root level
entity.stock // undefined
entity.price // undefined

{entityList.infusedEntities.map(entity => (
  <div key={entity.id}>
    <h2>{entity.title}</h2>
    {entity.infusion ? (
      <div>
        <p>Stock: {entity.infusion.stock}</p>
        <p>Price: ${entity.infusion.price}</p>
      </div>
    ) : (
      <p>External data unavailable</p>
    )}
  </div>
))}