import { render, screen, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { vi, test, expect, beforeEach } from 'vitest';
import { AppContext } from '../context/AppContext.js';
import ScriptureRefs from './ScriptureRefs.jsx';

const jump = vi.fn();
const open = vi.fn();
beforeEach(() => {
  jump.mockClear(); open.mockClear();
  vi.stubGlobal('fetch', vi.fn(async () => ({
    ok: true, status: 200,
    json: async () => ({ book: { numberOfChapters: 16 }, verses: [28, 29, 30].map((n) => ({ number: n, text: `Verse ${n} text.` })) }),
  })));
});
const setup = (text) => render(<AppContext.Provider value={{ jumpToReaderVerse: jump, openBibleReader: open }}><ScriptureRefs text={text} /></AppContext.Provider>);

test('references in a note become chips, and a note with none shows nothing', () => {
  const { container } = setup('Nothing to see here.');
  expect(container).toBeEmptyDOMElement();
});

test('clicking a reference shows the verse, and "Read in the Bible" opens the reader there', async () => {
  const user = userEvent.setup();
  setup('God works all things together, Rom 8:28-29. See also Romans 8:28.');
  expect(screen.getAllByRole('button', { name: /Romans 8/ })).toHaveLength(2); // 8:28–29 and 8:28 are different references
  await user.click(screen.getByRole('button', { name: 'Romans 8:28–29' }));
  const preview = await screen.findByRole('region', { name: /Romans 8:28–29 preview/ });
  expect(await within(preview).findByText('Verse 28 text.')).toBeInTheDocument();
  expect(within(preview).getByText('Verse 29 text.')).toBeInTheDocument();
  expect(within(preview).queryByText('Verse 30 text.')).not.toBeInTheDocument();
  await user.click(within(preview).getByRole('button', { name: 'Read in the Bible' }));
  expect(jump).toHaveBeenCalledWith('ROM', 8, 28);
  expect(open).toHaveBeenCalled();
  await user.click(screen.getByRole('button', { name: 'Romans 8:28–29' }));
  expect(screen.queryByRole('region')).not.toBeInTheDocument();
});

test('a failure to load the verse still leaves the link to the Bible', async () => {
  vi.stubGlobal('fetch', vi.fn(async () => { throw new Error('offline'); }));
  const user = userEvent.setup();
  setup('Psalm 23:1');
  await user.click(screen.getByRole('button', { name: 'Psalms 23:1' }));
  const preview = await screen.findByRole('region');
  expect(await within(preview).findByText(/You can still open it in the Bible/)).toBeInTheDocument();
  expect(within(preview).getByRole('button', { name: 'Read in the Bible' })).toBeInTheDocument();
});