/**
 * Unit tests for CustomerCreationModal
 *
 * Email/mobile are read-only; lookup runs in parent (index.js) before the modal opens.
 */

import React from 'react';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { IntlProvider } from 'react-intl';
import PropTypes from 'prop-types';
import CustomerCreationModal from '../CustomerCreationModal';
import { CHANNELS, CUSTOMER_MODAL_NEW } from '../constants';

const mockMessages = {
  'app.v2Components.TestAndPreviewSlidebox.customerCreationModalTitle': 'Add new test customer',
  'app.v2Components.TestAndPreviewSlidebox.customerCreationModalDescription': 'This customer profile will be available for testing.',
  'app.v2Components.TestAndPreviewSlidebox.customerName': 'Name',
  'app.v2Components.TestAndPreviewSlidebox.customerNameOptional': '(Optional)',
  'app.v2Components.TestAndPreviewSlidebox.customerNamePlaceholder': 'Enter the name',
  'app.v2Components.TestAndPreviewSlidebox.customerEmailPlaceholder': 'Enter the Email',
  'app.v2Components.TestAndPreviewSlidebox.customerMobilePlaceholder': 'Enter the Mobile Number',
  'app.v2Components.TestAndPreviewSlidebox.saveButton': 'Save',
  'app.v2Components.TestAndPreviewSlidebox.cancelButton': 'Cancel',
  'app.v2Components.TestAndPreviewSlidebox.customerEmail': 'Email',
  'app.v2Components.TestAndPreviewSlidebox.customerMobileNumber': 'Mobile Number',
};

const TestWrapper = ({ children }) => (
  <IntlProvider locale="en" messages={mockMessages}>
    {children}
  </IntlProvider>
);
TestWrapper.propTypes = { children: PropTypes.node };

describe('CustomerCreationModal', () => {
  const defaultProps = {
    customerModal: [true, CUSTOMER_MODAL_NEW],
    onCloseCustomerModal: jest.fn(),
    channel: CHANNELS.EMAIL,
    customerData: { name: '', email: '', mobile: '' },
    setCustomerData: jest.fn(),
    onSave: jest.fn(),
  };

  beforeEach(() => {
    jest.clearAllMocks();
  });

  it('renders modal with title and form fields when visible (EMAIL)', () => {
    render(
      <TestWrapper>
        <CustomerCreationModal {...defaultProps} channel={CHANNELS.EMAIL} />
      </TestWrapper>
    );
    expect(screen.getByText(/add new test customer/i)).toBeTruthy();
    expect(screen.getByPlaceholderText(/enter the name/i)).toBeTruthy();
    expect(screen.getByPlaceholderText(/enter the email/i)).toBeTruthy();
    expect(screen.queryByPlaceholderText(/enter the mobile number/i)).toBeNull();
    expect(screen.getByRole('button', { name: /save/i })).toBeTruthy();
    expect(screen.getByRole('button', { name: /cancel/i })).toBeTruthy();
  });

  it('renders mobile field when channel is SMS', () => {
    render(
      <TestWrapper>
        <CustomerCreationModal
          {...defaultProps}
          channel={CHANNELS.SMS}
          customerData={{ name: '', email: '', mobile: '' }}
        />
      </TestWrapper>
    );
    expect(screen.getByPlaceholderText(/enter the mobile number/i)).toBeTruthy();
    expect(screen.queryByPlaceholderText(/enter the email/i)).toBeNull();
  });

  it('calls onCloseCustomerModal when Cancel is clicked', () => {
    render(
      <TestWrapper>
        <CustomerCreationModal {...defaultProps} />
      </TestWrapper>
    );
    fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
    expect(defaultProps.onCloseCustomerModal).toHaveBeenCalled();
  });

  it('calls setCustomerData when name input changes', () => {
    render(
      <TestWrapper>
        <CustomerCreationModal {...defaultProps} />
      </TestWrapper>
    );
    fireEvent.change(screen.getByPlaceholderText(/enter the name/i), { target: { value: 'John' } });
    expect(defaultProps.setCustomerData).toHaveBeenCalledWith(expect.objectContaining({ name: 'John' }));
  });

  it('calls onSave when Save is clicked with empty validation object', async () => {
    render(
      <TestWrapper>
        <CustomerCreationModal {...defaultProps} customerData={{ name: '', email: 'a@b.co', mobile: '' }} />
      </TestWrapper>
    );
    const saveBtn = screen.getByRole('button', { name: /save/i });
    fireEvent.click(saveBtn);
    await waitFor(() => expect(defaultProps.onSave).toHaveBeenCalled());
    expect(defaultProps.onSave).toHaveBeenCalledWith(
      { email: '', mobile: '' },
      expect.any(Function),
    );
  });

  it('disables Save when required email is missing (EMAIL channel)', () => {
    render(
      <TestWrapper>
        <CustomerCreationModal
          {...defaultProps}
          channel={CHANNELS.EMAIL}
          customerData={{ name: '', email: '', mobile: '' }}
        />
      </TestWrapper>
    );
    const saveBtn = screen.getByRole('button', { name: /save/i });
    expect(saveBtn.disabled).toBe(true);
  });

  it('disables Save when required mobile is missing (SMS channel)', () => {
    render(
      <TestWrapper>
        <CustomerCreationModal
          {...defaultProps}
          channel={CHANNELS.SMS}
          customerData={{ name: '', email: '', mobile: '' }}
        />
      </TestWrapper>
    );
    const saveBtn = screen.getByRole('button', { name: /save/i });
    expect(saveBtn.disabled).toBe(true);
  });

  it('shows (Optional) on name label when channel is SMS', () => {
    render(
      <TestWrapper>
        <CustomerCreationModal
          {...defaultProps}
          channel={CHANNELS.SMS}
          customerData={{ name: '', email: '', mobile: '' }}
        />
      </TestWrapper>
    );
    expect(screen.getAllByText(/\(optional\)/i)).toHaveLength(1);
  });

  it('shows (Optional) on name label when channel is EMAIL', () => {
    render(
      <TestWrapper>
        <CustomerCreationModal
          {...defaultProps}
          channel={CHANNELS.EMAIL}
          customerData={{ name: '', email: '', mobile: '' }}
        />
      </TestWrapper>
    );
    expect(screen.getAllByText(/\(optional\)/i)).toHaveLength(1);
  });

  it('renders modal description', () => {
    render(
      <TestWrapper>
        <CustomerCreationModal {...defaultProps} />
      </TestWrapper>
    );
    expect(screen.getByText(/this customer profile will be available for testing/i)).toBeTruthy();
  });
});
