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

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

// locations API route

// clusters API route

    // Get the cluster ID from query parameter

    // Get the location ID from query parameter

    // Query clustears for the specified location

    // First, query clusters for the specified location

    const results = await db.select()

    const clusterResults = await db.select()

    console.log("Found", results.length, "cluster for location", locationId);

    console.log("Found", clusterResults.length, "clusters for location", locationId);
    
    // For each cluster, fetch its cyclic recording pattern if it has one
    const enrichedResults = await Promise.all(
      clusterResults.map(async (clusterData) => {
        if (clusterData.cyclicRecordingPatternId) {
          try {
            // Fetch the recording pattern
            const recordingPattern = await db.select({
              recordS: cyclicRecordingPattern.recordS,
              sleepS: cyclicRecordingPattern.sleepS
            })
            .from(cyclicRecordingPattern)
            .where(eq(cyclicRecordingPattern.id, clusterData.cyclicRecordingPatternId))
            .then(results => results[0]);
            
            // Add the recording pattern details to the cluster data
            return {
              ...clusterData,
              recordingPattern: recordingPattern || null
            };
          } catch (patternError) {
            console.error("Error fetching recording pattern for cluster:", clusterData.id, patternError);
            // Return cluster without pattern data if there was an error
            return {
              ...clusterData,
              recordingPattern: null
            };
          }
        } else {
          // Return cluster without pattern data if it doesn't have a pattern ID
          return {
            ...clusterData,
            recordingPattern: null
          };
        }
      })
    );

      data: results

      data: enrichedResults

    console.error("Error fetching locations:", error);

    console.error("Error fetching clusters:", error);

        error: "Failed to fetch locations",

        error: "Failed to fetch clusters",

  onLocationSelect?: (locationId: string, locationName: string) => void;

