import { afterEach, describe, expect, it, vi } from 'vitest'
import router from '@/router'
import { flushPromises } from '@vue/test-utils'
import {
	MOBILE_WIDTH,
	arrived,
	button,
	calls,
	chip,
	control,
	customTypes,
	entry42,
	entryWith,
	eventsFields,
	failWith,
	failWithBody,
	fieldWrapper,
	hasText,
	setField,
	typeInto,
	main,
	mountEditor,
	networkFailure,
	pending,
	text,
	unmountAll,
} from './entryEditorKit'

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

afterEach(unmountAll)

function entryRequests() {
	return calls.filter((url) => /\/entry\/\d+$/.test(url))
}

describe('1 New entry', () => {
	it('shows the title, the subtitle, the chip and the actions', async () => {
		await mountEditor('/content/events/new')

		expect(text(main())).toContain('New entry Events · Fields marked * are required.')
		expect(text(chip())).toBe('New entry')
		expect(button('Cancel')).toBeTruthy()
		expect(button('Save')!.disabled).toBe(false)
		expect(button('Delete')).toBeUndefined()
		expect(entryRequests()).toEqual([])
	})

	it('marks required labels and shows helps, placeholders and defaults', async () => {
		await mountEditor('/content/events/new')

		expect(text(fieldWrapper('title'))).toContain('Title *')
		expect(text(fieldWrapper('starts_on'))).toContain('Starts on *')
		expect(text(fieldWrapper('ends_on'))).not.toContain('*')
		expect(text(fieldWrapper('title'))).toContain('Each entry needs a different title.')
		expect(text(fieldWrapper('capacity'))).toContain('Between 1 and 5000.')
		expect(control('capacity').getAttribute('placeholder')).toBe('Enter a number')
		expect(text(fieldWrapper('category'))).toContain('Choose an option')
		expect(text(fieldWrapper('starts_on'))).toContain('Pick a date')
		expect(text(fieldWrapper('online'))).toContain('Off')
		expect(text(fieldWrapper('online'))).toContain('Default')
		expect(text(fieldWrapper('title'))).not.toContain('Default')
	})

	it('shows the footer of an unsaved entry', async () => {
		await mountEditor('/content/events/new')

		expect(text(document.body.querySelector('[data-testid="entry-meta"]'))).toBe(
			'Entry Not saved yet Created by – Updated by –',
		)
	})

	it('reads Content, Events and New entry in the breadcrumb', async () => {
		await mountEditor('/content/events/new')

		expect(text(document.body.querySelector('nav[aria-label="breadcrumb"]'))).toBe(
			'Content Events New entry',
		)
	})

	it('has no required marker for assistive technology', async () => {
		await mountEditor('/content/events/new')

		const star = fieldWrapper('title').querySelector('[aria-hidden="true"]')
		expect(star?.textContent?.trim()).toBe('*')
		expect(control('title').getAttribute('aria-required')).toBe('true')
	})
})

describe('2 Editing', () => {
	it('shows the entry, the chip, the actions and the footer', async () => {
		await mountEditor('/content/events/42')

		expect(text(main())).toContain('Lime plaster workshop Events · Entry 42')
		expect(text(document.body.querySelector('nav[aria-label="breadcrumb"]'))).toBe(
			'Content Events Lime plaster workshop',
		)
		expect(text(chip())).toBe('Saved')
		expect(button('Delete')).toBeTruthy()
		expect(button('Save')!.disabled).toBe(true)
		expect(control('title').value).toBe('Lime plaster workshop')
		expect(control('capacity').value).toBe('18')
		expect(text(fieldWrapper('online'))).not.toContain('Default')
		expect(text(document.body.querySelector('[data-testid="entry-meta"]'))).toBe(
			'Entry events / 42 Created by Inès Duarte · 12 Oct 2026, 09:14 Updated by Marta Alves · 15 Oct 2026, 11:02',
		)
	})

	it('sends the entry request with the type request and the lookup once', async () => {
		await mountEditor('/content/events/42')

		expect(calls).toContain('/v1/content-type/events')
		expect(calls).toContain('/v1/content-type/events/entry/42')
		expect(calls.filter((url) => url.startsWith('/v1/user/lookup'))).toEqual([
			'/v1/user/lookup?ids=4,3',
		])
	})

	it('reads a dash and keeps the date when the lookup fails or lacks an id', async () => {
		await mountEditor('/content/events/42', {
			lookup: () => [{ id: 3, display_name: 'Marta Alves' }],
		})

		expect(text(document.body.querySelector('[data-testid="entry-meta"]'))).toContain(
			'Created by – · 12 Oct 2026, 09:14 Updated by Marta Alves · 15 Oct 2026, 11:02',
		)
	})

	it('reads dashes when the lookup fails', async () => {
		await mountEditor('/content/events/42', { lookup: failWith(500) })

		expect(text(document.body.querySelector('[data-testid="entry-meta"]'))).toContain(
			'Updated by – · 15 Oct 2026, 11:02',
		)
	})

	it('shows a trash action on mobile and no Delete button', async () => {
		await mountEditor('/content/events/42', { width: MOBILE_WIDTH })

		expect(button('Delete')).toBeUndefined()
		expect(document.body.querySelector('button[aria-label="Delete"]')).toBeTruthy()
		expect(button('Cancel')).toBeTruthy()
		expect(button('Save')!.disabled).toBe(true)
	})

	it('shows the new entry layout on mobile without an action', async () => {
		await mountEditor('/content/events/new', { width: MOBILE_WIDTH })

		expect(document.body.querySelector('button[aria-label="Delete"]')).toBeNull()
		expect(button('Cancel')).toBeTruthy()
		expect(text(chip())).toBe('New entry')
	})
})

