import { render, screen, fireEvent, act } from '@testing-library/react';
import ArchiveTerminalListTable from '../components/ui/pages/ArchiveTerminalListTable';
import '@testing-library/jest-dom';

// Mock the API calls
jest.mock('@/services/public', () => ({
  toGetInactiveTerminalRecord: jest.fn(() => Promise.resolve({
    status: 'success',
    data: [],
    meta: { total: 0, per_page: 10 }
  })),
  toTerminalRestoreStatus: jest.fn(() => Promise.resolve({
    status: 'success',
    message: 'Terminal restored successfully'
  })),
}));

// Mock next-auth/react with useSession
jest.mock('next-auth/react', () => ({
  __esModule: true,
  SessionProvider: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  useSession: jest.fn(() => ({
    data: {
      user: {
        name: 'Test User',
        email: 'test@example.com',
        image: null
      },
      expires: '2023-12-31'
    },
    status: 'authenticated'
  }))
}));

// Mock the CollapsedContext
jest.mock('@/components/Context/CollapsedContext', () => ({
  __esModule: true,
  useCollapsed: () => ({ isCollapsed: false }),
}));

// Mock image imports
jest.mock('@/public/images/perso.jpeg', () => 'test-image-path');
jest.mock('@/public/images/header-log-white.svg', () => 'test-image-path');
jest.mock('@/public/images/d-icon.svg', () => 'test-image-path');
jest.mock('@/public/images/thumborgs.svg', () => 'test-image-path');
jest.mock('@/public/images/client.svg', () => 'test-image-path');

// Mock other components that might be causing issues
jest.mock('@/components/layouts/Layout', () => ({
  __esModule: true,
  default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>
}));

describe('ArchiveTerminalListTable Filter Input Validation', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  test('renders the component without crashing', async () => {
    await act(async () => {
      render(<ArchiveTerminalListTable />);
    });
    expect(screen.getByText('Manage Archive Terminal List')).toBeInTheDocument();
  });

  test('Market Name filter only accepts alphabetic characters', async () => {
    await act(async () => {
      render(<ArchiveTerminalListTable />);
    });
    
    const marketInput = screen.getByPlaceholderText('Market Name');
    
    // Test with valid alphabetic input
    await act(async () => {
      fireEvent.change(marketInput, { target: { value: 'NewYork' } });
    });
    expect(marketInput).toHaveValue('NewYork');
    
    // Test with invalid numeric input
    await act(async () => {
      fireEvent.change(marketInput, { target: { value: 'NewYork123' } });
    });
    expect(marketInput).toHaveValue('NewYork');
    
    // Test with invalid special characters
    await act(async () => {
      fireEvent.change(marketInput, { target: { value: 'NewYork$%^' } });
    });
    expect(marketInput).toHaveValue('NewYork');
  });

  test('Terminal Name filter only accepts alphabetic characters', async () => {
    await act(async () => {
      render(<ArchiveTerminalListTable />);
    });
    
    const terminalInput = screen.getByPlaceholderText('Terminal Name');
    
    // Test with valid alphabetic input
    await act(async () => {
      fireEvent.change(terminalInput, { target: { value: 'TerminalA' } });
    });
    expect(terminalInput).toHaveValue('TerminalA');
    
    // Test with invalid numeric input
    await act(async () => {
      fireEvent.change(terminalInput, { target: { value: 'Terminal1' } });
    });
    expect(terminalInput).not.toHaveValue('Terminal1');
    expect(terminalInput).toHaveValue('TerminalA');
    
    // Test with invalid special characters
    await act(async () => {
      fireEvent.change(terminalInput, { target: { value: 'Terminal@#' } });
    });
    expect(terminalInput).not.toHaveValue('Terminal@#');
    expect(terminalInput).toHaveValue('TerminalA');
  });

  test('Prevents spaces at the beginning in filter inputs', async () => {
    await act(async () => {
      render(<ArchiveTerminalListTable />);
    });
    
    const marketInput = screen.getByPlaceholderText('Market Name');
    
    expect(marketInput).toHaveValue('');
  
    await act(async () => {
      fireEvent.change(marketInput, { target: { value: ' ' } });
    });
    expect(marketInput).toHaveValue('');
  
    await act(async () => {
      fireEvent.change(marketInput, { target: { value: 'Valid' } });
    });
    expect(marketInput).toHaveValue('Valid');
  
    await act(async () => {
      fireEvent.change(marketInput, { target: { value: 'Valid ' } });
    });
    expect(marketInput).toHaveValue('Valid');
  });

  test('Clear Filter button resets all filter inputs', async () => {
    await act(async () => {
      render(<ArchiveTerminalListTable />);
    });
    
    const marketInput = screen.getByPlaceholderText('Market Name');
    const terminalInput = screen.getByPlaceholderText('Terminal Name');
    const clearButton = screen.getByText('Clear');
    
    await act(async () => {
      fireEvent.change(marketInput, { target: { value: 'TestMarket' } });
      fireEvent.change(terminalInput, { target: { value: 'TestTerminal' } });
    });
    
    await act(async () => {
      fireEvent.click(clearButton);
    });
    
    expect(marketInput).toHaveValue('');
    expect(terminalInput).toHaveValue('');
  });
});