import { eq } from "drizzle-orm";

import { dataset } from "../../db/schema";

import { dataset, location } from "../../db/schema";

    // Query datasets (optionally filter by user)
    // This could be modified to only return datasets the user has access to
    const results = await db.select().from(dataset);

    // Query datasets that are owned by the authenticated user
    const results = await db.select().from(dataset).where(eq(dataset.owner, userId));

// Protected locations API route
app.get("/api/locations", authenticate, async (c) => {
  try {
    // Get the JWT payload (user info)
    const jwtPayload = (c as any).jwtPayload as JWTPayload;
    const userId = jwtPayload.sub; // Subject claim usually contains the user ID
    
    // Get the dataset ID from query parameter
    const datasetId = c.req.query("datasetId");
    
    console.log("Locations API called with datasetId:", datasetId, "userId:", userId);
    
    if (!datasetId) {
      console.log("Missing datasetId in request");
      return c.json({
        error: "Missing required query parameter: datasetId"
      }, 400);
    }
    
    // Connect to the database
    const sql = neon(c.env.DATABASE_URL);
    const db = drizzle(sql);
    
    // First, verify that the user owns the dataset
    console.log("Checking dataset ownership for datasetId:", datasetId);
    const datasetCheck = await db.select()
      .from(dataset)
      .where(eq(dataset.id, datasetId))
      .limit(1);
    
    console.log("Dataset check result:", datasetCheck);
      
    if (datasetCheck.length === 0) {
      console.log("Dataset not found:", datasetId);
      return c.json({
        error: "Dataset not found"
      }, 404);
    }
    
    if (datasetCheck[0].owner !== userId) {
      console.log("User doesn't own dataset. Owner:", datasetCheck[0].owner, "User:", userId);
      return c.json({
        error: "You don't have permission to access this dataset"
      }, 403);
    }
    
    // Query locations for the specified dataset
    console.log("Querying locations for datasetId:", datasetId);
    const results = await db.select()
      .from(location)
      .where(eq(location.datasetId, datasetId));
    
    console.log("Found", results.length, "locations for dataset", datasetId);
    
    return c.json({
      data: results
    });
  } catch (error) {
    console.error("Error fetching locations:", error);
    return c.json(
      {
        error: "Failed to fetch locations",
        details: error instanceof Error ? error.message : String(error),
      },
      500
    );
  }
});