describe('The page title', () => {
	it.each([
		['text', { title: 'Lime plaster workshop' }, 'Lime plaster workshop'],
		['null', { title: null }, 'Entry 42'],
		['number', { title: 18 }, '18'],
	])('reads %s', async (_name, data, title) => {
		await mountEditor('/content/events/42', { entry: () => entryWith(data) })

		expect(text(main().querySelector('h1'))).toBe(title)
	})

	it('reads the first line of rich text', async () => {
		const types = customTypes.map((type) =>
			type.key === 'events'
				? { ...type, fields: [{ ...eventsFields[6]!, key: 'body', label: 'Body' }] }
				: type,
		)
		await mountEditor('/content/events/42', {
			type: () => types[0],
			entry: () => entryWith({ body: 'First line\n\nSecond' }),
		})

		expect(text(main().querySelector('h1'))).toBe('First line')
	})
})

describe('Defaults', () => {
	it.each([
		['Capacity', 'capacity', { default: 100 }, '100'],
		['Title', 'title', { default: 'Untitled' }, 'Untitled'],
	])('pre-fills and tags %s', async (_label, key, rest, shown) => {
		const fields = eventsFields.map((field) =>
			field.key === key ? { ...field, ...rest } : field,
		)
		await mountEditor('/content/events/new', {
			type: () => ({ ...customTypes[0]!, fields }),
		})

		expect(control(key).value).toBe(shown)
		expect(text(fieldWrapper(key))).toContain('Default')
	})
})

describe('Create-only defaults', () => {
	const withDefaults = eventsFields.map((field) =>
		field.key === 'capacity'
			? { ...field, default: 100 }
			: field.key === 'title'
				? { ...field, default: 'Untitled' }
				: field,
	)
	const type = () => ({ ...customTypes[0]!, fields: withDefaults })

	it('pre-fills and tags every default on a new entry', async () => {
		await mountEditor('/content/events/new', { type })

		expect(control('capacity').value).toBe('100')
		expect(control('title').value).toBe('Untitled')
		expect(text(fieldWrapper('capacity'))).toContain('Default')
		expect(text(fieldWrapper('title'))).toContain('Default')
	})

	it('never pre-fills or tags a default on an existing entry', async () => {
		await mountEditor('/content/events/42', {
			type,
			entry: () => entryWith({ capacity: null, title: 'Stored' }),
		})

		expect(control('capacity').value).toBe('')
		expect(control('title').value).toBe('Stored')
		expect(text(main())).not.toContain('Default')
	})
})

describe('Session not ready', () => {
	it('shows the shell and issues no request', async () => {
		await mountEditor('/content/events/42', { status: 'checking' })

		expect(calls.filter((url) => url.includes('/entry') || url.includes('lookup'))).toEqual([])
		expect(document.body.querySelector('[data-entry-field]')).toBeNull()
	})
})

