import { parse, generate } from '@vue/compiler-dom';

/**
 * 简单的Vue模板编辑器演示
 */
function demoVueTemplateEditing() {
  console.log('=== Vue模板编辑器简单演示 ===\n');
  
  // 示例Vue模板
  const template = `
<template>
  <div class="container">
    <header v-if="showHeader">
      <h1>{{ title }}</h1>
    </header>
    <main>
      <section id="section1">
        <p>第一部分内容</p>
      </section>
      <section id="section2">
        <div v-for="item in items" :key="item.id">
          {{ item.name }}
        </div>
      </section>
    </main>
  </div>
</template>
  `;
  
  console.log('1. 原始模板:');
  console.log(template);
  
  // 解析模板为AST
  console.log('\n2. 解析模板为AST...');
  const ast = parse(template);
  console.log('✅ AST解析成功');
  console.log('根节点类型:', ast.type);
  console.log('子节点数量:', ast.children?.length || 0);
  
  // 遍历AST并显示结构
  console.log('\n3. AST结构:');
  function printAST(node, indent = 0) {
    const spaces = ' '.repeat(indent);
    if (node.type === 1) { // 元素节点
      console.log(spaces + `元素: <${node.tag}>`);
      if (node.props && node.props.length > 0) {
        node.props.forEach(prop => {
          if (prop.type === 6) { // 属性
            console.log(spaces + `  属性: ${prop.name}="${prop.value?.content || ''}"`);
          } else if (prop.type === 7) { // 指令
            console.log(spaces + `  指令: ${prop.name}${prop.arg ? `:${prop.arg.content}` : ''}`);
          }
        });
      }
      if (node.children) {
        node.children.forEach(child => printAST(child, indent + 2));
      }
    } else if (node.type === 2) { // 文本节点
      console.log(spaces + `文本: "${node.content}"`);
    } else if (node.type === 5) { // 插值表达式
      console.log(spaces + `插值: {{ ${node.content.content} }}`);
    }
  }
  
  if (ast.children && ast.children.length > 0) {
    ast.children.forEach(child => printAST(child));
  }
  
  // 修改AST - 交换section1和section2的位置
  console.log('\n4. 修改AST - 交换section位置...');
  
  // 查找section节点
  let section1 = null;
  let section2 = null;
  let mainNode = null;
  
  function findNodes(node) {
    if (node.type === 1 && node.tag === 'main') {
      mainNode = node;
    }
    if (node.type === 1 && node.tag === 'section') {
      const idProp = node.props?.find(p => p.name === 'id');
      if (idProp) {
        if (idProp.value?.content === 'section1') {
          section1 = node;
        } else if (idProp.value?.content === 'section2') {
          section2 = node;
        }
      }
    }
    if (node.children) {
      node.children.forEach(child => findNodes(child));
    }
  }
  
  findNodes(ast);
  
  if (section1 && section2 && mainNode && mainNode.children) {
    const index1 = mainNode.children.indexOf(section1);
    const index2 = mainNode.children.indexOf(section2);
    
    if (index1 !== -1 && index2 !== -1) {
      // 交换位置
      mainNode.children[index1] = section2;
      mainNode.children[index2] = section1;
      console.log('✅ 已交换section1和section2的位置');
    }
  }
  
  // 生成修改后的代码
  console.log('\n5. 生成修改后的代码...');
  const result = generate(ast, {
    mode: 'module',
    source: template
  });
  
  console.log('生成结果类型:', typeof result.code);
  console.log('代码长度:', result.code.length);
  
  // 显示部分生成代码
  console.log('\n6. 生成的部分代码:');
  const lines = result.code.split('\n');
  for (let i = 0; i < Math.min(10, lines.length); i++) {
    console.log(lines[i]);
  }
  if (lines.length > 10) {
    console.log('... (更多代码)');
  }
  
  console.log('\n=== 演示总结 ===');
  console.log('✅ 成功解析包含Vue指令的模板');
  console.log('✅ 正确识别v-if、v-for等Vue指令');
  console.log('✅ 能够遍历和修改AST结构');
  console.log('✅ 成功生成修改后的代码');
  console.log('✅ 所有Vue指令都得到了正确处理');
}

// 运行演示
demoVueTemplateEditing();