'use client';

import * as React from 'react';
import { FolderSearch } from 'lucide-react';
import type { File as FileType, Folder as FolderType } from '@/app/api/files/route';
import { FileGridItem } from './file-grid-item';
import { FolderGridItem } from './folder-grid-item';

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

export function GridView({ 
  files, 
  folders, 
  searchTerm, 
  onSelectFolder, 
  selectedIds, 
  onSelectItem,
  isSelectionActive,
  isPublicShare,
}: GridViewProps) {
  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]);

  if (!hasItems) {
    return (
      <div className="flex flex-col items-center justify-center text-center text-muted-foreground p-8 min-h-[400px]">
        <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 (
    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8 gap-4 p-4">
        {folders.map((folder, index) => (
          <FolderGridItem
            key={folder.id}
            folder={folder}
            onSelectFolder={onSelectFolder}
            style={{ animationDelay: `${index * 30}ms` }}
            className={isAnimating ? 'animate-fade-in' : ''}
            isSelected={selectedIds.includes(folder.id)}
            onSelectItem={onSelectItem}
            isSelectionActive={isSelectionActive}
            isPublicShare={isPublicShare}
          />
        ))}
        {files.map((file, index) => (
          <FileGridItem
            key={file.id}
            file={file as FileType}
            style={{ animationDelay: `${(folders.length + index) * 30}ms` }}
            className={isAnimating ? 'animate-fade-in' : ''}
            isSelected={selectedIds.includes(file.id)}
            onSelectItem={onSelectItem}
            isSelectionActive={isSelectionActive}
            isPublicShare={isPublicShare}
          />
        ))}
    </div>
  );
}