const target = { username: 'alice', role: 'user' }

const proxy = new Proxy(target, {
  // get trap: fires on every property read
  get(target, prop, receiver) {
    console.log(`[GET] ${String(prop)}`)
    return Reflect.get(target, prop, receiver)
    // ← Reflect.get forwards the operation to the target correctly
    //   preserving prototype chain and the receiver context
  },

  // set trap: fires on every property write
  set(target, prop, value, receiver) {
    console.log(`[SET] ${String(prop)} = ${JSON.stringify(value)}`)

    if (prop === 'role' && !['user', 'admin', 'superadmin'].includes(value)) {
      throw new TypeError(`Invalid role: ${value}. Must be user | admin | superadmin`)
    }

    return Reflect.set(target, prop, value, receiver)
    // ← MUST return true/false to indicate success
    //   Reflect.set returns the correct boolean
  },

  // deleteProperty trap: fires on every `delete obj.prop`
  deleteProperty(target, prop) {
    if (prop === 'username') {
      throw new TypeError('username is a required field and cannot be deleted')
    }
    return Reflect.deleteProperty(target, prop)
  }
})

proxy.username        // Logs: [GET] username → 'alice'
proxy.role = 'admin'  // Logs: [SET] role = "admin"
proxy.role = 'god'    // ❌ TypeError: Invalid role: god
delete proxy.username // ❌ TypeError: username is a required field

// ❌ Direct assignment inside set trap — breaks prototype chain
const proxy = new Proxy(target, {
  set(target, prop, value) {
    target[prop] = value  // ← Direct write to target
    return true
  }
})

// The problem: when proxy is used as a prototype
const child = Object.create(proxy)
child.role = 'admin'
// set trap fires with: target = {proxy's target}, receiver = child
// target[prop] = value writes to the PROXY TARGET, not child
// child.role is never set — the write goes to the wrong object

// ✅ Reflect.set(target, prop, value, receiver) preserves the receiver
const proxy = new Proxy(target, {
  set(target, prop, value, receiver) {
    // receiver = child when called via prototype chain
    // Reflect.set correctly writes to child, not to target
    return Reflect.set(target, prop, value, receiver)
  }
})

// Simplified Vue 3-style reactive state manager
type Subscriber = () => void

const activeEffect: { current: Subscriber | null } = { current: null }
const targetMap = new WeakMap<object, Map<string | symbol, Set<Subscriber>>>()

function track(target: object, prop: string | symbol) {
  if (!activeEffect.current) return
  let propMap = targetMap.get(target)
  if (!propMap) targetMap.set(target, (propMap = new Map()))
  let subscribers = propMap.get(prop)
  if (!subscribers) propMap.set(prop, (subscribers = new Set()))
  subscribers.add(activeEffect.current)
}

function trigger(target: object, prop: string | symbol) {
  const subscribers = targetMap.get(target)?.get(prop)
  subscribers?.forEach(fn => fn())
}

function reactive<T extends object>(target: T): T {
  return new Proxy(target, {
    get(target, prop, receiver) {
      track(target, prop)  // ← Record that the current effect depends on this prop
      return Reflect.get(target, prop, receiver)
    },
    set(target, prop, value, receiver) {
      const result = Reflect.set(target, prop, value, receiver)
      trigger(target, prop)  // ← Notify all effects that depend on this prop
      return result
    }
  })
}

function effect(fn: Subscriber): void {
  activeEffect.current = fn
  fn()  // Run immediately to collect dependencies via track()
  activeEffect.current = null
}

// Usage
const state = reactive({ count: 0, name: 'Alice' })

effect(() => {
  console.log(`Count is: ${state.count}`)
  // This effect reads state.count → track() records (state, 'count') → effect
})
// Immediately prints: "Count is: 0"

state.count++
// set trap fires for 'count' → trigger() → effect re-runs
// Prints: "Count is: 1"

state.name = 'Bob'
// set trap fires for 'name' → trigger() → no effects depend on 'name' → nothing printed

// ✅ Chainable API SDK using Proxy — no code generation required
function createAPIClient(baseUrl: string) {
  const pathParts: string[] = []

  const handler: ProxyHandler<object> = {
    get(target, prop) {
      if (prop === 'get')    return (params?: Record<string, string>) => executeRequest('GET', params)
      if (prop === 'post')   return (body: unknown) => executeRequest('POST', undefined, body)
      if (prop === 'delete') return () => executeRequest('DELETE')

      // Any other property access extends the path
      pathParts.push(String(prop))
      return new Proxy({}, handler)  // ← Return new proxy to allow further chaining
    }
  }

  function executeRequest(method: string, params?: Record<string, string>, body?: unknown) {
    const path = `/${pathParts.join('/')}`
    const url  = new URL(path, baseUrl)
    if (params) Object.entries(params).forEach(([k, v]) => url.searchParams.set(k, v))
    return fetch(url.toString(), {
      method,
      body: body ? JSON.stringify(body) : undefined,
      headers: { 'Content-Type': 'application/json' },
    }).then(r => r.json())
  }

  return new Proxy({}, handler)
}

const api = createAPIClient('https://api.example.com')

// Property accesses chain the path; terminal method calls fire the request
await api.users.profile.get({ format: 'json' })  // GET /users/profile?format=json
await api.orders.post({ items: ['A', 'B'] })       // POST /orders
await api.sessions['abc-123'].delete()             // DELETE /sessions/abc-123

// ToPrimitive algorithm (simplified):
// 1. If value is already primitive → return it
// 2. If hint is 'string': call value.toString() first, then value.valueOf()
// 3. If hint is 'number' or 'default': call value.valueOf() first, then value.toString()
// 4. If neither returns a primitive → throw TypeError

const obj = {
  valueOf() { return 42 },
  toString() { return 'forty-two' }
}

// Number context → hint: 'number' → valueOf() first
console.log(obj - 0)   // 42 (valueOf() returned 42, a primitive number)
console.log(+obj)      // 42

// String context → hint: 'string' → toString() first
console.log(`${obj}`)  // 'forty-two' (toString() returned a string)
console.log('' + obj)  // '42' (!!) — + with a string uses hint 'default', not 'string'
                        //            default → valueOf() first → 42 → string concat → '42'

// You can override ToPrimitive with Symbol.toPrimitive
const custom = {
  [Symbol.toPrimitive](hint: 'number' | 'string' | 'default') {
    if (hint === 'number')  return 100
    if (hint === 'string')  return 'one hundred'
    return true  // 'default' hint
  }
}

console.log(+custom)    // 100 (number hint)
console.log(`${custom}`) // 'one hundred' (string hint)
console.log(custom + 1) // 2 (default hint → true → 1 → 1 + 1 = 2)

// The 8 falsy values:
// false, 0, -0, 0n (BigInt), "", '', ``, null, undefined, NaN

// ❌ Common misconception: empty array and object are falsy
if ([]) console.log('truthy')    // ✅ Prints — [] is TRUTHY
if ({}) console.log('truthy')    // ✅ Prints — {} is TRUTHY
if ('') console.log('falsy')     // ❌ Does NOT print — '' is FALSY
if (0) console.log('falsy')      // ❌ Does NOT print — 0 is FALSY

// ❌ The trap: empty array in boolean context is truthy, but in == comparison...
console.log([] == false)  // true — Abstract Equality coerces [] to '' then 0
console.log([] == 0)      // true — [] → '' → 0
console.log([] == '')     // true — [] → ''

// ✅ Always use strict equality for reliable comparisons
console.log([] === false)  // false
console.log([] === 0)      // false

// === (Strict Equality — SameValueZero algorithm)
// 1. If types differ → false
// 2. If NaN → false (NaN !== NaN)
// 3. +0 === -0 → true
NaN === NaN    // false ← the famous gotcha
+0 === -0      // true

// Object.is() (SameValue algorithm)
// Identical to === EXCEPT:
// NaN → true  (SameValue: NaN equals NaN)
// +0/-0 → false (SameValue: +0 does NOT equal -0)
Object.is(NaN, NaN)   // true  ← React uses this for state comparison
Object.is(+0, -0)     // false ← Mathematically correct: +0 ≠ -0
Object.is(1, 1)       // true
Object.is(null, null) // true

// ❌ Why React uses Object.is instead of ===
function useState<T>(initialValue: T): [T, (next: T) => void] {
  // React's actual bail-out check (simplified)
  if (Object.is(currentState, newState)) return  // No re-render if same value

  // If React used ===:
  // setState(NaN) after useState(NaN) would always trigger a re-render
  // because NaN !== NaN — infinite update loop risk
  // Object.is(NaN, NaN) === true → correct bail-out
}