import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { flushPromises } from '@vue/test-utils'
import router from '@/router'
import { ApiError, NetworkError } from '@/composables/useApi'
import { useSessionStore } from '@/stores/session'
import { MOBILE_WIDTH } from '@/components/__tests__/viewport'
import {
	FakeXhr,
	MEGABYTE,
	announcer,
	bulkBar,
	callsTo,
	cards,
	chooseFiles,
	dragEvent,
	deferred,
	fileInput,
	fileWith,
	findButton,
	fixture,
	hexOf,
	inFlight,
	listBody,
	listCalls,
	mountPage,
	rowTexts,
	settle,
	stubDigest,
	stubXhr,
	tab,
	textOf,
	unmountPage,
	uploadPanel,
	uploadRows,
	xhrFor,
	type Handlers,
} from './mediaTestKit'

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

const toasts = vi.hoisted(() => ({ add: vi.fn(), remove: vi.fn() }))

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

const REJECTION_TEXT = 'Images can be up to 10 MB. Use a PNG, JPEG, WEBP or SVG image.'
const UNREADABLE_TEXT =
	"The server couldn't read this image. Save it again as a PNG or JPEG, then try again."
const FAILED_TEXT = "The server didn't accept the file. Nothing was added to your library."

function photo(name: string, size = 1000) {
	return fileWith(name, 'image/jpeg', size)
}

function hashLookups() {
	return callsTo('GET', /\?hash=/)
}

function hashHandlerFor(name: string, existing = [5, 6, 12]): Handlers['hash'] {
	return (path) =>
		path === `/v1/media/?hash=${hexOf(name)}` ? listBody(fixture(existing)) : listBody([])
}

function headerButton(label: string) {
	return findButton(label)
}

beforeEach(() => {
	toasts.add.mockClear()
	toasts.remove.mockClear()
	vi.spyOn(navigator, 'onLine', 'get').mockReturnValue(true)
	stubDigest()
	stubXhr()
})

afterEach(unmountPage)

describe('Upload entry points', () => {
	it.each([
		['at md width or more', 'Upload', 1440],
		['below md width', 'Upload', MOBILE_WIDTH],
	])(
		'the Default state loaded %s: "%s" opens the file chooser',
		async (_context, label, width) => {
			await mountPage({}, '/media', width)
			const click = vi.spyOn(HTMLInputElement.prototype, 'click')

			const buttons = Array.from(document.body.querySelectorAll('button')).filter(
				(button) => textOf(button) === label,
			)
			expect(buttons).toHaveLength(1)
			buttons[0]!.click()

			expect(click).toHaveBeenCalledTimes(1)
			expect(click.mock.contexts[0]).toBe(fileInput())
		},
	)

	it('and the library has no image: "Upload an image" opens the file chooser', async () => {
		await mountPage({ list: () => listBody([], { all: 0, unused: 0, duplicates: 0 }) })
		const click = vi.spyOn(HTMLInputElement.prototype, 'click')

		findButton('Upload an image')!.click()

		expect(click.mock.contexts[0]).toBe(fileInput())
	})

	it('the chooser accepts several files and offers the four image types', async () => {
		await mountPage()

		expect(fileInput().multiple).toBe(true)
		expect(fileInput().getAttribute('accept')).toBe(
			'image/png,image/jpeg,image/webp,image/svg+xml',
		)
	})
})

