import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
import { mount } from '@vue/test-utils'
import { setActivePinia, createPinia } from 'pinia'
import App from '@/App.vue'
import { useAuthStore } from '@/stores/auth'

// Stub child components — we only care about App's mount-time behavior
vi.mock('@/components/BottomNav.vue', () => ({
  default: { template: '<nav class="bottom-nav-stub" />' },
}))
vi.mock('@/components/BaseToast.vue', () => ({
  default: { template: '<div class="toast-stub" />' },
}))
import { reactive } from 'vue'
const mockRoute = reactive<{ meta: Record<string, unknown> }>({ meta: {} })
vi.mock('vue-router', () => ({
  useRoute: () => mockRoute,
  RouterView: { name: 'RouterView', template: '<div class="router-view-stub" />' },
}))

describe('App', () => {
  beforeEach(() => {
    setActivePinia(createPinia())
    mockRoute.meta = {}
    document.documentElement.removeAttribute('data-theme')
    document.head.querySelectorAll('meta[name="theme-color"]').forEach(n => n.remove())
    const meta = document.createElement('meta')
    meta.setAttribute('name', 'theme-color')
    meta.setAttribute('content', '#000000')
    document.head.appendChild(meta)
  })

  afterEach(() => {
    document.head.querySelectorAll('meta[name="theme-color"]').forEach(n => n.remove())
    document.documentElement.removeAttribute('data-theme')
  })

  async function mountApp() {
    const { RouterView } = await import('vue-router')
    return mount(App, { global: { stubs: { RouterView } } })
  }

  it('uses the server-stamped <html data-theme> when present', async () => {
    document.documentElement.dataset.theme = 'sage-cream'
    await mountApp()
    expect(document.documentElement.dataset.theme).toBe('sage-cream')
    const meta = document.querySelector('meta[name="theme-color"]')
    expect(meta?.getAttribute('content')).toBe('#f6f8f3')
  })

  it('falls back to auth.user.theme when no stamped theme is present', async () => {
    const auth = useAuthStore()
    auth.setUser({ id: 1, email: 'a@b', roles: [], theme: 'ocean-dusk', designVersion: 'v1', timezone: 'UTC' })
    await mountApp()
    expect(document.documentElement.dataset.theme).toBe('ocean-dusk')
    const meta = document.querySelector('meta[name="theme-color"]')
    expect(meta?.getAttribute('content')).toBe('#eef3f8')
  })

  it('does nothing when neither stamped nor user theme exist', async () => {
    await mountApp()
    expect(document.documentElement.dataset.theme).toBeUndefined()
    const meta = document.querySelector('meta[name="theme-color"]')
    expect(meta?.getAttribute('content')).toBe('#000000')
  })

  it('renders BottomNav and BaseToast and RouterView', async () => {
    const wrapper = await mountApp()
    expect(wrapper.find('.router-view-stub').exists()).toBe(true)
    expect(wrapper.find('.bottom-nav-stub').exists()).toBe(true)
    expect(wrapper.find('.toast-stub').exists()).toBe(true)
  })

  it('hides BottomNav when route.meta.hideNav is true', async () => {
    mockRoute.meta = { hideNav: true }
    const wrapper = await mountApp()
    expect(wrapper.find('.bottom-nav-stub').exists()).toBe(false)
  })
})
