// ❌ Broken diagnosis — console.time only measures the handler's own execution
document.querySelector('#process-btn').addEventListener('click', () => {
  console.time('click')
  processDataSynchronously(largeDataset) // 300ms
  updateUIState()                         // 50ms
  console.timeEnd('click')               // Logs: "click: 350ms"

  // What console.time does NOT measure:
  // — Input Delay: how long the main thread was busy BEFORE this handler ran
  // — Presentation Delay: how long the rendering pipeline took AFTER the handler ran
  // Total INP for this interaction: potentially 600ms+
})

User input (click/keydown/pointerdown)
│
├── INPUT DELAY ──────────────────────────────────────────────────────────────
│   Main thread was busy when the event fired.
│   Duration: time from input event until the browser's event callback queue runs.
│   Caused by: long tasks running at the time of input (analytics, image decode,
│              layout recalculation, other event handlers).
│
├── PROCESSING TIME ──────────────────────────────────────────────────────────
│   The event handler(s) execute.
│   Duration: from first handler start to last handler complete.
│   Caused by: slow event handlers, synchronous DOM mutations, expensive calculations.
│
└── PRESENTATION DELAY ───────────────────────────────────────────────────────
    The rendering pipeline runs: rAF callbacks → Style → Layout → Paint → Composite.
    Duration: from last handler complete to frame committed to the compositor.
    Caused by: ResizeObserver/MutationObserver callbacks, forced layout (reflow),
               large DOM subtrees being style-recalculated.

Total INP = Input Delay + Processing Time + Presentation Delay

// LoAF — attribute long frames to specific scripts and interactions
// Feature-detect before observing — Firefox and Safari do not support this entryType
if (PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')) {
  const observer = new PerformanceObserver(list => {
    list.getEntries().forEach(entry => {
      if (entry.duration > 50) { // Frame took more than 50ms
        console.group(`Long frame: ${entry.duration.toFixed(0)}ms`)

        // Which scripts ran during this frame?
        entry.scripts.forEach(script => {
          console.log('Script:', script.sourceURL)
          console.log('  Duration:', script.duration.toFixed(0) + 'ms')
          console.log('  Invoker type:', script.invokerType) // 'event-listener', 'user-callback', etc.
          console.log('  Invoker:', script.invoker) // e.g., 'BUTTON.onclick'
        })

        // Which interaction does this frame belong to?
        if (entry.firstUIEventTimestamp > 0) {
          console.log('Interaction timestamp:', entry.firstUIEventTimestamp)
        }

        console.groupEnd()
      }
    })
  })
  observer.observe({ type: 'long-animation-frame', buffered: true })
}

// Option 1: scheduler.yield() — CORRECT for INP
// Yields to the browser's task queue and resumes AFTER higher-priority work
// (including pending input events) has been processed
// Shipped: Chrome 129+, Edge 129+, Firefox 142+ (Safari: use setTimeout fallback)
async function processLargeList(items) {
  for (let i = 0; i < items.length; i++) {
    processItem(items[i])

    // Every 50 items, yield to let the browser handle pending interactions
    if (i % 50 === 0) {
      if ('scheduler' in globalThis && 'yield' in scheduler) {
        await scheduler.yield() // ← Correct: resumes before other queued tasks
      } else {
        await new Promise(resolve => setTimeout(resolve, 0)) // Safari fallback
      }
    }
  }
}

// Option 2: requestIdleCallback — WRONG for INP
// Only runs during browser idle time — does NOT yield to input events
// If the browser is busy with rendering, rIC doesn't fire
// If the user is actively interacting, rIC may delay until the interaction is over
window.requestIdleCallback(callback) // ← Does not help INP

// Option 3: setTimeout(fn, 0) — PARTIAL for INP
// Yields to the macrotask queue, which includes input events
// Less precise than scheduler.yield() — may be delayed by other macrotasks
// Degrades to 1ms minimum on inactive tabs (throttled)
await new Promise(resolve => setTimeout(resolve, 0)) // ← Helps, but less predictably

// Debouncing — reduces how OFTEN a task starts
// Does NOT help if the task itself is a long-running synchronous operation
const debouncedSearch = debounce((query) => {
  runExpensiveSearch(query) // Still a 400ms synchronous task when it runs
}, 300)
// INP impact: zero improvement — the task still blocks for 400ms when it fires

// Yielding — breaks a RUNNING task into smaller chunks
async function runExpensiveSearch(query) {
  const results = await fetchResults(query) // 50ms network
  for (let i = 0; i < results.length; i++) {
    processResult(results[i])               // 2ms per result × 200 = 400ms total
    if (i % 20 === 0) await scheduler.yield() // Yield every 40ms
  }
}
// INP impact: real improvement — no chunk takes more than 40ms

// startTransition — marks a state update as non-urgent
// React will pause this render if an input event arrives
import { startTransition, useState } from 'react'

function SearchPage() {
  const [inputValue, setInputValue] = useState('')
  const [searchQuery, setSearchQuery] = useState('')

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value) // Urgent — updates the input immediately

    startTransition(() => {
      setSearchQuery(e.target.value) // Non-urgent — React may pause/interrupt this
    })
  }

  return (
    <>
      <input value={inputValue} onChange={handleChange} /> {/* Always responsive */}
      <SearchResults query={searchQuery} />  {/* May be mid-render when interrupted */}
    </>
  )
}

// useDeferredValue — defer an expensive render to avoid blocking input
// WARNING: causes a double render — first with the old value, then with the new value
// The double render cost can worsen INP if the deferred render is expensive
function SearchResults({ query }: { query: string }) {
  const deferredQuery = useDeferredValue(query)
  // deferredQuery lags behind query during rapid typing
  // The results panel updates after the input has settled

  const isStale = query !== deferredQuery

  return (
    <div style={{ opacity: isStale ? 0.7 : 1 }}>
      <ExpensiveResultsList query={deferredQuery} />
    </div>
  )
}

// Production INP instrumentation using the web-vitals library
import { onINP } from 'web-vitals/attribution'

onINP(({ value, rating, attribution }) => {
  analytics.track('inp', {
    value,   // INP duration in ms
    rating,  // 'good' | 'needs-improvement' | 'poor'

    // Which interaction type failed?
    interactionType: attribution.interactionType, // 'click', 'keyboard', 'tap'

    // Where did the time go?
    inputDelay: attribution.inputDelay,
    processingDuration: attribution.processingDuration,
    presentationDelay: attribution.presentationDelay,

    // Which element was interacted with?
    interactionTarget: attribution.interactionTargetElement?.outerHTML?.slice(0, 100),
  })
})