import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
import { flushPromises, mount } from '@vue/test-utils'
import WeatherWidget from './WeatherWidget.vue'

describe('WeatherWidget', () => {
  let originalGeolocation

  beforeEach(() => {
    originalGeolocation = navigator.geolocation
    global.fetch = vi.fn()
  })

  afterEach(() => {
    if (originalGeolocation === undefined) delete navigator.geolocation
    else Object.defineProperty(navigator, 'geolocation', { value: originalGeolocation, configurable: true })
  })

  it('shows the denied state when geolocation permission is refused', async () => {
    Object.defineProperty(navigator, 'geolocation', {
      value: { getCurrentPosition: (_res, rej) => rej(new Error('denied')) },
      configurable: true,
    })
    const wrapper = mount(WeatherWidget)
    await flushPromises()
    expect(wrapper.text()).toContain('Enable location access')
  })

  it('shows weather details once loaded successfully', async () => {
    Object.defineProperty(navigator, 'geolocation', {
      value: {
        getCurrentPosition: (res) => res({ coords: { latitude: 1, longitude: 2 } }),
      },
      configurable: true,
    })
    global.fetch
      .mockResolvedValueOnce({
        json: async () => ({
          current: {
            temperature_2m: 21.4,
            apparent_temperature: 20.1,
            relative_humidity_2m: 55,
            wind_speed_10m: 12.6,
            weather_code: 0,
            is_day: 1,
          },
        }),
      })
      .mockResolvedValueOnce({
        json: async () => ({ address: { city: 'Springfield', country_code: 'us' } }),
      })

    const wrapper = mount(WeatherWidget)
    await flushPromises()
    expect(wrapper.text()).toContain('21°')
    expect(wrapper.text()).toContain('Springfield')
    expect(wrapper.text()).toContain('US')
    expect(wrapper.text()).toContain('Clear sky')
  })

  it('falls back to an unknown weather label for an unrecognised code', async () => {
    Object.defineProperty(navigator, 'geolocation', {
      value: { getCurrentPosition: (res) => res({ coords: { latitude: 1, longitude: 2 } }) },
      configurable: true,
    })
    global.fetch
      .mockResolvedValueOnce({
        json: async () => ({
          current: {
            temperature_2m: 10, apparent_temperature: 9, relative_humidity_2m: 40,
            wind_speed_10m: 5, weather_code: 999, is_day: 0,
          },
        }),
      })
      .mockResolvedValueOnce({ json: async () => ({ address: {} }) })

    const wrapper = mount(WeatherWidget)
    await flushPromises()
    expect(wrapper.text()).toContain('Unknown')
    expect(wrapper.text()).toContain('Your location')
  })

  it('shows an error state when the weather fetch fails', async () => {
    Object.defineProperty(navigator, 'geolocation', {
      value: { getCurrentPosition: (res) => res({ coords: { latitude: 1, longitude: 2 } }) },
      configurable: true,
    })
    global.fetch.mockRejectedValue(new Error('network down'))
    const wrapper = mount(WeatherWidget)
    await flushPromises()
    expect(wrapper.text()).toContain("Couldn't load weather")
  })

  it('retries loading when the retry button is clicked', async () => {
    Object.defineProperty(navigator, 'geolocation', {
      value: { getCurrentPosition: (_res, rej) => rej(new Error('denied')) },
      configurable: true,
    })
    const wrapper = mount(WeatherWidget)
    await flushPromises()
    await wrapper.find('button').trigger('click')
    await flushPromises()
    expect(wrapper.text()).toContain('Enable location access')
  })

  it('renders the dark variant styling', async () => {
    Object.defineProperty(navigator, 'geolocation', {
      value: { getCurrentPosition: (_res, rej) => rej(new Error('denied')) },
      configurable: true,
    })
    const wrapper = mount(WeatherWidget, { props: { variant: 'dark' } })
    await flushPromises()
    expect(wrapper.find('div').classes()).toContain('bg-[#162236]')
  })
})