import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
import { ToastProvider } from './components/ui/Toast';
import { GlobalErrorBoundary } from './components/ui/ErrorBoundary';
import { initWebMCPTools } from './lib/webmcp-tools';
import { setupPluginListeners } from 'tauri-plugin-mcp';

// Global error handler for uncaught errors
const handleGlobalError = (error: Error, errorInfo: React.ErrorInfo) => {
  console.error('[GlobalErrorHandler] Uncaught error:', error);
  console.error('[GlobalErrorHandler] Component stack:', errorInfo.componentStack);

  // In production, you could send this to an error reporting service
  // e.g., Sentry, LogRocket, etc.
  if (import.meta.env.PROD) {
    // sendToErrorReportingService(error, errorInfo);
  }
};

// Global reset handler - reload the page
const handleGlobalReset = () => {
  console.log('[GlobalErrorHandler] Resetting application...');
  // Clear any cached state
  localStorage.removeItem('app-state');
  sessionStorage.clear();
};

// Initialize WebMCP debugging tools (dev mode only, Chrome 146+)
initWebMCPTools();

// Initialize tauri-plugin-mcp event listeners (dev mode only)
if (import.meta.env.DEV) {
  setupPluginListeners().catch((err) => {
    console.warn('[MCP] Failed to setup plugin listeners:', err);
  });
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <GlobalErrorBoundary
      onError={handleGlobalError}
      onReset={handleGlobalReset}
      showConnectionStatus={true}
    >
      <ToastProvider>
        <App />
      </ToastProvider>
    </GlobalErrorBoundary>
  </React.StrictMode>,
);