// 用户正在编写的代码
import { ref, watch } from 'vue';

const userSettings = ref({
  theme: 'dark',
  notifications: {
    email: true,
    push: false
  }
});

watch(userSettings, (newVal) => {
  console.log('Settings changed:', newVal);
}, {
  // 用户可能在这里犹豫，不知如何配置深度监听
});

// 学习资源知识库 (可扩展为从后端API获取)
const learningResourceDB = [
  {
    id: 1,
    title: "Vue 3 响应式原理：ref vs reactive",
    tags: ["vue3", "composition-api", "reactivity"],
    url: "https://internal-docs/vue3-reactivity",
    difficulty: "intermediate"
  },
  {
    id: 2,
    title: "TypeScript 泛型在组件中的应用",
    tags: ["typescript", "generics", "vue3"],
    url: "https://internal-docs/ts-generics-components",
    difficulty: "advanced"
  },
  {
    id: 3,
    title: "使用 CSS Grid 构建现代布局",
    tags: ["css", "layout", "grid"],
    url: "https://internal-docs/css-grid-layout",
    difficulty: "beginner"
  },
  {
    id: 4,
    title: "Pinia 状态管理入门与实践",
    tags: ["vue3", "pinia", "state-management"],
    url: "https://internal-docs/pinia-getting-started",
    difficulty: "intermediate"
  }
];

// 一个简单的分析函数：从代码字符串中提取技术关键词
function extractTechKeywords(codeString) {
  const keywords = [];
  const patterns = {
    vue3: /import.*from ['"]vue['"]/gi,
    compositionApi: /(ref|reactive|computed|watch|watchEffect)\s*\(/gi,
    pinia: /import.*from ['"]pinia['"]|createPinia|defineStore/gi,
    typescript: /:\s*\w+<\w+>|interface|type\s+\w+\s*=/gi, // 简单匹配泛型、接口、类型别名
    cssGrid: /display:\s*grid|grid-template|grid-area/gi
  };

  for (const [key, pattern] of Object.entries(patterns)) {
    if (pattern.test(codeString)) {
      keywords.push(key);
    }
  }
  return [...new Set(keywords)]; // 去重
}

// 匹配推荐函数
function recommendResources(currentCode, userSkillLevel = 'intermediate') {
  const detectedKeywords = extractTechKeywords(currentCode);
  console.log(`检测到的关键词: ${detectedKeywords.join(', ')}`);

  // 基于关键词和用户水平进行过滤和排序
  const recommendations = learningResourceDB.filter(resource => {
    // 资源标签与检测到的关键词有交集
    const hasMatchingTag = resource.tags.some(tag => detectedKeywords.includes(tag));
    // 资源难度适合用户（这里简化逻辑）
    const isLevelAppropriate = resource.difficulty === userSkillLevel || resource.difficulty === 'beginner';
    return hasMatchingTag && isLevelAppropriate;
  }).sort((a, b) => {
    // 简单排序：匹配标签数量多的靠前
    const aMatchCount = a.tags.filter(tag => detectedKeywords.includes(tag)).length;
    const bMatchCount = b.tags.filter(tag => detectedKeywords.includes(tag)).length;
    return bMatchCount - aMatchCount;
  });

  return recommendations;
}

// --- 模拟使用场景 ---
const simulatedCode = `
import { ref, computed } from 'vue';
import { defineStore } from 'pinia';

interface UserData {
  id: number;
  name: string;
}

export const useUserStore = defineStore('user', () => {
  const user = ref<UserData | null>(null);
  const isAuthenticated = computed(() => !!user.value);

  return { user, isAuthenticated };
});
`;

const userLevel = 'intermediate';
const suggested = recommendResources(simulatedCode, userLevel);

console.log('推荐的学习资源:');
suggested.forEach(res => {
  console.log(`- ${res.title} (标签: ${res.tags.join(', ')})`);
  console.log(`  链接: ${res.url}`);
});

检测到的关键词: vue3, compositionApi, pinia, typescript
推荐的学习资源:
- Pinia 状态管理入门与实践 (标签: vue3, pinia, state-management)
  链接: https://internal-docs/pinia-getting-started
- Vue 3 响应式原理：ref vs reactive (标签: vue3, composition-api, reactivity)
  链接: https://internal-docs/vue3-reactivity
- TypeScript 泛型在组件中的应用 (标签: typescript, generics, vue3)
  链接: https://internal-docs/ts-generics-components