describe('Dropping files anywhere on the page', () => {
	it('shows the drop area while files are dragged over, then uploads the drop with no crop step', async () => {
		await mountPage()

		dragEvent('dragenter', ['Files'])
		await flushPromises()
		const area = document.body.querySelector('[data-testid="media-drop-area"]')!
		expect(textOf(area)).toBe('Drop images to upload PNG, JPEG, WEBP, SVG · max 10 MB each')
		expect(area.className).toContain('border-dashed')
		expect(area.className).toContain('border-primary')

		dragEvent('dragleave', ['Files'])
		await flushPromises()
		expect(document.body.querySelector('[data-testid="media-drop-area"]')).toBeNull()
		expect(FakeXhr.instances).toHaveLength(0)
		expect(uploadPanel()).toBeNull()

		dragEvent('dragenter', ['Files'])
		dragEvent('drop', ['Files'], [photo('a.jpg'), photo('b.jpg')])
		await settle()

		expect(document.body.querySelector('[data-testid="media-drop-area"]')).toBeNull()
		expect(FakeXhr.instances.map((xhr) => xhr.fileName)).toEqual(['a.jpg', 'b.jpg'])
		expect(document.body.querySelector('[role="dialog"]')).toBeNull()
	})

	it('hides the mobile pinned Upload button while the area shows', async () => {
		await mountPage({}, '/media', MOBILE_WIDTH)
		expect(headerButton('Upload')).toBeTruthy()

		dragEvent('dragenter', ['Files'])
		await flushPromises()
		expect(headerButton('Upload')).toBeUndefined()

		dragEvent('dragleave', ['Files'])
		await flushPromises()
		expect(headerButton('Upload')).toBeTruthy()
	})

	it('does nothing when something that is not a file is dragged over', async () => {
		await mountPage()

		const event = dragEvent('dragenter', ['text/plain'])
		await flushPromises()

		expect(event.defaultPrevented).toBe(false)
		expect(document.body.querySelector('[data-testid="media-drop-area"]')).toBeNull()
	})
})

describe('Browser checks, nothing is sent', () => {
	it.each([
		['scan.tif', 14.2 * MEGABYTE, 'image/tiff', 'scan.tif is 14.2 MB'],
		['notes.pdf', 210 * 1024, 'application/pdf', "notes.pdf isn't an image"],
		['photo.png', 10.1 * MEGABYTE, 'image/png', 'photo.png is 10.1 MB'],
		['fake.jpg', 40 * 1024, 'text/plain', "fake.jpg isn't an image"],
		['logo.gif', 40 * 1024, 'image/gif', "logo.gif isn't an image"],
		['pic.jpg', 40 * 1024, 'image/png', "pic.jpg isn't an image"],
	])('%s becomes a rejected row', async (name, size, mime, title) => {
		await mountPage()
		const digest = globalThis.crypto.subtle.digest

		await chooseFiles([fileWith(name, mime, size)])

		const [row] = uploadRows()
		expect(row!.getAttribute('data-status')).toBe('rejected')
		expect(textOf(row)).toContain(title)
		expect(textOf(row)).toContain(REJECTION_TEXT)
		await vi.waitFor(() => expect(row!.querySelector('svg.iconify--lucide')).toBeTruthy())
		expect(digest).not.toHaveBeenCalled()
		expect(hashLookups()).toHaveLength(0)
		expect(FakeXhr.instances).toHaveLength(0)
	})

	it('accepts exactly 10485760 bytes and rejects one byte more', async () => {
		await mountPage()

		await chooseFiles([
			fileWith('edge.png', 'image/png', 10485760),
			fileWith('over.png', 'image/png', 10485761),
		])

		expect(uploadRows().map((row) => row.getAttribute('data-status'))).toEqual([
			'uploading',
			'rejected',
		])
		expect(FakeXhr.instances.map((xhr) => xhr.fileName)).toEqual(['edge.png'])
	})

	it('checks the size before the type', async () => {
		await mountPage()

		await chooseFiles([fileWith('huge.tif', 'image/tiff', 11 * MEGABYTE)])

		expect(textOf(uploadRows()[0])).toContain('huge.tif is 11.0 MB')
	})

	it('leaves the panel with "Nothing was uploaded" when every file is rejected', async () => {
		await mountPage()

		await chooseFiles([
			fileWith('scan.tif', 'image/tiff', 14.2 * MEGABYTE),
			fileWith('notes.pdf', 'application/pdf', 210 * 1024),
			fileWith('broken.png', 'image/png', 3 * MEGABYTE),
		])
		xhrFor('broken.png').respond(400)
		await settle()

		const panel = uploadPanel()!
		expect(textOf(panel.querySelector('[data-testid="upload-title"]'))).toBe(
			'Nothing was uploaded',
		)
		expect(textOf(panel.querySelector('[data-testid="upload-sub"]'))).toBe(
			'3 files were rejected',
		)
		expect(findButton('Dismiss', panel)).toBeTruthy()
		expect(panel.querySelector('[data-testid="upload-summary"]')).toBeNull()
		const [scan, notes, broken] = rowTexts()
		expect(scan).toContain(`scan.tif is 14.2 MB ${REJECTION_TEXT}`)
		expect(notes).toContain(`notes.pdf isn't an image ${REJECTION_TEXT}`)
		expect(broken).toContain(`broken.png couldn't be read ${UNREADABLE_TEXT}`)
	})

	it('reads "2 files need attention" for a rejected and a failed file, with no summary', async () => {
		await mountPage()

		await chooseFiles([fileWith('scan.tif', 'image/tiff', 14.2 * MEGABYTE), photo('roof.jpg')])
		xhrFor('roof.jpg').respond(500)
		await settle()

		expect(textOf(uploadPanel()!.querySelector('[data-testid="upload-title"]'))).toBe(
			'Nothing was uploaded',
		)
		expect(textOf(uploadPanel()!.querySelector('[data-testid="upload-sub"]'))).toBe(
			'2 files need attention',
		)
		expect(uploadPanel()!.querySelector('[data-testid="upload-summary"]')).toBeNull()
	})
})