describe('Navigating between entries', () => {
	const entry = (_key: string, id: number) =>
		entryWith({ title: `Entry title ${id}`, capacity: id }, { id })

	it('carries no value, error or chip from /42 to /43', async () => {
		const wrapper = await mountEditor('/content/events/42', {
			entry,
			writeEntry: failWith(500),
		})
		await setField(wrapper, 'capacity', 20)
		document.body.querySelector<HTMLButtonElement>('button[type="submit"]')!.click()
		await flushPromises()
		await setField(wrapper, 'capacity', 42)
		expect(hasText("Couldn't save the entry")).toBe(true)

		await router.push('/content/events/43')
		await flushPromises()

		expect(control('title').value).toBe('Entry title 43')
		expect(control('capacity').value).toBe('43')
		expect(hasText("Couldn't save the entry")).toBe(false)
		expect(text(chip())).toBe('Saved')
		expect(text(main().querySelector('h1'))).toBe('Entry title 43')
	})

	it('carries nothing from an entry to another type new form', async () => {
		await mountEditor('/content/events/42', { entry })
		await typeInto('title', 'Typed here')

		void router.push('/content/recipes/new')
		await vi.waitFor(() => expect(hasText('Leave without saving?')).toBe(true))
		button('Discard changes')!.click()
		await arrived('/content/recipes/new')
		await flushPromises()

		expect(control('title').value).toBe('')
		expect(text(chip())).toBe('New entry')
		expect(text(main().querySelector('h1'))).toBe('New entry')
		expect(hasText('Typed here')).toBe(false)
	})
})

describe('Entry not found and load failures', () => {
	it.each(['abc', '4294967296', '-1'])(
		'shows Entry not found for /content/events/%s with no entry request',
		async (id) => {
			await mountEditor(`/content/events/${id}`)

			expect(text(main())).toContain('Entry not found')
			expect(text(main())).toContain('It may have been deleted by someone else.')
			expect(entryRequests()).toEqual([])
			expect(button('Back to Events')).toBeTruthy()
		},
	)

	it('sends id 0 as is and shows Entry not found when the API answers 404', async () => {
		await mountEditor('/content/events/0', { entry: failWithBody(404, 'entry_not_found') })

		expect(entryRequests()).toEqual(['/v1/content-type/events/entry/0'])
		expect(text(main())).toContain('Entry not found')
	})

	it('shows Entry not found on 404 entry_not_found and goes back to the list', async () => {
		await mountEditor('/content/events/999', { entry: failWithBody(404, 'entry_not_found') })

		expect(text(main())).toContain('Entry not found')
		button('Back to Events')!.click()
		await arrived('/content/events')
	})

	it('shows the content type page on 404 content_type_not_found', async () => {
		await mountEditor('/content/events/42', {
			type: failWithBody(404, 'content_type_not_found'),
			entry: failWithBody(404, 'content_type_not_found'),
		})

		expect(text(main())).toContain('Content type not found')
	})

	it('shows the access page on 403', async () => {
		await mountEditor('/content/events/42', { entry: failWith(403) })

		expect(text(main())).toContain("You don't have access to Events")
	})

	it.each([
		['500', failWith(500)],
		['a network failure', networkFailure],
	])('shows the load error on %s and retries only the entry', async (_name, failure) => {
		let attempts = 0
		await mountEditor('/content/events/42', {
			entry: () => {
				attempts++
				if (attempts === 1) {
					return failure()
				}
				return entry42
			},
		})

		expect(text(main())).toContain("Couldn't load the entry")
		expect(text(main())).toContain(
			'GET /v1/content-type/events/entry/42 failed. Check your connection and try again.',
		)
		expect(document.body.querySelector('form')).toBeNull()
		const typeRequests = calls.filter((url) => url === '/v1/content-type/events').length

		button('Try again')!.click()
		await vi.waitFor(() => expect(control('title').value).toBe('Lime plaster workshop'))

		expect(calls.filter((url) => url === '/v1/content-type/events').length).toBe(typeRequests)
	})

	it('shows a skeleton with aria-busy while loading', async () => {
		const gate = pending()
		await mountEditor('/content/events/42', { entry: () => gate.promise })

		const skeleton = document.body.querySelector('[data-testid="entry-editor-skeleton"]')
		expect(skeleton?.getAttribute('aria-busy')).toBe('true')
		expect(button('Save')).toBeUndefined()
		expect(button('Delete')).toBeUndefined()
	})
})