import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
import Contact from '@/app/components/Contact';
import '@testing-library/jest-dom';

// Mock the fetch function
global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve({ message: 'Email sent' }),
  })
) as jest.Mock;

describe('Contact', () => {
  beforeAll(() => {
    jest.useFakeTimers('modern');
  });

  afterAll(() => {
    jest.useRealTimers();
  });

  it('renders the contact form', () => {
    render(<Contact />);
    expect(screen.getByPlaceholderText('Your Name')).toBeInTheDocument();
    expect(screen.getByPlaceholderText('you@example.com')).toBeInTheDocument();
    expect(screen.getByPlaceholderText('Your Message...')).toBeInTheDocument();
    expect(screen.getByLabelText('I accept the privacy policy.')).toBeInTheDocument();
  });

  it('submits the form', async () => {
    render(<Contact />);
    // Wrap timer advancement in act
    await act(async () => {
      jest.advanceTimersByTime(3000);
    });

    // Fire events inside act if needed
    act(() => {
      fireEvent.change(screen.getByPlaceholderText('Your Name'), {
        target: { value: 'John Doe' },
      });
      fireEvent.change(screen.getByPlaceholderText('you@example.com'), {
        target: { value: 'john@example.com' },
      });
      fireEvent.change(screen.getByPlaceholderText('Your Message...'), {
        target: { value: 'Hello!' },
      });
      fireEvent.click(screen.getByLabelText('I accept the privacy policy.'));
      fireEvent.click(screen.getByText('Send Message'));
    });

    // Wait for the result
    await waitFor(() =>
      expect(screen.getByText('Email sent')).toBeInTheDocument()
    );
  });
});