describe('The upload panel and its rows', () => {
	function sixImages() {
		return Array.from({ length: 6 }, (_, index) =>
			photo(`img-${index + 1}.jpg`, 2.6 * MEGABYTE),
		)
	}

	it('uploads two at a time, in order, with progress', async () => {
		await mountPage()

		await chooseFiles(sixImages())

		const panel = uploadPanel()!
		expect(textOf(panel.querySelector('[data-testid="upload-title"]'))).toBe(
			'Uploading 6 images',
		)
		expect(textOf(panel.querySelector('[data-testid="upload-sub"]'))).toBe('0 of 6 done')
		expect(findButton('Cancel all', panel)).toBeTruthy()
		expect(uploadRows().map((row) => row.getAttribute('data-status'))).toEqual([
			'uploading',
			'uploading',
			'waiting',
			'waiting',
			'waiting',
			'waiting',
		])
		expect(textOf(uploadRows()[2])).toContain('Waiting')
		expect(textOf(uploadRows()[2])).toContain('2.6 MB')
		expect(inFlight()).toHaveLength(2)

		xhrFor('img-1.jpg').progress(1.1 * MEGABYTE, 2.6 * MEGABYTE)
		await flushPromises()
		expect(textOf(uploadRows()[0])).toContain('Uploading 1.1 of 2.6 MB')
		expect(
			uploadRows()[0]!.querySelector('[role="progressbar"]')!.getAttribute('aria-valuenow'),
		).toBe('42')
		expect(
			uploadRows()[0]!.querySelector(`[aria-label="Cancel upload of img-1.jpg"]`),
		).toBeTruthy()

		xhrFor('img-1.jpg').respond(201)
		await settle()

		expect(textOf(uploadRows()[0])).toContain('Added to your library')
		await vi.waitFor(() =>
			expect(uploadRows()[0]!.querySelector('svg.iconify--lucide')).toBeTruthy(),
		)
		expect(textOf(panel.querySelector('[data-testid="upload-sub"]'))).toBe('1 of 6 done')
		expect(uploadRows()[2]!.getAttribute('data-status')).toBe('uploading')
		expect(FakeXhr.instances.map((xhr) => xhr.fileName)).toEqual([
			'img-1.jpg',
			'img-2.jpg',
			'img-3.jpg',
		])
		expect(inFlight()).toHaveLength(2)
		expect(FakeXhr.instances[0]!.url).toBe('/v1/media/')
		expect(FakeXhr.instances[0]!.method).toBe('POST')
		expect(FakeXhr.instances[0]!.withCredentials).toBe(true)
	})

	it('never has more than two requests in flight while draining the queue', async () => {
		await mountPage()
		await chooseFiles(sixImages())
		let peak = inFlight().length

		for (let guard = 0; guard < 6 && inFlight().length > 0; guard++) {
			inFlight()[0]!.respond(201)
			await settle()
			peak = Math.max(peak, inFlight().length)
		}

		expect(peak).toBe(2)
		expect(FakeXhr.instances).toHaveLength(6)
		expect(textOf(uploadPanel()!.querySelector('[data-testid="upload-title"]'))).toBe(
			'Upload finished',
		)
	})

	it('counts settled rows in the header', async () => {
		await mountPage({ hash: hashHandlerFor('dup.jpg') })

		await chooseFiles([
			photo('added.jpg'),
			photo('dup.jpg'),
			fileWith('rej.tif', 'image/tiff', 1000),
			photo('fail.jpg'),
			photo('up-1.jpg'),
			photo('up-2.jpg'),
		])
		xhrFor('added.jpg').respond(201)
		await settle()
		xhrFor('fail.jpg').respond(500)
		await settle()

		expect(uploadRows().map((row) => row.getAttribute('data-status'))).toEqual([
			'added',
			'duplicate',
			'rejected',
			'failed',
			'uploading',
			'uploading',
		])
		expect(textOf(uploadPanel()!.querySelector('[data-testid="upload-sub"]'))).toBe(
			'4 of 6 done',
		)
	})

	it('uses the singular for one image', async () => {
		await mountPage()

		await chooseFiles([photo('one.jpg')])

		expect(textOf(uploadPanel()!.querySelector('[data-testid="upload-title"]'))).toBe(
			'Uploading 1 image',
		)
	})

	it('appends files added while the panel is open', async () => {
		await mountPage()
		await chooseFiles([photo('a.jpg'), photo('b.jpg')])

		await chooseFiles([photo('c.jpg')])

		expect(uploadRows()).toHaveLength(3)
		expect(textOf(uploadPanel()!.querySelector('[data-testid="upload-title"]'))).toBe(
			'Uploading 3 images',
		)
		expect(textOf(uploadRows()[2])).toContain('c.jpg')
	})

	it('refreshes the list in the background after a 201', async () => {
		let calls = 0
		await mountPage({
			list: () =>
				++calls === 1
					? listBody(fixture())
					: listBody(fixture(), { all: 13, unused: 2, duplicates: 2 }),
		})
		expect(listCalls()).toHaveLength(1)

		await chooseFiles([photo('a.jpg')])
		xhrFor('a.jpg').respond(201)
		await settle()

		expect(listCalls()).toHaveLength(2)
		expect(document.body.querySelectorAll('[data-testid="media-skeleton-card"]')).toHaveLength(
			0,
		)
		expect(tab('All').textContent).toContain('13')
	})
})

