// @vitest-environment jsdom
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { vi, describe, it, expect, beforeEach } from 'vitest';
import { Contact } from '../Contact';
import emailjs from '@emailjs/browser';

// Mock dependencies
vi.mock('@emailjs/browser', () => ({
  default: {
    send: vi.fn().mockResolvedValue({ status: 200, text: 'OK' }),
  },
}));

vi.mock('../../i18n', () => ({
  useTranslation: () => ({
    t: {
      contact: {
        title: 'Contact Us',
        subtitle: 'Get in touch',
        intro: 'Send us a message',
        form: {
          name: 'Name',
          namePlaceholder: 'Your Name',
          email: 'Email',
          emailPlaceholder: 'Your Email',
          subject: 'Subject',
          subjectPlaceholder: 'Message Subject',
          message: 'Message',
          messagePlaceholder: 'Your Message',
          submit: 'Send Message',
          sending: 'Sending...',
          success: 'Message sent successfully!',
          error: 'Failed to send message.',
        },
        info: {
          title: 'Contact Info',
          email: 'Email Us',
          github: 'GitHub',
        },
      },
    },
  }),
}));

// Mock config
vi.mock('../../config', () => ({
  config: {
    emailJs: {
      serviceId: 'mock_service_id',
      templateIdAdmin: 'mock_template_admin',
      templateIdUser: 'mock_template_user',
      publicKey: 'mock_public_key',
    },
  },
}));

describe('Contact Page', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('submits the form with correct parameters', async () => {
    render(<Contact />);

    // Fill out the form
    fireEvent.change(screen.getByLabelText('Name'), { target: { value: 'John Doe' } });
    fireEvent.change(screen.getByLabelText('Email'), { target: { value: 'john@example.com' } });
    fireEvent.change(screen.getByLabelText('Subject'), { target: { value: 'Test Subject' } });
    fireEvent.change(screen.getByLabelText('Message'), { target: { value: 'Hello world' } });

    // Submit
    fireEvent.click(screen.getByRole('button', { name: 'Send Message' }));

    // Wait for submission
    await waitFor(() => {
      expect(emailjs.send).toHaveBeenCalledTimes(2);
    });

    const expectedParams = {
      name: 'John Doe',
      email: 'john@example.com',
      title: 'Test Subject',
      message: 'Hello world',
    };

    const expectedOptions = {
        publicKey: 'mock_public_key'
    };

    // Check first call (Admin)
    expect(emailjs.send).toHaveBeenNthCalledWith(
      1,
      'mock_service_id',
      'mock_template_admin',
      expectedParams,
      expectedOptions
    );

    // Check second call (User)
    expect(emailjs.send).toHaveBeenNthCalledWith(
      2,
      'mock_service_id',
      'mock_template_user',
      expectedParams,
      expectedOptions
    );

    // Verify success message
    const successMessage = await screen.findByText('Message sent successfully!');
    expect(successMessage).toBeTruthy();
  });
});