const results = await db.select().from(dataset);

    const results = await db.select({
      id: dataset.id,
      name: dataset.name,
      description: dataset.description,
      public: dataset.public,
      createdAt: dataset.createdAt,
      owner: dataset.owner
    }).from(dataset)
      .where(eq(dataset.active, true))
      .limit(20); // Add pagination with 20 datasets limit

    const page = parseInt(c.req.query("page") || "1", 10);
    const pageSize = parseInt(c.req.query("pageSize") || "20", 10);

    console.log("Locations API called with datasetId:", datasetId, "userId:", userId);

    console.log("Locations API called with datasetId:", datasetId, "userId:", userId, "page:", page);

    // Validate page number
    if (page < 1) {
      return c.json({
        error: "Invalid page parameter: must be greater than 0"
      }, 400);
    }
    
    // Limit page size between 1 and 100
    const limitedPageSize = Math.min(Math.max(pageSize, 1), 100);
    const offset = (page - 1) * limitedPageSize;
    

    // Query locations for the specified dataset
    console.log("Querying locations for datasetId:", datasetId);
    const results = await db.select()

    // First, get total count for pagination
    console.log("Counting locations for datasetId:", datasetId);
    const countResult = await db
      .select({
        count: sqlExpr<number>`COUNT(*)`
      })

      .where(eq(location.datasetId, datasetId));

      .where(sqlExpr`${location.datasetId} = ${datasetId} AND ${location.active} = true`);
    
    const totalLocations = Number(countResult[0].count);
    const totalPages = Math.ceil(totalLocations / limitedPageSize);
    
    // Query locations for the specified dataset with pagination
    console.log("Querying locations for datasetId:", datasetId, "page:", page);
    const results = await db.select({
      id: location.id,
      name: location.name,
      latitude: location.latitude,
      longitude: location.longitude,
      description: location.description,
    }).from(location)
      .where(sqlExpr`${location.datasetId} = ${datasetId} AND ${location.active} = true`)
      .orderBy(location.name)
      .limit(limitedPageSize)
      .offset(offset);

    console.log("Found", results.length, "locations for dataset", datasetId);

    console.log("Found", results.length, "locations for dataset", datasetId, "page:", page);

      data: results

      data: results,
      pagination: {
        currentPage: page,
        pageSize: limitedPageSize,
        totalPages: totalPages,
        totalItems: totalLocations,
        hasNextPage: page < totalPages,
        hasPreviousPage: page > 1,
      }

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

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

