import { describe, it, expect, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import { createRouter, createMemoryHistory } from 'vue-router'
import HomePage from '@/pages/HomePage.vue'
import ComposePage from '@/pages/ComposePage.vue'

vi.mock('@/api/vehicles', () => ({
  lookupVehicle: vi.fn(),
}))

import { lookupVehicle } from '@/api/vehicles'
const mockLookupVehicle = vi.mocked(lookupVehicle)

function createTestRouter() {
  return createRouter({
    history: createMemoryHistory(),
    routes: [
      { path: '/', name: 'home', component: HomePage },
      { path: '/compose', name: 'compose', component: ComposePage },
    ],
  })
}

function mountHome(router: ReturnType<typeof createTestRouter>) {
  return mount(HomePage, {
    global: { plugins: [router] },
  })
}

describe('HomePage', () => {
  it('renders headline', () => {
    const router = createTestRouter()
    const wrapper = mountHome(router)
    expect(wrapper.text()).toContain('Skicka ett brev')
  })

  it('does not show CTA button initially', () => {
    const router = createTestRouter()
    const wrapper = mountHome(router)
    expect(wrapper.find('.btn--primary').exists()).toBe(false)
  })

  it('does not show CTA while loading', async () => {
    mockLookupVehicle.mockImplementation(() => new Promise(() => {}))

    const router = createTestRouter()
    const wrapper = mountHome(router)
    const plateInput = wrapper.findComponent({ name: 'PlateInput' })

    await plateInput.vm.$emit('lookup', 'ABC123')
    await wrapper.vm.$nextTick()

    expect(wrapper.find('.btn--primary').exists()).toBe(false)
  })

  it('does not show CTA after not-found', async () => {
    mockLookupVehicle.mockRejectedValue(new Error('Inget fordon hittades'))

    const router = createTestRouter()
    const wrapper = mountHome(router)
    const plateInput = wrapper.findComponent({ name: 'PlateInput' })

    await plateInput.vm.$emit('lookup', 'UNKNOWN')
    await new Promise((resolve) => setTimeout(resolve, 100))

    expect(wrapper.find('.btn--primary').exists()).toBe(false)
  })

  it('shows CTA button when vehicle data present', async () => {
    mockLookupVehicle.mockResolvedValue({
      make: 'Volvo',
      model: 'V70',
      year: 2009,
      color: 'Silver',
      fuel: 'Bensin',
    })

    const router = createTestRouter()
    const wrapper = mountHome(router)
    const plateInput = wrapper.findComponent({ name: 'PlateInput' })

    await plateInput.vm.$emit('update:modelValue', 'ABC123')
    await plateInput.vm.$emit('lookup', 'ABC123')
    await new Promise((resolve) => setTimeout(resolve, 100))

    const cta = wrapper.find('.btn--primary')
    expect(cta.exists()).toBe(true)
    expect(cta.text()).toBe('Fortsätt till brevet')
  })

  it('CTA links to compose page with plate query param', async () => {
    mockLookupVehicle.mockResolvedValue({
      make: 'Volvo',
      model: 'V70',
      year: 2009,
      color: 'Silver',
      fuel: 'Bensin',
    })

    const router = createTestRouter()
    const wrapper = mountHome(router)
    const plateInput = wrapper.findComponent({ name: 'PlateInput' })

    await plateInput.vm.$emit('update:modelValue', 'ABC123')
    await plateInput.vm.$emit('lookup', 'ABC123')
    await new Promise((resolve) => setTimeout(resolve, 100))

    const cta = wrapper.find('.btn--primary')
    const href = cta.attributes('href')
    expect(href).toBe('/compose?plate=ABC123')
  })
})