/**
 * ModalWrapper Component Tests
 * 
 * 測試目標：
 * 1. PeopleModalTrigger 能正確渲染
 * 2. 點擊 trigger 時呼叫廠商 modal
 * 3. peopleModal helper 正常運作
 */

import React from 'react';
import { render, cleanup as rtlCleanup, fireEvent, waitFor } from '@testing-library/react';
import { PeopleModalTrigger, peopleModal } from '@/components/aia/modal-wrapper';
import * as vendorModal from '@vendor-web/js/components/modal.js';

// Mock 廠商 modal.js
jest.mock('@vendor-web/js/components/modal.js', () => ({
  peopleModal: jest.fn(),
  openModal: jest.fn(),
  closeModal: jest.fn(),
}));

describe('ModalWrapper Components', () => {
  beforeEach(() => {
    jest.clearAllMocks();
    (vendorModal.peopleModal as jest.Mock).mockResolvedValue(undefined);
  });

  afterEach(() => {
    rtlCleanup();
  });

  describe('PeopleModalTrigger', () => {
    it('應該渲染 trigger 按鈕', () => {
      const modalData = {
        name: 'John Doe',
        title: 'CEO',
        text: 'Bio text',
      };

      const { getByText } = render(
        <PeopleModalTrigger modalData={modalData}>
          Open Modal
        </PeopleModalTrigger>
      );

      expect(getByText('Open Modal')).toBeInTheDocument();
    });

    it('應該在點擊時呼叫廠商 peopleModal', async () => {
      const modalData = {
        portrait: '/images/person.jpg',
        name: 'John Doe',
        title: 'CEO',
        text: 'Bio text',
      };

      const { getByText } = render(
        <PeopleModalTrigger modalData={modalData}>
          Open Modal
        </PeopleModalTrigger>
      );

      const button = getByText('Open Modal');
      fireEvent.click(button);

      await waitFor(() => {
        expect(vendorModal.peopleModal).toHaveBeenCalledWith(modalData);
      });
    });

    it('應該支援自訂 onClick handler', async () => {
      const modalData = { name: 'Test' };
      const onClickMock = jest.fn();

      const { getByText } = render(
        <PeopleModalTrigger modalData={modalData} onClick={onClickMock}>
          Click Me
        </PeopleModalTrigger>
      );

      fireEvent.click(getByText('Click Me'));

      await waitFor(() => {
        expect(onClickMock).toHaveBeenCalled();
        expect(vendorModal.peopleModal).toHaveBeenCalled();
      });
    });

    it('應該支援自訂元素類型（as prop）', () => {
      const modalData = { name: 'Test' };

      const { container } = render(
        <PeopleModalTrigger modalData={modalData} as="div">
          Custom Element
        </PeopleModalTrigger>
      );

      expect(container.querySelector('div')).toBeInTheDocument();
    });

    it('應該傳遞其他 HTML 屬性', () => {
      const modalData = { name: 'Test' };

      const { getByRole } = render(
        <PeopleModalTrigger 
          modalData={modalData} 
          className="custom-class"
          data-testid="modal-trigger"
        >
          Button
        </PeopleModalTrigger>
      );

      const button = getByRole('button');
      expect(button).toHaveClass('custom-class');
      expect(button).toHaveAttribute('data-testid', 'modal-trigger');
    });
  });

  describe('peopleModal helper', () => {
    it('應該呼叫廠商 peopleModal 函式', () => {
      const modalData = {
        name: 'Jane Doe',
        title: 'CTO',
      };

      peopleModal(modalData);

      expect(vendorModal.peopleModal).toHaveBeenCalledWith(modalData);
    });

    it('應該返回 Promise', async () => {
      (vendorModal.peopleModal as jest.Mock).mockResolvedValue('success');

      const result = await peopleModal({ name: 'Test' });

      expect(result).toBe('success');
    });
  });
});