import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import { createRouter, createMemoryHistory } from 'vue-router'
import { createPinia, setActivePinia } from 'pinia'
import Login from '@/views/system/Login.vue'

vi.mock('vue-router')
vi.mock('element-plus', () => ({
  ElMessage: {
    success: vi.fn(),
    error: vi.fn(),
  },
}))

vi.mock('@/utils/request', () => ({
  default: {
    post: vi.fn(),
  },
}))

describe('Login Component', () => {
  let router: any
  let wrapper: any
  let pinia: any

  beforeEach(() => {
    pinia = createPinia()
    setActivePinia(pinia)
    
    router = createRouter({
      history: createMemoryHistory(),
      routes: [
        { path: '/', component: { template: '<div>Dashboard</div>' } },
        { path: '/login', component: { template: '<div>Login</div>' } },
      ],
    })

    vi.clearAllMocks()
    localStorage.clear()
  })

  afterEach(() => {
    if (wrapper) {
      wrapper.unmount()
    }
  })

  describe('component rendering', () => {
    it('should render login form', () => {
      wrapper = mount(Login, {
        global: {
          plugins: [router, pinia],
          stubs: {
            'el-card': true,
            'el-form': true,
            'el-form-item': true,
            'el-input': true,
            'el-button': true,
          },
        },
      })

      expect(wrapper.find('.login-container').exists()).toBe(true)
      expect(wrapper.find('.login-card').exists()).toBe(true)
    })

    it('should initialize with empty form state', () => {
      wrapper = mount(Login, {
        global: {
          plugins: [router, pinia],
          stubs: {
            'el-card': true,
            'el-form': true,
            'el-form-item': true,
            'el-input': true,
            'el-button': true,
          },
        },
      })

      expect(wrapper.vm.formState.username).toBe('')
      expect(wrapper.vm.formState.password).toBe('')
    })

    it('should initialize loading as false', () => {
      wrapper = mount(Login, {
        global: {
          plugins: [router, pinia],
          stubs: {
            'el-card': true,
            'el-form': true,
            'el-form-item': true,
            'el-input': true,
            'el-button': true,
          },
        },
      })

      expect(wrapper.vm.loading).toBe(false)
    })
  })

  describe('form state management', () => {
    it('should update username when input changes', async () => {
      wrapper = mount(Login, {
        global: {
          plugins: [router, pinia],
          stubs: {
            'el-card': true,
            'el-form': true,
            'el-form-item': true,
            'el-input': true,
            'el-button': true,
          },
        },
      })

      wrapper.vm.formState.username = 'testuser'
      await wrapper.vm.$nextTick()

      expect(wrapper.vm.formState.username).toBe('testuser')
    })

    it('should update password when input changes', async () => {
      wrapper = mount(Login, {
        global: {
          plugins: [router, pinia],
          stubs: {
            'el-card': true,
            'el-form': true,
            'el-form-item': true,
            'el-input': true,
            'el-button': true,
          },
        },
      })

      wrapper.vm.formState.password = 'password123'
      await wrapper.vm.$nextTick()

      expect(wrapper.vm.formState.password).toBe('password123')
    })
  })

  describe('form submission', () => {
    it('should have onFinish method', () => {
      wrapper = mount(Login, {
        global: {
          plugins: [router, pinia],
          stubs: {
            'el-card': true,
            'el-form': true,
            'el-form-item': true,
            'el-input': true,
            'el-button': true,
          },
        },
      })

      expect(typeof wrapper.vm.onFinish).toBe('function')
    })
  })

  describe('document title', () => {
    it('should set document title on mount', () => {
      const originalTitle = document.title

      wrapper = mount(Login, {
        global: {
          plugins: [router, pinia],
          stubs: {
            'el-card': true,
            'el-form': true,
            'el-form-item': true,
            'el-input': true,
            'el-button': true,
          },
        },
      })

      expect(document.title).toBe('登录 - Novalon 管理系统')

      document.title = originalTitle
    })
  })
})