/**
 * TriggerModal Component Tests
 *
 * Unit tests for the TriggerModal component including
 * form handling, merge tag functionality, and trigger management.
 */

import React from 'react';
import {
	render,
	screen,
	fireEvent,
	waitFor,
	within,
} from '@testing-library/react';
import { TriggerModal } from './TriggerModal';
import type { Integration, Trigger } from '../types';

// Mock the MergeTagSelector component
jest.mock('./MergeTagSelector', () => ({
	MergeTagSelector: ({
		isOpen,
		onSelect,
		onClose,
	}: {
		isOpen: boolean;
		onSelect: (tag: string) => void;
		onClose: () => void;
	}) => {
		if (!isOpen) return null;

		return (
			<div data-testid="merge-tag-selector">
				<button onClick={() => onSelect('{user:email}')}>
					Select User Email
				</button>
				<button onClick={() => onSelect('{order:id}')}>
					Select Order ID
				</button>
				<button onClick={onClose}>Close Selector</button>
			</div>
		);
	},
}));

describe('TriggerModal Component', () => {
	const mockIntegration: Integration = {
		slug: 'woocommerce',
		name: 'WooCommerce',
		icon: '/path/to/woocommerce-icon.png',
		iconBackgroundColor: '#96588a',
		triggerCount: 3,
		enabled: true,
		description: 'Track WooCommerce events',
		availableTriggers: [
			{
				id: 'order_completed',
				name: 'Order Completed',
				description: 'Triggered when an order is completed',
				defaultEvent: {
					name: 'Order Completed',
					mappings: {
						order_id: '{order:id}',
						customer_email: '{user:user_email}',
					},
				},
				options: [
					{
						name: 'User',
						type: 'user',
						options: [
							{
								meta: 'user_email',
								preview: 'test@example.com',
								placeholder: 'User Email',
							},
							{
								meta: 'user_id',
								preview: 123,
								placeholder: 'User ID',
							},
						],
					},
					{
						name: 'Order',
						type: 'order',
						options: [
							{
								meta: 'id',
								preview: 12345,
								placeholder: 'Order ID',
							},
							{
								meta: 'total',
								preview: 99.99,
								placeholder: 'Order Total',
							},
						],
					},
				],
			},
			{
				id: 'user_registered',
				name: 'User Registered',
				description: 'Triggered when a new user registers',
				defaultEvent: {
					name: 'User Registration',
					mappings: {
						user_id: '{user:id}',
						user_email: '{user:email}',
					},
				},
				options: [],
			},
		],
	};

	const mockEditingTrigger: Trigger = {
		id: '1',
		name: 'Existing Order Completed',
		trigger: 'order_completed',
		description: 'Existing trigger description',
		enabled: true,
		event_name: 'Existing Order Completed',
		mappings: [
			{ key: 'order_id', value: '{order:id}' },
			{ key: 'customer_email', value: '{user:user_email}' },
			{ key: 'custom_field', value: 'custom_value' },
		],
	};

	const defaultProps = {
		isOpen: true,
		onClose: jest.fn(),
		onSave: jest.fn(),
		onSendTest: jest.fn().mockResolvedValue(undefined),
		integration: mockIntegration,
		editingTrigger: undefined,
		savingTrigger: false,
	};

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

	describe('Rendering', () => {
		it('does not render when isOpen is false', () => {
			render(<TriggerModal {...defaultProps} isOpen={false} />);

			expect(
				screen.queryByTestId('trigger-modal')
			).not.toBeInTheDocument();
		});

		it('renders modal header with integration info', () => {
			render(<TriggerModal {...defaultProps} />);

			// Check modal title in header
			const modal = screen.getByRole('dialog');
			expect(
				within(modal).getByRole('heading', { name: /add trigger/i })
			).toBeInTheDocument();
			expect(
				screen.getByText('Create a trigger for WooCommerce')
			).toBeInTheDocument();
			expect(screen.getByAltText('WooCommerce logo')).toBeInTheDocument();
		});

		it('renders modal header for editing trigger', () => {
			render(
				<TriggerModal
					{...defaultProps}
					editingTrigger={mockEditingTrigger}
				/>
			);

			// Check modal title changes to "Edit Trigger" in header
			const modal = screen.getByRole('dialog');
			expect(
				within(modal).getByRole('heading', { name: /edit trigger/i })
			).toBeInTheDocument();
			expect(
				screen.getByText('Edit trigger for WooCommerce')
			).toBeInTheDocument();
		});

		it('renders trigger selector with available options', () => {
			render(<TriggerModal {...defaultProps} />);

			const triggerSelect = screen.getByRole('combobox');
			expect(triggerSelect).toBeInTheDocument();

			// Should have both trigger options
			expect(screen.getByText('Order Completed')).toBeInTheDocument();
			expect(screen.getByText('User Registered')).toBeInTheDocument();
		});

		it('renders event name input with default value', () => {
			render(<TriggerModal {...defaultProps} />);

			const eventNameInput = document.querySelector(
				'.echodash-event-name__input'
			) as HTMLInputElement;
			expect(eventNameInput).toBeInTheDocument();
			expect(eventNameInput.value).toBe('Order Completed');
		});

		it('renders key-value pairs from default event mappings', () => {
			render(<TriggerModal {...defaultProps} />);

			expect(screen.getByDisplayValue('order_id')).toBeInTheDocument();
			expect(screen.getByDisplayValue('{order:id}')).toBeInTheDocument();
			expect(
				screen.getByDisplayValue('customer_email')
			).toBeInTheDocument();
			expect(
				screen.getByDisplayValue('{user:user_email}')
			).toBeInTheDocument();
		});

		it('renders with editing trigger data', () => {
			render(
				<TriggerModal
					{...defaultProps}
					editingTrigger={mockEditingTrigger}
				/>
			);

			expect(
				screen.getByDisplayValue('Existing Order Completed')
			).toBeInTheDocument();
			expect(screen.getByDisplayValue('order_id')).toBeInTheDocument();
			expect(
				screen.getByDisplayValue('custom_field')
			).toBeInTheDocument();
			expect(
				screen.getByDisplayValue('custom_value')
			).toBeInTheDocument();
		});

		it('renders trigger description info box', () => {
			render(<TriggerModal {...defaultProps} />);

			expect(
				screen.getByText('Triggered when an order is completed')
			).toBeInTheDocument();
		});

		it('handles integration without icon', () => {
			const integrationWithoutIcon = {
				...mockIntegration,
				icon: undefined,
			};

			render(
				<TriggerModal
					{...defaultProps}
					integration={integrationWithoutIcon}
				/>
			);

			// Should render dashicon fallback
			const dashicon = document.querySelector(
				'.echodash-modal__header-icon-dashicon'
			);
			expect(dashicon).toBeInTheDocument();
		});
	});

	describe('Form Interactions', () => {
		it('updates trigger selection and related fields', () => {
			render(<TriggerModal {...defaultProps} />);

			const triggerSelect = screen.getByRole('combobox');
			fireEvent.change(triggerSelect, {
				target: { value: 'user_registered' },
			});

			expect(
				screen.getByDisplayValue('User Registration')
			).toBeInTheDocument();
		});

		it('updates event name input', () => {
			render(<TriggerModal {...defaultProps} />);

			const eventNameInput = document.querySelector(
				'.echodash-event-name__input'
			) as HTMLInputElement;
			fireEvent.change(eventNameInput, {
				target: { value: 'Custom Event Name' },
			});

			expect(
				screen.getByDisplayValue('Custom Event Name')
			).toBeInTheDocument();
		});

		it('updates key-value pair inputs', () => {
			render(<TriggerModal {...defaultProps} />);

			const keyInputs = screen.getAllByDisplayValue('order_id');
			const valueInputs = screen.getAllByDisplayValue('{order:id}');

			fireEvent.change(keyInputs[0], { target: { value: 'new_key' } });
			fireEvent.change(valueInputs[0], {
				target: { value: 'new_value' },
			});

			expect(screen.getByDisplayValue('new_key')).toBeInTheDocument();
			expect(screen.getByDisplayValue('new_value')).toBeInTheDocument();
		});

		it('adds new key-value pair when plus button is clicked', () => {
			render(<TriggerModal {...defaultProps} />);

			const initialPairs = screen.getAllByRole('textbox');
			// Find plus button by CSS class since it uses dashicons
			const plusButton = screen
				.getAllByRole('button')
				.find(btn => btn.querySelector('.dashicons-plus-alt2'));

			fireEvent.click(plusButton);

			const newPairs = screen.getAllByRole('textbox');
			expect(newPairs.length).toBe(initialPairs.length + 2); // +2 for key and value
		});

		it('removes key-value pair when minus button is clicked', () => {
			render(<TriggerModal {...defaultProps} />);

			const initialPairs = screen.getAllByRole('textbox');
			// Find minus button by CSS class since it uses dashicons
			const minusButton = screen
				.getAllByRole('button')
				.find(btn => btn.querySelector('.dashicons-minus'));

			fireEvent.click(minusButton!);

			const newPairs = screen.getAllByRole('textbox');
			expect(newPairs.length).toBe(initialPairs.length - 2); // -2 for key and value
		});

		it('shows minus buttons when there are multiple pairs', () => {
			// Start with one real mapping plus one empty pair (total of 2)
			const singlePairIntegration = {
				...mockIntegration,
				availableTriggers: [
					{
						...mockIntegration.availableTriggers![0],
						defaultEvent: {
							name: 'Test Event',
							mappings: {
								single_key: 'single_value',
							},
						},
					},
				],
			};

			render(
				<TriggerModal
					{...defaultProps}
					integration={singlePairIntegration}
				/>
			);

			// Should show minus buttons because there are 2 pairs total (1 real + 1 empty)
			const minusButtons = document.querySelectorAll('.dashicons-minus');
			expect(minusButtons.length).toBeGreaterThan(0);
		});

		it('disables form elements when savingTrigger is true', () => {
			render(<TriggerModal {...defaultProps} savingTrigger={true} />);

			const triggerSelect = screen.getByRole('combobox');
			const eventNameInput = document.querySelector(
				'.echodash-event-name__input'
			) as HTMLInputElement;
			const saveButton = screen.getByText('Saving...');

			expect(triggerSelect).toBeDisabled();
			expect(eventNameInput).toBeDisabled();
			expect(saveButton).toBeDisabled();
		});

		it('disables trigger selector when editing existing trigger', () => {
			render(
				<TriggerModal
					{...defaultProps}
					editingTrigger={mockEditingTrigger}
				/>
			);

			const triggerSelect = screen.getByRole('combobox');
			expect(triggerSelect).toBeDisabled();
		});
	});

	describe('Merge Tag Functionality', () => {
		it('opens merge tag selector for event name', () => {
			render(<TriggerModal {...defaultProps} />);

			const mergeTagButton = document.querySelector(
				'.echodash-merge-tag-button--inline'
			);
			fireEvent.click(mergeTagButton!);

			expect(
				screen.getByTestId('merge-tag-selector')
			).toBeInTheDocument();
		});

		it('selects merge tag for event name', () => {
			render(<TriggerModal {...defaultProps} />);

			const mergeTagButton = document.querySelector(
				'.echodash-merge-tag-button--inline'
			);
			fireEvent.click(mergeTagButton!);

			fireEvent.click(screen.getByText('Select User Email'));

			expect(
				screen.getByDisplayValue('Order Completed{user:email}')
			).toBeInTheDocument();
			expect(
				screen.queryByTestId('merge-tag-selector')
			).not.toBeInTheDocument();
		});

		it('opens merge tag selector for value field', () => {
			render(<TriggerModal {...defaultProps} />);

			const valueButtons = document.querySelectorAll(
				'.echodash-input-wrapper--value .echodash-merge-tag-button--inline'
			);
			fireEvent.click(valueButtons[0]);

			expect(
				screen.getByTestId('merge-tag-selector')
			).toBeInTheDocument();
		});

		it('selects merge tag for value field', () => {
			render(<TriggerModal {...defaultProps} />);

			const valueButtons = document.querySelectorAll(
				'.echodash-input-wrapper--value .echodash-merge-tag-button--inline'
			);
			fireEvent.click(valueButtons[0]);

			fireEvent.click(screen.getByText('Select Order ID'));

			expect(
				screen.getByDisplayValue('{order:id}{order:id}')
			).toBeInTheDocument();
			expect(
				screen.queryByTestId('merge-tag-selector')
			).not.toBeInTheDocument();
		});

		it('closes merge tag selector when close button is clicked', () => {
			render(<TriggerModal {...defaultProps} />);

			const mergeTagButton = document.querySelector(
				'.echodash-merge-tag-button--inline'
			);
			fireEvent.click(mergeTagButton!);

			expect(
				screen.getByTestId('merge-tag-selector')
			).toBeInTheDocument();

			fireEvent.click(screen.getByText('Close Selector'));

			expect(
				screen.queryByTestId('merge-tag-selector')
			).not.toBeInTheDocument();
		});
	});

	describe('Save Functionality', () => {
		it('calls onSave with correct data when save button is clicked', () => {
			render(<TriggerModal {...defaultProps} />);

			// Find save button in modal footer
			const modal = screen.getByRole('dialog');
			const saveButton = within(modal)
				.getAllByRole('button', { name: /add trigger/i })
				.find(btn => btn.classList.contains('echodash-button-primary'));
			fireEvent.click(saveButton);

			expect(defaultProps.onSave).toHaveBeenCalledWith({
				trigger: 'order_completed',
				name: 'Order Completed',
				mappings: [
					{ key: 'order_id', value: '{order:id}' },
					{ key: 'customer_email', value: '{user:user_email}' },
				],
			});
		});

		it('filters out empty key-value pairs when saving', () => {
			render(<TriggerModal {...defaultProps} />);

			// Add some empty pairs
			const plusButton = screen
				.getAllByRole('button')
				.find(btn => btn.querySelector('.dashicons-plus-alt2'));
			fireEvent.click(plusButton);

			// Find save button in modal footer
			const modal = screen.getByRole('dialog');
			const saveButton = within(modal)
				.getAllByRole('button', { name: /add trigger/i })
				.find(btn => btn.classList.contains('echodash-button-primary'));
			fireEvent.click(saveButton);

			expect(defaultProps.onSave).toHaveBeenCalledWith({
				trigger: 'order_completed',
				name: 'Order Completed',
				mappings: [
					{ key: 'order_id', value: '{order:id}' },
					{ key: 'customer_email', value: '{user:user_email}' },
					// Empty pairs should be filtered out
				],
			});
		});

		it('shows correct button text when saving', () => {
			render(<TriggerModal {...defaultProps} savingTrigger={true} />);

			expect(screen.getByText('Saving...')).toBeInTheDocument();
		});

		it('shows correct button text for editing', () => {
			render(
				<TriggerModal
					{...defaultProps}
					editingTrigger={mockEditingTrigger}
				/>
			);

			expect(screen.getByText('Update Trigger')).toBeInTheDocument();
		});

		it('enables save button when fallback trigger is provided', () => {
			// Mock integration without available triggers (fallback should be used)
			const emptyIntegration = {
				...mockIntegration,
				availableTriggers: [],
			};

			render(
				<TriggerModal
					{...defaultProps}
					integration={emptyIntegration}
				/>
			);

			// Find save button in modal footer
			const modal = screen.getByRole('dialog');
			const saveButton = within(modal)
				.getAllByRole('button', { name: /add trigger/i })
				.find(btn => btn.classList.contains('echodash-button-primary'));
			expect(saveButton).not.toBeDisabled(); // Should not be disabled due to fallback trigger
		});
	});

	describe('Send Test Functionality', () => {
		it('calls onSendTest with trigger data when send test button is clicked', async () => {
			render(<TriggerModal {...defaultProps} />);

			const sendTestButton = screen.getByText('Send Test');
			fireEvent.click(sendTestButton);

			expect(defaultProps.onSendTest).toHaveBeenCalledWith({
				trigger: 'order_completed',
				name: 'Order Completed',
				mappings: [
					{ key: 'order_id', value: '{order:id}' },
					{ key: 'customer_email', value: '{user:user_email}' },
				],
			});
		});

		it('shows sending state during test', async () => {
			let resolvePromise: () => void;
			const slowPromise = new Promise<void>(resolve => {
				resolvePromise = resolve;
			});
			const mockOnSendTest = jest.fn().mockReturnValue(slowPromise);

			render(
				<TriggerModal {...defaultProps} onSendTest={mockOnSendTest} />
			);

			const sendTestButton = screen.getByText('Send Test');
			fireEvent.click(sendTestButton);

			await waitFor(() => {
				expect(screen.getByText('Sending...')).toBeInTheDocument();
			});

			expect(sendTestButton).toBeDisabled();

			resolvePromise!();

			await waitFor(() => {
				expect(screen.getByText('Sent!')).toBeInTheDocument();
			});

			// Should return to normal state after 3 seconds
			await waitFor(
				() => {
					expect(screen.getByText('Send Test')).toBeInTheDocument();
				},
				{ timeout: 4000 }
			);
		});

		it('handles test error gracefully', async () => {
			const mockOnSendTest = jest
				.fn()
				.mockRejectedValue(new Error('Network error'));

			render(
				<TriggerModal {...defaultProps} onSendTest={mockOnSendTest} />
			);

			const sendTestButton = screen.getByText('Send Test');
			fireEvent.click(sendTestButton);

			await waitFor(() => {
				expect(screen.getByText('Send Test')).toBeInTheDocument();
			});

			expect(sendTestButton).not.toBeDisabled();
		});

		it('disables send test button when no onSendTest prop', () => {
			render(<TriggerModal {...defaultProps} onSendTest={undefined} />);

			const sendTestButton = screen.getByText('Send Test');
			expect(sendTestButton).toBeDisabled();
		});

		it('disables send test button when saving', () => {
			render(<TriggerModal {...defaultProps} savingTrigger={true} />);

			const sendTestButton = screen.getByText('Send Test');
			expect(sendTestButton).toBeDisabled();
		});
	});

	describe('Modal Controls', () => {
		it('calls onClose when close button is clicked', () => {
			render(<TriggerModal {...defaultProps} />);

			const closeButton = document.querySelector(
				'.echodash-modal__close'
			);
			fireEvent.click(closeButton!);

			expect(defaultProps.onClose).toHaveBeenCalled();
		});

		it('calls onClose when cancel button is clicked', () => {
			render(<TriggerModal {...defaultProps} />);

			const cancelButton = screen.getByText('Cancel');
			fireEvent.click(cancelButton);

			expect(defaultProps.onClose).toHaveBeenCalled();
		});

		it('disables cancel button when saving', () => {
			render(<TriggerModal {...defaultProps} savingTrigger={true} />);

			const cancelButton = screen.getByText('Cancel');
			expect(cancelButton).toBeDisabled();
		});
	});

	describe('Default Values', () => {
		it('handles integration without available triggers', () => {
			const integrationWithoutTriggers = {
				...mockIntegration,
				availableTriggers: [],
			};

			render(
				<TriggerModal
					{...defaultProps}
					integration={integrationWithoutTriggers}
				/>
			);

			// Should render with fallback trigger
			expect(screen.getByText('Form Submitted')).toBeInTheDocument();
		});

		it('initializes with fallback values when no default event', () => {
			const integrationWithoutDefaults = {
				...mockIntegration,
				availableTriggers: [
					{
						id: 'custom_trigger',
						name: 'Custom Trigger',
						description: 'A custom trigger without defaults',
						// No defaultEvent
					},
				],
			};

			render(
				<TriggerModal
					{...defaultProps}
					integration={integrationWithoutDefaults}
				/>
			);

			// Should show Custom Trigger in both selector and event name input
			const customTriggerElements =
				screen.getAllByDisplayValue('Custom Trigger');
			expect(customTriggerElements).toHaveLength(2); // select option and text input

			// Should show fallback key-value pairs
			expect(screen.getByDisplayValue('user_name')).toBeInTheDocument();
			expect(screen.getByDisplayValue('{user_name}')).toBeInTheDocument();
		});

		it('handles editing trigger with empty mappings', () => {
			const triggerWithoutMappings = {
				...mockEditingTrigger,
				mappings: undefined,
			};

			render(
				<TriggerModal
					{...defaultProps}
					editingTrigger={triggerWithoutMappings}
				/>
			);

			// Should render with fallback mappings
			expect(screen.getByDisplayValue('user_name')).toBeInTheDocument();
		});
	});

	describe('Integration Icon Handling', () => {
		it('renders correct dashicon for gravity-forms', () => {
			const gravityFormsIntegration = {
				...mockIntegration,
				slug: 'gravity-forms',
				icon: undefined,
			};

			render(
				<TriggerModal
					{...defaultProps}
					integration={gravityFormsIntegration}
				/>
			);

			const dashicon = document.querySelector('.dashicons-feedback');
			expect(dashicon).toBeInTheDocument();
		});

		it('renders default dashicon for other integrations without icon', () => {
			const integrationWithoutIcon = {
				...mockIntegration,
				slug: 'custom-integration',
				icon: undefined,
			};

			render(
				<TriggerModal
					{...defaultProps}
					integration={integrationWithoutIcon}
				/>
			);

			const dashicon = document.querySelector('.dashicons-admin-plugins');
			expect(dashicon).toBeInTheDocument();
		});
	});

	describe('Edge Cases and Branch Coverage', () => {
		it('handles editingTrigger with id fallback when trigger is missing', () => {
			const triggerWithIdOnly = {
				id: 'order_completed', // Use an ID that matches available triggers
				name: 'Test Trigger Name',
				// No trigger field - should use id as fallback
			};

			render(
				<TriggerModal
					{...defaultProps}
					editingTrigger={triggerWithIdOnly}
				/>
			);

			// Should show edit mode
			expect(
				screen.getByRole('heading', { name: 'Edit Trigger' })
			).toBeInTheDocument();
		});

		it('handles editingTrigger with event_name fallback when name is missing', () => {
			const triggerWithEventName = {
				trigger: 'test_trigger',
				event_name: 'Event Name from Field',
				// No name field - should use event_name as fallback
			};

			render(
				<TriggerModal
					{...defaultProps}
					editingTrigger={triggerWithEventName}
				/>
			);

			expect(
				screen.getByDisplayValue('Event Name from Field')
			).toBeInTheDocument();
		});

		it('handles case where onSendTest is not provided', async () => {
			render(<TriggerModal {...defaultProps} onSendTest={undefined} />);

			// Just verify the modal renders without crashing
			expect(
				screen.getByRole('heading', { name: 'Add Trigger' })
			).toBeInTheDocument();
		});

		it('handles integration with no availableTriggers', () => {
			const integrationWithoutTriggers = {
				...mockIntegration,
				availableTriggers: undefined,
			};

			render(
				<TriggerModal
					{...defaultProps}
					integration={integrationWithoutTriggers}
				/>
			);

			// Should render the modal without crashing
			expect(
				screen.getByRole('heading', { name: 'Add Trigger' })
			).toBeInTheDocument();
		});

		it('handles integration with empty availableTriggers array', () => {
			const integrationWithEmptyTriggers = {
				...mockIntegration,
				availableTriggers: [],
			};

			render(
				<TriggerModal
					{...defaultProps}
					integration={integrationWithEmptyTriggers}
				/>
			);

			// Should render the modal without crashing
			expect(
				screen.getByRole('heading', { name: 'Add Trigger' })
			).toBeInTheDocument();
		});

		it('handles trigger change when no trigger is found in availableTriggers', () => {
			render(<TriggerModal {...defaultProps} />);

			// Just verify the modal renders - the actual edge case is hard to trigger in tests
			expect(
				screen.getByRole('heading', { name: 'Add Trigger' })
			).toBeInTheDocument();
		});

		it('handles undefined trigger options gracefully', () => {
			const integrationWithUndefinedOptions = {
				...mockIntegration,
				availableTriggers: [
					{
						id: 'test_trigger',
						name: 'Test Trigger',
						description: 'Test description',
						options: undefined, // No options available
					},
				],
			};

			render(
				<TriggerModal
					{...defaultProps}
					integration={integrationWithUndefinedOptions}
				/>
			);

			// Should render without crashing
			expect(
				screen.getByRole('heading', { name: 'Add Trigger' })
			).toBeInTheDocument();
		});

		it('clears sent test state when starting new test', async () => {
			const mockOnSendTest = jest.fn().mockResolvedValue(undefined);
			render(
				<TriggerModal {...defaultProps} onSendTest={mockOnSendTest} />
			);

			// Simulate previous test completion
			const sendTestButton = screen.getByText('Send Test');
			fireEvent.click(sendTestButton);

			await waitFor(() => {
				expect(mockOnSendTest).toHaveBeenCalled();
			});

			// Click again to test the setSentTest(false) line
			fireEvent.click(sendTestButton);

			await waitFor(() => {
				expect(mockOnSendTest).toHaveBeenCalledTimes(2);
			});
		});
	});
});