// Vue3的響應(yīng)式數(shù)據(jù)實現(xiàn)原理
const reactive = (target) => {
    return new Proxy(target, {
        get(target, key, receiver) {
            track(target, key); // 依賴收集
            return Reflect.get(target, key, receiver);
        },
        set(target, key, value, receiver) {
            const result = Reflect.set(target, key, value, receiver);
            trigger(target, key); // 觸發(fā)更新
            return result;
        }
    });
};

┌─────────┐   操作請求   ┌─────────┐   轉(zhuǎn)發(fā)操作    ┌─────────┐
│ 客戶端   │───────────→ │  Proxy  │───────────→ │ 目標(biāo)對象 │
│         │             │  代理    │             │         │
│         │←─────────── │         │←─────────── │         │
└─────────┘   響應(yīng)結(jié)果   └─────────┘   實際結(jié)果    └─────────┘
                ↓                           ↓
         ┌─────────────┐            ┌─────────────┐
         │ 攔截和自定義  │            │ 原始行為     │
         │   （陷阱）   │            │             │
         └─────────────┘            └─────────────┘

// 目標(biāo)對象
const target = {
  name: '張三',
  age: 30
};

// 處理器對象（包含陷阱方法）
const handler = {
  // 攔截屬性讀取
  get(target, property, receiver) {

    // 添加自定義邏輯
    if (property === 'age') {
      return `${target[property]}歲`;
    }

    // 默認行為：使用Reflect
    return Reflect.get(target, property, receiver);
  },

  // 攔截屬性設(shè)置
  set(target, property, value, receiver) {
    // 添加驗證邏輯
    if (property === 'age' && (value < 0 || value > 150)) {
      console.warn('年齡必須在0-150之間');
      return false; // 返回false表示設(shè)置失敗
    }

    // 默認行為：使用Reflect
    return Reflect.set(target, property, value, receiver);
  }
};

// 創(chuàng)建代理
const proxy = new Proxy(target, handler);

console.log(proxy.name);  // 張三
console.log(proxy.age);   // 30歲
console.log(target.age); // 30

const completeHandler = {
  // 1. 屬性訪問攔截
  get(target, prop, receiver) {
    console.log(`get: ${prop}`);
    return Reflect.get(target, prop, receiver);
  },

  // 2. 屬性賦值攔截
  set(target, prop, value, receiver) {
    console.log(`set: ${prop} = ${value}`);
    return Reflect.set(target, prop, value, receiver);
  },

  // 3. in操作符攔截
  has(target, prop) {
    console.log(`has: ${prop}`);
    return Reflect.has(target, prop);
  },

  // 4. delete操作符攔截
  deleteProperty(target, prop) {
    console.log(`delete: ${prop}`);
    return Reflect.deleteProperty(target, prop);
  },

  // 5. 構(gòu)造函數(shù)調(diào)用攔截
  construct(target, args, newTarget) {
    console.log(`construct with args:`, args);
    return Reflect.construct(target, args, newTarget);
  },

  // 6. 函數(shù)調(diào)用攔截
  apply(target, thisArg, args) {
    console.log(`apply: thisArg=`, thisArg, 'args=', args);
    return Reflect.apply(target, thisArg, args);
  },

  // 7. Object.getOwnPropertyDescriptor攔截
  getOwnPropertyDescriptor(target, prop) {
    console.log(`getOwnPropertyDescriptor: ${prop}`);
    return Reflect.getOwnPropertyDescriptor(target, prop);
  },

  // 8. Object.defineProperty攔截
  defineProperty(target, prop, descriptor) {
    console.log(`defineProperty: ${prop}`, descriptor);
    return Reflect.defineProperty(target, prop, descriptor);
  },

  // 9. 原型訪問攔截
  getPrototypeOf(target) {
    console.log('getPrototypeOf');
    return Reflect.getPrototypeOf(target);
  },

  // 10. 原型設(shè)置攔截
  setPrototypeOf(target, prototype) {
    console.log(`setPrototypeOf:`, prototype);
    return Reflect.setPrototypeOf(target, prototype);
  },

  // 11. 可擴展性判斷攔截
  isExtensible(target) {
    console.log('isExtensible');
    return Reflect.isExtensible(target);
  },

  // 12. 防止擴展攔截
  preventExtensions(target) {
    console.log('preventExtensions');
    return Reflect.preventExtensions(target);
  },

  // 13. 自身屬性枚舉攔截
  ownKeys(target) {
    console.log('ownKeys');
    return Reflect.ownKeys(target);
  }
};

