it('reactive happy path', () => {
  const original = { foo: 1 }
  const observed = reactive(original)
  expect(observed).not.toBe(original)   // 返回的是代理，不是原对象
  expect(observed.foo).toBe(1)          // 读写行为透明
})

it('nested reactive', () => {
  const original = { nested: { foo: 1 }, array: [{ bar: 2 }] }
  const observed = reactive(original)
  expect(isReactive(observed.nested)).toBe(true)   // ★ 嵌套对象也是响应式
  expect(isReactive(observed.array[0])).toBe(true)
})

it('readonly cannot set', () => {
  const user = readonly({ age: 10 })
  user.age = 11                          // 写失败 + 警告
  expect(user.age).toBe(10)
})

// reactive.ts
import { mutableHandlers, readonlyHandlers, shallowReadonlyHandlers } from './baseHandlers'

export function reactive(raw)        { return createActiveObject(raw, mutableHandlers) }
export function readonly(raw)        { return createActiveObject(raw, readonlyHandlers) }
export function shallowReadonly(raw) { return createActiveObject(raw, shallowReadonlyHandlers) }

function createActiveObject(raw, handlers) {
  return new Proxy(raw, handlers)
}

// baseHandlers.ts
import { track, trigger } from './effect'
import { reactive, readonly, ReactiveFlags } from './reactive'
import { isObject } from '../shared'

function createGetter(isReadonly = false, shallow = false) {
  return function get(target, key) {
    // ① isReactive/isReadonly 的实现藏在这里
    if (key === ReactiveFlags.IS_REACTIVE) return !isReadonly
    if (key === ReactiveFlags.IS_READONLY) return isReadonly

    const res = Reflect.get(target, key)

    if (shallow) return res              // ② shallow：不递归，到此为止

    if (isObject(res)) {                 // ③ 惰性递归：读到对象才包
      return isReadonly ? readonly(res) : reactive(res)
    }

    if (!isReadonly) track(target, key)  // ④ readonly 不会被写 → 不必收集依赖
    return res
  }
}

function createSetter() {
  return function set(target, key, value) {
    const res = Reflect.set(target, key, value)
    trigger(target, key)                 // 先改值，再通知（顺序不能反）
    return res
  }
}

// ⑤ 顶层执行一次，缓存住，而不是每次 createActiveObject 时新建
const get = createGetter()
const set = createSetter()
const readonlyGet = createGetter(true)
const shallowReadonlyGet = createGetter(true, true)

export const mutableHandlers = { get, set }

export const readonlyHandlers = {
  get: readonlyGet,
  set(target, key) {
    console.warn(`key "${String(key)}" set 失败，因为 target 是 readonly`, target)
    return true      // 返回 true 骗过 Proxy，避免抛 TypeError
  },
}

export const shallowReadonlyHandlers = {
  ...readonlyHandlers,          // 复用 readonly 的 set（同样禁止写）
  get: shallowReadonlyGet,
}

export function isReactive(value) {
  return !!value[ReactiveFlags.IS_REACTIVE]   // 读这个 key
}

it('ref happy path', () => {
  const a = ref(1)
  let dummy, calls = 0
  effect(() => { calls++; dummy = a.value })
  expect(dummy).toBe(1)
  a.value = 2
  expect(dummy).toBe(2)
  a.value = 2                    // ★ 设相同值
  expect(calls).toBe(2)          //    不应触发更新
})

it('ref with object', () => {
  const a = ref({ count: 1 })
  a.value.count = 2              // ★ value 是对象时，内部也要响应式
  expect(a.value.count).toBe(2)
})

// ref.ts
import { trackEffects, triggerEffects, isTracking } from './effect'
import { reactive } from './reactive'
import { hasChanged, isObject } from '../shared'

class RefImpl {
  private _value
  private _rawValue        // 存未代理的原始值，用于比较
  public dep = new Set()   // ★ 只有一个 value，不需要 targetMap，自带一个 dep
  public __v_isRef = true  // isRef 的判断依据

  constructor(value) {
    this._rawValue = value
    this._value = convert(value)     // 对象 → reactive，基本值 → 原样
  }

  get value() {
    if (isTracking()) trackEffects(this.dep)   // 复用第 1 章拆出来的后半段
    return this._value
  }

  set value(newValue) {
    if (!hasChanged(newValue, this._rawValue)) return   // ★ 值没变，静默
    this._rawValue = newValue
    this._value = convert(newValue)
    triggerEffects(this.dep)         // 先赋值再触发，顺序同 Proxy set
  }
}

function convert(value) {
  return isObject(value) ? reactive(value) : value
}

export function ref(value) { return new RefImpl(value) }
export function isRef(r)   { return !!r?.__v_isRef }
export function unRef(r)   { return isRef(r) ? r.value : r }

export function proxyRefs(objectWithRefs) {
  return new Proxy(objectWithRefs, {
    get(target, key) {
      return unRef(Reflect.get(target, key))       // 读：自动拆包
    },
    set(target, key, value) {
      if (isRef(target[key]) && !isRef(value)) {
        target[key].value = value                  // 写：旧值是 ref、新值不是 → 写进 .value
        return true
      }
      return Reflect.set(target, key, value)       // 否则整个替换
    },
  })
}

it('should compute lazily', () => {
  const value = reactive({ foo: 1 })
  const getter = vi.fn(() => value.foo)
  const cValue = computed(getter)

  expect(getter).not.toHaveBeenCalled()      // ① 不读就不算（懒）
  expect(cValue.value).toBe(1)               // ② 读了才算
  cValue.value
  expect(getter).toHaveBeenCalledTimes(1)    // ③ 再读不重算（缓存）

  value.foo = 2
  expect(getter).toHaveBeenCalledTimes(1)    // ④ ★ 依赖变了，仍然不算！
  expect(cValue.value).toBe(2)               // ⑤ 直到下次读，才重算
  expect(getter).toHaveBeenCalledTimes(2)
  cValue.value
  expect(getter).toHaveBeenCalledTimes(2)    // ⑥ 又进入缓存态
})

// computed.ts
import { ReactiveEffect } from './effect'

class ComputedRefImpl {
  private _value
  private _dirty = true                    // ★ 唯一的状态：缓存是否失效
  private _effect: ReactiveEffect

  constructor(getter) {
    this._effect = new ReactiveEffect(getter, () => {
      // scheduler：依赖变化时执行的不是 getter，而是这两行
      if (!this._dirty) this._dirty = true
    })
  }

  get value() {
    if (this._dirty) {
      this._dirty = false
      this._value = this._effect.run()     // run 一次：算出新值 + 重新收集依赖
    }
    return this._value
  }
}

export function computed(getter) {
  return new ComputedRefImpl(getter)
}

value.foo 的 dep ──收集──> computed 内部的 effect
                              └─ scheduler: _dirty = true   （被通知时只改标记）
cValue.value 被读 ── _dirty? ──> effect.run() 重算并缓存