import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { flushPromises } from '@vue/test-utils'
import { initializeLocale, setLocale } from '@/i18n'
import { click, textOf, unmountMeta } from './metaTestKit'
import {
	FOUR_SUGGESTIONS,
	answerChecks,
	checkAnswer,
	mountSeo,
	openPanel,
	openSection,
	panelRoot,
	seoBackend,
} from './seoTestKit'

vi.mock('@/composables/useApi', async (importOriginal) => {
	const actual = await importOriginal<typeof import('@/composables/useApi')>()
	return { ...actual, useApi: vi.fn() }
})

beforeEach(() => {
	localStorage.clear()
	sessionStorage.clear()
	setLocale('fr')
})

afterEach(async () => {
	await unmountMeta()
	localStorage.clear()
	initializeLocale()
})

describe('French', () => {
	it('walks through the section, the panel and the dialog in French', async () => {
		const backend = seoBackend()
		answerChecks(backend, checkAnswer(FOUR_SUGGESTIONS))
		backend.responders['GET /v1/article/12/seo'] = () => ({
			title: 'T',
			description: 'D',
			canonical_url: 'https://renew.example/x',
			robots: 'index, follow',
			og: { type: 'article', image: '', image_alt: '' },
			twitter: { card: 'summary' },
			image: { url: '', alt: '', source: 'none' },
			authors: [],
			published_at: null,
			modified_at: '2026-09-26T11:02:00Z',
			fallbacks: { title: 'title', description: 'body', image: 'none', canonical: 'site' },
			json_ld: { '@type': 'Article' },
		})
		await mountSeo(backend)
		expect(document.body.querySelector('[data-testid="seo-summary"]')!.textContent).toBe(
			'4 suggestions',
		)

		const body = await openSection()
		const section = textOf(body)
		expect(section).toContain('Adresse')
		expect(section).toContain(
			'Le titre meta fait 74 caractères. Les moteurs de recherche peuvent le couper après environ 60.',
		)
		expect(section).toContain('Aller au titre meta')
		expect(section).toContain('+1 de plus dans Recherche et partage')
		expect(section).toContain('Modifier la recherche et le partage')

		const panel = await openPanel()
		const panelContent = textOf(panel)
		expect(panelContent).toContain('Recherche et partage')
		expect(panelContent).toContain('Slug de l’URL')
		expect(panelContent).toContain('Titre de l’article utilisé')
		expect(panelContent).toContain('Partage social')
		expect(panelContent).toContain('Avancé')
		expect(panelContent).toContain('Masquer des moteurs de recherche')
		expect(panelContent).toContain('Résultat de recherche')
		expect(panelContent).toContain('Carte sociale')
		expect(panelContent).toContain('Enregistrer les modifications')
		await click('Annuler', panel)
		await new Promise((resolve) => setTimeout(resolve, 50))
		await flushPromises()
		expect(panelRoot()).toBeNull()

		await click('Ce que reçoit le frontend')
		await flushPromises()
		const dialog = textOf(document.body.querySelector('[data-testid="api-preview"]'))
		expect(dialog).toContain('Formaté')
		expect(dialog).toContain('JSON brut')
		expect(dialog).toContain('Copier le JSON')
	})
})