// Automatically tracked:
// - LCP (Largest Contentful Paint)
// - FID (First Input Delay)
// - CLS (Cumulative Layout Shift)
// - TTFB (Time to First Byte)
// - FCP (First Contentful Paint)
// - INP (Interaction to Next Paint)

import { performanceMonitor } from '@/lib/performance/monitor'

// Record a custom metric
performanceMonitor.recordCustomMetric({
  name: 'api-response-time',
  value: 250,
  unit: 'ms',
  tags: {
    endpoint: '/api/messages',
    method: 'POST',
  },
})

import { useApiPerformance } from '@/hooks/use-performance'

function MyComponent() {
  const { recordApiCall } = useApiPerformance()

  const fetchData = async () => {
    const start = performance.now()
    try {
      const response = await fetch('/api/data')
      const duration = performance.now() - start
      recordApiCall('/api/data', duration, response.ok)
    } catch (error) {
      const duration = performance.now() - start
      recordApiCall('/api/data', duration, false)
    }
  }
}

import { useWebSocketPerformance } from '@/hooks/use-performance'

function WebSocketComponent() {
  const { recordLatency, recordMessage } = useWebSocketPerformance()

  const sendMessage = (message: string) => {
    const start = performance.now()

    socket.emit('message', message, () => {
      const latency = performance.now() - start
      recordLatency(latency)
    })

    recordMessage('sent', message.length)
  }
}

import { useRenderPerformance } from '@/hooks/use-performance';

function MyComponent() {
  const { renderCount } = useRenderPerformance('MyComponent');

  return <div>Rendered {renderCount} times</div>;
}

// Automatically tracked every 10 seconds
// No manual code required

import { usePerformance } from '@/hooks/use-performance';

function PerformanceDashboard() {
  const {
    snapshot,      // Current performance snapshot
    score,         // Performance scores
    metrics,       // Web Vitals metrics
    customMetrics, // Custom metrics
    warnings,      // Performance warnings
    stats,         // Statistical analysis
    trends,        // Trend analysis
    refresh,       // Manual refresh
    reset,         // Reset all data
    clearWarning,  // Clear a warning
    clearAllWarnings,
    recordCustomMetric,
  } = usePerformance();

  return (
    <div>
      <h1>Performance Score: {score.overall}</h1>
      <p>LCP: {snapshot.webVitals.lcp}ms</p>
      <p>API Avg: {stats.apiResponseTime.avg}ms</p>
    </div>
  );
}

import { usePerformanceWarnings } from '@/hooks/use-performance';

function WarningsBanner() {
  const {
    warnings,
    criticalWarnings,
    activeWarnings,
    clearWarning,
    clearAllWarnings,
  } = usePerformanceWarnings();

  if (activeWarnings.length === 0) return null;

  return (
    <div className="warnings">
      {activeWarnings.map((warning) => (
        <div key={warning.id} className={warning.severity}>
          <p>{warning.message}</p>
          <button onClick={() => clearWarning(warning.id)}>Dismiss</button>
        </div>
      ))}
    </div>
  );
}

import { usePerformanceTimeSeries } from '@/hooks/use-performance';

function PerformanceChart() {
  const timeSeries = usePerformanceTimeSeries(
    'api-response-time',
    3600000 // 1 hour
  );

  return (
    <LineChart
      data={timeSeries.map((point) => ({
        time: new Date(point.timestamp),
        value: point.value,
      }))}
    />
  );
}

import PerformanceMonitor from '@/components/admin/PerformanceMonitor';

export default function AdminPerformancePage() {
  return (
    <div className="admin-layout">
      <PerformanceMonitor />
    </div>
  );
}

// No code needed - automatic tracking for:
// - /api/* routes
// - /v1/graphql endpoints

import { measurePerformanceAsync } from '@/lib/performance/monitor'

async function fetchData() {
  return measurePerformanceAsync(
    'fetch-messages',
    async () => {
      const response = await fetch('/api/messages')
      return response.json()
    },
    { endpoint: '/api/messages' }
  )
}

import { ApolloLink } from '@apollo/client'
import { performanceMonitor } from '@/lib/performance/monitor'

const performanceLink = new ApolloLink((operation, forward) => {
  const start = performance.now()

  return forward(operation).map((response) => {
    const duration = performance.now() - start

    performanceMonitor.recordCustomMetric({
      name: 'graphql-query-time',
      value: duration,
      unit: 'ms',
      tags: {
        operation: operation.operationName,
        type: operation.query.definitions[0]?.operation || 'unknown',
      },
    })

    return response
  })
})

import { memo, useCallback } from 'react';

// Memoize expensive components
const ExpensiveComponent = memo(({ data }) => {
  return <div>{/* ... */}</div>;
});

// Use useCallback for event handlers
function Parent() {
  const handleClick = useCallback(() => {
    // ...
  }, []);

  return <ExpensiveComponent onClick={handleClick} />;
}

import dynamic from 'next/dynamic';

// Lazy load heavy components
const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <Spinner />,
  ssr: false,
});

import Image from 'next/image';

// Use Next.js Image component
<Image
  src="/hero.jpg"
  width={1200}
  height={600}
  priority // for LCP images
  alt="Hero"
/>

import useSWR from 'swr'

function Messages() {
  // SWR automatically caches responses
  const { data } = useSWR('/api/messages', fetcher, {
    revalidateOnFocus: false,
    dedupingInterval: 2000,
  })
}

import { useDebouncedCallback } from 'use-debounce';

function SearchInput() {
  const debouncedSearch = useDebouncedCallback(
    (value) => {
      // Expensive search operation
      performSearch(value);
    },
    300
  );

  return <input onChange={(e) => debouncedSearch(e.target.value)} />;
}

import { useVirtualizer } from '@tanstack/react-virtual';

function LongList({ items }) {
  const parentRef = useRef();

  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 50,
  });

  return (
    <div ref={parentRef} style={{ height: '500px', overflow: 'auto' }}>
      <div style={{ height: virtualizer.getTotalSize() }}>
        {virtualizer.getVirtualItems().map((virtualRow) => (
          <div key={virtualRow.index}>{items[virtualRow.index]}</div>
        ))}
      </div>
    </div>
  );
}

import { useEffect } from 'react'

function Component() {
  useEffect(() => {
    const subscription = observable.subscribe(/* ... */)

    // Always clean up!
    return () => {
      subscription.unsubscribe()
    }
  }, [])
}

import { Profiler } from 'react';
import { recordRenderTime } from '@/lib/performance/monitor';

function App() {
  return (
    <Profiler
      id="App"
      onRender={(id, phase, actualDuration) => {
        recordRenderTime(id, phase, actualDuration);
      }}
    >
      <YourApp />
    </Profiler>
  );
}