describe('A row whose content already exists', () => {
	const existingText = 'Same as "floorboards.jpg", uploaded 14 Jun 2026 by Inès Duarte.'

	async function mountWithDuplicate(handlers: Handlers = {}) {
		await mountPage({ hash: hashHandlerFor('floorboards-2.jpg'), ...handlers })
		await chooseFiles([fileWith('floorboards-2.jpg', 'image/jpeg', 2.4 * MEGABYTE)])
	}

	it('looks up the hash before any POST and shows the duplicate row, naming the oldest match', async () => {
		await mountWithDuplicate()

		expect(hashLookups().map(([path]) => path)).toEqual([
			`/v1/media/?hash=${hexOf('floorboards-2.jpg')}`,
		])
		expect(FakeXhr.instances).toHaveLength(0)
		const row = uploadRows()[0]!
		expect(row.getAttribute('data-status')).toBe('duplicate')
		expect(textOf(row)).toContain('Already in your library')
		expect(textOf(row)).toContain(existingText)
		expect(findButton('Use existing', row)).toBeTruthy()
		expect(findButton('Upload anyway', row)).toBeTruthy()
	})

	it('hashes inside the concurrency slot while the row reads Waiting', async () => {
		const first = deferred<unknown>()
		const second = deferred<unknown>()
		const answers = [first, second]
		await mountPage({ hash: () => (answers.shift() ?? deferred<unknown>()).promise })

		await chooseFiles([photo('a.jpg'), photo('b.jpg'), photo('c.jpg')])

		expect(uploadRows().map((row) => row.getAttribute('data-status'))).toEqual([
			'waiting',
			'waiting',
			'waiting',
		])
		expect(hashLookups()).toHaveLength(2)
		expect(FakeXhr.instances).toHaveLength(0)

		first.resolve(listBody([]))
		await settle()

		expect(FakeXhr.instances.map((xhr) => xhr.fileName)).toEqual(['a.jpg'])
		expect(uploadRows()[0]!.getAttribute('data-status')).toBe('uploading')
		expect(hashLookups()).toHaveLength(2)

		xhrFor('a.jpg').respond(201)
		await settle()

		expect(hashLookups()).toHaveLength(3)
	})

	it('releases the concurrency slot so the next file starts', async () => {
		await mountPage({ hash: hashHandlerFor('dup.jpg') })

		await chooseFiles([photo('dup.jpg'), photo('b.jpg'), photo('c.jpg'), photo('d.jpg')])

		expect(uploadRows().map((row) => row.getAttribute('data-status'))).toEqual([
			'duplicate',
			'uploading',
			'uploading',
			'waiting',
		])
	})

	it('Use existing drops the row and selects the image', async () => {
		await mountWithDuplicate()

		findButton('Use existing')!.click()
		await settle()

		expect(uploadPanel()).toBeNull()
		expect(textOf(bulkBar())).toContain('1 selected')
		expect(announcer()).toBe('floorboards.jpg selected, 1 selected')
	})

	it('Use existing resets the search and the tab when the image is not loaded', async () => {
		await mountPage(
			{
				hash: hashHandlerFor('floorboards-2.jpg'),
				list: (path) =>
					path.includes('filter=unused')
						? listBody(fixture([8, 10]))
						: listBody(fixture()),
			},
			'/media?filter=unused',
		)
		await chooseFiles([fileWith('floorboards-2.jpg', 'image/jpeg', 2.4 * MEGABYTE)])

		findButton('Use existing')!.click()
		await settle()

		expect(router.currentRoute.value.query).toEqual({})
		expect(tab('All').getAttribute('aria-selected')).toBe('true')
		expect(textOf(bulkBar())).toContain('1 selected')
		expect(announcer()).toBe('floorboards.jpg selected, 1 selected')
	})

	it('Use existing drops the row without selecting when the image is still not loaded', async () => {
		await mountWithDuplicate({
			list: () => listBody(fixture().filter((item) => item.id !== 12)),
		})

		findButton('Use existing')!.click()
		await settle()

		expect(uploadPanel()).toBeNull()
		expect(bulkBar()).toBeNull()
	})

	it('Upload anyway stores a second copy and the Duplicates count follows', async () => {
		let calls = 0
		await mountWithDuplicate({
			list: () =>
				++calls === 1
					? listBody(fixture())
					: listBody(fixture(), { all: 13, unused: 2, duplicates: 3 }),
		})

		findButton('Upload anyway')!.click()
		await settle()

		expect(FakeXhr.instances.map((xhr) => xhr.fileName)).toEqual(['floorboards-2.jpg'])
		expect(hashLookups()).toHaveLength(1)
		expect(uploadRows()[0]!.getAttribute('data-status')).toBe('uploading')
		FakeXhr.instances[0]!.respond(201)
		await settle()

		expect(textOf(uploadRows()[0])).toContain('Added to your library')
		expect(tab('Duplicates').textContent).toContain('3')
	})

	it.each([
		[
			'crypto.subtle is undefined',
			() => vi.stubGlobal('crypto', { subtle: undefined }),
			undefined,
		],
		['the lookup fails with 500', () => undefined, () => Promise.reject(new ApiError(500))],
		[
			'the lookup never reaches the server',
			() => undefined,
			() => Promise.reject(new NetworkError()),
		],
	])('skips the duplicate check when %s', async (_name, prepare, hash) => {
		prepare()
		await mountPage({ hash })

		await chooseFiles([photo('a.jpg')])

		expect(FakeXhr.instances.map((xhr) => xhr.fileName)).toEqual(['a.jpg'])
		expect(uploadRows()[0]!.getAttribute('data-status')).toBe('uploading')
	})
})

