// @vitest-environment jsdom
import { describe, it, expect, vi, beforeEach } from 'vitest';
import '@testing-library/jest-dom/vitest';
import { render, screen, fireEvent, cleanup } from '@testing-library/react';
import React from 'react';
import { SyncHelpModal } from '../../src/renderer/inbox/components/SyncHelpModal';

describe('SyncHelpModal', () => {
  beforeEach(() => {
    cleanup();
  });

  it('4 섹션 헤더 렌더링', () => {
    render(<SyncHelpModal onClose={() => {}} />);
    expect(screen.getByRole('heading', { name: /충돌 해결/ })).toBeInTheDocument();
    expect(screen.getByRole('heading', { name: /자동으로 처리되는 일/ })).toBeInTheDocument();
    expect(screen.getByRole('heading', { name: /모르고 넘어가기 쉬운 함정/ })).toBeInTheDocument();
    expect(screen.getByRole('heading', { name: /Setup/ })).toBeInTheDocument();
  });

  it('각 섹션이 anchor id 보유', () => {
    const { container } = render(<SyncHelpModal onClose={() => {}} />);
    expect(container.querySelector('#main-conflict')).not.toBeNull();
    expect(container.querySelector('#auto')).not.toBeNull();
    expect(container.querySelector('#silent')).not.toBeNull();
    expect(container.querySelector('#setup')).not.toBeNull();
  });

  it('초기 anchor prop 으로 해당 섹션 scrollIntoView 호출', () => {
    const scrollSpy = vi.fn();
    Element.prototype.scrollIntoView = scrollSpy;
    render(<SyncHelpModal onClose={() => {}} initialAnchor="main-conflict" />);
    expect(scrollSpy).toHaveBeenCalled();
  });

  it('X 버튼 클릭 → onClose 호출', () => {
    const onClose = vi.fn();
    render(<SyncHelpModal onClose={onClose} />);
    fireEvent.click(screen.getByRole('button', { name: /닫기/ }));
    expect(onClose).toHaveBeenCalled();
  });

  it('overlay 클릭 → onClose 호출', () => {
    const onClose = vi.fn();
    const { container } = render(<SyncHelpModal onClose={onClose} />);
    const overlay = container.firstChild as HTMLElement;
    fireEvent.click(overlay);
    expect(onClose).toHaveBeenCalled();
  });

  it('modal body 클릭 → onClose 호출 X (stopPropagation)', () => {
    const onClose = vi.fn();
    render(<SyncHelpModal onClose={onClose} />);
    fireEvent.click(screen.getByRole('heading', { name: /충돌 해결/ }));
    expect(onClose).not.toHaveBeenCalled();
  });

  it('주요 시나리오 키워드 본문 포함 (회귀)', () => {
    render(<SyncHelpModal onClose={() => {}} />);
    expect(screen.getByText(/편집\/편집/)).toBeInTheDocument();
    expect(screen.getByText(/삭제\/편집/)).toBeInTheDocument();
    expect(screen.getByText(/AI 결과 충돌/)).toBeInTheDocument();
    expect(screen.getByText(/git@https:\/\//)).toBeInTheDocument();
  });
});