import test from 'node:test'
import assert from 'node:assert/strict'
import { readFileSync } from 'node:fs'
import { fileURLToPath } from 'node:url'
import { dirname, resolve } from 'node:path'

const currentDir = dirname(fileURLToPath(import.meta.url))

function readView(name) {
  return readFileSync(resolve(currentDir, name), 'utf8')
}

function cssBlock(source, selector) {
  const start = source.indexOf(`${selector} {`)
  assert.notEqual(start, -1)
  const end = source.indexOf('\n}', start)
  assert.notEqual(end, -1)
  return source.slice(start, end)
}

test('diagram center places the diagram menu above the canvas', () => {
  const source = readView('DiagramCenterView.vue')

  const layoutStyle = cssBlock(source, '.diagram-layout')
  assert.match(layoutStyle, /grid-template-columns:\s*1fr;/)
  assert.doesNotMatch(layoutStyle, /grid-template-columns:\s*280px\s+minmax\(0,\s*1fr\);/)

  const sidebarStyle = cssBlock(source, '.diagram-sidebar')
  assert.match(sidebarStyle, /border-bottom:\s*1px solid #e7ecf3;/)
  assert.doesNotMatch(sidebarStyle, /border-right:\s*1px solid #e7ecf3;/)

  const menuStyle = cssBlock(source, '.diagram-kind-list')
  assert.match(menuStyle, /display:\s*flex;/)
  assert.match(menuStyle, /flex-wrap:\s*wrap;/)
})

test('diagram center uses the full content width', () => {
  const source = readView('DiagramCenterView.vue')

  const pageStyle = cssBlock(source, '.diagram-center-page')
  assert.match(pageStyle, /width:\s*calc\(100% - 40px\);/)
  assert.match(pageStyle, /max-width:\s*none;/)
})

test('diagram center can open directly on a requested diagram tab', () => {
  const source = readView('DiagramCenterView.vue')

  assert.equal(source.includes('function normalizeInitialDiagram'), true)
  assert.equal(source.includes("const activeDiagram = ref(normalizeInitialDiagram(route.query.diagram))"), true)
  assert.equal(source.includes("return DIAGRAM_QUERY_ALIASES[String(key || '')] || 'three_line_table'"), true)
  assert.match(source, /module:\s*'module'/)
})

test('diagram center promotes the three-line table tab and removes overview', () => {
  const source = readView('DiagramCenterView.vue')
  const menuStart = source.indexOf('<el-radio-group v-model="activeDiagram" class="diagram-kind-list">')
  assert.notEqual(menuStart, -1)
  const menuEnd = source.indexOf('</el-radio-group>', menuStart)
  assert.notEqual(menuEnd, -1)
  const menu = source.slice(menuStart, menuEnd)
  const labels = [...menu.matchAll(/<el-radio-button label="([^"]+)"/g)].map((match) => match[1])

  assert.deepEqual(labels, ['three_line_table', 'er', 'module', 'architecture', 'flowchart', 'sequence', 'ai'])
  assert.doesNotMatch(source, /overview:\s*'overview'/)
  assert.doesNotMatch(source, /activeDiagram\.value === 'overview'/)
  assert.doesNotMatch(source, /function buildOverviewGraph/)
})

test('diagram center exposes a dedicated use case diagram tab and direct route', () => {
  const source = readView('DiagramCenterView.vue')

  assert.equal(source.includes('label="use_case"'), true)
  assert.match(source, />用例图</)
  assert.match(source, /use_case:\s*'use_case'/)
  assert.equal(source.includes("const useCaseDsl = ref('')"), true)
})

test('diagram center saves and restores use case diagram DSL payloads', () => {
  const source = readView('DiagramCenterView.vue')

  assert.equal(source.includes('function applySavedUseCaseDiagram'), true)
  assert.equal(source.includes("savedDiagrams.value.find((item) => item.diagramType === 'use_case')"), true)
  assert.equal(source.includes("diagramType: 'use_case'"), true)
  assert.equal(source.includes('dsl: useCaseDsl.value'), true)
  assert.equal(source.includes('graph: useCaseDiagram.value'), true)
})

test('diagram center wires use case SVG and PNG export handlers', () => {
  const source = readView('DiagramCenterView.vue')

  assert.equal(source.includes('buildUseCaseExportSvg'), true)
  assert.equal(source.includes('function useCaseSvgText'), true)
  assert.equal(source.includes('downloadUseCaseSvg'), true)
  assert.equal(source.includes('downloadUseCasePng'), true)
  assert.equal(source.includes('useCaseRelationPath'), true)
})