describe('Server answers for an upload that passed the checks', () => {
	it.each([
		['roof.png', 1.4 * MEGABYTE, 201, 'Added to your library'],
		['scan.png', 9.9 * MEGABYTE, 413, `scan.png is 9.9 MB ${REJECTION_TEXT}`],
		['notes.png', 210 * 1024, 415, `notes.png isn't an image ${REJECTION_TEXT}`],
		['broken.png', 3 * MEGABYTE, 400, `broken.png couldn't be read ${UNREADABLE_TEXT}`],
		['roof.png', 1.4 * MEGABYTE, 500, `Upload failed ${FAILED_TEXT} Try again`],
		['roof.png', 1.4 * MEGABYTE, 0, `Upload failed ${FAILED_TEXT} Try again`],
	])('%s of %i bytes resolving %i reads the right row', async (name, size, status, text) => {
		await mountPage()
		await chooseFiles([fileWith(name, 'image/png', size)])

		if (status === 0) {
			FakeXhr.instances[0]!.fail()
		} else {
			FakeXhr.instances[0]!.respond(status)
		}
		await settle()

		const row = uploadRows()[0]!
		expect(textOf(row)).toContain(text)
		await vi.waitFor(() => expect(row.querySelector('svg.iconify--lucide')).toBeTruthy())
	})

	it('Try again retries one file with no new duplicate lookup', async () => {
		await mountPage()
		await chooseFiles([photo('roof.jpg'), photo('other.jpg')])
		xhrFor('roof.jpg').respond(500)
		await settle()
		expect(hashLookups()).toHaveLength(2)

		findButton('Try again')!.click()
		await settle()

		expect(FakeXhr.instances.map((xhr) => xhr.fileName)).toEqual([
			'roof.jpg',
			'other.jpg',
			'roof.jpg',
		])
		expect(hashLookups()).toHaveLength(2)
		expect(uploadRows()[0]!.getAttribute('data-status')).toBe('uploading')
	})
})

