onSpeciesFilterChange?: (speciesId: string, speciesName: string) => void;

  nightFilter: externalNightFilter

  nightFilter: externalNightFilter,
  onSpeciesFilterChange

    
    // Notify parent component about species filter change for breadcrumb update
    if (onSpeciesFilterChange && newSpeciesId) {
      // Find the species name from options
      const selectedSpecies = speciesOptions.find(s => s.id === newSpeciesId);
      if (selectedSpecies) {
        onSpeciesFilterChange(newSpeciesId, selectedSpecies.label);
      }
    }

  onSpeciesSelect?: (speciesId: string, speciesName: string) => void;

  onLocationSelect 

  onLocationSelect,
  onSpeciesSelect

    setSelectedSpecies({ id: speciesId, name: speciesName });

    if (onSpeciesSelect) {
      onSpeciesSelect(speciesId, speciesName);
    } else {
      // Fallback to old behavior if callback not provided
      setSelectedSpecies({ id: speciesId, name: speciesName });
    }

  // If a species is selected, show AllFiles component
  if (selectedSpecies) {

  // If a species is selected and there's no callback, show Selections component
  if (selectedSpecies && !onSpeciesSelect) {

        {/* Selections component */}

        {/* Selections component (legacy path - will only be used if parent doesn't provide onSpeciesSelect) */}

import Selections from "./Selections";

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

  const [selectedSpeciesId, setSelectedSpeciesId] = useState<string | null>(null);
  const [selectedSpeciesName, setSelectedSpeciesName] = useState<string>("");
  const [activeView, setActiveView] = useState<"datasets" | "dataset" | "clusters" | "files" | "selections">("datasets");

  };
  
  const handleSpeciesSelect = (speciesId: string, speciesName: string) => {
    setSelectedSpeciesId(speciesId);
    setSelectedSpeciesName(speciesName);
    setActiveView("selections");
  };
  
  const handleBackToDatasetFromSpecies = () => {
    setActiveView("dataset");
    setSelectedSpeciesId(null);

                onSpeciesSelect={handleSpeciesSelect}

        ) : activeView === "selections" ? (
          /* Selections view */
          selectedSpeciesId ? (
            <div className="space-y-4">
              <div className="flex justify-between items-center py-1">
                <Breadcrumb className="text-sm py-0">
                  <BreadcrumbList className="py-0">
                    <BreadcrumbItem>
                      <BreadcrumbLink onClick={handleBackToDatasets} className="cursor-pointer">
                        Datasets
                      </BreadcrumbLink>
                    </BreadcrumbItem>
                    <BreadcrumbSeparator />
                    <BreadcrumbItem>
                      <BreadcrumbLink onClick={handleBackToDatasetFromSpecies} className="cursor-pointer">
                        {selectedDatasetName}
                      </BreadcrumbLink>
                    </BreadcrumbItem>
                    <BreadcrumbSeparator />
                    <BreadcrumbItem>
                      <BreadcrumbPage>
                        {selectedSpeciesName}
                      </BreadcrumbPage>
                    </BreadcrumbItem>
                  </BreadcrumbList>
                </Breadcrumb>
              </div>
              <Selections
                datasetId={selectedDatasetId || ""}
                datasetName={selectedDatasetName}
                speciesId={selectedSpeciesId || ""}
                onSpeciesFilterChange={(speciesId, speciesName) => {
                  setSelectedSpeciesId(speciesId);
                  setSelectedSpeciesName(speciesName);
                }}
              />
            </div>
          ) : (
            <div className="p-4 bg-red-50 text-red-700 rounded-md">
              <p>No species selected. Please go back to the dataset view.</p>
              <div className="mt-3">
                <Breadcrumb className="text-sm py-0">
                  <BreadcrumbList className="py-0">
                    <BreadcrumbItem>
                      <BreadcrumbLink onClick={handleBackToDatasets} className="cursor-pointer">
                        Datasets
                      </BreadcrumbLink>
                    </BreadcrumbItem>
                    <BreadcrumbSeparator />
                    <BreadcrumbItem>
                      <BreadcrumbLink onClick={handleBackToDatasetFromSpecies} className="cursor-pointer">
                        {selectedDatasetName}
                      </BreadcrumbLink>
                    </BreadcrumbItem>
                  </BreadcrumbList>
                </Breadcrumb>
              </div>
            </div>
          )