/**
 * 39-settings: Settings Vue 组件化测试
 */
import { describe, it, expect, beforeEach, afterEach } from 'vitest'
import { h, render, nextTick } from 'vue'
import SettingsComponent from '../../src/apps/settings/Settings.vue'
import { setupDOM } from '../helpers'

describe('39-settings — Settings Vue 组件化', () => {
  let el: HTMLElement, body: HTMLElement, win: any

  beforeEach(() => {
    localStorage.clear()
    setupDOM()
    el = document.createElement('div'); el.className = 'window'
    document.getElementById('window-layer')?.appendChild(el)
    body = document.createElement('div'); body.className = 'win-body'
    el.appendChild(body)
    win = { el, body, timers: [], data: {} };
    (window as any).Sys = {
      settings: { wifi: true, wifiNetwork: '', bluetooth: false, btDevices: {} as any, appearance: 'auto', accent: '#0a84ff', dockSize: 48, dockAutohide: false, notificationsEnabled: true, computerName: 'Mac', passwordEnabled: false, wallpaper: 'sonoma', h24: true, timezone: 'local', kbRepeat: 5, kbDelay: 3, userName: '客人用户' },
      save() {}, applyAll() {}, applyAppearance() {}, applyWallpaper() {}, renderDock() {}, layoutDock() {}, tickClock() {}, resetAll() {},
    };
    (window as any).WM = { setTitle() {} }
  })

  afterEach(() => { render(null, body); el.remove() })

  function mount() { const v = h(SettingsComponent, { win }); render(v, body) }

  it('显示导航栏', () => { mount(); expect(body.querySelector('.set-sidebar')).toBeTruthy() })
  it('显示内容区', () => { mount(); expect(body.querySelector('.set-content')).toBeTruthy() })
  it('搜索框存在', () => { mount(); expect(body.querySelector('.set-search')).toBeTruthy() })
  it('外观 pane 显示浅色/深色/自动', () => { mount(); expect(body.querySelectorAll('.ap-card').length).toBe(3) })
  it('默认选中外观', () => { mount(); expect(body.querySelector('.set-nav-item.sel')?.textContent).toContain('外观') })
  it('切换 pane', async () => { mount(); const items = body.querySelectorAll('.set-nav-item'); (items[1] as HTMLElement)?.dispatchEvent(new MouseEvent('click', { bubbles: true })); await nextTick(); expect(items[1].classList.contains('sel')).toBe(true) })
  it('Wi-Fi toggle 存在', async () => { mount(); const items = body.querySelectorAll('.set-nav-item'); const wifiItem = [...items].find(i => i.textContent?.includes('Wi-Fi')) as HTMLElement; wifiItem?.dispatchEvent(new MouseEvent('click', { bubbles: true })); await nextTick(); expect(body.querySelector('.switch')).toBeTruthy() })
  it('强调色按钮存在', () => { mount(); expect(body.querySelectorAll('.accent-dot').length).toBe(6) })
  it('卸载', () => { mount(); render(null, body); expect(body.children.length).toBe(0) })
})