// 1. Thiết lập Môi trường với Caching Thông minh
import { Environment, Network, RecordSource, Store } from 'relay-runtime';

const createFetchFunction = (graphqlUrl: string, getAuthToken: () => string) => {
  return async (request, variables) => {
    const response = await fetch(graphqlUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${getAuthToken()}`,
      },
      body: JSON.stringify({
        query: request.text,
        variables,
      }),
    });

    if (!response.ok) {
      throw new Error(`Yêu cầu GraphQL thất bại: ${response.statusText}`);
    }

    return response.json();
  };
};

const createEnvironment = (graphqlUrl: string, getAuthToken: () => string) => {
  const fetchFunction = createFetchFunction(graphqlUrl, getAuthToken);
  const network = Network.create(fetchFunction);
  const store = new Store(new RecordSource(), {
    gcReleaseBufferSize: 1000,
    queryCacheExpirationTime: 300000,
  });

  return new Environment({ network, store });
};

// 2. Truy vấn Thông minh với Caching Tự động
import { usePreloadedQuery, usePaginationFragment } from 'react-relay';
import { graphql } from 'relay-runtime';

const ProductList: FC<{ queryRef: any }> = ({ queryRef }) => {
  const data = usePreloadedQuery<ProductListQuery>(
    graphql`
      query ProductListQuery($first: Int!, $filters: ProductFilters) {
        products(first: $first, filters: $filters) {
          edges {
            node {
              id
              name
              price
              isActive
              ...ProductCard_product
            }
          }
          totalCount
        }
        cart {
          id
          totalPrice
        }
      }
    `,
    queryRef
  );

  const pagination = usePaginationFragment(
    graphql`
      fragment ProductList_products on Query
      @refetchable(queryName: "ProductListRefetchQuery") {
        products(first: $first, filters: $filters)
          @connection(key: "ProductList_products") {
          edges {
            node {
              id
              ...ProductCard_product
            }
          }
        }
      }
    `,
    data
  );

  return (
    <div>
      <h2>Sản phẩm ({data.products.totalCount})</h2>
      <p>Tổng Giỏ hàng: ${data.cart.totalPrice}</p>
      {data.products.edges.map(edge => (
        <ProductCard key={edge.node.id} productRef={edge.node} />
      ))}
      <button onClick={() => pagination.loadNext(10)}>
        Tải thêm
      </button>
    </div>
  );
};

// 3. Cập nhật Lạc quan với Xóa Cache Tự động
const ProductCard: FC<{ productRef: any }> = ({ productRef }) => {
  const product = useFragment(
    graphql`
      fragment ProductCard_product on Product {
        id
        name
        price
        isActive
      }
    `,
    productRef
  );

  const [toggleActive, isPending] = useMutationWithFeedback<ProductToggleMutation>(
    graphql`
      mutation ProductToggleMutation($input: ProductToggleInput!) {
        productToggle(input: $input) {
          product {
            id
            isActive
          }
          cart {
            id
            totalPrice
          }
          errors {
            message
          }
        }
      }
    `,
    {
      optimisticResponse: {
        productToggle: {
          product: {
            id: product.id,
            isActive: !product.isActive,
          },
          cart: {
            id: 'cart-1',
            totalPrice: product.isActive ? 0 : product.price,
          },
          errors: [],
        },
      },
      updater: (store, response) => {
        if (response.productToggle?.product) {
          const productRecord = store.get(product.id);
          productRecord?.setValue(response.productToggle.product.isActive, 'isActive');
        }
        if (response.productToggle?.cart) {
          const cartRecord = store.get('cart-1');
          cartRecord?.setValue(response.productToggle.cart.totalPrice, 'totalPrice');
        }
      },
    }
  );

  const handleToggle = () => {
    toggleActive({
      variables: { input: { productId: product.id } },
      onSuccess: () => console.log('Sản phẩm đã được thay đổi trạng thái thành công'),
      onError: (error) => console.error('Thay đổi trạng thái sản phẩm thất bại:', error),
    });
  };

  return (
    <div style={{ opacity: isPending ? 0.5 : 1 }}>
      <h3>{product.name} - ${product.price}</h3>
      <button onClick={handleToggle} disabled={isPending}>
        {product.isActive ? 'Vô hiệu hóa' : 'Kích hoạt'}
      </button>
    </div>
  );
};

// 4. Quản lý Kết nối cho Cuộn Vô Tận
import { ConnectionHandler, RecordProxy } from 'relay-runtime';

export function connectionUpdater({
  store,
  parentId,
  connectionName,
  edge,
  before = false,
}: {
  store: any;
  parentId: string;
  connectionName: string;
  edge: RecordProxy;
  before?: boolean;
}) {
  const parentProxy = store.get(parentId);
  const connection = ConnectionHandler.getConnection(parentProxy, connectionName);

  if (!connection) return;

  const currentOffset = connection.getValue('endCursorOffset') || 0;
  connection.setValue(Number(currentOffset) + 1, 'endCursorOffset');

  const currentCount = connection.getValue('count') || 0;
  connection.setValue(Number(currentCount) + 1, 'count');

  if (before) {
    ConnectionHandler.insertEdgeBefore(connection, edge);
  } else {
    ConnectionHandler.insertEdgeAfter(connection, edge);
  }
}