import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import JKSessionSettingsModal from '../JKSessionSettingsModal';
import { SESSION_PRIVACY_MAP } from '../../../helpers/globals.js';

// Mock react-i18next (required because component uses useTranslation)
jest.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key) => {
      const translations = {
        'new.privacy_opt_public': 'Public',
        'new.privacy_opt_private_invite': 'Private (Invite Only)',
        'new.privacy_opt_private_approve': 'Private (Approval Required)'
      };
      return translations[key] || key;
    }
  })
}));

// Helper function for rendering component with default props
const renderModal = (props = {}) => {
  const defaultProps = {
    isOpen: true,
    toggle: jest.fn(),
    currentSession: {
      privacy: SESSION_PRIVACY_MAP.private_approve,
      description: 'Test session description'
    },
    onSave: jest.fn(),
    loading: false
  };
  return render(<JKSessionSettingsModal {...defaultProps} {...props} />);
};

describe('JKSessionSettingsModal', () => {
  // UNIT-01: Modal renders with currentSession props
  describe('rendering with currentSession props (UNIT-01)', () => {
    test('displays privacy value from currentSession', () => {
      renderModal({
        currentSession: {
          privacy: SESSION_PRIVACY_MAP.public,
          description: ''
        }
      });

      const privacySelect = screen.getByTestId('session-privacy');
      expect(privacySelect.value).toBe(String(SESSION_PRIVACY_MAP.public));
    });

    test('displays description value from currentSession', () => {
      const testDescription = 'My test session description';
      renderModal({
        currentSession: {
          privacy: SESSION_PRIVACY_MAP.private_approve,
          description: testDescription
        }
      });

      const descriptionInput = screen.getByRole('textbox');
      expect(descriptionInput.value).toBe(testDescription);
    });

    test('renders modal title', () => {
      renderModal();
      expect(screen.getByText('Session Settings')).toBeInTheDocument();
    });
  });

  // UNIT-02: Save button calls onSave with correct payload
  describe('save functionality (UNIT-02)', () => {
    test('calls onSave with privacy and description when save clicked', () => {
      const mockOnSave = jest.fn();
      renderModal({
        currentSession: {
          privacy: SESSION_PRIVACY_MAP.public,
          description: 'Original description'
        },
        onSave: mockOnSave
      });

      const saveButton = screen.getByRole('button', { name: /save/i });
      fireEvent.click(saveButton);

      expect(mockOnSave).toHaveBeenCalledTimes(1);
      expect(mockOnSave).toHaveBeenCalledWith({
        privacy: SESSION_PRIVACY_MAP.public,
        description: 'Original description'
      });
    });

    test('calls onSave with updated values after user changes', () => {
      const mockOnSave = jest.fn();
      renderModal({
        currentSession: {
          privacy: SESSION_PRIVACY_MAP.private_approve,
          description: ''
        },
        onSave: mockOnSave
      });

      // Change privacy
      const privacySelect = screen.getByTestId('session-privacy');
      fireEvent.change(privacySelect, { target: { value: String(SESSION_PRIVACY_MAP.public) } });

      // Change description
      const descriptionInput = screen.getByRole('textbox');
      fireEvent.change(descriptionInput, { target: { value: 'New description' } });

      // Click save
      const saveButton = screen.getByRole('button', { name: /save/i });
      fireEvent.click(saveButton);

      expect(mockOnSave).toHaveBeenCalledWith({
        privacy: String(SESSION_PRIVACY_MAP.public),
        description: 'New description'
      });
    });
  });

  // UNIT-03: Loading state disables form interactions
  describe('loading state (UNIT-03)', () => {
    test('disables save button when loading', () => {
      renderModal({ loading: true });

      const saveButton = screen.getByRole('button', { name: /saving/i });
      expect(saveButton).toBeDisabled();
    });

    test('disables cancel button when loading', () => {
      renderModal({ loading: true });

      const cancelButton = screen.getByRole('button', { name: /cancel/i });
      expect(cancelButton).toBeDisabled();
    });

    test('disables description textarea when loading', () => {
      renderModal({ loading: true });

      const descriptionInput = screen.getByRole('textbox');
      expect(descriptionInput).toBeDisabled();
    });

    test('shows "Saving..." text on save button when loading', () => {
      renderModal({ loading: true });

      expect(screen.getByRole('button', { name: /saving/i })).toBeInTheDocument();
    });
  });
});
