// hooks/useApi.js
import { useState, useEffect, useCallback, useRef } from "react";

function useApi(url, options = {}) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [lastUrl, setLastUrl] = useState(null);

  // Ref to track if component is mounted (avoid state updates on unmounted)
  const isMounted = useRef(true);

  useEffect(() => {
    return () => {
      isMounted.current = false;
    };
  }, []);

  const fetchData = useCallback(async () => {
    if (!url) return;

    setLoading(true);
    setError(null);

    try {
      const response = await fetch(url, options);
      if (!response.ok) throw new Error(`HTTP ${response.status}`);

      const result = await response.json();

      // Only update state if component still mounted and URL hasn't changed
      if (isMounted.current && url === lastUrl) {
        setData(result);
        setLoading(false);
      }
    } catch (err) {
      if (isMounted.current && url === lastUrl) {
        setError(err.message);
        setLoading(false);
      }
    }
  }, [url, options, lastUrl]);

  // Reset when URL changes
  useEffect(() => {
    setLastUrl(url);
    fetchData();
  }, [url, fetchData]);

  // Expose refetch function for manual triggers
  const refetch = useCallback(() => {
    fetchData();
  }, [fetchData]);

  return { data, loading, error, refetch };
}

export default useApi;

// Usage example in a component
// ProductCard.jsx
import React from "react";
import useApi from "../hooks/useApi";

export default function ProductCard({ productId }) {
  const { data: product, loading, error } = useApi(
    `/api/products/${productId}`
  );

  if (loading) return <div className="skeleton-loader">Loading...</div>;
  if (error) return <div className="error">Failed to load product</div>;

  return (
    <div className="product-card">
      <h3>{product?.name}</h3>
      <p>${product?.price?.toFixed(2)}</p>
      <button>Add to cart</button>
    </div>
  );
}

// Example with custom configuration (headers, method)
// useApi("/api/user/profile", { headers: { Authorization: `Bearer ${token}`} })