import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import ContactPage from '../ContactPage';

// Mock react-i18next
vi.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key: string) => key,
  }),
}));

const renderContactPage = () => {
  return render(
    <BrowserRouter>
      <ContactPage />
    </BrowserRouter>
  );
};

describe('ContactPage', () => {
  describe('rendering', () => {
    it('renders the page title', () => {
      renderContactPage();
      expect(screen.getByText('marketing.contact.title')).toBeInTheDocument();
    });

    it('renders the page subtitle', () => {
      renderContactPage();
      expect(screen.getByText('marketing.contact.subtitle')).toBeInTheDocument();
    });

    it('renders the form heading', () => {
      renderContactPage();
      expect(screen.getByText('marketing.contact.formHeading')).toBeInTheDocument();
    });

    it('renders the sidebar heading', () => {
      renderContactPage();
      expect(screen.getByText('marketing.contact.sidebarHeading')).toBeInTheDocument();
    });

    it('renders contact info sections', () => {
      renderContactPage();
      expect(screen.getByText('Email')).toBeInTheDocument();
      expect(screen.getByText('Phone')).toBeInTheDocument();
      expect(screen.getByText('Address')).toBeInTheDocument();
    });

    it('renders sales CTA section', () => {
      renderContactPage();
      expect(screen.getByText('marketing.contact.sales.title')).toBeInTheDocument();
      expect(screen.getByText('marketing.contact.sales.description')).toBeInTheDocument();
    });
  });

  describe('form', () => {
    it('renders name input field', () => {
      renderContactPage();
      expect(screen.getByLabelText('marketing.contact.form.name')).toBeInTheDocument();
    });

    it('renders email input field', () => {
      renderContactPage();
      expect(screen.getByLabelText('marketing.contact.form.email')).toBeInTheDocument();
    });

    it('renders subject input field', () => {
      renderContactPage();
      expect(screen.getByLabelText('marketing.contact.form.subject')).toBeInTheDocument();
    });

    it('renders message textarea', () => {
      renderContactPage();
      expect(screen.getByLabelText('marketing.contact.form.message')).toBeInTheDocument();
    });

    it('renders submit button', () => {
      renderContactPage();
      expect(screen.getByRole('button', { name: /marketing.contact.form.submit/i })).toBeInTheDocument();
    });

    it('updates name field on input', () => {
      renderContactPage();
      const nameInput = screen.getByLabelText('marketing.contact.form.name');
      fireEvent.change(nameInput, { target: { value: 'John Doe' } });
      expect(nameInput).toHaveValue('John Doe');
    });

    it('updates email field on input', () => {
      renderContactPage();
      const emailInput = screen.getByLabelText('marketing.contact.form.email');
      fireEvent.change(emailInput, { target: { value: 'john@example.com' } });
      expect(emailInput).toHaveValue('john@example.com');
    });

    it('updates subject field on input', () => {
      renderContactPage();
      const subjectInput = screen.getByLabelText('marketing.contact.form.subject');
      fireEvent.change(subjectInput, { target: { value: 'Test Subject' } });
      expect(subjectInput).toHaveValue('Test Subject');
    });

    it('updates message field on input', () => {
      renderContactPage();
      const messageInput = screen.getByLabelText('marketing.contact.form.message');
      fireEvent.change(messageInput, { target: { value: 'Test message' } });
      expect(messageInput).toHaveValue('Test message');
    });
  });

  describe('form submission', () => {
    it('submit button is not disabled initially', () => {
      renderContactPage();
      const submitButton = screen.getByRole('button', { name: /marketing.contact.form.submit/i });
      expect(submitButton).not.toBeDisabled();
    });

    it('shows submit button with correct text', () => {
      renderContactPage();
      expect(screen.getByRole('button', { name: /marketing.contact.form.submit/i })).toBeInTheDocument();
    });
  });

  describe('contact links', () => {
    it('renders email link', () => {
      renderContactPage();
      const emailLink = screen.getByText('marketing.contact.info.email');
      expect(emailLink.closest('a')).toHaveAttribute('href', 'mailto:marketing.contact.info.email');
    });

    it('renders phone link', () => {
      renderContactPage();
      const phoneLink = screen.getByText('marketing.contact.info.phone');
      expect(phoneLink.closest('a')).toHaveAttribute('href', expect.stringContaining('tel:'));
    });

    it('renders schedule call link', () => {
      renderContactPage();
      expect(screen.getByText('marketing.contact.scheduleCall')).toBeInTheDocument();
    });
  });
});