const getHandler = {
  get(target, property, receiver) {
    // 處理不存在的屬性
    if (!(property in target)) {
      throw new Error(`屬性不存在: ${property}`);
    }

    // 處理私有屬性（約定以_開頭的屬性為私有）
    if (property.startsWith('_')) {
      throw new Error(`不能訪問私有屬性: ${property}`);
    }
    return Reflect.get(target, property, receiver);
  }
};

const setHandler = {
  set(target, property, value, receiver) {
    // 只讀屬性檢查（約定以$開頭的屬性為只讀）
    if (property.startsWith('$')) {
      throw new Error(`屬性不可修改: ${property}`);
    }
    // 執(zhí)行設(shè)置
    return Reflect.set(target, property, value, receiver);
  }
};

const hasHandler = {
  has(target, property) {
    // 隱藏某些屬性（不在in操作中暴露）
    const hiddenProperties = ['password', 'token', '_internal'];
    if (hiddenProperties.includes(property)) {
      console.log(`隱藏屬性: ${property}`);
      return false;
    }

    // 虛擬屬性（不存在但返回true）
    const virtualProperties = ['isAdmin', 'hasAccess'];
    if (virtualProperties.includes(property)) {
      console.log(`虛擬屬性: ${property}`);
      return true;
    }

    return Reflect.has(target, property);
  }
};

const applyHandler = {
  apply(target, thisArg, argumentsList) {
    // 參數(shù)驗證
    if (target.name === 'calculate') {
      if (argumentsList.length < 2) {
        throw new Error('calculate函數(shù)需要至少2個參數(shù)');
      }
      if (!argumentsList.every(arg => typeof arg === 'number')) {
        throw new Error('calculate函數(shù)的所有參數(shù)必須是數(shù)字');
      }
    }
    return Reflect.apply(target, thisArg, argumentsList);
  }
};

const constructHandler = {
  construct(target, argumentsList, newTarget) {
    // 單例模式：確保只有一個實例
    if (target._instance) {
      console.log('返回現(xiàn)有實例');
      return target._instance;
    }

    // 創(chuàng)建實例
    const instance = Reflect.construct(target, argumentsList, newTarget);

    // 為單例保存實例
    if (target.name === 'Singleton') {
      target._instance = instance;
    }

    // 為實例添加額外屬性
    instance.createdAt = new Date();
    instance._id = Math.random().toString(36).substr(2, 9);

    console.log('創(chuàng)建新實例，ID:', instance._id);
    return instance;
  }
};

const ownKeysHandler = {
  ownKeys(target) {
    // 過濾掉以_開頭的私有屬性
    const keys = Reflect.ownKeys(target);
    return keys.filter(key => {
      if (typeof key === 'string') {
        return !key.startsWith('_');
      }
      return true;
    });
  }
};

const getOwnPropertyDescriptorHandler = {
  getOwnPropertyDescriptor(target, prop) {
    // 隱藏私有屬性的描述符
    if (prop.startsWith('_')) {
      return undefined;
    }
    return Reflect.getOwnPropertyDescriptor(target, prop);
  }
};

const definePropertyHandler = {
  defineProperty(target, prop, descriptor) {
    // 防止修改只讀屬性
    if (prop === 'id' && target.id) {
      console.warn('id屬性是只讀的');
      return false;
    }
    return Reflect.defineProperty(target, prop, descriptor);
  }
};

const deletePropertyHandler = {
  deleteProperty(target, prop) {
    // 防止刪除重要屬性
    const protectedProps = ['id', 'createdAt'];
    if (protectedProps.includes(prop)) {
      console.warn(`不能刪除受保護的屬性: ${prop}`);
      return false;
    }
    return Reflect.deleteProperty(target, prop);
  }
};

const preventExtensionsHandler = {
  preventExtensions(target) {
    // 在阻止擴展前添加標(biāo)記
    target._frozenAt = new Date();
    return Reflect.preventExtensions(target);
  }
};

const getPrototypeOfHandler = {
  getPrototypeOf(target) {
    return Reflect.getPrototypeOf(target);
  }
};

const setPrototypeOfHandler = {
  setPrototypeOf(target, prototype) {
    return Reflect.setPrototypeOf(target, prototype);
  }
};

const isExtensibleHandler = {
  isExtensible(targete) {
    return Reflect.isExtensible(targete);
  }
};

const target = { name: 'zhangsan' };
const handler = {
  get() {
    return 'foo';
  }
}
// 創(chuàng)建可撤銷代理
const { proxy, revoke } = Proxy.revocable(target, handler);

console.log(proxy.name); // 'zhangsan'

// 撤銷代理
revoke();

// 代理已失效
try {
  console.log(proxy.name); // TypeError: Cannot perform 'get' on a proxy that has been revoked
} catch (error) {
  console.log('錯誤:', error.message);
}