describe('Cancelling one upload or all of them', () => {
	it('the row x aborts that request, removes the row and starts the next waiting file', async () => {
		await mountPage()
		await chooseFiles([photo('a.jpg'), photo('b.jpg'), photo('c.jpg')])

		document.body
			.querySelector<HTMLButtonElement>('[aria-label="Cancel upload of a.jpg"]')!
			.click()
		await settle()

		expect(xhrFor('a.jpg').aborted).toBe(true)
		expect(uploadRows().map((row) => textOf(row).split(' ')[0])).toEqual(['b.jpg', 'c.jpg'])
		expect(inFlight().map((xhr) => xhr.fileName)).toEqual(['b.jpg', 'c.jpg'])
	})

	it('Cancel all aborts what is in flight, removes waiting rows and keeps settled ones', async () => {
		await mountPage()
		await chooseFiles([
			photo('a.jpg'),
			photo('b.jpg'),
			photo('c.jpg'),
			fileWith('bad.tif', 'image/tiff', 10),
		])
		xhrFor('a.jpg').respond(201)
		await settle()

		findButton('Cancel all')!.click()
		await settle()

		expect(xhrFor('b.jpg').aborted).toBe(true)
		expect(xhrFor('c.jpg').aborted).toBe(true)
		expect(uploadRows().map((row) => row.getAttribute('data-status'))).toEqual([
			'added',
			'rejected',
		])
	})

	it('closes the panel when no row is left', async () => {
		await mountPage()
		await chooseFiles([photo('a.jpg'), photo('b.jpg'), photo('c.jpg')])

		findButton('Cancel all')!.click()
		await settle()

		expect(uploadPanel()).toBeNull()
		expect(FakeXhr.instances.every((xhr) => xhr.aborted)).toBe(true)
	})
})

