import React from 'react';
import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { FileGrid } from '@/components/dms/FileGrid';
import type { DmsFile } from '@/api/dms';

const mockFiles: DmsFile[] = [
  { id: 'f1', folder_id: null, name: 'report.pdf', mime_type: 'application/pdf', size_bytes: 1024, storage_path: '/path/f1', deleted_at: null, uploaded_by: 'user1', created_at: '2024-01-01T00:00:00Z' },
  { id: 'f2', folder_id: null, name: 'photo.jpg', mime_type: 'image/jpeg', size_bytes: 4096, storage_path: '/path/f2', deleted_at: null, uploaded_by: 'user2', created_at: '2024-01-01T00:00:00Z' },
];

const defaultProps = {
  files: mockFiles,
  selectedFileIds: new Set<string>(),
  onToggleSelect: vi.fn(),
  onFileClick: vi.fn(),
  onFileShare: vi.fn(),
  onFileDelete: vi.fn(),
  onFilePreview: vi.fn(),
};

describe('FileGrid', () => {
  it('renders file grid container', () => {
    render(<FileGrid {...defaultProps} />);
    expect(screen.getByTestId('file-grid')).toBeInTheDocument();
  });

  it('renders file cards for each file', () => {
    render(<FileGrid {...defaultProps} />);
    expect(screen.getByTestId('file-card-f1')).toBeInTheDocument();
    expect(screen.getByTestId('file-card-f2')).toBeInTheDocument();
  });

  it('renders file names in cards', () => {
    render(<FileGrid {...defaultProps} />);
    expect(screen.getByText('report.pdf')).toBeInTheDocument();
    expect(screen.getByText('photo.jpg')).toBeInTheDocument();
  });

  it('shows loading state', () => {
    render(<FileGrid {...defaultProps} loading={true} />);
    expect(screen.getByTestId('file-grid-loading')).toBeInTheDocument();
  });

  it('shows empty state when no files', () => {
    render(<FileGrid {...defaultProps} files={[]} />);
    expect(screen.getByTestId('file-grid-empty')).toBeInTheDocument();
  });

  it('calls onFileClick when file card clicked', () => {
    render(<FileGrid {...defaultProps} />);
    fireEvent.click(screen.getByTestId('file-card-f1'));
    expect(defaultProps.onFileClick).toHaveBeenCalledWith(mockFiles[0]);
  });

  it('renders checkboxes for file selection', () => {
    render(<FileGrid {...defaultProps} />);
    const checkboxes = screen.getAllByRole('checkbox');
    expect(checkboxes.length).toBeGreaterThanOrEqual(2);
  });
});
