// state.js
export function initState(vm) {
  const opts = vm.$options
  
  if (opts.computed) {
    initComputed(vm, opts.computed)
  }
  
  if (opts.watch) {
    initWatch(vm, opts.watch)
  }
}

function initComputed(vm, computed) {
  const watchers = vm._computedWatchers = Object.create(null)
  
  for (const key in computed) {
    const userDef = computed[key]
    const getter = typeof userDef === 'function' ? userDef : userDef.get
    
    // 创建计算属性Watcher
    watchers[key] = new Watcher(vm, getter, () => {}, { lazy: true })
    
    // 定义计算属性到vm上
    defineComputed(vm, key, userDef)
  }
}

// observer/watcher.js
class Watcher {
  constructor(vm, exprOrFn, cb, options = {}) {
    this.vm = vm
    this.getter = exprOrFn
    this.cb = cb
    this.options = options
    
    // 计算属性特有：懒执行 + 缓存
    this.lazy = !!options.lazy
    this.dirty = this.lazy // 是否需要重新计算
    
    this.value = this.lazy ? undefined : this.get()
  }
  
  // 计算属性求值
  evaluate() {
    this.value = this.get()
    this.dirty = false // 标记为已计算
  }
  
  // 依赖更新时标记为脏
  update() {
    if (this.lazy) {
      this.dirty = true
    } else {
      queueWatcher(this)
    }
  }
  
  // 让计算属性的依赖也收集渲染Watcher
  depend() {
    let i = this.deps.length
    while (i--) {
      this.deps[i].depend()
    }
  }
}

// state.js
function defineComputed(vm, key, userDef) {
  const sharedPropertyDefinition = {
    enumerable: true,
    configurable: true,
    get: () => {},
    set: () => {}
  }
  
  if (typeof userDef === 'function') {
    sharedPropertyDefinition.get = createComputedGetter(key)
  } else {
    sharedPropertyDefinition.get = createComputedGetter(key)
    sharedPropertyDefinition.set = userDef.set || (() => {})
  }
  
  Object.defineProperty(vm, key, sharedPropertyDefinition)
}

function createComputedGetter(key) {
  return function computedGetter() {
    const watcher = this._computedWatchers[key]
    if (watcher) {
      // 需要重新计算
      if (watcher.dirty) {
        watcher.evaluate()
      }
      
      // 依赖收集：让计算属性的依赖也收集渲染Watcher
      if (Dep.target) {
        watcher.depend()
      }
      
      return watcher.value
    }
  }
}

function initWatch(vm, watch) {
  for (const key in watch) {
    const handler = watch[key]
    
    if (Array.isArray(handler)) {
      handler.forEach(handle => {
        createWatcher(vm, key, handle)
      })
    } else {
      createWatcher(vm, key, handler)
    }
  }
}

function createWatcher(vm, exprOrFn, handler, options) {
  if (typeof handler === 'object') {
    options = handler
    handler = handler.handler
  }
  
  if (typeof handler === 'string') {
    handler = vm[handler]
  }
  
  return vm.$watch(exprOrFn, handler, options)
}

// state.js
export function stateMixin(Vue) {
  Vue.prototype.$watch = function(exprOrFn, cb, options = {}) {
    const vm = this
    options.user = true // 标记为用户Watcher
    
    const watcher = new Watcher(vm, exprOrFn, cb, options)
    
    // 立即执行
    if (options.immediate) {
      cb.call(vm, watcher.value)
    }
    
    // 返回取消监听函数
    return function unwatchFn() {
      watcher.teardown()
    }
  }
}

// observer/watcher.js
class Watcher {
  constructor(vm, exprOrFn, cb, options = {}) {
    // ...
    
    if (typeof exprOrFn === 'function') {
      this.getter = exprOrFn
    } else {
      // 解析路径表达式，如'a.b.c'
      this.getter = parsePath(exprOrFn)
    }
    
    this.value = this.lazy ? undefined : this.get()
  }
}

// 解析路径
function parsePath(path) {
  const segments = path.split('.')
  
  return function(obj) {
    for (let i = 0; i < segments.length; i++) {
      if (!obj) return
      obj = obj[segments[i]]
    }
    return obj
  }
}

// observer/watcher.js
class Watcher {
  get() {
    pushTarget(this)
    let value
    const vm = this.vm
    
    try {
      value = this.getter.call(vm, vm)
      
      // 深度监听：递归遍历所有属性
      if (this.options.deep) {
        traverse(value)
      }
    } catch (e) {
      throw e
    } finally {
      popTarget()
    }
    
    return value
  }
}

// 递归遍历值
function traverse(value) {
  if (typeof value !== 'object' || value === null) return
  
  Object.keys(value).forEach(key => {
    traverse(value[key])
  })
}

// Computed示例
new Vue({
  data() {
    return {
      firstName: 'Zhang',
      lastName: 'San'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    }
  }
})

// Watch示例
new Vue({
  data() {
    return {
      userId: 1
    }
  },
  watch: {
    userId(newVal) {
      // 异步请求用户数据
      fetchUser(newVal).then(user => {
        this.user = user
      })
    }
  }
})

computed: {
  fullName: {
    get() {
      return `${this.firstName} ${this.lastName}`
    },
    set(newVal) {
      const [first, last] = newVal.split(' ')
      this.firstName = first
      this.lastName = last
    }
  }
}

watch: {
  user: {
    handler(newVal) {
      console.log('User changed:', newVal)
    },
    immediate: true, // 立即执行
    deep: true // 深度监听
  }
}