describe('The panel settles with a summary', () => {
	it('settles with the counts, announces the summary and Dismiss removes every row', async () => {
		await mountPage({ hash: hashHandlerFor('dup.jpg') })
		await chooseFiles([
			photo('one.jpg'),
			photo('two.jpg'),
			photo('dup.jpg'),
			fileWith('scan.tif', 'image/tiff', 14.2 * MEGABYTE),
			photo('roof.jpg'),
		])
		xhrFor('one.jpg').respond(201)
		xhrFor('two.jpg').respond(201)
		await settle()
		xhrFor('roof.jpg').respond(500)
		await settle()

		const panel = uploadPanel()!
		expect(textOf(panel.querySelector('[data-testid="upload-title"]'))).toBe('Upload finished')
		expect(textOf(panel.querySelector('[data-testid="upload-sub"]'))).toBe('5 images')
		expect(findButton('Dismiss', panel)).toBeTruthy()
		expect(findButton('Cancel all', panel)).toBeUndefined()
		expect(textOf(panel.querySelector('[data-testid="upload-summary"]'))).toBe(
			'2 uploaded · 1 already in your library · 2 need attention',
		)
		expect(announcer()).toBe('2 uploaded · 1 already in your library · 2 need attention')

		findButton('Dismiss', panel)!.click()
		await flushPromises()

		expect(uploadPanel()).toBeNull()
		expect(uploadRows()).toHaveLength(0)
	})
})

describe('Too many uploads (429)', () => {
	async function rateLimit(retryAfter?: string, width = 1440) {
		vi.useFakeTimers({ toFake: ['setInterval', 'clearInterval'] })
		await mountPage({}, '/media', width)
		await chooseFiles([photo('a.jpg'), photo('b.jpg'), photo('c.jpg'), photo('d.jpg')])
		xhrFor('a.jpg').respond(429, retryAfter === undefined ? {} : { 'Retry-After': retryAfter })
		await settle()
	}

	it('shows the alert, counts down in a disabled button and pauses the queue', async () => {
		await rateLimit('42')

		const alert = Array.from(document.body.querySelectorAll('[role="status"]')).find(
			(element) => textOf(element).includes('Too many uploads'),
		)
		expect(textOf(alert)).toBe(
			'Too many uploads For your security, wait a moment before uploading again.',
		)
		const button = findButton('Try again in 0:42')!
		expect(button.disabled).toBe(true)
		await vi.waitFor(() => expect(button.querySelector('svg.iconify--lucide')).toBeTruthy())
		expect(findButton('Upload')).toBeUndefined()
		expect(uploadRows()[0]!.getAttribute('data-status')).toBe('waiting')
		expect(inFlight().map((xhr) => xhr.fileName)).toEqual(['b.jpg'])
		expect(FakeXhr.instances).toHaveLength(2)
	})

	it('resumes by itself when the countdown reaches 0:00, keeping Added rows', async () => {
		await rateLimit('42')
		xhrFor('b.jpg').respond(201)
		await settle()
		expect(FakeXhr.instances).toHaveLength(2)

		vi.advanceTimersByTime(1000)
		await flushPromises()
		expect(findButton('Try again in 0:41')).toBeTruthy()
		vi.advanceTimersByTime(41000)
		await settle()

		expect(document.body.textContent).not.toContain('Too many uploads')
		expect(findButton('Upload')!.disabled).toBe(false)
		expect(uploadRows()[1]!.getAttribute('data-status')).toBe('added')
		expect(FakeXhr.instances.map((xhr) => xhr.fileName)).toEqual([
			'a.jpg',
			'b.jpg',
			'a.jpg',
			'c.jpg',
		])
	})

	it('counts 60 seconds when Retry-After is missing or unreadable', async () => {
		await rateLimit(undefined)
		expect(findButton('Try again in 1:00')).toBeTruthy()
	})

	it('disables the mobile pinned button too', async () => {
		await rateLimit('42', MOBILE_WIDTH)

		const pinned = findButton('Try again in 0:42')!
		expect(pinned.disabled).toBe(true)
		expect(pinned.className).toContain('h-12')
	})

	it('ignores drops and the drop area while counting', async () => {
		await rateLimit('42')
		const before = FakeXhr.instances.length

		dragEvent('dragenter', ['Files'])
		await flushPromises()
		expect(document.body.querySelector('[data-testid="media-drop-area"]')).toBeNull()
		dragEvent('drop', ['Files'], [photo('z.jpg')])
		await settle()

		expect(FakeXhr.instances).toHaveLength(before)
		expect(uploadRows()).toHaveLength(4)
	})
})