// 簡易版Vue3響應(yīng)式系統(tǒng)
class ReactiveSystem {
  constructor() {
    this.targetMap = new WeakMap(); // 存儲依賴關(guān)系
    this.effectStack = [];          // 當(dāng)前正在執(zhí)行的effect
    this.batchQueue = new Set();    // 批量更新隊列
    this.isBatching = false;        // 是否處于批量更新模式
  }

  // 核心：創(chuàng)建響應(yīng)式對象
  reactive(target) {
    return new Proxy(target, {
      get(target, key, receiver) {
        // 獲取原始值
        const result = Reflect.get(target, key, receiver);

        // 依賴收集
        track(target, key);

        // 深度響應(yīng)式（如果值是對象，繼續(xù)代理）
        if (result && typeof result === 'object') {
          return reactive(result);
        }

        return result;
      },

      set(target, key, value, receiver) {
        // 獲取舊值
        const oldValue = target[key];

        // 設(shè)置新值
        const result = Reflect.set(target, key, value, receiver);

        // 觸發(fā)更新（值確實改變時才觸發(fā)）
        if (oldValue !== value) {
          trigger(target, key);
        }

        return result;
      },

      // 處理刪除操作
      deleteProperty(target, key) {
        const hasKey = key in target;
        const result = Reflect.deleteProperty(target, key);

        if (hasKey && result) {
          trigger(target, key);
        }

        return result;
      }
    });
  }

  // 依賴收集
  track(target, key) {
    if (this.effectStack.length === 0) return;

    let depsMap = this.targetMap.get(target);
    if (!depsMap) {
      depsMap = new Map();
      this.targetMap.set(target, depsMap);
    }

    let dep = depsMap.get(key);
    if (!dep) {
      dep = new Set();
      depsMap.set(key, dep);
    }

    // 收集當(dāng)前正在執(zhí)行的effect
    const activeEffect = this.effectStack[this.effectStack.length - 1];
    if (activeEffect) {
      dep.add(activeEffect);
      // effect也需要知道哪些依賴收集了它
      activeEffect.deps.push(dep);
    }
  }

  // 觸發(fā)更新
  trigger(target, key) {
    const depsMap = this.targetMap.get(target);
    if (!depsMap) return;

    const dep = depsMap.get(key);
    if (dep) {
      // 如果是批量更新模式，加入隊列
      if (this.isBatching) {
        dep.forEach(effect => this.batchQueue.add(effect));
      } else {
        // 立即執(zhí)行所有依賴的effect
        dep.forEach(effect => {
          if (effect !== this.effectStack[this.effectStack.length - 1]) {
            effect.run();
          }
        });
      }
    }
  }

  // 創(chuàng)建effect（副作用）
  effect(fn) {
    const effect = new ReactiveEffect(fn, this);
    effect.run();

    // 返回停止函數(shù)
    const runner = effect.run.bind(effect);
    runner.effect = effect;
    runner.stop = () => effect.stop();

    return runner;
  }

  // 開始批量更新
  batchStart() {
    this.isBatching = true;
  }

  // 結(jié)束批量更新
  batchEnd() {
    this.isBatching = false;

    // 執(zhí)行隊列中的所有effect
    this.batchQueue.forEach(effect => {
      if (effect !== this.effectStack[this.effectStack.length - 1]) {
        effect.run();
      }
    });

    this.batchQueue.clear();
  }

  // computed計算屬性
  computed(getter) {
    let value;
    let dirty = true;

    const runner = this.effect(() => {
      value = getter();
      dirty = false;
    });

    return {
      get value() {
        if (dirty) {
          runner();
        }
        return value;
      }
    };
  }

  // watch偵聽器
  watch(source, callback, options = {}) {
    let getter;

    if (typeof source === 'function') {
      getter = source;
    } else {
      getter = () => this.traverse(source);
    }

    let oldValue;
    const job = () => {
      const newValue = runner();
      callback(newValue, oldValue);
      oldValue = newValue;
    };

    const runner = this.effect(getter, {
      lazy: true,
      scheduler: job
    });

    oldValue = runner();

    if (options.immediate) {
      job();
    }
  }

  // 深度遍歷對象（用于watch）
  traverse(value, seen = new Set()) {
    if (typeof value !== 'object' || value === null || seen.has(value)) {
      return value;
    }

    seen.add(value);

    for (const key in value) {
      this.traverse(value[key], seen);
    }

    return value;
  }
}

// 響應(yīng)式effect類
class ReactiveEffect {
  constructor(fn, scheduler) {
    this.fn = fn;
    this.scheduler = scheduler;
    this.deps = [];
    this.active = true;
  }

