veza/apps/web/src/components/views/file-manager-view/FileManagerView.tsx

import React from 'react';
import toast from '@/utils/toast';
import { FileDetailsView } from '../FileDetailsView';
import { AutoMetadataDetectionModal } from '@/components/library/AutoMetadataDetectionModal';
import { WatermarkSettingsModal } from '@/components/library/WatermarkSettingsModal';
import { useFileManagerView } from './useFileManagerView';
import { FileManagerViewHeader } from './FileManagerViewHeader';
import { FileManagerViewToolbar } from './FileManagerViewToolbar';
import { FileManagerViewTable } from './FileManagerViewTable';
import { FileManagerViewGrid } from './FileManagerViewGrid';
import { FileManagerViewEmpty } from './FileManagerViewEmpty';
import { FileManagerViewSkeleton } from './FileManagerViewSkeleton';
import type { FileNode } from './types';

export interface FileManagerViewProps {
  filesOverride?: FileNode[];
  isLoading?: boolean;
}

export const FileManagerView: React.FC<FileManagerViewProps> = (props) => {
  const { addToast } = useToast();
  const {
    viewMode,
    setViewMode,
    searchQuery,
    setSearchQuery,
    selectedFiles,
    currentFolder,
    setCurrentFolder,
    selectedFileId,
    setSelectedFileId,
    showMetadataModal,
    setShowMetadataModal,
    showWatermarkModal,
    setShowWatermarkModal,
    filteredFiles,
    handleFileClick,
    toggleSelection,
    selectAll,
    handleBulkAction,
    files,
    isLoading,
  } = useFileManagerView({
    filesOverride: props.filesOverride,
    isLoading: props.isLoading,
  });

  if (isLoading) {
    return <FileManagerViewSkeleton />;
  }

  if (selectedFileId) {
    return (
      <FileDetailsView
        fileId={selectedFileId}
        onBack={() => setSelectedFileId(null)}
      />
    );
  }

  return (
    <div className="space-y-8 animate-in fade-in pb-20">
      <FileManagerViewHeader
        currentFolder={currentFolder}
        onFolderRoot={() => setCurrentFolder('Root')}
        viewMode={viewMode}
        onViewModeChange={setViewMode}
        onOpenMetadataModal={() => setShowMetadataModal(true)}
        onOpenWatermarkModal={() => setShowWatermarkModal(true)}
      />

      <FileManagerViewToolbar
        searchQuery={searchQuery}
        onSearchChange={setSearchQuery}
        selectedCount={selectedFiles.length}
        onBulkDownload={() => handleBulkAction('Downloaded')}
        onBulkMove={() => handleBulkAction('Moved')}
        onBulkDelete={() => handleBulkAction('Deleted')}
      />

      <div className="min-h-layout-page-sm">
        {filteredFiles.length === 0 ? (
          <FileManagerViewEmpty />
        ) : viewMode === 'list' ? (
          <FileManagerViewTable
            files={filteredFiles}
            selectedIds={selectedFiles}
            onSelectAll={selectAll}
            onToggleSelect={toggleSelection}
            onFileClick={handleFileClick}
          />
        ) : (
          <FileManagerViewGrid
            files={filteredFiles}
            selectedIds={selectedFiles}
            onToggleSelect={toggleSelection}
            onFileClick={handleFileClick}
          />
        )}
      </div>

      {showMetadataModal && (
        <AutoMetadataDetectionModal
          fileName={
            selectedFileId
              ? files.find((f) => f.id === selectedFileId)?.name ?? 'Selected File'
              : 'Scan Library'
          }
          onClose={() => setShowMetadataModal(false)}
          onApply={(data) => {
            toast.success(`Applied: ${data.genre} - ${data.bpm}BPM`);
            setShowMetadataModal(false);
          }}
        />
      )}
      {showWatermarkModal && (
        <WatermarkSettingsModal
          onClose={() => setShowWatermarkModal(false)}
          onSave={() => toast.success('Watermark settings updated')}
        />
      )}
    </div>
  );
};