describe('Offline', () => {
	async function goOffline() {
		vi.spyOn(navigator, 'onLine', 'get').mockReturnValue(false)
		window.dispatchEvent(new Event('offline'))
		await flushPromises()
	}

	it('disables the Upload controls and ignores drops, then enables them again', async () => {
		await mountPage()

		await goOffline()

		expect(document.body.textContent).toContain("You're offline.")
		expect(findButton('Upload')!.disabled).toBe(true)
		dragEvent('dragenter', ['Files'])
		await flushPromises()
		expect(document.body.querySelector('[data-testid="media-drop-area"]')).toBeNull()
		dragEvent('drop', ['Files'], [photo('z.jpg')])
		await settle()
		expect(FakeXhr.instances).toHaveLength(0)
		expect(cards()).toHaveLength(12)

		vi.spyOn(navigator, 'onLine', 'get').mockReturnValue(true)
		window.dispatchEvent(new Event('online'))
		await flushPromises()
		expect(findButton('Upload')!.disabled).toBe(false)
	})

	it('disables the mobile pinned button and "Upload an image"', async () => {
		await mountPage({}, '/media', MOBILE_WIDTH)
		await goOffline()
		expect(findButton('Upload')!.disabled).toBe(true)
		await unmountPage()
		stubDigest()
		stubXhr()

		await mountPage({ list: () => listBody([], { all: 0, unused: 0, duplicates: 0 }) })
		await goOffline()
		expect(findButton('Upload an image')!.disabled).toBe(true)
	})
})

describe('Session errors on the upload calls are global', () => {
	it.each([
		[401, '/login', { redirect: '/media', reason: 'expired' }],
		[403, '/register/pending', {}],
	])(
		'an XHR upload resolving %i sends the user to %s with no local copy',
		async (status, path, query) => {
			await mountPage()
			useSessionStore().session = {
				verified: false,
				username: 'marta',
				id: 1,
				displayName: '',
				role: 'owner',
			}
			await chooseFiles([photo('a.jpg')])

			FakeXhr.instances[0]!.respond(status)
			await vi.waitFor(() => expect(router.currentRoute.value.path).toBe(path))
			await settle()

			expect(router.currentRoute.value.path).toBe(path)
			expect(router.currentRoute.value.query).toEqual(query)
			expect(document.body.textContent).not.toContain('Upload failed')
			expect(toasts.add).not.toHaveBeenCalled()
		},
	)
})