import { AlertCircle, Minus, Pause, Play, Plus, RotateCcw, Upload, X } from "lucide-react";

import { AlertCircle, Pause, Play, Upload, X } from "lucide-react";

// import Zoom from "wavesurfer.js/dist/plugins/zoom.esm.js"; // Temporarily disabled

  zoomPlugin: unknown;

    zoomPlugin: null,

    if (!waveformRef.current || !spectrogramRef.current || !timelineRef.current) return null;

    if (!waveformRef.current || !spectrogramRef.current || !timelineRef.current)
      return null;

    // Zoom plugin temporarily disabled for debugging
    const zoomPlugin = null;

      setState(prev => ({

      setState((prev) => ({

        zoomPlugin,

      setState(prev => ({ ...prev, isPlaying: true }));

      setState((prev) => ({ ...prev, isPlaying: true }));

      setState(prev => ({ ...prev, isPlaying: false }));

      setState((prev) => ({ ...prev, isPlaying: false }));

      setState(prev => ({ ...prev, currentTime }));

      setState((prev) => ({ ...prev, currentTime }));

    // wavesurfer.on("zoom", (minPxPerSec) => {
    //   setCurrentMinPxPerSec(minPxPerSec);
    // }); // Temporarily disabled

      setState(prev => ({

      setState((prev) => ({

    // Mouse wheel zoom is handled by the zoom plugin automatically

  const loadOnlineFile = useCallback(async (fileId: string) => {
    if (!state.wavesurfer) return;

  const loadOnlineFile = useCallback(
    async (fileId: string) => {
      if (!state.wavesurfer) return;

    setState(prev => ({ ...prev, audioLoading: true, audioError: null }));

      setState((prev) => ({ ...prev, audioLoading: true, audioError: null }));

    try {
      const accessToken = await getAccessToken();

      try {
        const accessToken = await getAccessToken();

      // Load the authenticated audio stream
      // For authenticated requests, we need to fetch the blob first and then load it
      const response = await fetch(`/api/files/${fileId}/download`, {
        headers: {
          "Authorization": `Bearer ${accessToken}`,
        },
      });

        // Load the authenticated audio stream
        // For authenticated requests, we need to fetch the blob first and then load it
        const response = await fetch(`/api/files/${fileId}/download`, {
          headers: {
            Authorization: `Bearer ${accessToken}`,
          },
        });

      if (!response.ok) {
        throw new Error(`Failed to fetch audio: ${response.status}`);
      }

        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);

        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, getAccessToken]);

        // 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, getAccessToken],
  );

  const loadLocalFile = useCallback((file: File) => {
    if (!state.wavesurfer) return;

  const loadLocalFile = useCallback(
    (file: File) => {
      if (!state.wavesurfer) return;

    setState(prev => ({ ...prev, audioLoading: true, audioError: null }));

      setState((prev) => ({ ...prev, audioLoading: true, audioError: null }));

    try {
      const url = URL.createObjectURL(file);
      void state.wavesurfer.load(url).catch(console.error);

      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]);

        // 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],
  );

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

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

          types: [{
            description: "Audio files",
            accept: {
              "audio/*": [".wav", ".flac"],

          types: [
            {
              description: "Audio files",
              accept: {
                "audio/*": [".wav", ".flac"],
              },

          }],

          ],

        setState(prev => ({ ...prev, localFile: selectedFile }));

        setState((prev) => ({ ...prev, localFile: selectedFile }));

      setState(prev => ({

      setState((prev) => ({

    }
  }, [state.wavesurfer]);
  // Simple zoom controls using built-in zoom method
  const zoomIn = useCallback(() => {
    if (state.wavesurfer) {
      try {
        // Use a small increment for smoother zooming (25 pixels per second)
        state.wavesurfer.zoom(25);
      } catch (error) {
        console.error('Error zooming in:', error);
      }
    }
  }, [state.wavesurfer]);
  const zoomOut = useCallback(() => {
    if (state.wavesurfer) {
      try {
        // Use negative increment to zoom out
        state.wavesurfer.zoom(-15);
      } catch (error) {
        console.error('Error zooming out:', error);
      }

  const resetZoom = useCallback(() => {
    if (state.wavesurfer) {
      try {
        // Reset to default zoom level (0)
        state.wavesurfer.zoom(0);
      } catch (error) {
        console.error('Error resetting zoom:', error);
      }
    }
  }, [state.wavesurfer]);

  const fetchSelections = useCallback(async (fileId: string) => {
    setState(prev => ({ ...prev, selectionsLoading: true, selectionsError: null }));

  const fetchSelections = useCallback(
    async (fileId: string) => {
      setState((prev) => ({
        ...prev,
        selectionsLoading: true,
        selectionsError: null,
      }));

    try {
      const accessToken = await getAccessToken();

      try {
        const accessToken = await getAccessToken();

      const response = await fetch(`/api/files/${fileId}/selections`, {
        headers: {
          "Authorization": `Bearer ${accessToken}`,
        },
      });

        const response = await fetch(`/api/files/${fileId}/selections`, {
          headers: {
            Authorization: `Bearer ${accessToken}`,
          },
        });

      if (!response.ok) {
        throw new Error(`Failed to fetch selections: ${response.status}`);

        if (!response.ok) {
          throw new Error(`Failed to fetch selections: ${response.status}`);
        }
        const data = await response.json();
        setState((prev) => ({
          ...prev,
          selections: data.data || [],
          selectionsLoading: false,
        }));
      } catch (error) {
        console.error("Error fetching selections:", error);
        setState((prev) => ({
          ...prev,
          selectionsError: "Failed to load selections",
          selectionsLoading: false,
        }));

    },
    [getAccessToken],
  );

      const data = await response.json();
      setState(prev => ({
        ...prev,
        selections: data.data || [],
        selectionsLoading: false,
      }));
    } catch (error) {
      console.error("Error fetching selections:", error);
      setState(prev => ({
        ...prev,
        selectionsError: "Failed to load selections",
        selectionsLoading: false,
      }));
    }
  }, [getAccessToken]);

  const fetchFileContext = useCallback(async (fileId: string) => {
    setState(prev => ({ ...prev, fileContextLoading: true }));

  const fetchFileContext = useCallback(
    async (fileId: string) => {
      setState((prev) => ({ ...prev, fileContextLoading: true }));
      try {
        const accessToken = await getAccessToken();

    try {
      const accessToken = await getAccessToken();

        const response = await fetch(`/api/files/${fileId}/context`, {
          headers: {
            Authorization: `Bearer ${accessToken}`,
          },
        });

      const response = await fetch(`/api/files/${fileId}/context`, {
        headers: {
          "Authorization": `Bearer ${accessToken}`,
        },
      });

        if (!response.ok) {
          throw new Error(`Failed to fetch file context: ${response.status}`);
        }

      if (!response.ok) {
        throw new Error(`Failed to fetch file context: ${response.status}`);

        const data = await response.json();
        setState((prev) => ({
          ...prev,
          fileContext: data.data,
          fileContextLoading: false,
        }));
      } catch (error) {
        console.error("Error fetching file context:", error);
        setState((prev) => ({
          ...prev,
          fileContextLoading: false,
        }));

      const data = await response.json();
      setState(prev => ({
        ...prev,
        fileContext: data.data,
        fileContextLoading: false,
      }));
    } catch (error) {
      console.error("Error fetching file context:", error);
      setState(prev => ({
        ...prev,
        fileContextLoading: false,
      }));
    }
  }, [getAccessToken]);

    },
    [getAccessToken],
  );

    state.selections.forEach(selection => {
      selection.filters.forEach(filter => {

    state.selections.forEach((selection) => {
      selection.filters.forEach((filter) => {

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

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

        selection.filters.forEach(filter => {

        selection.filters.forEach((filter) => {

          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("; ");

          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("; ");

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

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

        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,
        });

  }, [state.regionsPlugin, state.selections, state.selectedFilterId, getSpeciesColor]);

  }, [
    state.regionsPlugin,
    state.selections,
    state.selectedFilterId,
    getSpeciesColor,
  ]);

      setState(prev => ({ ...prev, wavesurfer }));

      setState((prev) => ({ ...prev, wavesurfer }));

  }, [state.wavesurfer, file, loadOnlineFile, fetchSelections, fetchFileContext]);

  }, [
    state.wavesurfer,
    file,
    loadOnlineFile,
    fetchSelections,
    fetchFileContext,
  ]);

    if (state.regionsPlugin && !state.selectionsLoading && state.selections.length > 0) {

    if (
      state.regionsPlugin &&
      !state.selectionsLoading &&
      state.selections.length > 0
    ) {

  }, [state.regionsPlugin, state.selectionsLoading, state.selections, state.selectedFilterId, createRegions]);

  }, [
    state.regionsPlugin,
    state.selectionsLoading,
    state.selections,
    state.selectedFilterId,
    createRegions,
  ]);

                {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.wavesurfer && !state.audioLoading && !state.audioError && (
                  <div className="flex items-center gap-4 p-4 bg-muted/20 rounded-md">
                    <Button
                      variant="outline"
                      size="icon"
                      onClick={togglePlayPause}
                      disabled={state.audioLoading}
                    >
                      {state.isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
                    </Button>
                    
                    {/* Zoom Controls */}
                    <div className="flex items-center gap-1 border-l pl-4 ml-2">
                      <Button
                        variant="outline"
                        size="icon"
                        onClick={zoomOut}
                        disabled={state.audioLoading}
                        title="Zoom Out"
                      >
                        <Minus className="h-4 w-4" />
                      </Button>

                {state.wavesurfer &&
                  !state.audioLoading &&
                  !state.audioError && (
                    <div className="flex items-center gap-4 p-4 bg-muted/20 rounded-md">

                        onClick={zoomIn}

                        onClick={togglePlayPause}

                        title="Zoom In"

                        <Plus className="h-4 w-4" />

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

                      <Button
                        variant="outline"
                        size="icon"
                        onClick={resetZoom}
                        disabled={state.audioLoading}
                        title="Reset Zoom"
                      >
                        <RotateCcw className="h-4 w-4" />
                      </Button>

                      <div className="text-sm text-muted-foreground">
                        Duration: {formatTime(file.duration)} • Sample Rate:{" "}
                        {(file.sampleRate / 1000).toFixed(1)} kHz
                      </div>

                    
                    <div className="text-sm text-muted-foreground">
                      Duration: {formatTime(file.duration)} • Sample Rate: {(file.sampleRate / 1000).toFixed(1)} kHz
                    </div>
                  </div>
                )}

                  )}

                    This file is not available online. Load it from your local storage to play and analyze.

                    This file is not available online. Load it from your local
                    storage to play and analyze.

                  <Button onClick={() => void openFilePicker().catch(console.error)}>

                  <Button
                    onClick={() => void openFilePicker().catch(console.error)}
                  >

                      <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.wavesurfer && !state.audioLoading && !state.audioError && (
                      <div className="flex items-center gap-4 p-4 bg-muted/20 rounded-md">
                        <Button
                          variant="outline"
                          size="icon"
                          onClick={togglePlayPause}
                          disabled={state.audioLoading}
                        >
                          {state.isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
                        </Button>
                        
                        {/* Zoom Controls */}
                        <div className="flex items-center gap-1 border-l pl-4 ml-2">

                    {state.wavesurfer &&
                      !state.audioLoading &&
                      !state.audioError && (
                        <div className="flex items-center gap-4 p-4 bg-muted/20 rounded-md">

                            onClick={zoomOut}

                            onClick={togglePlayPause}

                            title="Zoom Out"

                            <Minus className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="outline"
                            size="icon"
                            onClick={zoomIn}
                            disabled={state.audioLoading}
                            title="Zoom In"
                          >
                            <Plus className="h-4 w-4" />

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

                          <Button
                            variant="outline"
                            size="icon"
                            onClick={resetZoom}
                            disabled={state.audioLoading}
                            title="Reset Zoom"
                          >
                            <RotateCcw className="h-4 w-4" />
                          </Button>
                        </div>
                        
                        <div className="text-sm text-muted-foreground">
                          Duration: {formatTime(file.duration)} • Sample Rate: {(file.sampleRate / 1000).toFixed(1)} kHz

                          <div className="text-sm text-muted-foreground">
                            Duration: {formatTime(file.duration)} • Sample Rate:{" "}
                            {(file.sampleRate / 1000).toFixed(1)} kHz
                          </div>

                      </div>
                    )}

                      )}

                  This file is not available for playback. Only the dataset owner can load local files.

                  This file is not available for playback. Only the dataset
                  owner can load local files.

            {state.selections.length > 0 && getAvailableFilters().length > 0 && (
              <div className="absolute bottom-4 right-4">
                <select
                  value={state.selectedFilterId || "all"}
                  onChange={(e) =>
                    setState(prev => ({
                      ...prev,
                      selectedFilterId: e.target.value === "all" ? null : e.target.value,
                    }))}
                  className="text-xs rounded-md border border-gray-300 bg-white py-1 px-2 shadow-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
                >
                  <option value="all">All Models</option>
                  {getAvailableFilters().map(filter => (
                    <option key={filter.id} value={filter.id}>
                      {filter.name || `Filter ${filter.id}`}
                    </option>
                  ))}
                </select>
              </div>
            )}

            {state.selections.length > 0 &&
              getAvailableFilters().length > 0 && (
                <div className="absolute bottom-4 right-4">
                  <select
                    value={state.selectedFilterId || "all"}
                    onChange={(e) =>
                      setState((prev) => ({
                        ...prev,
                        selectedFilterId:
                          e.target.value === "all" ? null : e.target.value,
                      }))
                    }
                    className="text-xs rounded-md border border-gray-300 bg-white py-1 px-2 shadow-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
                  >
                    <option value="all">All Models</option>
                    {getAvailableFilters().map((filter) => (
                      <option key={filter.id} value={filter.id}>
                        {filter.name || `Filter ${filter.id}`}
                      </option>
                    ))}
                  </select>
                </div>
              )}