import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import ErrorImage from '../src/Images/Error.png'; // Adjust if path differs

const subDirectory = import.meta.env.ENV_BASE_URL

const GlobalErrorHandler = ({ children }) => {
  const navigate = useNavigate();
  const [hasError, setHasError] = useState(false);

  useEffect(() => {
    const handleError = (event) => {
      const error = event?.reason || event?.message;
  
      // Skip known harmless errors (like cancellation or validation)
      if (
        error?.errorFields ||
        error?.name === 'CanceledError' ||  // Axios cancel error
        error?.message?.includes('canceled') || // string version
        error?.message?.includes('Request failed with status code 499') || // some systems use this
        error?.message?.includes('Network request cancelled') ||
        (typeof error === 'string' && (
          error.includes('validation') ||
          error.includes('canceled') ||
          error.includes('aborted')
        ))
      ) {
        return; 
      }
  
      console.error('Global Error:', error);
      setHasError(true);
    };

    window.onerror = handleError;
    window.onunhandledrejection = handleError;

    return () => {
      window.onerror = null;
      window.onunhandledrejection = null;
    };
  }, []);


  const goHome = () => {
    setHasError(false); // ✅ Reset error so we can see the app again
    navigate(`${subDirectory}`);
  };

  if (hasError) {
    return (
      <div style={styles.container}>
        <img src={ErrorImage} alt="Error occurred" style={styles.image} />
        <h1 style={styles.heading}>Oops! Something went wrong.</h1>
        <p style={styles.message}>
          An unexpected error occurred. Please try again later or{' '}
          <span onClick={goHome} style={styles.link}>Home</span>.
        </p>
      </div>
    );
  }

  return children;
};

const styles = {
  container: {
    textAlign: 'center',
    padding: '50px',
    fontFamily: 'Arial, sans-serif',
  },
  image: {
    width: '150px',
    maxWidth: '90%',
    marginBottom: '30px',
  },
  heading: {
    fontSize: '2rem',
    color: '#333',
  },
  message: {
    fontSize: '1rem',
    color: '#666',
  },
  link: {
    color: '#1292ee',
    textDecoration: 'underline',
    cursor: 'pointer',
  },
};

export default GlobalErrorHandler;