import assert from 'node:assert/strict'
import { readFileSync } from 'node:fs'
import test from 'node:test'
import { fileURLToPath } from 'node:url'

const appShell = readFileSync(
  fileURLToPath(new URL('../src/views/AppShellRouteView.vue', import.meta.url)),
  'utf8'
)

const sidebar = readFileSync(
  fileURLToPath(new URL('../src/components/layout/SidebarRail.vue', import.meta.url)),
  'utf8'
)

const appStyles = readFileSync(
  fileURLToPath(new URL('../src/assets/styles/app.css', import.meta.url)),
  'utf8'
)

test('sidebar supports smooth animated collapsed layout', () => {
  assert.match(appShell, /sidebarCollapsed = ref\(true\)/)
  assert.match(appShell, /:class="\{ 'sidebar-collapsed': sidebarCollapsed \}"/)
  assert.match(appShell, /:collapsed="sidebarCollapsed"/)
  assert.match(appShell, /class="app-sidebar"/)
  assert.match(appShell, /@toggle-collapse="toggleSidebarCollapsed"/)
  assert.match(appShell, /function toggleSidebarCollapsed\(\)/)
  assert.match(appShell, /sidebarCollapsed\.value = !sidebarCollapsed\.value/)

  assert.match(sidebar, /collapsed:\s*\{\s*type: Boolean/)
  assert.match(sidebar, /'toggle-collapse'/)
  assert.match(sidebar, /rail-collapsed/)
  assert.match(sidebar, /折叠侧边栏/)
  assert.match(sidebar, /展开侧边栏/)
  assert.match(sidebar, /--rail-motion-duration: 320ms/)
  assert.match(sidebar, /opacity var\(--rail-fade-duration\)/)

  assert.match(appStyles, /--sidebar-collapsed-width: 64px/)
  assert.match(appStyles, /\.app-sidebar\s*\{[^}]*transition:\s*width var\(--sidebar-motion\)/)
  assert.match(appStyles, /\.app\.sidebar-collapsed\s+\.app-sidebar\s*\{\s*width:\s*var\(--sidebar-collapsed-width\)/)
})
