import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { vi, test, expect } from 'vitest';
import VerseSheet from './VerseSheet.jsx';

vi.mock('../StudyPanel.jsx', () => ({ CommentaryTab: () => null, PeoplePlacesTab: () => null }));

const base = {
  verse: { number: 1, text: 'Paul, a servant of God.' }, book: 'TIT', bookName: 'Titus', chapter: 1, translation: 'BSB',
  onToggleBookmark: () => {}, onCycleColor: () => {}, onJump: () => {}, onClose: () => {}, onLoadCrossRefs: () => {},
};
const here = [{ projectId: 'p1', chunkId: 'a', title: 'Titus Notes', ref: 'Titus 1:1–4', snippet: 'Paul calls himself a servant' }];

test('the verse panel lists your studies that cover the verse, and opens one at that chunk', async () => {
  const onOpenStudy = vi.fn();
  render(<VerseSheet {...base} studiesHere={here} onOpenStudy={onOpenStudy} />);
  expect(screen.getByText('You’ve studied this')).toBeInTheDocument();
  expect(screen.getByText('Titus Notes')).toBeInTheDocument();
  expect(screen.getByText('Paul calls himself a servant')).toBeInTheDocument();
  await userEvent.setup().click(screen.getByRole('button', { name: 'Open' }));
  expect(onOpenStudy).toHaveBeenCalledWith('p1', 'a');
});

test('nothing is shown when no study covers the verse', () => {
  render(<VerseSheet {...base} studiesHere={[]} onOpenStudy={() => {}} />);
  expect(screen.queryByText('You’ve studied this')).toBeNull();
});

test('your notes on the verse show up in the panel and can be added', async () => {
  const onSetBookmarkNote = vi.fn();
  const onSetHighlightNote = vi.fn();
  const user = userEvent.setup();
  render(<VerseSheet {...base} bookmarkColor="#fef08a" bookmarkNote="Memorise" onSetBookmarkNote={onSetBookmarkNote}
    verseHighlights={[{ id: 'h1', color: '#bbf7d0', startOffset: 0, endOffset: 4, text: 'Paul' }]} onSetHighlightNote={onSetHighlightNote} />);
  expect(screen.getByText('Memorise')).toBeInTheDocument();
  expect(screen.getByText('“Paul”')).toBeInTheDocument();
  await user.click(screen.getByRole('button', { name: /add highlight note/i }));
  await user.type(screen.getByLabelText('Your highlight note'), 'Who he is');
  await user.click(screen.getByRole('button', { name: 'Save' }));
  expect(onSetHighlightNote).toHaveBeenCalledWith('h1', 'Who he is');
});