import React, { useState, useEffect } from "react";

import React, { useState, useEffect, useCallback } from "react";

  useEffect(() => {
    const fetchDatasets = async () => {
      if (!isAuthenticated) {
        if (!authLoading) {
          setLoading(false);
        }
        return;

  const fetchDatasets = async () => {
    if (!isAuthenticated) {
      if (!authLoading) {
        setLoading(false);

      return;
    }

      setLoading(true);
      setError(null);

    setLoading(true);
    setError(null);
    
    try {
      const accessToken = await getAccessToken();

      try {
        const accessToken = await getAccessToken();
        
        const response = await fetch("/api/datasets", {
          headers: {
            Authorization: `Bearer ${accessToken}`,
          },
        });

      const response = await fetch("/api/datasets", {
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
      });

        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }

      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }

        const data = await response.json() as DatasetsResponse;
        setDatasets(data.data);
        
        // Show message if provided (e.g., for users without roles)
        if (data.message) {
          setError(data.message);
        }
        
        // Set user role and determine if user can create datasets
        if (data.userRole) {
          setUserRole(data.userRole);
          setCanCreateDatasets(data.userRole === 'ADMIN' || data.userRole === 'CURATOR');
        }
      } catch (err) {
        setError(err instanceof Error ? err.message : "Failed to fetch datasets");
        console.error("Error fetching datasets:", err);
      } finally {
        setLoading(false);

      const data = await response.json() as DatasetsResponse;
      setDatasets(data.data);
      
      // Show message if provided (e.g., for users without roles)
      if (data.message) {
        setError(data.message);

    };

      
      // Set user role and determine if user can create datasets
      if (data.userRole) {
        setUserRole(data.userRole);
        setCanCreateDatasets(data.userRole === 'ADMIN' || data.userRole === 'CURATOR');
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to fetch datasets");
      console.error("Error fetching datasets:", err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {