import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    // Initialize state to track if an error has occurred
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  // static getDerivedStateFromError(error) is called when an error is thrown
  // It returns an object to update the state, allowing the next render to display a fallback UI.
  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true, error: error };
  }

  // componentDidCatch(error, errorInfo) is called after an error has been caught
  // This method is for side-effects like logging errors.
  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("ErrorBoundary caught an error:", error, errorInfo);
    // Store error info in state if needed for detailed display
    this.setState({ errorInfo: errorInfo });
    // Example: Log to a remote service
    // logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        <div style={{ padding: '20px', border: '1px solid red', borderRadius: '5px', backgroundColor: '#ffe6e6' }}>
          <p><strong>Something went wrong.</strong></p>
          <p>We're working to fix the issue. Please try refreshing the page.</p>
          {/* Optionally display detailed error information in development */}
          {process.env.NODE_ENV === 'development' && this.state.error && (
            <details style={{ whiteSpace: 'pre-wrap' }}>
              {this.state.error.toString()}
              <br />
              {this.state.errorInfo && this.state.errorInfo.componentStack}
            </details>
          )}
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

/* --- Usage Example in App.js or a parent component --- */
/*
// BuggyComponent.js - A component designed to throw an error for demonstration
import React from 'react';

function BuggyComponent() {
  const [count, setCount] = React.useState(0);

  // This effect will cause an error after 5 renders if count is 5
  React.useEffect(() => {
    if (count === 5) {
      throw new Error('I crashed! This error will be caught by ErrorBoundary.');
    }
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(prev => prev + 1)}>Increment</button>
      <p>Click the button to reach 5 and trigger the error.</p>
    </div>
  );
}

export default BuggyComponent;
*/

/*
// App.js - Integrating ErrorBoundary with a problematic component
import React from 'react';
import ErrorBoundary from './ErrorBoundary'; // Adjust path as needed
import BuggyComponent from './BuggyComponent'; // Adjust path as needed

function App() {
  return (
    <div className="App">
      <h1>Error Boundary Demonstration</h1>
      <p>The component below is wrapped in an ErrorBoundary.</p>
      <ErrorBoundary>
        <BuggyComponent />
      </ErrorBoundary>
      <p>This part of the app is unaffected by the BuggyComponent's error.</p>
      <div>
        <h2>Another Stable Section</h2>
        <p>This content remains fully functional and stable, even if the above component crashes.</p>
      </div>
    </div>
  );
}

export default App;
*/

import React, { useState } from 'react';

function EventHandlerErrorComponent() {
  const [data, setData] = useState(null);
  const [errorState, setErrorState] = useState(null);

  const handleClick = () => {
    setErrorState(null); // Clear previous error
    try {
      // Simulate an error within an event handler
      // This error will NOT be caught by an ErrorBoundary wrapping this component.
      const invalidData = JSON.parse("{'malformed json'}"); // This will throw a SyntaxError
      setData(invalidData);
    } catch (error) {
      console.error("Caught error in event handler:", error.message);
      setErrorState("An error occurred during click: " + error.message);
      // Implement user feedback or specific error state
    }
  };

  const handleAsyncOperation = async () => {
    setErrorState(null); // Clear previous error
    try {
      // Simulate an async operation that fails (e.g., network error)
      // This error will NOT be caught by an ErrorBoundary wrapping this component.
      const response = await fetch('https://invalid.url/api/data'); // This will throw a network error
      if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
      }
      const result = await response.json();
      setData(result);
    } catch (error) {
      console.error("Caught error in async operation:", error.message);
      setErrorState("Failed to fetch data: " + error.message);
    }
  };

  return (
    <div style={{ marginTop: '30px', border: '2px dashed blue', padding: '20px', backgroundColor: '#e6f7ff' }}>
      <h3>Errors Outside Error Boundaries (Requires explicit try...catch)</h3>
      <p>Error Boundaries <strong>DO NOT</strong> catch errors originating from:</p>
      <ul>
        <li><strong>Event Handlers:</strong> Click, change, submit, etc.</li>
        <li><strong>Asynchronous Code:</strong> <code>setTimeout</code>, <code>requestAnimationFrame</code>, network requests.</li>
        <li>The Error Boundary component itself.</li>
        <li>Server-side rendering (SSR).</li>
      </ul>
      <p>For these scenarios, implement traditional <code>try...catch</code> blocks.</p>
      <button onClick={handleClick} style={{ marginRight: '10px' }}>Trigger Event Handler Error</button>
      <button onClick={handleAsyncOperation}>Trigger Async Fetch Error</button>
      {errorState && <p style={{ color: 'red', fontWeight: 'bold' }}>{errorState}</p>}
      {data && <p>Data: {JSON.stringify(data)}</p>}
    </div>
  );
}

export default EventHandlerErrorComponent;

/* --- Integration with App.js --- */
/*
// App.js
import React from 'react';
import ErrorBoundary from './ErrorBoundary'; // Adjust path as needed
import BuggyComponent from './BuggyComponent'; // Adjust path as needed
import EventHandlerErrorComponent from './EventHandlerErrorComponent'; // Adjust path as needed

function App() {
  return (
    <div className="App">
      <h1>Comprehensive Error Handling</h1>
      <p>Demonstrating both Error Boundaries and explicit try...catch for different error types.</p>
      
      <h2>Components Protected by Error Boundary</h2>
      <ErrorBoundary>
        <BuggyComponent />
      </ErrorBoundary>
      <p>The section above is shielded by an ErrorBoundary.</p>

      <h2>Components with Explicit Try/Catch</h2>
      <EventHandlerErrorComponent />
      <p>The section above handles its own event/async errors.</p>
      
      <div style={{ marginTop: '30px', borderTop: '1px solid #ccc', paddingTop: '20px' }}>
        <h3>Other Stable Application Parts</h3>
        <p>This content remains operational regardless of errors in the above sections.</p>
      </div>
    </div>
  );
}

export default App;
*/