// File System Access API types
interface FileSystemDirectoryHandle {
  readonly kind: 'directory';
  readonly name: string;
  entries(): AsyncIterableIterator<[string, FileSystemHandle]>;
  getDirectoryHandle(name: string, options?: FileSystemGetDirectoryOptions): Promise<FileSystemDirectoryHandle>;
  getFileHandle(name: string, options?: FileSystemGetFileOptions): Promise<FileSystemFileHandle>;
  removeEntry(name: string, options?: FileSystemRemoveOptions): Promise<void>;
  resolve(possibleDescendant: FileSystemHandle): Promise<string[] | null>;
}
interface FileSystemFileHandle {
  readonly kind: 'file';
  readonly name: string;
  getFile(): Promise<File>;
  createWritable(options?: FileSystemCreateWritableOptions): Promise<FileSystemWritableFileStream>;
}
type FileSystemHandle = FileSystemDirectoryHandle | FileSystemFileHandle;
interface FileSystemGetDirectoryOptions {
  create?: boolean;
}
interface FileSystemGetFileOptions {
  create?: boolean;
}
interface FileSystemRemoveOptions {
  recursive?: boolean;
}
interface FileSystemCreateWritableOptions {
  keepExistingData?: boolean;
}
interface FileSystemWritableFileStream extends WritableStream {
  write(data: BufferSource | Blob | string): Promise<void>;
  seek(position: number): Promise<void>;
  truncate(size: number): Promise<void>;
}
interface DirectoryPickerOptions {
  id?: string;
  mode?: 'read' | 'readwrite';
  startIn?: 'desktop' | 'documents' | 'downloads' | 'music' | 'pictures' | 'videos' | FileSystemHandle;
}
interface Window {
  showDirectoryPicker(options?: DirectoryPickerOptions): Promise<FileSystemDirectoryHandle>;
}

import FileImportDialog from "./FileImportDialog";

import Button from "./ui/button";

  
  // Import dialog state
  const [isImportDialogOpen, setIsImportDialogOpen] = useState<boolean>(false);

  // Handle import completion
  const handleImportComplete = () => {
    setIsImportDialogOpen(false);
    // Trigger a refresh of the file list by resetting the current page
    setCurrentPage(1);
    // The useEffect will automatically refetch files when dependencies change
  };

                            : "Try adjusting your filters to see more results"}

                            : files.length === 0 && !loading && !error
                              ? (
                                <Button 
                                  onClick={() => setIsImportDialogOpen(true)} 
                                  variant="default" 
                                  size="lg"
                                >
                                  Import Audio Files
                                </Button>
                              )
                              : "Try adjusting your filters to see more results"}

      {/* Initial state - completely empty cluster (files endpoint only) */}
      {!loading && !error && files.length === 0 && !pagination && speciesOptions.length === 0 && apiEndpoint === "files"
        && (
          <div className="p-4 bg-yellow-50 text-yellow-800 rounded-md">
            <p className="font-medium">No files found for this cluster</p>
          </div>
        )}

      {/* File Import Dialog */}
      <FileImportDialog
        isOpen={isImportDialogOpen}
        onClose={() => setIsImportDialogOpen(false)}
        clusterId={requiredParams.clusterId || ""}
        datasetId={datasetId || ""}
        locationId={""} // TODO: Get locationId from cluster data
        onImportComplete={handleImportComplete}
      />

