import { afterEach, describe, expect, it, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import uiPlugin from '@nuxt/ui/vue-plugin'
import SaveStatus from '../SaveStatus.vue'

afterEach(() => {
	vi.useRealTimers()
})

describe('Saved within the hour', () => {
	it('reads "Saved at HH:MM"', () => {
		vi.useFakeTimers()
		vi.setSystemTime(new Date('2026-09-26T11:10:00Z'))
		const wrapper = mount(SaveStatus, {
			props: {
				state: 'saved',
				savedAt: new Date('2026-09-26T11:02:00Z'),
			},
			global: { plugins: [uiPlugin] },
		})

		expect(wrapper.text()).toContain('Saved at 11:02')
	})
})

describe('Saved over an hour ago', () => {
	it.each([
		['2026-09-26T12:02:00Z', 'Saved 1 h ago'],
		['2026-09-26T12:32:00Z', 'Saved 1 h ago'],
		['2026-09-26T23:02:00Z', 'Saved 12 h ago'],
		['2026-09-27T11:02:00Z', 'Saved 1 d ago'],
		['2026-09-29T15:00:00Z', 'Saved 3 d ago'],
	])('at %s reads "%s"', (now, expected) => {
		vi.useFakeTimers()
		vi.setSystemTime(new Date(now))
		const wrapper = mount(SaveStatus, {
			props: {
				state: 'saved',
				savedAt: new Date('2026-09-26T11:02:00Z'),
			},
			global: { plugins: [uiPlugin] },
		})

		expect(wrapper.text()).toContain(expected)
	})
})

describe('Dirty', () => {
	it('reads "Unsaved changes"', () => {
		const wrapper = mount(SaveStatus, {
			props: { state: 'dirty' },
			global: { plugins: [uiPlugin] },
		})

		expect(wrapper.text()).toContain('Unsaved changes')
	})
})

describe('Saving', () => {
	it('reads "Saving…"', () => {
		const wrapper = mount(SaveStatus, {
			props: { state: 'saving' },
			global: { plugins: [uiPlugin] },
		})

		expect(wrapper.text()).toContain('Saving…')
	})
})

describe('Error', () => {
	it('reads "Save failed" and emits retry from the Retry button', async () => {
		const wrapper = mount(SaveStatus, {
			props: { state: 'error' },
			global: { plugins: [uiPlugin] },
		})

		expect(wrapper.text()).toContain('Save failed')
		await wrapper.find('button').trigger('click')

		expect(wrapper.emitted('retry')).toHaveLength(1)
	})
})

describe('Offline', () => {
	it('reads "Waiting for connection"', () => {
		const wrapper = mount(SaveStatus, {
			props: { state: 'offline' },
			global: { plugins: [uiPlugin] },
		})

		expect(wrapper.text()).toContain('Waiting for connection')
	})
})