# Skraak - Todo List
## Completed Tasks ✅
### React Query Implementation (2026-01-01)
- ✅ Installed React Query and Zod dependencies
- ✅ Set up React Query provider in App.tsx with sensible defaults (5min stale time, 1 retry)
- ✅ Created centralized API client utility (`src/react-app/utils/apiClient.ts`)
  - Type-safe error handling with `ApiClientError` class
  - Convenience methods for GET, POST, PUT, DELETE
- ✅ Created custom `useApi` hooks (`src/react-app/hooks/useApi.ts`)
  - `useApiQuery` for GET requests with automatic authentication
  - `useApiMutation` for POST/PUT/DELETE requests
  - `useInvalidateQueries` helper for cache invalidation
- ✅ Infrastructure ready for component refactoring (Datasets.tsx can now be migrated)
### Zod Validation Implementation (2026-01-01)
- ✅ Installed @hono/zod-validator package
- ✅ Created validation schemas for backend routes:
  - `src/worker/schemas/datasets.ts` - Dataset CRUD validation
  - `src/worker/schemas/selections.ts` - Selection import validation
  - `src/worker/schemas/fileImport.ts` - Chunked file import validation
- ✅ Added Zod validation to datasets routes (POST and PUT endpoints)
  - Removed ~60 lines of manual validation code
  - Type-safe with auto-generated TypeScript types
- ✅ Added Zod validation to selections routes (POST endpoint)
  - Removed ~80 lines of complex nested validation code
  - Validates nested species and call type arrays
- ✅ Added Zod validation to file import routes (POST /chunk endpoint)
  - Comprehensive validation of file metadata
  - Supports optional moth metadata validation
### Component Refactoring (2026-01-01)
- ✅ **Datasets.tsx refactored to use React Query** (510 LOC → 360 LOC)
  - Replaced manual useEffect + fetch with useApiQuery
  - Replaced manual mutations with useApiMutation
  - Automatic cache invalidation on mutations
  - Removed ~150 lines of boilerplate code
  - Error and loading states handled by React Query
### Error Handling Implementation (2026-01-01)
- ✅ Created ErrorBoundary component (`src/components/ErrorBoundary.tsx`)
  - Catches unhandled component errors
  - User-friendly error UI with "Try again" and "Go home" actions
  - Expandable error details for debugging
- ✅ Installed and configured Sonner toast library
  - Positioned at top-right with rich colors
  - Ready for success/error/loading notifications
- ✅ Updated App.tsx with ErrorBoundary wrapper
  - Proper provider nesting: ErrorBoundary → QueryClient → Kinde → Router
## Priority Improvements (From Architecture Review)
### Implement Now (High Priority)
1. ✅ Refactor components to use React Query
   - ✅ Datasets.tsx (510 LOC) - **COMPLETED**
   - ⬜ Species.tsx (622 LOC)
   - ⬜ Statistics.tsx (555 LOC)
   - Pattern: Replace useEffect + fetch with useApiQuery/useApiMutation
2. ✅ Add error boundaries to frontend - **COMPLETED**
   - ✅ Create ErrorBoundary component
   - ✅ Wrap RouterProvider with error boundary
   - ✅ Add toast notifications (sonner installed)
3. 🔄 Split monolithic File.tsx component (1,627 LOC) - **IN PROGRESS**
   - ✅ Created `src/components/File/` directory
   - ✅ Created `src/hooks/file/` directory
   - ⬜ Analyzed File.tsx structure (1,627 LOC)
   - Create `src/components/File/` directory
   - Extract WaveformPlayer component (spectrogram + regions)
   - Extract SelectionEditor component (edit form)
   - Extract SelectionList component (table)
   - Extract FileMetadata component (info panel)
   - Create custom hooks: useWaveSurfer, useSelections, useFileContext
4. ⬜ Add Zustand for shared state management
   - Create store for user permissions/roles
   - Create store for current dataset/location context
   - Create store for UI state (modals, toasts)
### Implement Soon (Medium Priority)
5. ⬜ Optimize database queries
   - Consolidate multi-query routes in datasets.ts (lines 69-91)
   - Use single query with aggregation instead of 2 separate queries
   - Add indexes based on query patterns (already noted in schema comments)
6. ⬜ Add webhook signature verification (kindeWebhook.ts)
   - Replace path-based security with HMAC signature verification
   - Add `KINDE_WEBHOOK_SECRET` to environment variables
7. ⬜ Implement transaction support for batch operations
   - Use Drizzle transactions for selection imports
   - Implement rollback mechanism for failed imports
   - Clean up pre-generated IDs on failure
8. ⬜ Add caching strategy
   - Cache eBird taxonomy (materialized view)
   - Cache species/call types per dataset
   - Use Cloudflare Cache API for public endpoints
   - Add ETags for conditional responses
### Nice to Have (Lower Priority)
9. ⬜ Add comprehensive test suite
   - Unit tests for utilities (audioMothParser, filenameParser, astronomicalCalculations)
   - Integration tests for API routes (datasets, selections, fileImport)
   - E2E tests with Playwright (file upload, selection editing)
   - Target: >70% coverage
10. ⬜ Add monitoring/observability
    - Distributed tracing for API requests
    - Track slow queries (threshold: >1s)
    - Monitor Worker CPU usage and memory
    - Set up alerts for error rates
11. ⬜ Create API versioning strategy
    - Plan for /v2 API path
    - Document breaking changes policy
    - Consider versioned OpenAPI specs
12. ⬜ Performance optimizations
    - Implement code splitting with React.lazy
    - Memoize WaveSurfer instance in File.tsx
    - Add Suspense for loading states
    - Enable Cloudflare caching for static responses
## Backend Improvements
### Security
- ⬜ Verify JWT audience validation with Kinde
- ⬜ Add rate limiting via Cloudflare dashboard (suggest: 10 req/s per user)
- ⬜ Implement JWKS caching (verify jose internal caching)
- ⬜ Add Content Security Policy (CSP) headers
- ⬜ Sanitize user-generated metadata with DOMPurify on frontend
### Code Quality
- ⬜ Replace `any` types with proper types (especially in auth.ts)
- ⬜ Create custom Hono middleware type helpers
- ⬜ Standardize error responses with error codes enum
- ⬜ Add validation for remaining routes (locations, clusters, species, etc.)
## Documentation Updates Needed
### Update CLAUDE.md
- ⬜ Add Testing section with test commands
- ⬜ Document environment variables (DATABASE_URL, KINDE_*, B2_*)
- ⬜ Add architecture overview (React Query, Zustand, Drizzle)
- ⬜ Document validation patterns (Zod schemas location)
### Create .env.example
- ⬜ Document all required environment variables
- ⬜ Add comments explaining each variable
- ⬜ Include default/example values where appropriate
## Notes
### React Query Benefits Achieved
- Automatic caching with 5-minute stale time
- Request deduplication (same queries share results)
- Automatic retry on failure (1 retry by default)
- Type-safe API calls with TypeScript
- Centralized error handling
- Reduced boilerplate (no manual loading/error states)
### Zod Validation Benefits Achieved
- Removed ~140+ lines of manual validation code
- Automatic type inference for request bodies
- Consistent error messages
- Runtime type safety
- Composable validation schemas
- Easy to extend and maintain
### Architecture Score (Updated)
- Overall: 7.5/10
- Frontend State Management: 6/10 → 8/10 (with React Query infrastructure)
- Backend Validation: 6/10 → 8.5/10 (with Zod)
- Type Safety: 7/10 → 8/10
- Ready for production with above refinements

// Zod validation schemas for selection routes
import { z } from "zod";
// Schema for bulk selection import (used in POST /selections)
export const selectionImportSpeciesSchema = z.object({
  speciesId: z.string().length(12, "Species ID must be exactly 12 characters"),
  callTypes: z.array(z.string().length(12, "Call type ID must be exactly 12 characters")).default([]),
});
export const selectionImportItemSchema = z.object({
  fileId: z.string().length(12, "File ID must be exactly 12 characters"),
  startTime: z.number().min(0, "Start time must be non-negative"),
  endTime: z.number().min(0, "End time must be non-negative"),
  species: z.array(selectionImportSpeciesSchema).min(1, "At least one species is required"),
}).refine((data) => data.endTime > data.startTime, {
  message: "End time must be greater than start time",
  path: ["endTime"],
});
export const selectionImportSchema = z.object({
  datasetId: z.string().length(12, "Dataset ID must be exactly 12 characters"),
  filterId: z.string().length(12, "Filter ID must be exactly 12 characters"),
  selections: z.array(selectionImportItemSchema).min(1, "At least one selection is required"),
});
export const createSelectionSchema = z.object({
  id: z.string().length(12, "Selection ID must be exactly 12 characters"),
  fileId: z.string().length(12, "File ID must be exactly 12 characters"),
  datasetId: z.string().length(12, "Dataset ID must be exactly 12 characters"),
  startTime: z.number().min(0, "Start time must be non-negative"),
  endTime: z.number().min(0, "End time must be non-negative"),
  freqLow: z.number().min(0, "Low frequency must be non-negative").optional(),
  freqHigh: z.number().min(0, "High frequency must be non-negative").optional(),
  description: z.string().max(255, "Description must be 255 characters or less").optional(),
  metadata: z.record(z.unknown()).optional(),
}).refine((data) => data.endTime > data.startTime, {
  message: "End time must be greater than start time",
  path: ["endTime"],
}).refine((data) => {
  if (data.freqLow !== undefined && data.freqHigh !== undefined) {
    return data.freqHigh > data.freqLow;
  }
  return true;
}, {
  message: "High frequency must be greater than low frequency",
  path: ["freqHigh"],
});
export const updateSelectionSchema = z.object({
  startTime: z.number().min(0, "Start time must be non-negative").optional(),
  endTime: z.number().min(0, "End time must be non-negative").optional(),
  freqLow: z.number().min(0, "Low frequency must be non-negative").optional(),
  freqHigh: z.number().min(0, "High frequency must be non-negative").optional(),
  description: z.string().max(255, "Description must be 255 characters or less").optional(),
  metadata: z.record(z.unknown()).optional(),
}).refine((data) => {
  if (data.startTime !== undefined && data.endTime !== undefined) {
    return data.endTime > data.startTime;
  }
  return true;
}, {
  message: "End time must be greater than start time",
  path: ["endTime"],
}).refine((data) => {
  if (data.freqLow !== undefined && data.freqHigh !== undefined) {
    return data.freqHigh > data.freqLow;
  }
  return true;
}, {
  message: "High frequency must be greater than low frequency",
  path: ["freqHigh"],
});
export const selectionIdSchema = z.object({
  id: z.string().length(12, "Selection ID must be exactly 12 characters"),
});
export const selectionQuerySchema = z.object({
  fileId: z.string().length(12, "File ID must be exactly 12 characters").optional(),
  datasetId: z.string().length(12, "Dataset ID must be exactly 12 characters").optional(),
  speciesId: z.string().length(12, "Species ID must be exactly 12 characters").optional(),
  page: z.string().optional(),
  pageSize: z.string().optional(),
});
export type CreateSelectionInput = z.infer<typeof createSelectionSchema>;
export type UpdateSelectionInput = z.infer<typeof updateSelectionSchema>;
export type SelectionIdInput = z.infer<typeof selectionIdSchema>;
export type SelectionQueryInput = z.infer<typeof selectionQuerySchema>;

// Zod validation schemas for file import routes
import { z } from "zod";
export const gainLevelEnum = z.enum(["low", "low-medium", "medium", "medium-high", "high"]);
export const mothMetadataSchema = z.object({
  timestamp: z.string(),
  recorderId: z.string().optional(),
  gain: gainLevelEnum.optional(),
  batteryV: z.number().optional(),
  tempC: z.number().optional(),
});
export const fileImportItemSchema = z.object({
  fileName: z.string().min(1, "File name is required").max(255, "File name must be 255 characters or less"),
  path: z.string().max(255, "Path must be 255 characters or less").optional(),
  xxh64Hash: z.string().length(16, "Hash must be exactly 16 characters"),
  locationId: z.string().length(12, "Location ID must be exactly 12 characters"),
  timestampLocal: z.string().datetime("Invalid ISO 8601 timestamp"),
  clusterId: z.string().length(12, "Cluster ID must be exactly 12 characters").optional(),
  duration: z.number().min(0, "Duration must be non-negative"),
  sampleRate: z.number().min(0, "Sample rate must be non-negative"),
  description: z.string().max(255, "Description must be 255 characters or less").optional(),
  upload: z.boolean().optional(),
  maybeSolarNight: z.boolean().optional(),
  maybeCivilNight: z.boolean().optional(),
  moonPhase: z.number().min(0).max(1, "Moon phase must be between 0 and 1").optional(),
  mothMetadata: mothMetadataSchema.optional(),
});
export const chunkedFileImportSchema = z.object({
  files: z.array(fileImportItemSchema).min(1, "At least one file is required"),
  datasetId: z.string().length(12, "Dataset ID must be exactly 12 characters"),
  chunkIndex: z.number().int().min(0, "Chunk index must be non-negative"),
  totalChunks: z.number().int().min(1, "Total chunks must be at least 1"),
}).refine((data) => data.chunkIndex < data.totalChunks, {
  message: "Chunk index must be less than total chunks",
  path: ["chunkIndex"],
});
export type MothMetadataInput = z.infer<typeof mothMetadataSchema>;
export type FileImportItemInput = z.infer<typeof fileImportItemSchema>;
export type ChunkedFileImportInput = z.infer<typeof chunkedFileImportSchema>;

