src/components/file-list.tsx

'use client';

import * as React from 'react';
import { FolderSearch } from 'lucide-react';
import {
  Table,
  TableBody,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { FileItem } from '@/components/file-item';
import { FolderItem } from '@/components/folder-item';
import type { File as FileType, Folder as FolderType } from '@/app/api/files/route';
import { Checkbox } from './ui/checkbox';
import { cn } from '@/lib/utils';

interface FileListProps {
  files: FileType[];
  folders: FolderType[];
  searchTerm: string;
  onSelectFolder: (path: string) => void;
  selectedIds: string[];
  onSelectAll: (isChecked: boolean) => void;
  onSelectItem: (id: string, isChecked: boolean) => void;
  allItemCount: number;
  isSelectionActive: boolean;
  isPublicShare?: boolean;
}

export function FileList({ 
  files, 
  folders, 
  searchTerm, 
  onSelectFolder, 
  selectedIds, 
  onSelectAll,
  onSelectItem,
  allItemCount,
  isSelectionActive,
  isPublicShare,
}: FileListProps) {
  const hasItems = files.length > 0 || folders.length > 0;
  const [isAnimating, setIsAnimating] = React.useState(false);

  React.useEffect(() => {
    setIsAnimating(true);
    const timer = setTimeout(() => setIsAnimating(false), 500);
    return () => clearTimeout(timer);
  }, [files, folders]);

  const numSelected = selectedIds.length;
  const isAllSelected = allItemCount > 0 && numSelected === allItemCount;

  if (!hasItems) {
    return (
      <div className="flex flex-col items-center justify-center h-full text-center text-muted-foreground p-8">
        <FolderSearch className="h-16 w-16 mb-4" />
        <h3 className="text-xl font-semibold">
          {searchTerm ? `No results for "${searchTerm}"` : 'This folder is empty'}
        </h3>
        <p className="mt-2">
          {searchTerm ? 'Try a different search term.' : 'There are no files or folders here.'}
        </p>
      </div>
    );
  }

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead className={cn("w-[40px]", !isSelectionActive && "hidden")}>
            <Checkbox 
              checked={isAllSelected}
              onCheckedChange={(checked) => onSelectAll(Boolean(checked))}
              aria-label="Select all"
              disabled={allItemCount === 0}
            />
          </TableHead>
          <TableHead className="w-2/5">Name</TableHead>
          <TableHead className="w-1/3">Description</TableHead>
          <TableHead className="text-right">Actions</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {folders.map((folder, index) => (
          <FolderItem
            key={folder.id}
            folder={folder}
            onSelectFolder={onSelectFolder}
            style={{ animationDelay: `${index * 50}ms` }}
            className={isAnimating ? 'animate-fade-in' : ''}
            isSelected={selectedIds.includes(folder.id)}
            onSelectItem={onSelectItem}
            isSelectionActive={isSelectionActive}
            isPublicShare={isPublicShare}
          />
        ))}
        {files.map((file, index) => (
          <FileItem
            key={file.id}
            file={file as FileType}
            style={{ animationDelay: `${(folders.length + index) * 50}ms` }}
            className={isAnimating ? 'animate-fade-in' : ''}
            isSelected={selectedIds.includes(file.id)}
            onSelectItem={onSelectItem}
            isSelectionActive={isSelectionActive}
            isPublicShare={isPublicShare}
          />
        ))}
      </TableBody>
    </Table>
  );
}