import { describe, it, expect, vi, beforeEach } from 'vitest'
import { mount, flushPromises } from '@vue/test-utils'
import { createRouter, createWebHistory } from 'vue-router'
import axios from 'axios'
import LoginPage from '../LoginPage.vue'

vi.mock('axios')

describe('LoginPage', () => {
  let router

  beforeEach(async () => {
    localStorage.clear()
    vi.clearAllMocks()

    router = createRouter({
      history: createWebHistory(),
      routes: [
        { path: '/login', name: 'login', component: { template: '<div />' } },
        { path: '/feeds', name: 'feeds', component: { template: '<div />' } },
      ],
    })
    router.push('/login')
    await router.isReady()
  })

  it('stores the token and redirects to feeds on successful login', async () => {
    axios.post.mockResolvedValueOnce({
      status: 200,
      headers: { token: 'abc123', user_id: '7' },
    })

    const wrapper = mount(LoginPage, { global: { plugins: [router] } })
    await wrapper.find('#username').setValue('alice')
    await wrapper.find('#password').setValue('secret')
    await wrapper.find('form').trigger('submit.prevent')
    await flushPromises()

    expect(axios.post).toHaveBeenCalledWith(
      '/api/v1/auth/login',
      { username: 'alice', password: 'secret' },
      expect.anything(),
    )
    expect(localStorage.getItem('user-token')).toBe('abc123')
    expect(localStorage.getItem('user-id')).toBe('7')
    expect(router.currentRoute.value.name).toBe('feeds')
  })

  it('shows an error message and does not redirect when login fails', async () => {
    axios.post.mockRejectedValueOnce(new Error('Request failed'))

    const wrapper = mount(LoginPage, { global: { plugins: [router] } })
    await wrapper.find('#username').setValue('alice')
    await wrapper.find('#password').setValue('wrong')
    await wrapper.find('form').trigger('submit.prevent')
    await flushPromises()

    expect(wrapper.text()).toContain('Login failed')
    expect(localStorage.getItem('user-token')).toBeNull()
    expect(router.currentRoute.value.name).toBe('login')
  })
})