// Zod validation schemas for dataset routes
import { z } from "zod";
export const datasetTypeEnum = z.enum(["organise", "test", "train"]);
export const createDatasetSchema = z.object({
  id: z.string().length(12, "Dataset ID must be exactly 12 characters"),
  name: z.string().min(1, "Name is required").max(255, "Name must be 255 characters or less"),
  description: z.string().max(255, "Description must be 255 characters or less").optional(),
  type: datasetTypeEnum,
  public: z.boolean().default(false),
});
export const updateDatasetSchema = z.object({
  name: z.string().min(1, "Name is required").max(255, "Name must be 255 characters or less").optional(),
  description: z.string().max(255, "Description must be 255 characters or less").optional(),
  type: datasetTypeEnum.optional(),
  public: z.boolean().optional(),
  active: z.boolean().optional(),
});
export const datasetIdSchema = z.object({
  id: z.string().length(12, "Dataset ID must be exactly 12 characters"),
});
export type CreateDatasetInput = z.infer<typeof createDatasetSchema>;
export type UpdateDatasetInput = z.infer<typeof updateDatasetSchema>;
export type DatasetIdInput = z.infer<typeof datasetIdSchema>;

import { zValidator } from "@hono/zod-validator";

import { 
  file, 
  cluster, 
  location, 
  selection, 
  label, 
  species, 
  fileMetadata, 

import {
  file,
  cluster,
  location,
  selection,
  label,
  species,
  fileMetadata,

import { selectionImportSchema } from "../schemas/selections";

interface SelectionImportSpecies {
  speciesId: string;
  callTypes?: string[];
}

interface SelectionImportItem {
  fileId: string;
  startTime: number;
  endTime: number;
  species: SelectionImportSpecies[];
}
interface SelectionImportRequest {
  datasetId: string;
  filterId: string;
  selections: SelectionImportItem[];
}

// Interfaces removed - using Zod schema validation instead
// See: src/worker/schemas/selections.ts

selections.post("/", authenticate, async (c) => {

selections.post("/", authenticate, zValidator("json", selectionImportSchema), async (c) => {

    
    // Parse request body
    const body = await c.req.json().catch(() => null);
    
    if (!body || typeof body !== 'object') {
      return c.json({
        error: "Invalid request body: Expected JSON object"
      }, 400);
    }
    
    const { datasetId, filterId, selections: selectionsData } = body as SelectionImportRequest;
    
    // Validate required fields
    if (!datasetId || typeof datasetId !== 'string') {
      return c.json({
        error: "Missing or invalid required field: datasetId"
      }, 400);
    }
    
    if (!filterId || typeof filterId !== 'string') {
      return c.json({
        error: "Missing or invalid required field: filterId"
      }, 400);
    }
    
    if (!selectionsData || !Array.isArray(selectionsData) || selectionsData.length === 0) {
      return c.json({
        error: "Missing or invalid required field: selections (must be non-empty array)"
      }, 400);
    }
    
    // Validate selections structure
    for (let i = 0; i < selectionsData.length; i++) {
      const sel = selectionsData[i];
      
      if (!sel.fileId || typeof sel.fileId !== 'string') {
        return c.json({
          error: `Invalid selection at index ${i}: missing or invalid fileId`
        }, 400);
      }
      
      if (typeof sel.startTime !== 'number' || sel.startTime < 0) {
        return c.json({
          error: `Invalid selection at index ${i}: startTime must be a non-negative number`
        }, 400);
      }
      
      if (typeof sel.endTime !== 'number' || sel.endTime <= sel.startTime) {
        return c.json({
          error: `Invalid selection at index ${i}: endTime must be greater than startTime`
        }, 400);
      }
      
      if (!sel.species || !Array.isArray(sel.species) || sel.species.length === 0) {
        return c.json({
          error: `Invalid selection at index ${i}: species must be non-empty array`
        }, 400);
      }
      
      for (let j = 0; j < sel.species.length; j++) {
        const speciesItem = sel.species[j];
        
        if (!speciesItem.speciesId || typeof speciesItem.speciesId !== 'string') {
          return c.json({
            error: `Invalid selection at index ${i}, species at index ${j}: missing or invalid speciesId`
          }, 400);
        }
        
        if (speciesItem.callTypes && (!Array.isArray(speciesItem.callTypes) || 
            speciesItem.callTypes.some((ct: unknown) => typeof ct !== 'string'))) {
          return c.json({
            error: `Invalid selection at index ${i}, species at index ${j}: callTypes must be array of strings`
          }, 400);
        }
      }
    }

    // Get validated request body
    const { datasetId, filterId, selections: selectionsData } = c.req.valid("json");

    const allSpeciesIds = [...new Set(selectionsData.flatMap((s: SelectionImportItem) => s.species.map((sp: SelectionImportSpecies) => sp.speciesId)))];
    const allCallTypeIds = [...new Set(selectionsData.flatMap((s: SelectionImportItem) => 
      s.species.flatMap((sp: SelectionImportSpecies) => sp.callTypes || [])

    const allSpeciesIds = [...new Set(selectionsData.flatMap(s => s.species.map(sp => sp.speciesId)))];
    const allCallTypeIds = [...new Set(selectionsData.flatMap(s =>
      s.species.flatMap(sp => sp.callTypes || [])

import { zValidator } from "@hono/zod-validator";

import { chunkedFileImportSchema } from "../schemas/fileImport";

/**
 * Interface for chunked file import request body
 */
interface ChunkedFileImportRequest {
  files: Array<{
    fileName: string;
    path?: string;
    xxh64Hash: string;
    locationId: string;
    timestampLocal: string; // ISO 8601 timestamp
    clusterId?: string;
    duration: number;
    sampleRate: number;
    description?: string;
    upload?: boolean;
    maybeSolarNight?: boolean;
    maybeCivilNight?: boolean;
    moonPhase?: number;
    // Optional moth metadata
    mothMetadata?: {
      timestamp: string; // ISO 8601 timestamp
      recorderId?: string;
      gain?: "low" | "low-medium" | "medium" | "medium-high" | "high";
      batteryV?: number;
      tempC?: number;
    };
  }>;
  datasetId: string;
  chunkIndex: number;
  totalChunks: number;
}

// Interface removed - using Zod schema validation instead
// See: src/worker/schemas/fileImport.ts

fileImport.post("/chunk", authenticate, async (c) => {

fileImport.post("/chunk", authenticate, zValidator("json", chunkedFileImportSchema), async (c) => {

    const body = (await c.req.json()) as ChunkedFileImportRequest;

    // Get validated request body
    const body = c.req.valid("json");

      );
    }
    // Validate request
    if (!body.files || !Array.isArray(body.files) || body.files.length === 0) {
      return c.json(
        {
          error: "Bad Request",
          message: "Files array is required and must not be empty",
        },
        400,

import { zValidator } from "@hono/zod-validator";

import { 
  dataset, 
  accessGrant, 
  userRole 

import {
  dataset,
  accessGrant,
  userRole

import {
  createDatasetSchema,
  updateDatasetSchema,
  datasetIdSchema,
} from "../schemas/datasets";

datasets.post("/", authenticate, async (c) => {

datasets.post("/", authenticate, zValidator("json", createDatasetSchema), async (c) => {

    }
    // Parse request body
    const body = await c.req.json();
    const { id, name, description, public: isPublic, type } = body;
    // Validate required fields
    if (!id || typeof id !== 'string') {
      return c.json({
        error: "Missing or invalid required field: id"
      }, 400);
    }
    if (!name || typeof name !== 'string' || name.trim().length === 0) {
      return c.json({
        error: "Missing or invalid required field: name"
      }, 400);
    }
    // Validate field lengths
    if (id.length !== 12) {
      return c.json({
        error: "Field 'id' must be exactly 12 characters (nanoid)"
      }, 400);

    if (name.length > 255) {
      return c.json({
        error: "Field 'name' must be 255 characters or less"
      }, 400);
    }

    // Get validated request body
    const { id, name, description, public: isPublic, type } = c.req.valid("json");

    if (description && description.length > 255) {
      return c.json({
        error: "Field 'description' must be 255 characters or less"
      }, 400);
    }
    // Validate type if provided
    const validTypes = ['organise', 'test', 'train'];
    const datasetType = type || 'organise';
    if (!validTypes.includes(datasetType)) {
      return c.json({
        error: `Field 'type' must be one of: ${validTypes.join(', ')}`
      }, 400);
    }

      type: datasetType,

      type: type,

datasets.put("/:id", authenticate, async (c) => {

datasets.put("/:id", authenticate, zValidator("param", datasetIdSchema), zValidator("json", updateDatasetSchema), async (c) => {

    // Get dataset ID from URL parameters
    const datasetId = c.req.param("id");
    
    if (!datasetId) {
      return c.json({
        error: "Missing dataset ID in URL"
      }, 400);
    }

    // Get validated dataset ID from URL parameters
    const { id: datasetId } = c.req.valid("param");

    // Parse request body
    const body = await c.req.json();
    const { name, description, public: isPublic, type, active } = body;

    // Get validated request body
    const { name, description, public: isPublic, type, active } = c.req.valid("json");

    // Validate fields if provided
    if (name !== undefined) {
      if (typeof name !== 'string' || name.trim().length === 0) {
        return c.json({
          error: "Invalid field: name must be a non-empty string"
        }, 400);
      }
      
      if (name.length > 255) {
        return c.json({
          error: "Field 'name' must be 255 characters or less"
        }, 400);
      }
    }
    if (description !== undefined && description !== null && description.length > 255) {
      return c.json({
        error: "Field 'description' must be 255 characters or less"
      }, 400);
    }
    if (type !== undefined) {
      const validTypes = ['organise', 'test', 'train'];
      if (!validTypes.includes(type)) {
        return c.json({
          error: `Field 'type' must be one of: ${validTypes.join(', ')}`
        }, 400);
      }
    }

// API client utility for making authenticated requests
export interface ApiError {
  error: string;
  details?: string;
}
export class ApiClientError extends Error {
  constructor(
    public status: number,
    public data: ApiError,
  ) {
    super(data.error);
    this.name = "ApiClientError";
  }
}
export async function apiRequest<T>(
  endpoint: string,
  options: RequestInit & { token?: string } = {},
): Promise<T> {
  const { token, ...fetchOptions } = options;
  const headers: Record<string, string> = {
    "Content-Type": "application/json",
    ...(fetchOptions.headers as Record<string, string>),
  };
  if (token) {
    headers.Authorization = `Bearer ${token}`;
  }
  const response = await fetch(endpoint, {
    ...fetchOptions,
    headers,
  });
  if (!response.ok) {
    let errorData: ApiError;
    try {
      errorData = await response.json();
    } catch {
      errorData = {
        error: response.statusText || "An error occurred",
      };
    }
    throw new ApiClientError(response.status, errorData);
  }
  return response.json();
}
// Convenience methods
export const api = {
  get: <T>(endpoint: string, token?: string) =>
    apiRequest<T>(endpoint, { method: "GET", ...(token && { token }) }),
  post: <T>(endpoint: string, data: unknown, token?: string) =>
    apiRequest<T>(endpoint, {
      method: "POST",
      body: JSON.stringify(data),
      ...(token && { token }),
    }),
  put: <T>(endpoint: string, data: unknown, token?: string) =>
    apiRequest<T>(endpoint, {
      method: "PUT",
      body: JSON.stringify(data),
      ...(token && { token }),
    }),
  delete: <T>(endpoint: string, token?: string) =>
    apiRequest<T>(endpoint, { method: "DELETE", ...(token && { token }) }),
};

import ErrorBoundary from "@/components/ErrorBoundary";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import { Toaster } from "sonner";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5, // 5 minutes
      retry: 1,
      refetchOnWindowFocus: false,
    },
  },
});

    <KindeProvider
      clientId="ef3e44de79594041addc4f744be2a7c7"
      domain="https://skraak.kinde.com"
      logoutUri={window.location.origin}
      redirectUri={window.location.origin}
    >
      <PublicContent />
      <RouterProvider router={router} />
    </KindeProvider>

    <ErrorBoundary>
      <QueryClientProvider client={queryClient}>
        <KindeProvider
          clientId="ef3e44de79594041addc4f744be2a7c7"
          domain="https://skraak.kinde.com"
          logoutUri={window.location.origin}
          redirectUri={window.location.origin}
        >
          <PublicContent />
          <RouterProvider router={router} />
          <Toaster position="top-right" richColors />
        </KindeProvider>
      </QueryClientProvider>
    </ErrorBoundary>

// Custom hooks for data fetching with React Query
import { useKindeAuth } from "@kinde-oss/kinde-auth-react";
import {
  useMutation,
  useQuery,
  useQueryClient,
  type UseMutationOptions,
  type UseQueryOptions,
} from "@tanstack/react-query";
import { api, type ApiClientError } from "@/utils/apiClient";
/**
 * Hook for GET requests with automatic authentication
 */
export function useApiQuery<T>(
  key: readonly unknown[],
  endpoint: string,
  options?: Omit<UseQueryOptions<T, ApiClientError>, "queryKey" | "queryFn">,
) {
  const { getToken, isAuthenticated, isLoading } = useKindeAuth();
  return useQuery<T, ApiClientError>({
    queryKey: key,
    queryFn: async () => {
      const token = await getToken();
      return api.get<T>(endpoint, token || undefined);
    },
    enabled: isAuthenticated && !isLoading && (options?.enabled ?? true),
    ...options,
  });
}
/**
 * Hook for POST requests with automatic authentication
 */
export function useApiMutation<TData, TVariables>(
  endpoint: string | ((variables: TVariables) => string),
  method: "POST" | "PUT" | "DELETE" = "POST",
  options?: Omit<
    UseMutationOptions<TData, ApiClientError, TVariables>,
    "mutationFn"
  >,
) {
  const { getToken } = useKindeAuth();
  return useMutation<TData, ApiClientError, TVariables>({
    mutationFn: async (variables) => {
      const token = await getToken();
      const url = typeof endpoint === "function"
        ? endpoint(variables)
        : endpoint;
      if (method === "POST") {
        return api.post<TData>(url, variables, token || undefined);
      } else if (method === "PUT") {
        return api.put<TData>(url, variables, token || undefined);
      } else {
        return api.delete<TData>(url, token || undefined);
      }
    },
    ...options,
  });
}
/**
 * Hook for invalidating queries
 */
export function useInvalidateQueries() {
  const queryClient = useQueryClient();
  return (queryKey: readonly unknown[]) => {
    queryClient.invalidateQueries({ queryKey });
  };
}

import { useCallback, useEffect, useState } from "react";
import { useKindeAuth } from "@kinde-oss/kinde-auth-react";
import WaveSurfer from "wavesurfer.js";
import Regions from "wavesurfer.js/dist/plugins/regions.esm.js";
import Spectrogram from "wavesurfer.js/dist/plugins/spectrogram.esm.js";
import Timeline from "wavesurfer.js/dist/plugins/timeline.esm.js";
interface UseWaveSurferOptions {
  waveformRef: React.RefObject<HTMLDivElement>;
  spectrogramRef: React.RefObject<HTMLDivElement>;
  timelineRef: React.RefObject<HTMLDivElement>;
}
interface WaveSurferState {
  wavesurfer: WaveSurfer | null;
  regionsPlugin: unknown;
  audioLoading: boolean;
  audioError: string | null;
  isPlaying: boolean;
  currentTime: number;
  duration: number;
  localFile: File | null;
  filePickerSupported: boolean;
}
export function useWaveSurfer({ waveformRef, spectrogramRef, timelineRef }: UseWaveSurferOptions) {
  const { getToken } = useKindeAuth();
  const [state, setState] = useState<WaveSurferState>({
    wavesurfer: null,
    regionsPlugin: null,
    audioLoading: false,
    audioError: null,
    isPlaying: false,
    currentTime: 0,
    duration: 0,
    localFile: null,
    filePickerSupported: "showOpenFilePicker" in window,
  });
  // Initialize WaveSurfer instance
  const initWaveSurfer = useCallback(() => {
    if (!waveformRef.current || !spectrogramRef.current || !timelineRef.current) {
      return null;
    }
    const wavesurfer = WaveSurfer.create({
      container: waveformRef.current,
      height: 100,
      waveColor: "#4F46E5",
      progressColor: "#7C3AED",
      interact: true,
      hideScrollbar: true,
    });
    // Add spectrogram plugin
    wavesurfer.registerPlugin(
      Spectrogram.create({
        container: spectrogramRef.current,
        height: 256,
      }),
    );
    // Add timeline plugin
    wavesurfer.registerPlugin(
      Timeline.create({
        container: timelineRef.current,
        height: 20,
        timeInterval: 60,
        primaryLabelInterval: 1,
        secondaryLabelInterval: 1,
        formatTimeCallback: (seconds: number) => {
          const minutes = Math.floor(seconds / 60);
          const secs = Math.floor(seconds % 60);
          return `${minutes}:${secs.toString().padStart(2, "0")}`;
        },
        style: {
          fontSize: "12px",
          color: "#666",
        },
      }),
    );
    // Add regions plugin
    const regionsPlugin = Regions.create();
    wavesurfer.registerPlugin(regionsPlugin);
    // Event listeners
    wavesurfer.on("ready", () => {
      setState((prev) => ({
        ...prev,
        duration: wavesurfer.getDuration(),
        audioLoading: false,
        regionsPlugin,
      }));
    });
    wavesurfer.on("play", () => {
      setState((prev) => ({ ...prev, isPlaying: true }));
    });
    wavesurfer.on("pause", () => {
      setState((prev) => ({ ...prev, isPlaying: false }));
    });
    wavesurfer.on("timeupdate", (currentTime) => {
      setState((prev) => ({ ...prev, currentTime }));
    });
    wavesurfer.on("error", (error) => {
      console.error("WaveSurfer error:", error);
      setState((prev) => ({
        ...prev,
        audioError: "Failed to load audio file",
        audioLoading: false,
      }));
    });
    return wavesurfer;
  }, [waveformRef, spectrogramRef, timelineRef]);
  // Initialize on mount
  useEffect(() => {
    const ws = initWaveSurfer();
    if (ws) {
      setState((prev) => ({ ...prev, wavesurfer: ws }));
    }
    return () => {
      ws?.destroy();
    };
  }, [initWaveSurfer]);
  // Load online file from API
  const loadOnlineFile = useCallback(
    async (fileId: string) => {
      if (!state.wavesurfer) return;
      setState((prev) => ({ ...prev, audioLoading: true, audioError: null }));
      try {
        const accessToken = await getToken();
        const response = await fetch(`/api/files/${fileId}/download`, {
          headers: {
            Authorization: `Bearer ${accessToken}`,
          },
        });
        if (!response.ok) {
          throw new Error(`Failed to fetch audio: ${response.status}`);
        }
        const blob = await response.blob();
        const url = URL.createObjectURL(blob);
        await state.wavesurfer.load(url);
        // Clean up the object URL when done
        setTimeout(() => URL.revokeObjectURL(url), 1000);
      } catch (error) {
        console.error("Error loading online file:", error);
        setState((prev) => ({
          ...prev,
          audioError: "Failed to load audio file from server",
          audioLoading: false,
        }));
      }
    },
    [state.wavesurfer, getToken],
  );
  // Load local file
  const loadLocalFile = useCallback(
    (file: File) => {
      if (!state.wavesurfer) return;
      setState((prev) => ({ ...prev, audioLoading: true, audioError: null }));
      try {
        const url = URL.createObjectURL(file);
        void state.wavesurfer.load(url).catch(console.error);
        // Store cleanup function for later use
        setTimeout(() => URL.revokeObjectURL(url), 60000); // Clean up after 1 minute
      } catch (error) {
        console.error("Error loading local file:", error);
        setState((prev) => ({
          ...prev,
          audioError: "Failed to load local audio file",
          audioLoading: false,
        }));
      }
    },
    [state.wavesurfer],
  );
  // File picker functionality
  const openFilePicker = useCallback(async () => {
    try {
      let selectedFile: File | null = null;
      if (state.filePickerSupported && "showOpenFilePicker" in window) {
        // Use File System Access API
        interface FileSystemFileHandle {
          getFile(): Promise<File>;
        }
        const showOpenFilePicker = (
          window as unknown as {
            showOpenFilePicker: (options: unknown) => Promise<FileSystemFileHandle[]>;
          }
        ).showOpenFilePicker;
        const [fileHandle] = await showOpenFilePicker({
          types: [
            {
              description: "Audio files",
              accept: {
                "audio/*": [".wav", ".flac"],
              },
            },
          ],
          multiple: false,
        });
        selectedFile = await fileHandle.getFile();
      } else {
        // Fallback to input element
        selectedFile = await new Promise<File | null>((resolve) => {
          const input = document.createElement("input");
          input.type = "file";
          input.accept = "audio/*";
          input.onchange = (e) => {
            const file = (e.target as HTMLInputElement).files?.[0];
            resolve(file || null);
          };
          input.click();
        });
      }
      if (selectedFile) {
        setState((prev) => ({ ...prev, localFile: selectedFile }));
        loadLocalFile(selectedFile);
      }
    } catch (error) {
      if (error instanceof Error && error.name === "AbortError") {
        // User cancelled, do nothing
        return;
      }
      console.error("Error opening file picker:", error);
      setState((prev) => ({
        ...prev,
        audioError: "Failed to open file picker",
      }));
    }
  }, [state.filePickerSupported, loadLocalFile]);
  // Play/pause toggle
  const togglePlayPause = useCallback(() => {
    if (state.wavesurfer) {
      void state.wavesurfer.playPause().catch(console.error);
    }
  }, [state.wavesurfer]);
  // Format time for display
  const formatTime = (time: number): string => {
    const minutes = Math.floor(time / 60);
    const seconds = Math.floor(time % 60);
    return `${minutes}:${seconds.toString().padStart(2, "0")}`;
  };
  return {
    ...state,
    loadOnlineFile,
    loadLocalFile,
    openFilePicker,
    togglePlayPause,
    formatTime,
  };
}

import { useCallback, useEffect, useState } from "react";
import { useKindeAuth } from "@kinde-oss/kinde-auth-react";
interface SelectionData {
  id: string;
  startTime: number;
  endTime: number;
  freqLow: number | null;
  freqHigh: number | null;
  description: string | null;
  metadata: Record<string, unknown> | null;
  filters: Array<{
    id: string | null;
    name: string | null;
    species: Array<{
      id: string;
      name: string;
      certainty: number | null;
      callTypes: Array<{
        id: string;
        name: string;
        certainty: number | null;
      }>;
    }>;
  }>;
}
interface EditableSelectionData {
  description: string;
  distance: string;
  note: string;
  speciesId: string;
  speciesCertainty: number | null;
  callTypeId: string;
  callTypeCertainty: number | null;
  startTime: number;
  endTime: number;
}
interface SpeciesOption {
  id: string;
  label: string;
  callTypes: Array<{
    id: string;
    label: string;
  }>;
}
interface UseSelectionsOptions {
  fileId: string | null;
  datasetId: string | null;
  canEditSelections: boolean;
}
export function useSelections({ fileId, datasetId, canEditSelections }: UseSelectionsOptions) {
  const { getToken } = useKindeAuth();
  const [selections, setSelections] = useState<SelectionData[]>([]);
  const [selectionsLoading, setSelectionsLoading] = useState(false);
  const [selectionsError, setSelectionsError] = useState<string | null>(null);
  const [editingSelectionId, setEditingSelectionId] = useState<string | null>(null);
  const [editingData, setEditingData] = useState<EditableSelectionData | null>(null);
  const [savingSelection, setSavingSelection] = useState(false);
  const [deletingSelectionId, setDeletingSelectionId] = useState<string | null>(null);
  const [speciesOptions, setSpeciesOptions] = useState<SpeciesOption[]>([]);
  const [speciesLoading, setSpeciesLoading] = useState(false);
  const [selectedFilterId, setSelectedFilterId] = useState<string | null>(null);
  // Fetch selections for a file
  const fetchSelections = useCallback(
    async (fid: string) => {
      setSelectionsLoading(true);
      setSelectionsError(null);
      try {
        const accessToken = await getToken();
        const response = await fetch(`/api/files/${fid}/selections`, {
          headers: {
            Authorization: `Bearer ${accessToken}`,
          },
        });
        if (!response.ok) {
          throw new Error(`Failed to fetch selections: ${response.status}`);
        }
        const data = await response.json();
        setSelections(data.data || []);
      } catch (error) {
        console.error("Error fetching selections:", error);
        setSelectionsError("Failed to load selections");
      } finally {
        setSelectionsLoading(false);
      }
    },
    [getToken],
  );
  // Fetch species options for the dataset
  const fetchSpeciesOptions = useCallback(async () => {
    if (!datasetId || !canEditSelections) return;
    setSpeciesLoading(true);
    try {
      const accessToken = await getToken();
      const response = await fetch(`/api/species?datasetId=${datasetId}`, {
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
      });
      if (response.ok) {
        const data = await response.json();
        setSpeciesOptions(data.data || []);
      }
    } catch (error) {
      console.error("Error fetching species options:", error);
      setSpeciesOptions([]);
    } finally {
      setSpeciesLoading(false);
    }
  }, [datasetId, canEditSelections, getToken]);
  // Start editing a selection
  const startEditingSelection = useCallback((selection: SelectionData) => {
    // Extract first filter's first species data for editing
    const firstFilter = selection.filters[0];
    const firstSpecies = firstFilter?.species[0];
    const firstCallType = firstSpecies?.callTypes[0];
    const distance = selection.metadata?.distance as string || "";
    const note = selection.metadata?.note as string || "";
    setEditingSelectionId(selection.id);
    setEditingData({
      description: selection.description || "",
      distance,
      note,
      speciesId: firstSpecies?.id || "",
      speciesCertainty: firstSpecies?.certainty || null,
      callTypeId: firstCallType?.id || "",
      callTypeCertainty: firstCallType?.certainty || null,
      startTime: selection.startTime,
      endTime: selection.endTime,
    });
  }, []);
  // Cancel editing
  const cancelEdit = useCallback(() => {
    setEditingSelectionId(null);
    setEditingData(null);
  }, []);
  // Update editing data field
  const updateEditingField = useCallback((field: keyof EditableSelectionData, value: string | number | null) => {
    setEditingData(prev => prev ? { ...prev, [field]: value } : null);
  }, []);
  // Save selection changes
  const saveSelection = useCallback(async () => {
    if (!editingSelectionId || !editingData || !canEditSelections) return;
    setSavingSelection(true);
    try {
      const accessToken = await getToken();
      // Save timing (start and end times)
      const timingResponse = await fetch(`/api/files/selections/${editingSelectionId}/timing`, {
        method: 'PATCH',
        headers: {
          'Authorization': `Bearer ${accessToken}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          startTime: editingData.startTime,
          endTime: editingData.endTime
        }),
      });
      if (!timingResponse.ok) {
        throw new Error('Failed to update timing');
      }
      // Save description
      const descriptionResponse = await fetch(`/api/files/selections/${editingSelectionId}/description`, {
        method: 'PATCH',
        headers: {
          'Authorization': `Bearer ${accessToken}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          description: editingData.description
        }),
      });
      if (!descriptionResponse.ok) {
        throw new Error('Failed to update description');
      }
      // Save metadata (distance, note)
      const metadataResponse = await fetch(`/api/files/selections/${editingSelectionId}/metadata`, {
        method: 'PATCH',
        headers: {
          'Authorization': `Bearer ${accessToken}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          metadata: {
            distance: editingData.distance,
            note: editingData.note,
          }
        }),
      });
      if (!metadataResponse.ok) {
        throw new Error('Failed to update metadata');
      }
      // Save labels (species, call types) if species is selected
      if (editingData.speciesId) {
        const labels = [{
          speciesId: editingData.speciesId,
          certainty: editingData.speciesCertainty,
          callTypes: editingData.callTypeId ? [{
            callTypeId: editingData.callTypeId,
            certainty: editingData.callTypeCertainty,
          }] : [],
        }];
        const labelsResponse = await fetch(`/api/files/selections/${editingSelectionId}/labels`, {
          method: 'PATCH',
          headers: {
            'Authorization': `Bearer ${accessToken}`,
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            labels,
            filterId: selectedFilterId,
          }),
        });
        if (!labelsResponse.ok) {
          throw new Error('Failed to update labels');
        }
      }
      // Refresh selections data
      if (fileId) {
        await fetchSelections(fileId);
      }
      // Exit edit mode
      cancelEdit();
    } catch (error) {
      console.error("Error saving selection:", error);
      throw error;
    } finally {
      setSavingSelection(false);
    }
  }, [editingSelectionId, editingData, selectedFilterId, canEditSelections, getToken, fileId, fetchSelections, cancelEdit]);
  // Delete selection
  const deleteSelection = useCallback(async (selection: SelectionData) => {
    if (!canEditSelections) return;
    const confirmDelete = window.confirm(
      `Are you sure you want to delete this selection?\n\nStart: ${selection.startTime.toFixed(3)}s\nEnd: ${selection.endTime.toFixed(3)}s\n\nThis action cannot be undone.`
    );
    if (!confirmDelete) return;
    setDeletingSelectionId(selection.id);
    try {
      const accessToken = await getToken();
      const response = await fetch(`/api/files/selections/${selection.id}`, {
        method: 'DELETE',
        headers: {
          'Authorization': `Bearer ${accessToken}`,
        },
      });
      if (!response.ok) {
        throw new Error('Failed to delete selection');
      }
      // Refresh selections data
      if (fileId) {
        await fetchSelections(fileId);
      }
    } catch (error) {
      console.error("Error deleting selection:", error);
      throw error;
    } finally {
      setDeletingSelectionId(null);
    }
  }, [canEditSelections, getToken, fileId, fetchSelections]);
  // Get available filters from selections
  const getAvailableFilters = useCallback(() => {
    const filtersMap = new Map<string, string>();
    selections.forEach((selection) => {
      selection.filters.forEach((filter) => {
        if (filter.id && filter.name) {
          filtersMap.set(filter.id, filter.name);
        }
      });
    });
    return Array.from(filtersMap.entries()).map(([id, name]) => ({ id, name }));
  }, [selections]);
  // Get filtered selections based on selected filter
  const getFilteredSelections = useCallback(() => {
    if (!selectedFilterId) {
      return selections;
    }
    return selections.filter((selection) =>
      selection.filters.some((filter) => filter.id === selectedFilterId),
    );
  }, [selections, selectedFilterId]);
  // Fetch selections when fileId changes
  useEffect(() => {
    if (fileId) {
      void fetchSelections(fileId).catch(console.error);
    }
  }, [fileId, fetchSelections]);
  // Fetch species options when component mounts and editing is enabled
  useEffect(() => {
    if (canEditSelections && datasetId) {
      void fetchSpeciesOptions().catch(console.error);
    }
  }, [canEditSelections, datasetId, fetchSpeciesOptions]);
  return {
    selections,
    selectionsLoading,
    selectionsError,
    editingSelectionId,
    editingData,
    savingSelection,
    deletingSelectionId,
    speciesOptions,
    speciesLoading,
    selectedFilterId,
    setSelectedFilterId,
    fetchSelections,
    startEditingSelection,
    cancelEdit,
    updateEditingField,
    saveSelection,
    deleteSelection,
    getAvailableFilters,
    getFilteredSelections,
  };
}

import { useCallback, useEffect, useState } from "react";
import { useKindeAuth } from "@kinde-oss/kinde-auth-react";
interface FileContext {
  dataset?: { id: string; name: string };
  location?: { id: string; name: string };
  cluster?: { id: string; name: string };
}
export function useFileContext(fileId: string | null) {
  const { getToken } = useKindeAuth();
  const [fileContext, setFileContext] = useState<FileContext | null>(null);
  const [fileContextLoading, setFileContextLoading] = useState(false);
  const fetchFileContext = useCallback(
    async (fid: string) => {
      setFileContextLoading(true);
      try {
        const accessToken = await getToken();
        const response = await fetch(`/api/files/${fid}/context`, {
          headers: {
            Authorization: `Bearer ${accessToken}`,
          },
        });
        if (!response.ok) {
          throw new Error(`Failed to fetch file context: ${response.status}`);
        }
        const data = await response.json();
        setFileContext(data.data);
      } catch (error) {
        console.error("Error fetching file context:", error);
      } finally {
        setFileContextLoading(false);
      }
    },
    [getToken],
  );
  useEffect(() => {
    if (fileId) {
      void fetchFileContext(fileId).catch(console.error);
    }
  }, [fileId, fetchFileContext]);
  return {
    fileContext,
    fileContextLoading,
    fetchFileContext,
  };
}

export { default } from "./FileContainer";
export { default as FileContainer } from "./FileContainer";
export { default as FileHeader } from "./FileHeader";
export { default as FilterDropdown } from "./FilterDropdown";
export { default as WaveformPlayer } from "./WaveformPlayer";
export { default as SelectionList } from "./SelectionList";

import { AlertCircle, Pause, Play, Upload } from "lucide-react";
import React from "react";
import type { File as FileType } from "@/types/file";
import Button from "@/components/ui/button";
interface WaveformPlayerProps {
  file: FileType;
  userIsOwner: boolean;
  waveformRef: React.RefObject<HTMLDivElement>;
  spectrogramRef: React.RefObject<HTMLDivElement>;
  timelineRef: React.RefObject<HTMLDivElement>;
  audioLoading: boolean;
  audioError: string | null;
  isPlaying: boolean;
  currentTime: number;
  duration: number;
  localFile: File | null;
  filePickerSupported: boolean;
  wavesurfer: unknown;
  togglePlayPause: () => void;
  openFilePicker: () => Promise<void>;
  formatTime: (time: number) => string;
}
export default function WaveformPlayer({
  file,
  userIsOwner,
  waveformRef,
  spectrogramRef,
  timelineRef,
  audioLoading,
  audioError,
  isPlaying,
  currentTime,
  duration,
  localFile,
  filePickerSupported,
  wavesurfer,
  togglePlayPause,
  openFilePicker,
  formatTime,
}: WaveformPlayerProps) {
  // Render audio visualization (waveform + spectrogram + controls)
  const renderAudioVisualization = () => (
    <>
      {audioLoading && (
        <div className="flex items-center justify-center h-32 text-muted-foreground">
          Loading audio...
        </div>
      )}
      {audioError && (
        <div className="flex items-center gap-2 p-3 bg-destructive/10 text-destructive rounded-md">
          <AlertCircle className="h-4 w-4" />
          {audioError}
        </div>
      )}
      {/* Audio Visualization */}
      <div className="bg-muted/20 rounded-md p-3 space-y-1">
        {/* Waveform */}
        <div ref={waveformRef} className="w-full h-24" />
        {/* Timeline */}
        <div
          ref={timelineRef}
          className="w-full"
          style={{ height: "20px" }}
        />
        {/* Spectrogram */}
        <div
          ref={spectrogramRef}
          className="w-full"
          style={{ height: "256px" }}
        />
      </div>
      {/* Controls */}
      {wavesurfer && !audioLoading && !audioError && (
        <div className="flex items-center gap-4 p-4 bg-muted/20 rounded-md">
          <Button
            variant="outline"
            size="icon"
            onClick={togglePlayPause}
            disabled={audioLoading}
          >
            {isPlaying ? (
              <Pause className="h-4 w-4" />
            ) : (
              <Play className="h-4 w-4" />
            )}
          </Button>
          <div className="text-sm text-muted-foreground">
            {formatTime(currentTime)} / {formatTime(duration)} • Sample Rate:{" "}
            {(file.sampleRate / 1000).toFixed(1)} kHz
          </div>
        </div>
      )}
    </>
  );
  // Online file - show waveform
  if (file.upload) {
    return <div className="space-y-4">{renderAudioVisualization()}</div>;
  }
  // Offline file handling
  return (
    <div className="space-y-4">
      {/* Show file picker for owner, info message for non-owner */}
      {userIsOwner ? (
        <>
          {!localFile && (
            <div className="text-center p-8">
              <Upload className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
              <h3 className="text-lg font-medium mb-2">Load Local File</h3>
              <p className="text-sm text-muted-foreground mb-4">
                This file is not available online. Load it from your local
                storage to play and analyze.
              </p>
              <Button
                onClick={() => void openFilePicker().catch(console.error)}
              >
                {filePickerSupported ? "Browse Files" : "Select File"}
              </Button>
            </div>
          )}
          {/* Show waveform if local file is loaded */}
          {localFile && (
            <div className="space-y-4">
              <div className="p-3 bg-green-50 text-green-800 rounded-md">
                Loaded: {localFile.name}
              </div>
              {renderAudioVisualization()}
            </div>
          )}
        </>
      ) : (
        <div className="text-center p-8">
          <AlertCircle className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
          <h3 className="text-lg font-medium mb-2">
            Audio Not Available
          </h3>
          <p className="text-sm text-muted-foreground">
            This file is not available for playback, but you can view the selections below.
          </p>
        </div>
      )}
    </div>
  );
}

import { Check, Edit, Trash2, X } from "lucide-react";
import React, { useCallback } from "react";
import { useNavigate } from "react-router-dom";
import Button from "@/components/ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
interface SelectionData {
  id: string;
  startTime: number;
  endTime: number;
  freqLow: number | null;
  freqHigh: number | null;
  description: string | null;
  metadata: Record<string, unknown> | null;
  filters: Array<{
    id: string | null;
    name: string | null;
    species: Array<{
      id: string;
      name: string;
      certainty: number | null;
      callTypes: Array<{
        id: string;
        name: string;
        certainty: number | null;
      }>;
    }>;
  }>;
}
interface EditableSelectionData {
  description: string;
  distance: string;
  note: string;
  speciesId: string;
  speciesCertainty: number | null;
  callTypeId: string;
  callTypeCertainty: number | null;
  startTime: number;
  endTime: number;
}
interface SpeciesOption {
  id: string;
  label: string;
  callTypes: Array<{
    id: string;
    label: string;
  }>;
}
interface SelectionListProps {
  selections: SelectionData[];
  selectionsLoading: boolean;
  selectionsError: string | null;
  selectedFilterId: string | null;
  editingSelectionId: string | null;
  editingData: EditableSelectionData | null;
  savingSelection: boolean;
  deletingSelectionId: string | null;
  speciesOptions: SpeciesOption[];
  canEditSelections: boolean;
  onStartEditing: (selection: SelectionData) => void;
  onCancelEdit: () => void;
  onUpdateField: (
    field: keyof EditableSelectionData,
    value: string | number | null
  ) => void;
  onSave: () => Promise<void>;
  onDelete: (selection: SelectionData) => Promise<void>;
}
export default function SelectionList({
  selections,
  selectionsLoading,
  selectionsError,
  selectedFilterId,
  editingSelectionId,
  editingData,
  savingSelection,
  deletingSelectionId,
  speciesOptions,
  canEditSelections,
  onStartEditing,
  onCancelEdit,
  onUpdateField,
  onSave,
  onDelete,
}: SelectionListProps) {
  const navigate = useNavigate();
  // Extract metadata value helper
  const getMetadataValue = useCallback(
    (metadata: Record<string, unknown> | null, key: string): string => {
      if (!metadata || !metadata[key]) return "-";
      return String(metadata[key]);
    },
    []
  );
  // Handle selection row click for proximal selections
  const handleSelectionClick = useCallback(
    (selection: SelectionData) => {
      // Don't navigate if we're in edit mode
      if (editingSelectionId) return;
      // Navigate to proximal selections page
      navigate(`/selections/${selection.id}/proximal`);
    },
    [navigate, editingSelectionId]
  );
  // Render editable field based on type and edit mode
  const renderEditableField = useCallback(
    (
      selection: SelectionData,
      fieldType:
        | "description"
        | "distance"
        | "note"
        | "species"
        | "callType"
        | "speciesCertainty"
        | "callTypeCertainty"
        | "startTime"
        | "endTime",
      currentValue: string,
      fieldKey?: keyof EditableSelectionData
    ) => {
      const isEditing = editingSelectionId === selection.id;
      if (!isEditing) {
        return currentValue;
      }
      if (!editingData || !fieldKey) {
        return currentValue;
      }
      switch (fieldType) {
        case "description":
        case "note":
          return (
            <input
              type="text"
              value={String(editingData[fieldKey] || "")}
              onChange={(e) => onUpdateField(fieldKey, e.target.value)}
              className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
              placeholder={
                fieldType === "description"
                  ? "Enter description"
                  : "Enter comment"
              }
            />
          );
        case "distance":
          return (
            <select
              value={String(editingData[fieldKey] || "")}
              onChange={(e) => onUpdateField(fieldKey, e.target.value)}
              className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
            >
              <option value="">Select distance</option>
              <option value="close">close</option>
              <option value="ok">ok</option>
              <option value="far">far</option>
            </select>
          );
        case "species":
          return (
            <select
              value={String(editingData.speciesId || "")}
              onChange={(e) => {
                onUpdateField("speciesId", e.target.value);
                // Reset call type when species changes
                onUpdateField("callTypeId", "");
              }}
              className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
            >
              <option value="">Select species</option>
              {speciesOptions.map((species) => (
                <option key={species.id} value={species.id}>
                  {species.label}
                </option>
              ))}
            </select>
          );
        case "callType": {
          const selectedSpecies = speciesOptions.find(
            (s) => s.id === editingData?.speciesId
          );
          const callTypeOptions = selectedSpecies?.callTypes || [];
          return (
            <select
              value={String(editingData.callTypeId || "")}
              onChange={(e) => onUpdateField("callTypeId", e.target.value)}
              className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
              disabled={!editingData.speciesId}
            >
              <option value="">Select call type</option>
              {callTypeOptions.map((callType) => (
                <option key={callType.id} value={callType.id}>
                  {callType.label}
                </option>
              ))}
            </select>
          );
        }
        case "speciesCertainty":
        case "callTypeCertainty":
          return (
            <input
              type="number"
              min="0"
              max="100"
              step="0.1"
              value={String(editingData[fieldKey] || "")}
              onChange={(e) =>
                onUpdateField(
                  fieldKey,
                  e.target.value ? parseFloat(e.target.value) : null
                )
              }
              className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
              placeholder="0-100"
            />
          );
        case "startTime":
        case "endTime":
          return (
            <input
              type="number"
              min="0"
              step="0.001"
              value={String(editingData[fieldKey] || "")}
              onChange={(e) =>
                onUpdateField(
                  fieldKey,
                  e.target.value ? parseFloat(e.target.value) : null
                )
              }
              className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
              placeholder="seconds"
            />
          );
        default:
          return currentValue;
      }
    },
    [editingSelectionId, editingData, speciesOptions, onUpdateField]
  );
  // Render action buttons (Edit/Delete or Save/Cancel)
  const renderActionButtons = useCallback(
    (selection: SelectionData) => {
      if (editingSelectionId === selection.id) {
        return (
          <>
            <Button
              onClick={() => void onSave().catch(console.error)}
              variant="ghost"
              size="sm"
              className="p-1 h-8 w-8 text-green-600 hover:text-green-700 hover:bg-green-50"
              disabled={savingSelection}
              title="Save changes"
            >
              <Check className="h-4 w-4" />
            </Button>
            <Button
              onClick={onCancelEdit}
              variant="ghost"
              size="sm"
              className="p-1 h-8 w-8 text-red-600 hover:text-red-700 hover:bg-red-50"
              disabled={savingSelection}
              title="Cancel editing"
            >
              <X className="h-4 w-4" />
            </Button>
          </>
        );
      }
      return (
        <>
          <Button
            onClick={() => onStartEditing(selection)}
            variant="ghost"
            size="sm"
            className="p-1 h-8 w-8"
            title="Edit selection"
          >
            <Edit className="h-4 w-4" />
          </Button>
          <Button
            onClick={() => void onDelete(selection).catch(console.error)}
            variant="ghost"
            size="sm"
            className="p-1 h-8 w-8 text-red-600 hover:text-red-700 hover:bg-red-50"
            disabled={deletingSelectionId === selection.id}
            title="Delete selection"
          >
            <Trash2 className="h-4 w-4" />
          </Button>
        </>
      );
    },
    [
      editingSelectionId,
      savingSelection,
      deletingSelectionId,
      onStartEditing,
      onCancelEdit,
      onSave,
      onDelete,
    ]
  );
  // Loading state
  if (selectionsLoading) {
    return (
      <div className="text-center py-8 text-muted-foreground">
        Loading selections...
      </div>
    );
  }
  // Error state
  if (selectionsError) {
    return <div className="text-center py-8 text-red-500">Error: {selectionsError}</div>;
  }
  // Empty state
  if (selections.length === 0) {
    return (
      <div className="text-center py-8 text-muted-foreground">
        No selections found for this file.
      </div>
    );
  }
  // Render table
  return (
    <div className="space-y-4">
      <div className="w-full overflow-x-auto">
        <Table>
          <TableHeader className="bg-muted">
            <TableRow className="border-b-2 border-primary/20">
              <TableHead className="py-3 font-bold text-sm uppercase">
                Start (s)
              </TableHead>
              <TableHead className="py-3 font-bold text-sm uppercase">
                End (s)
              </TableHead>
              <TableHead className="py-3 font-bold text-sm uppercase">
                Description
              </TableHead>
              <TableHead className="py-3 font-bold text-sm uppercase">
                Distance
              </TableHead>
              <TableHead className="py-3 font-bold text-sm uppercase">
                Comment
              </TableHead>
              <TableHead className="py-3 font-bold text-sm uppercase">
                Species
              </TableHead>
              <TableHead className="py-3 font-bold text-sm uppercase">
                Species Certainty
              </TableHead>
              <TableHead className="py-3 font-bold text-sm uppercase">
                Call Type
              </TableHead>
              <TableHead className="py-3 font-bold text-sm uppercase">
                Call Type Certainty
              </TableHead>
              {canEditSelections && (
                <TableHead className="w-[120px] py-3 font-bold text-sm uppercase text-center">
                  Actions
                </TableHead>
              )}
            </TableRow>
          </TableHeader>
          <TableBody>
            {selections
              .map((selection) => {
                const filterData = selectedFilterId
                  ? selection.filters.find((f) => f.id === selectedFilterId)
                  : selection.filters[0];
                // No species detected
                if (
                  !filterData ||
                  !filterData.species ||
                  !filterData.species.length
                ) {
                  return (
                    <TableRow
                      key={selection.id}
                      className={`hover:bg-primary/5 ${
                        !editingSelectionId ? "cursor-pointer" : ""
                      }`}
                      onClick={() => handleSelectionClick(selection)}
                    >
                      <TableCell className="whitespace-normal break-words">
                        {renderEditableField(
                          selection,
                          "startTime",
                          selection.startTime.toFixed(3),
                          "startTime"
                        )}
                      </TableCell>
                      <TableCell className="whitespace-normal break-words">
                        {renderEditableField(
                          selection,
                          "endTime",
                          selection.endTime.toFixed(3),
                          "endTime"
                        )}
                      </TableCell>
                      <TableCell className="whitespace-normal break-words">
                        {renderEditableField(
                          selection,
                          "description",
                          selection.description || "-",
                          "description"
                        )}
                      </TableCell>
                      <TableCell className="whitespace-normal break-words">
                        {renderEditableField(
                          selection,
                          "distance",
                          getMetadataValue(selection.metadata, "distance"),
                          "distance"
                        )}
                      </TableCell>
                      <TableCell className="whitespace-normal break-words">
                        {renderEditableField(
                          selection,
                          "note",
                          getMetadataValue(selection.metadata, "note"),
                          "note"
                        )}
                      </TableCell>
                      <TableCell className="whitespace-normal break-words">
                        No species detected
                      </TableCell>
                      <TableCell className="whitespace-normal break-words">
                        -
                      </TableCell>
                      <TableCell className="whitespace-normal break-words">
                        -
                      </TableCell>
                      <TableCell className="whitespace-normal break-words">
                        -
                      </TableCell>
                      {canEditSelections && (
                        <TableCell className="text-center">
                          <div className="flex justify-center gap-2">
                            {renderActionButtons(selection)}
                          </div>
                        </TableCell>
                      )}
                    </TableRow>
                  );
                }
                // Render rows for each species (and their call types)
                return filterData.species
                  .map((species) => {
                    if (species.callTypes.length === 0) {
                      // Species with no call types
                      return (
                        <TableRow
                          key={`${selection.id}-${species.id}`}
                          className={`hover:bg-primary/5 ${
                            !editingSelectionId ? "cursor-pointer" : ""
                          }`}
                          onClick={() => handleSelectionClick(selection)}
                        >
                          <TableCell className="whitespace-normal break-words">
                            {renderEditableField(
                              selection,
                              "startTime",
                              selection.startTime.toFixed(3),
                              "startTime"
                            )}
                          </TableCell>
                          <TableCell className="whitespace-normal break-words">
                            {renderEditableField(
                              selection,
                              "endTime",
                              selection.endTime.toFixed(3),
                              "endTime"
                            )}
                          </TableCell>
                          <TableCell className="whitespace-normal break-words">
                            {renderEditableField(
                              selection,
                              "description",
                              selection.description || "-",
                              "description"
                            )}
                          </TableCell>
                          <TableCell className="whitespace-normal break-words">
                            {renderEditableField(
                              selection,
                              "distance",
                              getMetadataValue(selection.metadata, "distance"),
                              "distance"
                            )}
                          </TableCell>
                          <TableCell className="whitespace-normal break-words">
                            {renderEditableField(
                              selection,
                              "note",
                              getMetadataValue(selection.metadata, "note"),
                              "note"
                            )}
                          </TableCell>
                          <TableCell className="whitespace-normal break-words">
                            {renderEditableField(
                              selection,
                              "species",
                              species.name,
                              "speciesId"
                            )}
                          </TableCell>
                          <TableCell className="whitespace-normal break-words">
                            {renderEditableField(
                              selection,
                              "speciesCertainty",
                              species.certainty
                                ? `${species.certainty.toFixed(1)}%`
                                : "N/A",
                              "speciesCertainty"
                            )}
                          </TableCell>
                          <TableCell className="whitespace-normal break-words">
                            -
                          </TableCell>
                          <TableCell className="whitespace-normal break-words">
                            -
                          </TableCell>
                          {canEditSelections && (
                            <TableCell className="text-center">
                              <div className="flex justify-center gap-2">
                                {renderActionButtons(selection)}
                              </div>
                            </TableCell>
                          )}
                        </TableRow>
                      );
                    }
                    // Species with call types - one row per call type
                    return species.callTypes.map((callType) => (
                      <TableRow
                        key={`${selection.id}-${species.id}-${callType.id}`}
                        className={`hover:bg-primary/5 ${
                          !editingSelectionId ? "cursor-pointer" : ""
                        }`}
                        onClick={() => handleSelectionClick(selection)}
                      >
                        <TableCell className="whitespace-normal break-words">
                          {renderEditableField(
                            selection,
                            "startTime",
                            selection.startTime.toFixed(3),
                            "startTime"
                          )}
                        </TableCell>
                        <TableCell className="whitespace-normal break-words">
                          {renderEditableField(
                            selection,
                            "endTime",
                            selection.endTime.toFixed(3),
                            "endTime"
                          )}
                        </TableCell>
                        <TableCell className="whitespace-normal break-words">
                          {renderEditableField(
                            selection,
                            "description",
                            selection.description || "-",
                            "description"
                          )}
                        </TableCell>
                        <TableCell className="whitespace-normal break-words">
                          {renderEditableField(
                            selection,
                            "distance",
                            getMetadataValue(selection.metadata, "distance"),
                            "distance"
                          )}
                        </TableCell>
                        <TableCell className="whitespace-normal break-words">
                          {renderEditableField(
                            selection,
                            "note",
                            getMetadataValue(selection.metadata, "note"),
                            "note"
                          )}
                        </TableCell>
                        <TableCell className="whitespace-normal break-words">
                          {renderEditableField(
                            selection,
                            "species",
                            species.name,
                            "speciesId"
                          )}
                        </TableCell>
                        <TableCell className="whitespace-normal break-words">
                          {renderEditableField(
                            selection,
                            "speciesCertainty",
                            species.certainty
                              ? `${species.certainty.toFixed(1)}%`
                              : "N/A",
                            "speciesCertainty"
                          )}
                        </TableCell>
                        <TableCell className="whitespace-normal break-words">
                          {renderEditableField(
                            selection,
                            "callType",
                            callType.name,
                            "callTypeId"
                          )}
                        </TableCell>
                        <TableCell className="whitespace-normal break-words">
                          {renderEditableField(
                            selection,
                            "callTypeCertainty",
                            callType.certainty
                              ? `${callType.certainty.toFixed(1)}%`
                              : "N/A",
                            "callTypeCertainty"
                          )}
                        </TableCell>
                        {canEditSelections && (
                          <TableCell className="text-center">
                            <div className="flex justify-center gap-2">
                              {renderActionButtons(selection)}
                            </div>
                          </TableCell>
                        )}
                      </TableRow>
                    ));
                  })
                  .flat();
              })
              .flat()}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}

interface FilterDropdownProps {
  availableFilters: Array<{ id: string; name: string }>;
  selectedFilterId: string | null;
  onFilterChange: (filterId: string | null) => void;
}
export default function FilterDropdown({
  availableFilters,
  selectedFilterId,
  onFilterChange,
}: FilterDropdownProps) {
  if (availableFilters.length === 0) {
    return null;
  }
  return (
    <div>
      <select
        value={selectedFilterId || "all"}
        onChange={(e) =>
          onFilterChange(e.target.value === "all" ? null : e.target.value)
        }
        className="text-sm rounded-md border border-gray-300 bg-white py-2 px-3 shadow-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
      >
        <option value="all">All Models</option>
        {availableFilters.map((filter) => (
          <option key={filter.id} value={filter.id}>
            {filter.name || `Filter ${filter.id}`}
          </option>
        ))}
      </select>
    </div>
  );
}

import type { File as FileType } from "@/types/file";
interface FileContext {
  dataset?: { id: string; name: string };
  location?: { id: string; name: string };
  cluster?: { id: string; name: string };
}
interface FileHeaderProps {
  file: FileType;
  fileContext: FileContext | null;
  fileContextLoading: boolean;
}
export default function FileHeader({
  file,
  fileContext,
  fileContextLoading,
}: FileHeaderProps) {
  return (
    <div className="flex items-center justify-between mb-6">
      <div className="flex-1 min-w-0">
        <h2 className="text-lg font-semibold truncate">{file.fileName}</h2>
        <p className="text-sm text-muted-foreground">
          {fileContext ? (
            <>
              {fileContext.dataset && `Dataset: ${fileContext.dataset.name}`}
              {fileContext.dataset && fileContext.location && " • "}
              {fileContext.location &&
                `Location: ${fileContext.location.name}`}
              {(fileContext.dataset || fileContext.location) &&
                fileContext.cluster &&
                " • "}
              {fileContext.cluster && `Cluster: ${fileContext.cluster.name}`}
            </>
          ) : fileContextLoading ? (
            "Loading context..."
          ) : (
            "Audio File"
          )}
        </p>
      </div>
    </div>
  );
}

import { useKindeAuth } from "@kinde-oss/kinde-auth-react";
import React, { useCallback, useEffect, useMemo, useRef } from "react";
import type { File as FileType } from "@/types/file";
import { useWaveSurfer } from "@/hooks/file/useWaveSurfer";
import { useSelections } from "@/hooks/file/useSelections";
import { useFileContext } from "@/hooks/file/useFileContext";
import FileHeader from "./FileHeader";
import FilterDropdown from "./FilterDropdown";
import WaveformPlayer from "./WaveformPlayer";
import SelectionList from "./SelectionList";
interface FileContainerProps {
  file: FileType | null;
  datasetOwnerId?: string | null;
  datasetId?: string | null;
  canEditSelections?: boolean;
}
const FileContainer: React.FC<FileContainerProps> = ({
  file,
  datasetOwnerId,
  datasetId,
  canEditSelections = false,
}) => {
  const { user } = useKindeAuth();
  // Create refs for WaveSurfer visualization
  const waveformRef = useRef<HTMLDivElement>(null);
  const spectrogramRef = useRef<HTMLDivElement>(null);
  const timelineRef = useRef<HTMLDivElement>(null);
  // Initialize hooks
  const waveSurfer = useWaveSurfer({
    waveformRef,
    spectrogramRef,
    timelineRef,
  });
  const selections = useSelections({
    fileId: file?.id || null,
    datasetId,
    canEditSelections,
  });
  const { fileContext, fileContextLoading } = useFileContext(file?.id || null);
  // Check if current user is the dataset owner
  const userIsOwner = user?.id === datasetOwnerId;
  // Generate consistent color for a species based on species ID
  const getSpeciesColor = useCallback((speciesId: string): string => {
    const colors = [
      "#4F46E5",
      "#7C3AED",
      "#DC2626",
      "#059669",
      "#D97706",
      "#2563EB",
      "#9333EA",
      "#EF4444",
      "#10B981",
      "#F59E0B",
    ];
    // Simple hash function to get consistent color for each species
    let hash = 0;
    for (let i = 0; i < speciesId.length; i++) {
      hash = ((hash << 5) - hash + speciesId.charCodeAt(i)) & 0xffffffff;
    }
    return colors[Math.abs(hash) % colors.length];
  }, []);
  // Memoize filtered selections
  const filteredSelections = useMemo(() => {
    if (!selections.selectedFilterId) {
      return selections.selections;
    }
    return selections.selections.filter((selection) =>
      selection.filters.some((filter) => filter.id === selections.selectedFilterId),
    );
  }, [selections.selections, selections.selectedFilterId]);
  // Create regions from selections data
  const createRegions = useCallback(() => {
    if (
      !waveSurfer.regionsPlugin ||
      filteredSelections.length === 0
    )
      return;
    try {
      // Clear existing regions
      if (
        waveSurfer.regionsPlugin &&
        typeof waveSurfer.regionsPlugin === "object" &&
        "clearRegions" in waveSurfer.regionsPlugin
      ) {
        (waveSurfer.regionsPlugin as { clearRegions: () => void }).clearRegions();
      }
      // Collect all regions to create for collision detection
      const regionsToCreate: Array<{
        startTime: number;
        endTime: number;
        color: string;
        speciesLabels: string;
      }> = [];
      // First pass: collect all regions
      filteredSelections.forEach((selection) => {
        selection.filters.forEach((filter) => {
          // Create label text from species and call types (shortened)
          const speciesLabels = filter.species
            .map((species) => {
              const shortName =
                species.name.length > 15
                  ? species.name.substring(0, 15) + "..."
                  : species.name;
              const callTypeText =
                species.callTypes.length > 0
                  ? ` (${species.callTypes[0].name})` // Only show first call type
                  : "";
              return `${shortName}${callTypeText}`;
            })
            .join("; ");
          // Get consistent color based on the primary species
          const primarySpecies = filter.species[0];
          const color = primarySpecies
            ? getSpeciesColor(primarySpecies.id)
            : "#4F46E5";
          regionsToCreate.push({
            startTime: selection.startTime,
            endTime: selection.endTime,
            color,
            speciesLabels,
          });
        });
      });
      // Sort by start time for better collision handling
      regionsToCreate.sort((a, b) => a.startTime - b.startTime);
      // Second pass: create regions with collision-aware positioning
      regionsToCreate.forEach((regionData, index) => {
        if (
          !waveSurfer.regionsPlugin ||
          typeof waveSurfer.regionsPlugin !== "object" ||
          !("addRegion" in waveSurfer.regionsPlugin)
        ) {
          return;
        }
        const region = (
          waveSurfer.regionsPlugin as {
            addRegion: (config: unknown) => { element?: HTMLElement };
          }
        ).addRegion({
          start: regionData.startTime,
          end: regionData.endTime,
          color: regionData.color + "25", // Slightly more opacity
          resize: false,
          drag: false,
        });
        // Add custom label styling after region is created
        if (region && region.element) {
          // Calculate label position to avoid collisions
          const labelOffset = (index % 3) * 16; // Stagger labels vertically
          const label = document.createElement("div");
          label.textContent = regionData.speciesLabels;
          label.style.cssText = `
            position: absolute;
            top: ${2 + labelOffset}px;
            left: 2px;
            font-size: 8px;
            font-weight: 600;
            color: #111827;
            background: rgba(255, 255, 255, 0.98);
            padding: 1px 3px;
            border-radius: 2px;
            border: 0.5px solid rgba(0, 0, 0, 0.15);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
            white-space: nowrap;
            z-index: ${10 + index};
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.1;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
          `;
          region.element.appendChild(label);
          // Add tooltip on hover for full text
          label.title = regionData.speciesLabels;
        }
      });
    } catch (error) {
      console.error("Error creating regions:", error);
    }
  }, [
    waveSurfer.regionsPlugin,
    filteredSelections,
    getSpeciesColor,
  ]);
  // Load audio when file changes
  useEffect(() => {
    if (file && waveSurfer.wavesurfer) {
      if (file.upload) {
        void waveSurfer.loadOnlineFile(file.id).catch(console.error);
      }
    }
  }, [file, waveSurfer]);
  // Create regions when selections change
  useEffect(() => {
    if (
      waveSurfer.regionsPlugin &&
      !selections.selectionsLoading &&
      filteredSelections.length > 0
    ) {
      // Add a small delay to ensure everything is ready
      const timeoutId = setTimeout(() => {
        createRegions();
      }, 200);
      return () => clearTimeout(timeoutId);
    }
    return undefined;
  }, [
    waveSurfer.regionsPlugin,
    selections.selectionsLoading,
    filteredSelections,
    createRegions,
  ]);
  // Handle keyboard shortcuts
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === " " && waveSurfer.wavesurfer) {
        event.preventDefault();
        waveSurfer.togglePlayPause();
      }
    };
    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [waveSurfer]);
  // Don't render if no file
  if (!file) return null;
  return (
    <div className="card p-6 bg-white shadow-sm rounded-lg">
      <FileHeader
        file={file}
        fileContext={fileContext}
        fileContextLoading={fileContextLoading}
      />
      {selections.selections.length > 0 && (
        <div className="mb-4 flex justify-end">
          <FilterDropdown
            availableFilters={selections.getAvailableFilters()}
            selectedFilterId={selections.selectedFilterId}
            onFilterChange={selections.setSelectedFilterId}
          />
        </div>
      )}
      <div className="space-y-6">
        <WaveformPlayer
          file={file}
          userIsOwner={userIsOwner}
          waveformRef={waveformRef}
          spectrogramRef={spectrogramRef}
          timelineRef={timelineRef}
          audioLoading={waveSurfer.audioLoading}
          audioError={waveSurfer.audioError}
          isPlaying={waveSurfer.isPlaying}
          currentTime={waveSurfer.currentTime}
          duration={waveSurfer.duration}
          localFile={waveSurfer.localFile}
          filePickerSupported={waveSurfer.filePickerSupported}
          wavesurfer={waveSurfer.wavesurfer}
          togglePlayPause={waveSurfer.togglePlayPause}
          openFilePicker={waveSurfer.openFilePicker}
          formatTime={waveSurfer.formatTime}
        />
        <SelectionList
          selections={selections.getFilteredSelections()}
          selectionsLoading={selections.selectionsLoading}
          selectionsError={selections.selectionsError}
          selectedFilterId={selections.selectedFilterId}
          editingSelectionId={selections.editingSelectionId}
          editingData={selections.editingData}
          savingSelection={selections.savingSelection}
          deletingSelectionId={selections.deletingSelectionId}
          speciesOptions={selections.speciesOptions}
          canEditSelections={canEditSelections}
          onStartEditing={selections.startEditingSelection}
          onCancelEdit={selections.cancelEdit}
          onUpdateField={selections.updateEditingField}
          onSave={selections.saveSelection}
          onDelete={selections.deleteSelection}
        />
      </div>
    </div>
  );
};
export default FileContainer;

import { Component, ErrorInfo, ReactNode } from "react";
import Button from "./ui/button";
interface Props {
  children: ReactNode;
  fallback?: ReactNode;
}
interface State {
  hasError: boolean;
  error: Error | null;
}
class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false, error: null };
  }
  static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error };
  }
  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error("ErrorBoundary caught an error:", error, errorInfo);
  }
  handleReset = () => {
    this.setState({ hasError: false, error: null });
  };
  render() {
    if (this.state.hasError) {
      if (this.props.fallback) {
        return this.props.fallback;
      }
      return (
        <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
          <div className="max-w-md w-full bg-white rounded-lg shadow-lg p-6">
            <div className="flex items-center justify-center w-12 h-12 mx-auto bg-red-100 rounded-full mb-4">
              <svg
                className="w-6 h-6 text-red-600"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </div>
            <h2 className="text-xl font-semibold text-center text-gray-900 mb-2">
              Something went wrong
            </h2>
            <p className="text-sm text-gray-600 text-center mb-4">
              An unexpected error occurred. Please try again.
            </p>
            {this.state.error && (
              <details className="mb-4">
                <summary className="text-sm font-medium text-gray-700 cursor-pointer hover:text-gray-900">
                  Error details
                </summary>
                <pre className="mt-2 p-3 bg-gray-50 rounded text-xs text-gray-800 overflow-auto max-h-40">
                  {this.state.error.message}
                  {this.state.error.stack && `\n\n${this.state.error.stack}`}
                </pre>
              </details>
            )}
            <div className="flex gap-3">
              <Button
                onClick={this.handleReset}
                variant="default"
                className="flex-1"
              >
                Try again
              </Button>
              <Button
                onClick={() => window.location.href = "/"}
                variant="outline"
                className="flex-1"
              >
                Go home
              </Button>
            </div>
          </div>
        </div>
      );
    }
    return this.props.children;
  }
}
export default ErrorBoundary;

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

import React, { useState } from "react";

import { useApiQuery, useApiMutation, useInvalidateQueries } from "@/hooks/useApi";

  const { isAuthenticated, isLoading: authLoading, getAccessToken } = useKindeAuth();
  const [datasets, setDatasets] = useState<Dataset[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  const { isAuthenticated, isLoading: authLoading } = useKindeAuth();
  const invalidateQueries = useInvalidateQueries();
  // Fetch datasets with React Query
  const { data, isLoading, error } = useApiQuery<DatasetsResponse>(
    ["datasets"],
    "/api/datasets",
  );
  const datasets = data?.data || [];
  const userRole = data?.userRole || null;
  const message = data?.message || null;
  const canCreateDatasets = userRole === 'ADMIN' || userRole === 'CURATOR';
  // Form state

  const [formLoading, setFormLoading] = useState<boolean>(false);
  const [formError, setFormError] = useState<string | null>(null);
  const [editingDataset, setEditingDataset] = useState<Dataset | null>(null);

  const [, setUserRole] = useState<string>('USER');
  const [canCreateDatasets, setCanCreateDatasets] = useState<boolean>(false);
  
  // Form state

  const [editingDataset, setEditingDataset] = useState<Dataset | null>(null);

  const fetchDatasets = useCallback(async () => {
    if (!isAuthenticated) {
      if (!authLoading) {
        setLoading(false);
      }
      return;
    }

  // Create dataset mutation
  const createMutation = useApiMutation<unknown, {
    id: string;
    name: string;
    description?: string;
    type: string;
    public: boolean;
  }>(
    "/api/datasets",
    "POST",
    {
      onSuccess: () => {
        invalidateQueries(["datasets"]);
        handleCancelForm();
      },
    },
  );

    setLoading(true);
    setError(null);
    
    try {
      const accessToken = await getAccessToken();
      
      const response = await fetch("/api/datasets", {
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
      });
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      const data = await response.json() as DatasetsResponse;
      setDatasets(data.data);
      
      // Show message if provided (e.g., for users without roles)
      if (data.message) {
        setError(data.message);
      }
      
      // Set user role and determine if user can create datasets
      if (data.userRole) {
        setUserRole(data.userRole);
        setCanCreateDatasets(data.userRole === 'ADMIN' || data.userRole === 'CURATOR');
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to fetch datasets");
      console.error("Error fetching datasets:", err);
    } finally {
      setLoading(false);
    }
  }, [isAuthenticated, authLoading, getAccessToken, setLoading, setError, setDatasets, setUserRole, setCanCreateDatasets]);

  // Update dataset mutation
  const updateMutation = useApiMutation<unknown, {
    name?: string;
    description?: string;
    type?: string;
    public?: boolean;
  }>(
    () => `/api/datasets/${editingDataset?.id}`,
    "PUT",
    {
      onSuccess: () => {
        invalidateQueries(["datasets"]);
        handleCancelForm();
      },
    },
  );

  useEffect(() => {
    if (isAuthenticated && !authLoading) {
      void fetchDatasets().catch(console.error);
    }
  }, [isAuthenticated, authLoading, fetchDatasets]);

  // Delete dataset mutation (soft delete via active: false)
  const deleteMutation = useApiMutation<unknown, { active: boolean }>(
    (vars) => `/api/datasets/${(vars as unknown as { id: string }).id}`,
    "PUT",
    {
      onSuccess: () => {
        invalidateQueries(["datasets"]);
      },
    },
  );

    
    if (!isAuthenticated) return;
    
    setFormLoading(true);
    setFormError(null);
    
    try {
      const accessToken = await getAccessToken();
      
      if (isEditMode && editingDataset) {
        // Update existing dataset
        const response = await fetch(`/api/datasets/${editingDataset.id}`, {
          method: "PUT",
          headers: {
            "Authorization": `Bearer ${accessToken}`,
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            name: formData.name,
            description: formData.description || undefined,
            type: formData.type,
            public: formData.public,
          }),
        });
        if (!response.ok) {
          const errorData = await response.json();
          throw new Error(errorData.error || `HTTP error! Status: ${response.status}`);
        }

        const { data: updatedDataset } = await response.json();
        
        // Update the dataset in the list
        setDatasets(prev => prev.map(dataset => 
          dataset.id === updatedDataset.id ? updatedDataset : dataset
        ));
      } else {
        // Create new dataset
        const id = nanoid(12);
        
        const response = await fetch("/api/datasets", {
          method: "POST",
          headers: {
            "Authorization": `Bearer ${accessToken}`,
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            id,
            name: formData.name,
            description: formData.description || undefined,
            type: formData.type,
            public: formData.public,
          }),
        });

    if (!isAuthenticated) return;

        if (!response.ok) {
          const errorData = await response.json();
          throw new Error(errorData.error || `HTTP error! Status: ${response.status}`);
        }
        await response.json();
        
        // Refresh the entire dataset list to get correct permissions
        await fetchDatasets();
      }
      
      // Reset form and close modal
      handleCancelForm();
      
    } catch (err) {
      setFormError(err instanceof Error ? err.message : `Failed to ${isEditMode ? 'update' : 'create'} dataset`);
      console.error(`Error ${isEditMode ? 'updating' : 'creating'} dataset:`, err);
    } finally {
      setFormLoading(false);

    if (isEditMode && editingDataset) {
      // Update existing dataset
      updateMutation.mutate({
        name: formData.name,
        ...(formData.description && { description: formData.description }),
        type: formData.type,
        public: formData.public,
      });
    } else {
      // Create new dataset
      const id = nanoid(12);
      createMutation.mutate({
        id,
        name: formData.name,
        ...(formData.description && { description: formData.description }),
        type: formData.type,
        public: formData.public,
      });

    setFormError(null);

    
    try {
      const accessToken = await getAccessToken();
      
      const response = await fetch(`/api/datasets/${dataset.id}`, {
        method: "PUT",
        headers: {
          "Authorization": `Bearer ${accessToken}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          active: false
        }),
      });

      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.error || `HTTP error! Status: ${response.status}`);
      }
      // Remove the dataset from the list (soft delete)
      setDatasets(prev => prev.filter(d => d.id !== dataset.id));
      
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to delete dataset");
      console.error("Error deleting dataset:", err);
    }

    deleteMutation.mutate({ active: false, id: dataset.id } as unknown as { active: boolean });

  // Get form error from mutations
  const formError = createMutation.error?.data?.error || updateMutation.error?.data?.error;
  const formLoading = createMutation.isPending || updateMutation.isPending;

      
      {loading && <p className="text-gray-500">Loading datasets...</p>}
      {!isAuthenticated && !authLoading && 

      {isLoading && <p className="text-gray-500">Loading datasets...</p>}
      {!isAuthenticated && !authLoading &&

        <p className={`mb-4 ${error.includes('No access granted') || error.includes('contact an administrator') ? 'text-amber-600' : 'text-red-600'}`}>
          {error.includes('Error: ') ? error : `Info: ${error}`}

        <p className="text-red-600 mb-4">
          {error.data?.error || "Failed to fetch datasets"}
        </p>
      )}
      {message && (
        <p className={`mb-4 ${message.includes('No access granted') || message.includes('contact an administrator') ? 'text-amber-600' : 'text-gray-600'}`}>
          Info: {message}

      
      {!loading && !error && isAuthenticated && datasets.length > 0 && (

      {!isLoading && !error && isAuthenticated && datasets.length > 0 && (

                <TableRow 
                  key={dataset.id} 

                <TableRow
                  key={dataset.id}

                  <TableCell 

                  <TableCell

                  <TableCell 

                  <TableCell

                      dataset.type === 'organize' ? 'bg-stone-300 text-stone-800' : 
                      dataset.type === 'train' ? 'bg-stone-200 text-stone-700' : 

                      dataset.type === 'organize' ? 'bg-stone-300 text-stone-800' :
                      dataset.type === 'train' ? 'bg-stone-200 text-stone-700' :

                  <TableCell 

                  <TableCell

                  <TableCell 

                  <TableCell

                      getUserRole(dataset.permissions) === 'admin' ? 'bg-stone-300 text-stone-800' : 
                      getUserRole(dataset.permissions) === 'curator' ? 'bg-stone-200 text-stone-700' : 

                      getUserRole(dataset.permissions) === 'admin' ? 'bg-stone-300 text-stone-800' :
                      getUserRole(dataset.permissions) === 'curator' ? 'bg-stone-200 text-stone-700' :

                          disabled={deleteMutation.isPending}

      
      {!loading && !error && isAuthenticated && datasets.length === 0 && (

      {!isLoading && !error && isAuthenticated && datasets.length === 0 && (

                  {formLoading 
                    ? (isEditMode ? "Updating..." : "Creating...") 

                  {formLoading
                    ? (isEditMode ? "Updating..." : "Creating...")

import { useKindeAuth } from "@kinde-oss/kinde-auth-react";
import React, { useState, useEffect, useCallback } from "react";
import { Plus, X, Edit, Trash2 } from "lucide-react";
import { nanoid } from "nanoid";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "./ui/table";
import Button from "./ui/button";
import { Dataset, DatasetsResponse } from "../types";
interface DatasetsProps {
  onDatasetSelect: (datasetId: string, datasetName: string, permissions?: string[]) => void;
}
const Datasets: React.FC<DatasetsProps> = ({ onDatasetSelect }) => {
  const { isAuthenticated, isLoading: authLoading, getAccessToken } = useKindeAuth();
  const [datasets, setDatasets] = useState<Dataset[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);
  const [showForm, setShowForm] = useState<boolean>(false);
  const [formLoading, setFormLoading] = useState<boolean>(false);
  const [formError, setFormError] = useState<string | null>(null);
  const [editingDataset, setEditingDataset] = useState<Dataset | null>(null);
  const [isEditMode, setIsEditMode] = useState<boolean>(false);
  const [, setUserRole] = useState<string>('USER');
  const [canCreateDatasets, setCanCreateDatasets] = useState<boolean>(false);
  
  // Form state
  const [formData, setFormData] = useState({
    name: '',
    description: '',
    type: 'organise' as 'organise' | 'test' | 'train',
    public: false
  });
  const fetchDatasets = useCallback(async () => {
    if (!isAuthenticated) {
      if (!authLoading) {
        setLoading(false);
      }
      return;
    }
    setLoading(true);
    setError(null);
    
    try {
      const accessToken = await getAccessToken();
      
      const response = await fetch("/api/datasets", {
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
      });
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      const data = await response.json() as DatasetsResponse;
      setDatasets(data.data);
      
      // Show message if provided (e.g., for users without roles)
      if (data.message) {
        setError(data.message);
      }
      
      // Set user role and determine if user can create datasets
      if (data.userRole) {
        setUserRole(data.userRole);
        setCanCreateDatasets(data.userRole === 'ADMIN' || data.userRole === 'CURATOR');
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to fetch datasets");
      console.error("Error fetching datasets:", err);
    } finally {
      setLoading(false);
    }
  }, [isAuthenticated, authLoading, getAccessToken, setLoading, setError, setDatasets, setUserRole, setCanCreateDatasets]);
  useEffect(() => {
    if (isAuthenticated && !authLoading) {
      void fetchDatasets().catch(console.error);
    }
  }, [isAuthenticated, authLoading, fetchDatasets]);
  const handleSubmitDataset = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!isAuthenticated) return;
    
    setFormLoading(true);
    setFormError(null);
    
    try {
      const accessToken = await getAccessToken();
      
      if (isEditMode && editingDataset) {
        // Update existing dataset
        const response = await fetch(`/api/datasets/${editingDataset.id}`, {
          method: "PUT",
          headers: {
            "Authorization": `Bearer ${accessToken}`,
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            name: formData.name,
            description: formData.description || undefined,
            type: formData.type,
            public: formData.public,
          }),
        });
        if (!response.ok) {
          const errorData = await response.json();
          throw new Error(errorData.error || `HTTP error! Status: ${response.status}`);
        }
        const { data: updatedDataset } = await response.json();
        
        // Update the dataset in the list
        setDatasets(prev => prev.map(dataset => 
          dataset.id === updatedDataset.id ? updatedDataset : dataset
        ));
      } else {
        // Create new dataset
        const id = nanoid(12);
        
        const response = await fetch("/api/datasets", {
          method: "POST",
          headers: {
            "Authorization": `Bearer ${accessToken}`,
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            id,
            name: formData.name,
            description: formData.description || undefined,
            type: formData.type,
            public: formData.public,
          }),
        });
        if (!response.ok) {
          const errorData = await response.json();
          throw new Error(errorData.error || `HTTP error! Status: ${response.status}`);
        }
        await response.json();
        
        // Refresh the entire dataset list to get correct permissions
        await fetchDatasets();
      }
      
      // Reset form and close modal
      handleCancelForm();
      
    } catch (err) {
      setFormError(err instanceof Error ? err.message : `Failed to ${isEditMode ? 'update' : 'create'} dataset`);
      console.error(`Error ${isEditMode ? 'updating' : 'creating'} dataset:`, err);
    } finally {
      setFormLoading(false);
    }
  };
  const handleFormChange = (field: keyof typeof formData, value: string | boolean) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));
  };
  const handleCancelForm = () => {
    setShowForm(false);
    setFormError(null);
    setIsEditMode(false);
    setEditingDataset(null);
    setFormData({
      name: '',
      description: '',
      type: 'organise',
      public: false
    });
  };
  const handleCreateNew = () => {
    setIsEditMode(false);
    setEditingDataset(null);
    setFormData({
      name: '',
      description: '',
      type: 'organise',
      public: false
    });
    setShowForm(true);
  };
  const handleEditDataset = (dataset: Dataset) => {
    setIsEditMode(true);
    setEditingDataset(dataset);
    setFormData({
      name: dataset.name,
      description: dataset.description || '',
      type: dataset.type as 'organise' | 'test' | 'train',
      public: dataset.public
    });
    setShowForm(true);
  };
  const getUserRole = (permissions?: string[]): string => {
    if (!permissions) return 'user';
    if (permissions.includes('DELETE')) return 'admin';
    if (permissions.includes('EDIT')) return 'curator';
    return 'user';
  };
  const sortDatasetsByRole = (datasets: Dataset[]): Dataset[] => {
    return [...datasets].sort((a, b) => {
      const roleA = getUserRole(a.permissions);
      const roleB = getUserRole(b.permissions);
      
      // Define role priority: admin (0), curator (1), user (2)
      const rolePriority = { admin: 0, curator: 1, user: 2 };
      
      return rolePriority[roleA as keyof typeof rolePriority] - rolePriority[roleB as keyof typeof rolePriority];
    });
  };
  const handleDeleteDataset = async (dataset: Dataset) => {
    if (!isAuthenticated) return;
    
    const confirmDelete = window.confirm(`Are you sure you want to delete "${dataset.name}"? This action cannot be undone.`);
    if (!confirmDelete) return;
    
    try {
      const accessToken = await getAccessToken();
      
      const response = await fetch(`/api/datasets/${dataset.id}`, {
        method: "PUT",
        headers: {
          "Authorization": `Bearer ${accessToken}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          active: false
        }),
      });
      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.error || `HTTP error! Status: ${response.status}`);
      }
      // Remove the dataset from the list (soft delete)
      setDatasets(prev => prev.filter(d => d.id !== dataset.id));
      
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to delete dataset");
      console.error("Error deleting dataset:", err);
    }
  };
  
  return (
    <>
      {/* Header with Add Button */}
      {isAuthenticated && !authLoading && (
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-lg font-semibold">Datasets</h2>
          {canCreateDatasets && (
            <Button
              onClick={handleCreateNew}
              variant="default"
              size="sm"
              className="flex items-center gap-2"
            >
              <Plus className="h-4 w-4" />
              Add Dataset
            </Button>
          )}
        </div>
      )}
      
      {loading && <p className="text-gray-500">Loading datasets...</p>}
      {!isAuthenticated && !authLoading && 
        <p className="text-amber-600 mb-4">Please log in to access datasets</p>}
      {error && (
        <p className={`mb-4 ${error.includes('No access granted') || error.includes('contact an administrator') ? 'text-amber-600' : 'text-red-600'}`}>
          {error.includes('Error: ') ? error : `Info: ${error}`}
        </p>
      )}
      
      {!loading && !error && isAuthenticated && datasets.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">Dataset</TableHead>
                <TableHead className="w-[100px] py-3 font-bold text-sm uppercase text-center">Type</TableHead>
                <TableHead className="py-3 font-bold text-sm uppercase">Description</TableHead>
                <TableHead className="w-[100px] py-3 font-bold text-sm uppercase text-center">Role</TableHead>
                <TableHead className="w-[120px] py-3 font-bold text-sm uppercase text-center">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {sortDatasetsByRole(datasets).map((dataset) => (
                <TableRow 
                  key={dataset.id} 
                  className="hover:bg-primary/5"
                >
                  <TableCell 
                    className="font-medium whitespace-normal break-words cursor-pointer"
                    onClick={() => onDatasetSelect(dataset.id, dataset.name, dataset.permissions)}
                  >
                    {dataset.name}
                  </TableCell>
                  <TableCell 
                    className="text-center cursor-pointer"
                    onClick={() => onDatasetSelect(dataset.id, dataset.name, dataset.permissions)}
                  >
                    <span className={`inline-block px-2 py-1 rounded-full text-xs font-medium ${
                      dataset.type === 'organize' ? 'bg-stone-300 text-stone-800' : 
                      dataset.type === 'train' ? 'bg-stone-200 text-stone-700' : 
                      'bg-stone-100 text-stone-600'
                    }`}>
                      {dataset.type}
                    </span>
                  </TableCell>
                  <TableCell 
                    className="whitespace-normal break-words cursor-pointer"
                    onClick={() => onDatasetSelect(dataset.id, dataset.name, dataset.permissions)}
                  >
                    {dataset.description || "—"}
                  </TableCell>
                  <TableCell 
                    className="text-center cursor-pointer"
                    onClick={() => onDatasetSelect(dataset.id, dataset.name, dataset.permissions)}
                  >
                    <span className={`inline-block px-2 py-1 rounded-full text-xs font-medium ${
                      getUserRole(dataset.permissions) === 'admin' ? 'bg-stone-300 text-stone-800' : 
                      getUserRole(dataset.permissions) === 'curator' ? 'bg-stone-200 text-stone-700' : 
                      'bg-stone-100 text-stone-600'
                    }`}>
                      {getUserRole(dataset.permissions)}
                    </span>
                  </TableCell>
                  <TableCell className="text-center">
                    <div className="flex justify-center gap-2">
                      {dataset.permissions?.includes('EDIT') && (
                        <Button
                          onClick={(e) => {
                            e.stopPropagation();
                            handleEditDataset(dataset);
                          }}
                          variant="ghost"
                          size="sm"
                          className="p-1 h-8 w-8"
                          title="Edit dataset"
                        >
                          <Edit className="h-4 w-4" />
                        </Button>
                      )}
                      {dataset.permissions?.includes('DELETE') && (
                        <Button
                          onClick={(e) => {
                            e.stopPropagation();
                            void handleDeleteDataset(dataset).catch(console.error);
                          }}
                          variant="ghost"
                          size="sm"
                          className="p-1 h-8 w-8 text-red-600 hover:text-red-700 hover:bg-red-50"
                          title="Delete dataset"
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      )}
                      {/* Show placeholder if no actions available */}
                      {!dataset.permissions?.includes('EDIT') && !dataset.permissions?.includes('DELETE') && (
                        <span className="text-gray-400 text-sm">—</span>
                      )}
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}
      
      {!loading && !error && isAuthenticated && datasets.length === 0 && (
        <p className="text-gray-500">No datasets available</p>
      )}
      {/* Create/Edit Dataset Modal */}
      {showForm && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg p-6 w-full max-w-md mx-4">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-lg font-semibold">
                {isEditMode ? 'Edit Dataset' : 'Create New Dataset'}
              </h3>
              <Button
                onClick={handleCancelForm}
                variant="ghost"
                size="sm"
                className="p-1"
              >
                <X className="h-4 w-4" />
              </Button>
            </div>
            {formError && (
              <div className="bg-red-50 border border-red-200 text-red-700 px-3 py-2 rounded mb-4">
                {formError}
              </div>
            )}
            <form onSubmit={(e) => void handleSubmitDataset(e).catch(console.error)} className="space-y-4">
              <div>
                <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
                  Name *
                </label>
                <input
                  type="text"
                  id="name"
                  required
                  maxLength={255}
                  value={formData.name}
                  onChange={(e) => handleFormChange('name', e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  placeholder="Enter dataset name"
                />
              </div>
              <div>
                <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
                  Description
                </label>
                <textarea
                  id="description"
                  maxLength={255}
                  value={formData.description}
                  onChange={(e) => handleFormChange('description', e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  placeholder="Enter description (optional)"
                  rows={3}
                />
              </div>
              <div>
                <label htmlFor="type" className="block text-sm font-medium text-gray-700 mb-1">
                  Type
                </label>
                <select
                  id="type"
                  value={formData.type}
                  onChange={(e) => handleFormChange('type', e.target.value as 'organise' | 'test' | 'train')}
                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                >
                  <option value="organise">Organise</option>
                  <option value="test">Test</option>
                  <option value="train">Train</option>
                </select>
              </div>
              <div className="flex items-center">
                <input
                  type="checkbox"
                  id="public"
                  checked={formData.public}
                  onChange={(e) => handleFormChange('public', e.target.checked)}
                  className="mr-2"
                />
                <label htmlFor="public" className="text-sm font-medium text-gray-700">
                  Make this dataset public
                </label>
              </div>
              <div className="flex justify-end space-x-3 pt-4">
                <Button
                  type="button"
                  onClick={handleCancelForm}
                  variant="outline"
                  disabled={formLoading}
                >
                  Cancel
                </Button>
                <Button
                  type="submit"
                  disabled={formLoading || !formData.name.trim()}
                >
                  {formLoading 
                    ? (isEditMode ? "Updating..." : "Creating...") 
                    : (isEditMode ? "Update Dataset" : "Create Dataset")
                  }
                </Button>
              </div>
            </form>
          </div>
        </div>
      )}
    </>
  );
};
export default Datasets;