'use client';

import { useReportWebVitals } from 'next/web-vitals';
import { useAnalytics } from './useAnalytics';

/**
 * WebVitalsTracker component.
 *
 * Captures Next.js Web Vitals and reports them to Umami as custom events.
 * This provides "meaningful" page speed tracking by measuring real user
 * experiences (LCP, CLS, INP, etc.).
 */
export default function WebVitalsTracker() {
  const { trackEvent } = useAnalytics();

  useReportWebVitals((metric) => {
    const { name, value, id, label } = metric;

    // Determine rating (simplified version of web-vitals standards)
    let rating: 'good' | 'needs-improvement' | 'poor' = 'good';

    if (name === 'LCP') {
      if (value > 4000) rating = 'poor';
      else if (value > 2500) rating = 'needs-improvement';
    } else if (name === 'CLS') {
      if (value > 0.25) rating = 'poor';
      else if (value > 0.1) rating = 'needs-improvement';
    } else if (name === 'FID') {
      if (value > 300) rating = 'poor';
      else if (value > 100) rating = 'needs-improvement';
    } else if (name === 'FCP') {
      if (value > 3000) rating = 'poor';
      else if (value > 1800) rating = 'needs-improvement';
    } else if (name === 'TTFB') {
      if (value > 1500) rating = 'poor';
      else if (value > 800) rating = 'needs-improvement';
    } else if (name === 'INP') {
      if (value > 500) rating = 'poor';
      else if (value > 200) rating = 'needs-improvement';
    }

    // Report to Umami
    trackEvent('web-vital', {
      metric: name,
      value: Math.round(name === 'CLS' ? value * 1000 : value), // CLS is a score, multiply by 1000 to keep as integer if preferred
      rating,
      id,
      label,
      path: typeof window !== 'undefined' ? window.location.pathname : undefined,
    });
  });

  return null;
}