const Locations: React.FC<LocationsProps> = ({ datasetId }) => {

const Locations: React.FC<LocationsProps> = ({ datasetId, onLocationSelect }) => {

        } catch (e) {

        } catch {

                <TableRow key={location.id}>

                <TableRow 
                  key={location.id}
                  className={onLocationSelect ? "cursor-pointer hover:bg-primary/5" : ""}
                  onClick={() => onLocationSelect && onLocationSelect(location.id, location.name)}
                >

  onDatasetSelect: (datasetId: string) => void;

  onDatasetSelect: (datasetId: string, datasetName: string) => void;

                  onClick={() => onDatasetSelect(dataset.id)}

                  onClick={() => onDatasetSelect(dataset.id, dataset.name)}

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 RecordingPattern {
  recordS: number;
  sleepS: number;
}
interface Cluster {
  id: string;
  locationId: string;
  name: string;
  description: string | null;
  createdBy: string;
  createdAt: string;
  lastModified: string;
  modifiedBy: string;
  active: boolean;
  timezoneId: string | null;
  cyclicRecordingPatternId: string | null;
  recordingPattern: RecordingPattern | null;
}
// Removed unused Location interface
interface ClustersResponse {
  data: Cluster[];
}
interface ClustersProps {
  locationId: string;
  locationName: string;
  datasetName: string;
}
const Clusters: React.FC<ClustersProps> = ({ locationId, locationName, datasetName }) => {
  const { isAuthenticated, isLoading: authLoading, getAccessToken } = useKindeAuth();
  const [clusters, setClusters] = useState<Cluster[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);
  useEffect(() => {
    // Reset state when location changes
    setClusters([]);
    setLoading(true);
    setError(null);
    const fetchClusters = async () => {
      if (!isAuthenticated || !locationId) {
        if (!authLoading) {
          setLoading(false);
        }
        return;
      }
      try {
        const accessToken = await getAccessToken();
        // Fetch clusters for the selected location
        const url = `/api/clusters?locationId=${encodeURIComponent(locationId)}`;
        const response = await fetch(url, {
          headers: {
            Authorization: `Bearer ${accessToken}`,
          },
        });
        if (!response.ok) {
          throw new Error(`Server error: ${response.status}`);
        }
        const data = await response.json() as ClustersResponse;
        if (!data.data || !Array.isArray(data.data)) {
          throw new Error("Invalid response format");
        }
        setClusters(data.data);
      } catch (err) {
        const errorMessage = err instanceof Error ? err.message : "Failed to fetch clusters";
        setError(errorMessage);
      } finally {
        setLoading(false);
      }
    };
    if (isAuthenticated && !authLoading) {
      fetchClusters();
    }
  }, [isAuthenticated, authLoading, getAccessToken, locationId]);
  return (
    <div className="card p-6 bg-white shadow-sm rounded-lg">
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-xl font-bold">
          <span className="text-gray-800">{locationName}</span>
          <span className="ml-2">Clusters</span>
        </h2>
        <div className="text-gray-600 text-sm flex items-center">
          {datasetName}
        </div>
      </div>
      {loading && <div className="py-4 text-center text-gray-500">Loading clusters...</div>}
      {error && (
        <div className="p-4 bg-red-50 text-red-700 rounded-md mb-4">
          <p className="font-medium">Error loading clusters</p>
          <p className="text-sm mt-1">{error}</p>
        </div>
      )}
      {!loading && !error && clusters.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">Description</TableHead>
                <TableHead className="py-3 font-bold text-sm uppercase">Timezone</TableHead>
                <TableHead className="py-3 font-bold text-sm uppercase">Record:Sleep</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {clusters.map((cluster) => (
                <TableRow key={cluster.id}>
                  <TableCell className="font-medium whitespace-normal break-words">{cluster.name}</TableCell>
                  <TableCell className="whitespace-normal break-words">{cluster.description || "—"}</TableCell>
                  <TableCell className="whitespace-normal break-words">{cluster.timezoneId || "—"}</TableCell>
                  <TableCell className="whitespace-normal break-words">
                    {cluster.recordingPattern
                      ? (
                        `${Math.round(cluster.recordingPattern.recordS)}:${Math.round(cluster.recordingPattern.sleepS)}`
                      )
                      : (
                        "—"
                      )}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}
      {!loading && !error && clusters.length === 0 && (
        <div className="p-4 bg-yellow-50 text-yellow-800 rounded-md">
          <p className="font-medium">No clusters found for this location</p>
        </div>
      )}
    </div>
  );
};
export default Clusters;

import Clusters from "./Clusters";

  const [activeView, setActiveView] = useState<"datasets" | "locations">("datasets");

  const [selectedDatasetName, setSelectedDatasetName] = useState<string>("");
  const [selectedLocationId, setSelectedLocationId] = useState<string | null>(null);
  const [selectedLocationName, setSelectedLocationName] = useState<string>("");
  const [activeView, setActiveView] = useState<"datasets" | "locations" | "clusters">("datasets");

  const handleDatasetSelect = (datasetId: string) => {

  const handleDatasetSelect = (datasetId: string, datasetName: string) => {

    setSelectedDatasetName(datasetName);
    setSelectedLocationId(null);

  };
  const handleLocationSelect = (locationId: string, locationName: string) => {
    setSelectedLocationId(locationId);
    setSelectedLocationName(locationName);
    setActiveView("clusters");

    setSelectedLocationId(null);
  };
  const handleBackToLocations = () => {
    setActiveView("locations");
    setSelectedLocationId(null);

        {activeView === "datasets"
          ? (
            <div className="card p-6 bg-white shadow-sm rounded-lg">
              <Datasets onDatasetSelect={handleDatasetSelect} />

        {activeView === "datasets" ? (
          <div className="card p-6 bg-white shadow-sm rounded-lg">
            <Datasets onDatasetSelect={handleDatasetSelect} />
          </div>
        ) : activeView === "locations" ? (
          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} 
                onLocationSelect={handleLocationSelect} 
              />

          ) : (
            <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>

          : (
            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>

        ) : (
          /* Clusters view */
          selectedLocationId ? (
            <div className="space-y-4">
              <div className="flex justify-between">
                <div>
                  <button
                    onClick={handleBackToLocations}
                    className="px-4 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded-md flex items-center"
                  >
                    <span className="mr-1">←</span> Locations
                  </button>
                </div>
                <div>
                  <button
                    onClick={handleBackToDatasets}
                    className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 flex items-center"
                  >
                    <span className="mr-1">↑</span> Datasets
                  </button>
                </div>
              </div>

                  <Locations datasetId={selectedDatasetId} />

              <Clusters 
                locationId={selectedLocationId} 
                locationName={selectedLocationName}
                datasetName={selectedDatasetName}
              />
            </div>
          ) : (
            <div className="p-4 bg-red-50 text-red-700 rounded-md">
              <p>No location selected. Please go back to the locations view.</p>
              <div className="flex justify-between mt-3">
                <div>
                  <button
                    onClick={handleBackToLocations}
                    className="px-4 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded-md"
                  >
                    Locations
                  </button>

              )
              : (
                <div className="p-4 bg-red-50 text-red-700 rounded-md">
                  <p>No dataset selected. Please go back to the datasets view.</p>

                <div>

                    className="mt-3 px-4 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded-md"

                    className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800"

                    Datasets

                    ↑ Datasets

              )
          )}

              </div>
            </div>
          )
        )}

-- add a sample rate column to clusters and render in ui