import { useState, useEffect } from 'react';
import { useQuery } from '@apollo/client';
import { gql } from 'graphql-tag';

const GET_PAGINATED_USERS = gql`
  query GetPaginatedUsers(
    $offset: Int!
    $limit: Int!
    $sortBy: String
    $order: String
    $filter: String
  ) {
    getPaginatedUsers(
      offset: $offset
      limit: $limit
      sortBy: $sortBy
      order: $order
      filter: $filter
    ) {
      users {
        id
        email
        name
        role
        tierLevel
        regDate
      }
      totalCount
      hasMore
    }
  }
`;

function UserManagementTable() {
  const [page, setPage] = useState(0);
  const [pageSize, setPageSize] = useState(20);

  const { data, loading, error } = useQuery(GET_PAGINATED_USERS, {
    variables: {
      offset: page * pageSize,
      limit: pageSize,
      sortBy: 'regDate',
      order: 'DESC'
    }
  });

  if (loading) return <div>Loading users...</div>;
  if (error) return <div>Error: {error.message}</div>;

  const { users, totalCount, hasMore } = data.getPaginatedUsers;
  const totalPages = Math.ceil(totalCount / pageSize);

  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Email</th>
            <th>Name</th>
            <th>Role</th>
            <th>Tier</th>
          </tr>
        </thead>
        <tbody>
          {users.map(user => (
            <tr key={user.id}>
              <td>{user.id}</td>
              <td>{user.email}</td>
              <td>{user.name}</td>
              <td>{user.role.join(', ')}</td>
              <td>{user.tierLevel}</td>
            </tr>
          ))}
        </tbody>
      </table>

      <div className="pagination">
        <button
          onClick={() => setPage(p => Math.max(0, p - 1))}
          disabled={page === 0}
        >
          Previous
        </button>
        <span>Page {page + 1} of {totalPages}</span>
        <button
          onClick={() => setPage(p => p + 1)}
          disabled={!hasMore}
        >
          Next
        </button>
      </div>
    </div>
  );
}