  run() {
    if (!this.active) return;

    try {
      this.scheduler.effectStack.push(this);
      return this.fn();
    } finally {
      this.scheduler.effectStack.pop();
    }
  }

  stop() {
    if (this.active) {
      // 從所有依賴中移除自己
      this.deps.forEach(dep => dep.delete(this));
      this.deps.length = 0;
      this.active = false;
    }
  }
}

// 簡易版immer實現(xiàn)
class Immer {
  constructor(baseState) {
    this.baseState = baseState;
    this.draft = this.createDraft(baseState);
    this.isModified = false;
  }

  // 創(chuàng)建草稿（代理）
  createDraft(base) {
    // 如果不是對象，直接返回
    if (typeof base !== 'object' || base === null) {
      return base;
    }

    // 處理數(shù)組
    if (Array.isArray(base)) {
      return this.createArrayDraft(base);
    }

    // 處理對象
    return this.createObjectDraft(base);
  }

  // 創(chuàng)建對象草稿
  createObjectDraft(base) {
    const draft = Array.isArray(base) ? [] : {};

    // 復(fù)制所有屬性
    for (const key in base) {
      if (base.hasOwnProperty(key)) {
        draft[key] = this.createDraft(base[key]);
      }
    }

    // 創(chuàng)建代理
    return new Proxy(draft, {
      get: (target, prop, receiver) => {
        // 特殊屬性處理
        if (prop === '__immer_draft__') return true;
        if (prop === '__immer_original__') return base;

        return Reflect.get(target, prop, receiver);
      },

      set: (target, prop, value, receiver) => {
        this.isModified = true;

        // 如果新值是普通值，直接設(shè)置
        if (typeof value !== 'object' || value === null) {
          return Reflect.set(target, prop, value, receiver);
        }

        // 如果新值是草稿，獲取其最終狀態(tài)
        if (value.__immer_draft__) {
          value = this.finalize(value);
        }

        // 如果新值是對象，創(chuàng)建新的草稿
        const newDraft = this.createDraft(value);
        return Reflect.set(target, prop, newDraft, receiver);
      },

      deleteProperty: (target, prop) => {
        this.isModified = true;
        return Reflect.deleteProperty(target, prop);
      }
    });
  }

  // 創(chuàng)建數(shù)組草稿（需要特殊處理）
  createArrayDraft(base) {
    const draft = this.createObjectDraft(base);

    // 代理數(shù)組方法
    const arrayMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];

    arrayMethods.forEach(method => {
      const originalMethod = Array.prototype[method];

      draft[method] = function (...args) {
        this.isModified = true;
        return originalMethod.apply(this, args);
      }.bind({ isModified: false }); // 這里簡化處理
    });

    return draft;
  }

  // 獲取草稿
  getDraft() {
    return this.draft;
  }

  // 完成修改，生成新狀態(tài)
  produce(producer) {
    // 執(zhí)行生產(chǎn)者函數(shù)
    producer(this.draft);

    // 如果沒有修改，返回原狀態(tài)
    if (!this.isModified) {
      return this.baseState;
    }

    // 最終化草稿，生成新狀態(tài)
    return this.finalize(this.draft);
  }

  // 最終化草稿（將草稿轉(zhuǎn)換為普通對象）
  finalize(draft) {
    // 如果不是草稿，直接返回
    if (!draft || !draft.__immer_draft__) {
      return draft;
    }

    const original = draft.__immer_original__;
    const result = Array.isArray(original) ? [] : {};
    let hasChanges = false;

    // 收集所有鍵（包括原對象和新對象）
    const allKeys = new Set([
      ...Object.keys(original || {}),
      ...Object.keys(draft)
    ]);

    for (const key of allKeys) {
      const originalValue = original ? original[key] : undefined;
      const draftValue = draft[key];

      // 如果屬性被刪除
      if (!(key in draft)) {
        hasChanges = true;
        continue;
      }

      // 如果值是草稿，遞歸最終化
      if (draftValue && draftValue.__immer_draft__) {
        const finalized = this.finalize(draftValue);
        if (finalized !== originalValue) {
          hasChanges = true;
          result[key] = finalized;
        } else {
          result[key] = originalValue;
        }
      }
      // 如果值被修改
      else if (draftValue !== originalValue) {
        hasChanges = true;
        result[key] = draftValue;
      }
      // 值未修改
      else {
        result[key] = originalValue;
      }
    }

    return hasChanges ? result : original;
  }
}

// 簡化API
function produce(baseState, producer) {
  const immer = new Immer(baseState);
  return immer.produce(producer);
}