import React from 'react';
import { describe, expect, it, vi } from 'vitest';
import { render, screen, waitFor } from '@testing-library/react';
import { MemoryRouter, Route, Routes } from 'react-router-dom';
import HelpArticlePage from '../HelpArticlePage';
import type { HelpArticleDetail } from '../../services/helpApi';

vi.mock('../../i18n/LocaleContext', () => ({
  useLocale: () => ({ locale: 'de' }),
}));

vi.mock('../../i18n/useTranslation', () => ({
  useTranslation: () => ({
    t: (key: string) => key,
  }),
}));

vi.mock('../../services/helpApi', () => ({
  getHelpArticle: vi.fn(),
}));

const { getHelpArticle } = await import('../../services/helpApi');

describe('HelpArticlePage', () => {
  it('renders a single back button after loading', async () => {
    const article: HelpArticleDetail = {
      slug: 'gallery-and-sharing',
      title: 'Galerie & Teilen',
      summary: 'Kurzfassung',
      body_html: '<p>Inhalt</p>',
    };

    (getHelpArticle as ReturnType<typeof vi.fn>).mockResolvedValue({ article, servedFromCache: false });

    render(
      <MemoryRouter initialEntries={['/e/demo/help/gallery-and-sharing']}>
        <Routes>
          <Route path="/e/:token/help/:slug" element={<HelpArticlePage />} />
        </Routes>
      </MemoryRouter>,
    );

    await waitFor(() => {
      expect(screen.getByText('Galerie & Teilen')).toBeInTheDocument();
    });

    expect(screen.getAllByText('help.article.back')).toHaveLength(1);
  });
});