import { Button } from "./ui/button";

  pagination?: {
    currentPage: number;
    pageSize: number;
    totalPages: number;
    totalItems: number;
    hasNextPage: boolean;
    hasPreviousPage: boolean;
  };

  useEffect(() => {
    // Reset state when dataset changes
    setLocations([]);
    // setDatasetName("");
    setLoading(true);
    setError(null);

  const [currentPage, setCurrentPage] = useState<number>(1);
  const [totalPages, setTotalPages] = useState<number>(1);
  
  const handlePageChange = (newPage: number) => {
    if (newPage >= 1 && newPage <= totalPages) {
      setCurrentPage(newPage);
    }
  };

    const fetchData = async () => {
      if (!isAuthenticated || !datasetId) {
        if (!authLoading) {
          setLoading(false);
        }
        return;

  const fetchLocations = useCallback(async (page: number) => {
    if (!isAuthenticated || !datasetId) {
      if (!authLoading) {
        setLoading(false);

      return;
    }

      try {
        const accessToken = await getAccessToken();

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

        // Dataset name fetch removed - no longer needed

      // Now fetch the locations with pagination
      const url = `/api/locations?datasetId=${encodeURIComponent(datasetId)}&page=${page}`;

        // Now fetch the locations
        const url = `/api/locations?datasetId=${encodeURIComponent(datasetId)}`;

      const locationsResponse = await fetch(url, {
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
      });

        const locationsResponse = await fetch(url, {
          headers: {
            Authorization: `Bearer ${accessToken}`,
          },
        });
        if (!locationsResponse.ok) {
          throw new Error(`Server error: ${locationsResponse.status}`);
        }

      if (!locationsResponse.ok) {
        throw new Error(`Server error: ${locationsResponse.status}`);
      }

        const locationsData = await locationsResponse.json() as LocationsResponse;

      const locationsData = await locationsResponse.json() as LocationsResponse;

        if (!locationsData.data || !Array.isArray(locationsData.data)) {
          throw new Error("Invalid response format");
        }

      if (!locationsData.data || !Array.isArray(locationsData.data)) {
        throw new Error("Invalid response format");
      }

        setLocations(locationsData.data);
      } catch (err) {
        const errorMessage = err instanceof Error ? err.message : "Failed to fetch locations";
        setError(errorMessage);
      } finally {
        setLoading(false);

      setLocations(locationsData.data);
      
      // Set pagination data if available
      if (locationsData.pagination) {
        setCurrentPage(locationsData.pagination.currentPage);
        setTotalPages(locationsData.pagination.totalPages);

    };

      
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : "Failed to fetch locations";
      setError(errorMessage);
    } finally {
      setLoading(false);
    }
  }, [isAuthenticated, authLoading, datasetId, getAccessToken]);

  // Reset pagination when dataset changes
  useEffect(() => {
    setLocations([]);
    setLoading(true);
    setError(null);
    setCurrentPage(1);
    setTotalPages(1);
    

      fetchData();

      fetchLocations(1);
    }
  }, [isAuthenticated, authLoading, datasetId, fetchLocations]);
  // Handle page changes
  useEffect(() => {
    if (isAuthenticated && !authLoading && datasetId) {
      fetchLocations(currentPage);

  }, [isAuthenticated, authLoading, getAccessToken, datasetId]);

  }, [isAuthenticated, authLoading, getAccessToken, datasetId, currentPage, fetchLocations]);

      {/* Pagination controls */}
      {!loading && !error && totalPages > 1 && locations.length > 0 && (
        <div className="flex justify-center items-center mt-6">
          <nav className="flex items-center gap-1" aria-label="Pagination">
            {/* First page button */}
            <Button
              variant="outline"
              size="icon"
              className="h-8 w-8 rounded-md"
              onClick={() => handlePageChange(1)}
              disabled={currentPage === 1}
              aria-label="First page"
            >
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="11 17 6 12 11 7"></polyline>
                <polyline points="18 17 13 12 18 7"></polyline>
              </svg>
            </Button>
            {/* Previous page button */}
            <Button
              variant="outline"
              size="icon"
              className="h-8 w-8 rounded-md"
              onClick={() => handlePageChange(currentPage - 1)}
              disabled={currentPage === 1}
              aria-label="Previous page"
            >
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="15 18 9 12 15 6"></polyline>
              </svg>
            </Button>
            {/* Page number buttons */}
            {(() => {
              const totalPagesCount = totalPages;
              const current = currentPage;
              const pages = [];
              
              // Always show first page
              if (current > 3) {
                pages.push(
                  <Button
                    key="page-1"
                    variant={current === 1 ? "default" : "outline"}
                    size="icon"
                    className="h-8 w-8 rounded-md"
                    onClick={() => handlePageChange(1)}
                  >
                    1
                  </Button>
                );
                
                // Add ellipsis if not showing page 2
                if (current > 4) {
                  pages.push(
                    <span key="ellipsis1" className="px-1">…</span>
                  );
                }
              }
              
              // Show current page and surrounding pages
              const startPage = Math.max(1, current - 1);
              const endPage = Math.min(totalPagesCount, current + 1);
              
              for (let i = startPage; i <= endPage; i++) {
                if (i === 1 || i === totalPagesCount) continue; // Skip first and last pages as they're handled separately
                pages.push(
                  <Button
                    key={`page-${i}`}
                    variant={current === i ? "default" : "outline"}
                    size="icon"
                    className="h-8 w-8 rounded-md"
                    onClick={() => handlePageChange(i)}
                  >
                    {i}
                  </Button>
                );
              }
              
              // Add ellipsis if needed
              if (current < totalPagesCount - 3) {
                pages.push(
                  <span key="ellipsis2" className="px-1">…</span>
                );
              }
              
              // Always show last page
              if (totalPagesCount > 1) {
                pages.push(
                  <Button
                    key={`page-${totalPagesCount}`}
                    variant={current === totalPagesCount ? "default" : "outline"}
                    size="icon"
                    className="h-8 w-8 rounded-md"
                    onClick={() => handlePageChange(totalPagesCount)}
                  >
                    {totalPagesCount}
                  </Button>
                );
              }
              
              return pages;
            })()}
            {/* Next page button */}
            <Button
              variant="outline"
              size="icon"
              className="h-8 w-8 rounded-md"
              onClick={() => handlePageChange(currentPage + 1)}
              disabled={currentPage === totalPages}
              aria-label="Next page"
            >
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="9 18 15 12 9 6"></polyline>
              </svg>
            </Button>
            {/* Last page button */}
            <Button
              variant="outline"
              size="icon"
              className="h-8 w-8 rounded-md"
              onClick={() => handlePageChange(totalPages)}
              disabled={currentPage === totalPages}
              aria-label="Last page"
            >
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="13 17 18 12 13 7"></polyline>
                <polyline points="6 17 11 12 6 7"></polyline>
              </svg>
            </Button>
          </nav>
        </div>
      )}