const audioExtensions = ['.wav', '.WAV', '.mp3', '.MP3', '.m4a', '.M4A', '.flac', '.FLAC'];

  const audioExtensions = ['.wav', '.WAV', '.flac', '.FLAC'];

}

}

import React, { useEffect, useRef, useState, useCallback } from 'react';

import { X, Play, Pause, Upload, AlertCircle } from 'lucide-react';
import WaveSurfer from 'wavesurfer.js';
import Spectrogram from 'wavesurfer.js/dist/plugins/spectrogram.esm.js';
import Timeline from 'wavesurfer.js/dist/plugins/timeline.esm.js';
import Regions from 'wavesurfer.js/dist/plugins/regions.esm.js';
import Button from './ui/button';
import type { File as FileType } from '../types/file';

import { AlertCircle, Pause, Play, Upload, X } from "lucide-react";
import React, { useCallback, useEffect, useRef, useState } from "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";
import type { File as FileType } from "../types/file";
import Button from "./ui/button";

const File: React.FC<FileProps> = ({ 
  file, 
  isOpen, 
  onClose, 

const File: React.FC<FileProps> = ({
  file,
  isOpen,
  onClose,

  datasetId

  datasetId,

    if (process.env.NODE_ENV === 'development') {
      console.log('File component datasetId:', datasetId);

    if (process.env.NODE_ENV === "development") {
      console.log("File component datasetId:", datasetId);

    filePickerSupported: 'showOpenFilePicker' in window,

    filePickerSupported: "showOpenFilePicker" in window,

      waveColor: '#4F46E5',
      progressColor: '#7C3AED',

      waveColor: "#4F46E5",
      progressColor: "#7C3AED",

      })

      }),

          return `${minutes}:${secs.toString().padStart(2, '0')}`;

          return `${minutes}:${secs.toString().padStart(2, "0")}`;

          fontSize: '12px',
          color: '#666',

          fontSize: "12px",
          color: "#666",

      })

      }),

    wavesurfer.on('ready', () => {
      setState(prev => ({ 
        ...prev, 

    wavesurfer.on("ready", () => {
      setState(prev => ({
        ...prev,

        regionsPlugin 

        regionsPlugin,

    wavesurfer.on('play', () => {

    wavesurfer.on("play", () => {

    wavesurfer.on('pause', () => {

    wavesurfer.on("pause", () => {

    wavesurfer.on('timeupdate', (currentTime) => {

    wavesurfer.on("timeupdate", (currentTime) => {

    wavesurfer.on('error', (error) => {
      console.error('WaveSurfer error:', error);
      setState(prev => ({ 
        ...prev, 
        audioError: 'Failed to load audio file',
        audioLoading: false 

    wavesurfer.on("error", (error) => {
      console.error("WaveSurfer error:", error);
      setState(prev => ({
        ...prev,
        audioError: "Failed to load audio file",
        audioLoading: false,

          'Authorization': `Bearer ${accessToken}`,

          "Authorization": `Bearer ${accessToken}`,

      console.error('Error loading online file:', error);
      setState(prev => ({ 
        ...prev, 
        audioError: 'Failed to load audio file from server',
        audioLoading: false 

      console.error("Error loading online file:", error);
      setState(prev => ({
        ...prev,
        audioError: "Failed to load audio file from server",
        audioLoading: false,

      console.error('Error loading local file:', error);
      setState(prev => ({ 
        ...prev, 
        audioError: 'Failed to load local audio file',
        audioLoading: false 

      console.error("Error loading local file:", error);
      setState(prev => ({
        ...prev,
        audioError: "Failed to load local audio file",
        audioLoading: false,

      if (state.filePickerSupported && 'showOpenFilePicker' in window) {

      if (state.filePickerSupported && "showOpenFilePicker" in window) {

        
        const showOpenFilePicker = (window as unknown as { 
          showOpenFilePicker: (options: unknown) => Promise<FileSystemFileHandle[]> 

        const showOpenFilePicker = (window as unknown as {
          showOpenFilePicker: (options: unknown) => Promise<FileSystemFileHandle[]>;

            description: 'Audio files',

            description: "Audio files",

              'audio/*': ['.wav', '.mp3', '.flac', '.ogg', '.m4a', '.aac', '.wma']
            }

              "audio/*": [".wav", ".flac"],
            },

          multiple: false

          multiple: false,

          const input = document.createElement('input');
          input.type = 'file';
          input.accept = 'audio/*';

          const input = document.createElement("input");
          input.type = "file";
          input.accept = "audio/*";

      if (error instanceof Error && error.name === 'AbortError') {

      if (error instanceof Error && error.name === "AbortError") {

      console.error('Error opening file picker:', error);
      setState(prev => ({ 
        ...prev, 
        audioError: 'Failed to open file picker' 

      console.error("Error opening file picker:", error);
      setState(prev => ({
        ...prev,
        audioError: "Failed to open file picker",

    return `${minutes}:${seconds.toString().padStart(2, '0')}`;

    return `${minutes}:${seconds.toString().padStart(2, "0")}`;

          'Authorization': `Bearer ${accessToken}`,

          "Authorization": `Bearer ${accessToken}`,

      setState(prev => ({ 
        ...prev, 

      setState(prev => ({
        ...prev,

        selectionsLoading: false 

        selectionsLoading: false,

      console.error('Error fetching selections:', error);
      setState(prev => ({ 
        ...prev, 
        selectionsError: 'Failed to load selections',
        selectionsLoading: false 

      console.error("Error fetching selections:", error);
      setState(prev => ({
        ...prev,
        selectionsError: "Failed to load selections",
        selectionsLoading: false,

      '#4F46E5', '#7C3AED', '#DC2626', '#059669', '#D97706', 
      '#2563EB', '#9333EA', '#EF4444', '#10B981', '#F59E0B'

      "#4F46E5",
      "#7C3AED",
      "#DC2626",
      "#059669",
      "#D97706",
      "#2563EB",
      "#9333EA",
      "#EF4444",
      "#10B981",
      "#F59E0B",

          'Authorization': `Bearer ${accessToken}`,

          "Authorization": `Bearer ${accessToken}`,

      setState(prev => ({ 
        ...prev, 

      setState(prev => ({
        ...prev,

        fileContextLoading: false 

        fileContextLoading: false,

      console.error('Error fetching file context:', error);
      setState(prev => ({ 
        ...prev, 
        fileContextLoading: false 

      console.error("Error fetching file context:", error);
      setState(prev => ({
        ...prev,
        fileContextLoading: false,

      if (state.regionsPlugin && typeof state.regionsPlugin === 'object' && 'clearRegions' in state.regionsPlugin) {

      if (state.regionsPlugin && typeof state.regionsPlugin === "object" && "clearRegions" in state.regionsPlugin) {

            const shortName = species.name.length > 15 ? species.name.substring(0, 15) + '...' : species.name;
            const callTypeText = species.callTypes.length > 0 

            const shortName = species.name.length > 15 ? species.name.substring(0, 15) + "..." : species.name;
            const callTypeText = species.callTypes.length > 0

              : '';

              : "";

          }).join('; ');

          }).join("; ");

          const color = primarySpecies ? getSpeciesColor(primarySpecies.id) : '#4F46E5';

          const color = primarySpecies ? getSpeciesColor(primarySpecies.id) : "#4F46E5";

            speciesLabels

            speciesLabels,

        if (!state.regionsPlugin || typeof state.regionsPlugin !== 'object' || !('addRegion' in state.regionsPlugin)) {

        if (!state.regionsPlugin || typeof state.regionsPlugin !== "object" || !("addRegion" in state.regionsPlugin)) {

        
        const region = (state.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,
        });

        const region = (state.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,
          },
        );

          
          const label = document.createElement('div');

          const label = document.createElement("div");

      console.error('Error creating regions:', error);

      console.error("Error creating regions:", error);

      if (event.key === 'Escape' && isOpen) {

      if (event.key === "Escape" && isOpen) {

      if (event.key === ' ' && isOpen && state.wavesurfer) {

      if (event.key === " " && isOpen && state.wavesurfer) {

      document.addEventListener('keydown', handleKeyDown);
      return () => document.removeEventListener('keydown', handleKeyDown);

      document.addEventListener("keydown", handleKeyDown);
      return () => document.removeEventListener("keydown", handleKeyDown);

                {state.fileContext ? (
                  <>
                    {state.fileContext.dataset && `Dataset: ${state.fileContext.dataset.name}`}
                    {state.fileContext.dataset && state.fileContext.location && ' • '}
                    {state.fileContext.location && `Location: ${state.fileContext.location.name}`}
                    {(state.fileContext.dataset || state.fileContext.location) && state.fileContext.cluster && ' • '}
                    {state.fileContext.cluster && `Cluster: ${state.fileContext.cluster.name}`}
                  </>
                ) : state.fileContextLoading ? (
                  'Loading context...'
                ) : (
                  'Audio File'
                )}

                {state.fileContext
                  ? (
                    <>
                      {state.fileContext.dataset && `Dataset: ${state.fileContext.dataset.name}`}
                      {state.fileContext.dataset && state.fileContext.location && " • "}
                      {state.fileContext.location && `Location: ${state.fileContext.location.name}`}
                      {(state.fileContext.dataset || state.fileContext.location) && state.fileContext.cluster && " • "}
                      {state.fileContext.cluster && `Cluster: ${state.fileContext.cluster.name}`}
                    </>
                  )
                  : state.fileContextLoading
                  ? (
                    "Loading context..."
                  )
                  : (
                    "Audio File"
                  )}

                  <div ref={timelineRef} className="w-full" style={{ height: '20px' }} />

                  <div ref={timelineRef} className="w-full" style={{ height: "20px" }} />

                  <div ref={spectrogramRef} className="w-full" style={{ height: '256px' }} />

                  <div ref={spectrogramRef} className="w-full" style={{ height: "256px" }} />

                      {state.isPlaying ? (
                        <Pause className="h-4 w-4" />
                      ) : (
                        <Play className="h-4 w-4" />
                      )}

                      {state.isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}

                    {state.filePickerSupported ? 'Browse Files' : 'Select File'}

                    {state.filePickerSupported ? "Browse Files" : "Select File"}

                      <div ref={timelineRef} className="w-full" style={{ height: '20px' }} />

                      <div ref={timelineRef} className="w-full" style={{ height: "20px" }} />

                      <div ref={spectrogramRef} className="w-full" style={{ height: '256px' }} />

                      <div ref={spectrogramRef} className="w-full" style={{ height: "256px" }} />

                          {state.isPlaying ? (
                            <Pause className="h-4 w-4" />
                          ) : (
                            <Play className="h-4 w-4" />
                          )}

                          {state.isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}

                  value={state.selectedFilterId || 'all'}
                  onChange={(e) => setState(prev => ({ 
                    ...prev, 
                    selectedFilterId: e.target.value === 'all' ? null : e.target.value 
                  }))}

                  value={state.selectedFilterId || "all"}
                  onChange={(e) =>
                    setState(prev => ({
                      ...prev,
                      selectedFilterId: e.target.value === "all" ? null : e.target.value,
                    }))}

export default File;

export default File;

[ ] Opus support