import React, { useState, useEffect, useCallback } from "react";
import Button from "./ui/button";
interface FileImportDialogProps {
  isOpen: boolean;
  onClose: () => void;
  clusterId: string;
  datasetId: string;
  locationId: string;
  onImportComplete: () => void;
}
type ImportState = 'folder_selection' | 'scanning' | 'ready' | 'importing' | 'completed' | 'cancelled';
const FileImportDialog: React.FC<FileImportDialogProps> = ({
  isOpen,
  onClose,
  clusterId,
  datasetId,
  locationId,
  onImportComplete
}) => {
  const [importState, setImportState] = useState<ImportState>('folder_selection');
  const [selectedFolder, setSelectedFolder] = useState<FileSystemDirectoryHandle | null>(null);
  const [folderPath, setFolderPath] = useState<string>('');
  const [isSupported, setIsSupported] = useState<boolean>(false);
  // Check browser support for File System Access API
  useEffect(() => {
    setIsSupported('showDirectoryPicker' in window);
  }, []);
  const handleSelectFolder = useCallback(async () => {
    if (!isSupported) {
      console.error('File System Access API not supported');
      return;
    }
    try {
      // Show directory picker
      const directoryHandle = await window.showDirectoryPicker({
        mode: 'read',
        startIn: 'documents'
      });
      setSelectedFolder(directoryHandle);
      setFolderPath(directoryHandle.name);
      console.log('Selected folder:', directoryHandle.name);
      
    } catch (error) {
      if (error instanceof Error && error.name === 'AbortError') {
        // User cancelled the picker - close the dialog
        console.log('Folder selection cancelled');
        onClose();
      } else {
        console.error('Error selecting folder:', error);
      }
    }
  }, [isSupported, onClose]);
  // Reset state when dialog opens and trigger folder picker
  useEffect(() => {
    if (isOpen) {
      setImportState('folder_selection');
      setSelectedFolder(null);
      setFolderPath('');
      
      // If browser supports it, immediately show folder picker
      if (isSupported) {
        // Use setTimeout to avoid calling handleSelectFolder directly in useEffect
        setTimeout(() => {
          handleSelectFolder();
        }, 100);
      }
    }
  }, [isOpen, isSupported, handleSelectFolder]);
  const handleClose = () => {
    setImportState('folder_selection');
    setSelectedFolder(null);
    setFolderPath('');
    onClose();
  };
  const handleCancel = () => {
    // TODO: If importing, show confirmation dialog
    handleClose();
  };
  const handleStartImport = () => {
    // TODO: Implement in next phase
    console.log('Starting import for cluster:', clusterId, 'dataset:', datasetId, 'location:', locationId);
    // TODO: Call onImportComplete() when import is finished
    // For now, just close the dialog as a placeholder
    setTimeout(() => {
      onImportComplete();
      handleClose();
    }, 100);
  };
  if (!isOpen) return null;
  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 max-h-[90vh] overflow-hidden">
        {/* Header */}
        <div className="flex items-center justify-between p-6 border-b">
          <h2 className="text-lg font-semibold text-gray-900">Import Audio Files</h2>
          <button
            onClick={handleClose}
            className="text-gray-400 hover:text-gray-600 transition-colors"
          >
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        {/* Content */}
        <div className="p-6">
          {!isSupported ? (
            // Browser not supported
            <div className="text-center">
              <div className="mb-4">
                <svg className="w-12 h-12 text-yellow-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16c-.77.833.192 2.5 1.732 2.5z" />
                </svg>
              </div>
              <h3 className="text-lg font-medium text-gray-900 mb-2">Browser Not Supported</h3>
              <p className="text-sm text-gray-600 mb-4">
                File import requires a modern browser with File System Access API support.
                Please use Chrome 86+, Edge 86+, or another compatible browser.
              </p>
            </div>
          ) : importState === 'folder_selection' ? (
            // Folder selection state
            <div className="text-center">
              {selectedFolder ? (
                <div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-md">
                  <div className="flex items-center">
                    <svg className="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <span className="text-sm font-medium text-green-800">Selected: {folderPath}</span>
                  </div>
                </div>
              ) : (
                <div className="mb-6">
                  <Button
                    onClick={handleSelectFolder}
                    variant="default"
                    size="lg"
                    className="w-full"
                  >
                    Select Folder
                  </Button>
                </div>
              )}
              <div className="text-xs text-gray-500 bg-gray-50 p-3 rounded-md">
                <p>⚠️ Large folders may take time to scan and process</p>
              </div>
            </div>
          ) : (
            // Placeholder for other states (will be implemented in later phases)
            <div className="text-center">
              <p className="text-gray-600">Import state: {importState}</p>
              <p className="text-sm text-gray-500 mt-2">Additional states will be implemented in next phase</p>
            </div>
          )}
        </div>
        {/* Footer */}
        <div className="flex justify-end gap-3 p-6 border-t bg-gray-50">
          <Button
            onClick={handleCancel}
            variant="secondary"
          >
            Cancel
          </Button>
          {isSupported && selectedFolder && importState === 'folder_selection' && (
            <Button
              onClick={handleStartImport}
              variant="default"
            >
              Next
            </Button>
          )}
        </div>
      </div>
    </div>
  );
};
export default FileImportDialog;