import { useKindeAuth } from "@kinde-oss/kinde-auth-react";
import React, { useEffect, useState } from "react";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./ui/table";
interface Location {
  id: string;
  datasetId: string;
  name: string;
  latitude: number | null;
  longitude: number | null;
  description: string | null;
  createdBy: string;
  createdAt: string;
  lastModified: string;
  modifiedBy: string;
  active: boolean;
}
interface Dataset {
  id: string;
  name: string;
}
interface LocationsResponse {
  data: Location[];
}
interface DatasetsResponse {
  data: Dataset[];
}
interface LocationsProps {
  datasetId: string;
}
const Locations: React.FC<LocationsProps> = ({ datasetId }) => {
  const { isAuthenticated, isLoading: authLoading, getAccessToken } = useKindeAuth();
  const [locations, setLocations] = useState<Location[]>([]);
  const [datasetName, setDatasetName] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);
  useEffect(() => {
    // Reset state when dataset changes
    setLocations([]);
    setDatasetName("");
    setLoading(true);
    setError(null);
    const fetchData = async () => {
      if (!isAuthenticated || !datasetId) {
        if (!authLoading) {
          setLoading(false);
        }
        return;
      }
      try {
        const accessToken = await getAccessToken();
        // First fetch the dataset name
        try {
          const datasetResponse = await fetch(`/api/datasets`, {
            headers: {
              Authorization: `Bearer ${accessToken}`,
            },
          });
          if (datasetResponse.ok) {
            const datasetData = await datasetResponse.json() as DatasetsResponse;
            const dataset = datasetData.data.find(d => d.id === datasetId);
            if (dataset) {
              setDatasetName(dataset.name);
            }
          }
        } catch (e) {
          // If unable to get the dataset name, use a generic display
          setDatasetName(`Dataset ${datasetId.substring(0, 6)}...`);
        }
        // Now fetch the locations
        const url = `/api/locations?datasetId=${encodeURIComponent(datasetId)}`;
        const locationsResponse = await fetch(url, {
          headers: {
            Authorization: `Bearer ${accessToken}`,
          },
        });
        if (!locationsResponse.ok) {
          throw new Error(`Server error: ${locationsResponse.status}`);
        }
        const locationsData = await locationsResponse.json() as LocationsResponse;
        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);
      }
    };
    if (isAuthenticated && !authLoading) {
      fetchData();
    }
  }, [isAuthenticated, authLoading, getAccessToken, datasetId]);
  return (
    <div className="card p-6 bg-white shadow-sm rounded-lg">
      <h2 className="text-xl font-bold mb-4">
        {datasetName ? (
          <>
            <span className="text-gray-700">{datasetName}</span>
            <span className="ml-2">Locations</span>
          </>
        ) : (
          "Locations"
        )}
      </h2>
      {loading && <div className="py-4 text-center text-gray-500">Loading locations...</div>}
      {error && (
        <div className="p-4 bg-red-50 text-red-700 rounded-md mb-4">
          <p className="font-medium">Error loading locations</p>
          <p className="text-sm mt-1">{error}</p>
        </div>
      )}
      {!loading && !error && locations.length > 0 && (
        <div className="w-full overflow-visible">
          <Table>
            <TableHeader className="bg-muted">
              <TableRow className="border-b-2 border-primary/20">
                <TableHead className="w-[180px] py-3 font-bold text-sm uppercase">Name</TableHead>
                <TableHead className="py-3 font-bold text-sm uppercase">Coordinates</TableHead>
                <TableHead className="py-3 font-bold text-sm uppercase">Description</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {locations.map((location) => (
                <TableRow key={location.id}>
                  <TableCell className="font-medium whitespace-normal break-words">{location.name}</TableCell>
                  <TableCell className="whitespace-normal break-words">
                    {location.latitude && location.longitude
                      ? `${Number(location.latitude).toFixed(5)}, ${Number(location.longitude).toFixed(5)}`
                      : "—"}
                  </TableCell>
                  <TableCell className="whitespace-normal break-words">{location.description || "—"}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}
      {!loading && !error && locations.length === 0 && (
        <div className="p-4 bg-yellow-50 text-yellow-800 rounded-md">
          <p className="font-medium">No locations found for this dataset</p>
        </div>
      )}
    </div>
  );
};
export default Locations;

const Datasets: React.FC = () => {

interface DatasetsProps {
  onDatasetSelect: (datasetId: string) => void;
}
const Datasets: React.FC<DatasetsProps> = ({ onDatasetSelect }) => {

    <div className="card p-6 bg-white shadow-sm rounded-lg">

    <>

                <TableRow key={dataset.id}>

                <TableRow 
                  key={dataset.id} 
                  className="cursor-pointer hover:bg-primary/5"
                  onClick={() => onDatasetSelect(dataset.id)}
                >

    </div>

    </>

import React from "react";
import DataSets from "./DataSets";

import React, { useState } from "react";
import Datasets from "./Datasets";
import Locations from "./Locations";

  const [selectedDatasetId, setSelectedDatasetId] = useState<string | null>(null);
  const [activeView, setActiveView] = useState<"datasets" | "locations">("datasets");
  const handleDatasetSelect = (datasetId: string) => {
    setSelectedDatasetId(datasetId);
    setActiveView("locations");
  };
  const handleBackToDatasets = () => {
    setActiveView("datasets");
    setSelectedDatasetId(null);
  };

      <div className="container mx-auto text-xl px-5 space-y-2">

      <div className="container mx-auto px-5 space-y-4">

        <DataSets />

        {activeView === "datasets"
          ? (
            <div className="card p-6 bg-white shadow-sm rounded-lg">
              <Datasets onDatasetSelect={handleDatasetSelect} />
            </div>
          )
          : (
            selectedDatasetId
              ? (
                <div className="space-y-4">
                  <div className="flex">
                    <button
                      onClick={handleBackToDatasets}
                      className="px-4 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded-md flex items-center"
                    >
                      <span className="mr-1">←</span> Datasets
                    </button>
                  </div>
                  <Locations datasetId={selectedDatasetId} />
                </div>
              )
              : (
                <div className="p-4 bg-red-50 text-red-700 rounded-md">
                  <p>No dataset selected. Please go back to the datasets view.</p>
                  <button
                    onClick={handleBackToDatasets}
                    className="mt-3 px-4 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded-md"
                  >
                    Datasets
                  </button>
                </div>
              )
          )}