'use client';

import { useEffect } from 'react';
import Link from 'next/link';
import { trackEvent } from '../lib/telemetry';

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    trackEvent('error', 'app', 'error_boundary', {
      message: error.message,
      tags: error.digest ? { digest: error.digest } : undefined,
    });
  }, [error]);

  return (
    <div className="flex min-h-screen items-center justify-center p-4" style={{ background: 'var(--cm-bg-canvas)' }}>
      <div className="mx-auto max-w-md text-center">
        <div className="mb-4 text-5xl">⚠</div>
        <h2 className="mb-2 text-xl font-semibold" style={{ color: 'var(--cm-text-primary)' }}>Something went wrong</h2>
        <p className="mb-6 text-sm" style={{ color: 'var(--cm-text-secondary)' }}>
          {error.message || 'An unexpected error occurred.'}
        </p>
        <div className="flex gap-3 justify-center">
          <button
            onClick={reset}
            className="rounded-lg px-4 py-2 text-sm font-medium"
            style={{ background: 'var(--cm-accent-primary)', color: 'var(--cm-bg-canvas)' }}
          >
            Try again
          </button>
          <Link
            href="/"
            className="rounded-lg px-4 py-2 text-sm font-medium"
            style={{ background: 'var(--cm-surface-card)', color: 'var(--cm-text-primary)' }}
          >
            Home
          </Link>
        </div>
      </div>
    </div>
  );
}