import "./bootstrapConfig.js";
import React, { Suspense } from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import { AuthProvider } from "./context/AuthProvider";
import { RecoilRoot } from "recoil";
import LoadingStatic from "./pages/Dashboard/LoadingStatic";

// Lazy load App component
// const App = lazy(() => import("./App.jsx"));
import App from "./App.jsx";

// Import critical CSS first
import "@fortawesome/fontawesome-free/css/all.min.css";
import "simplebar-react/dist/simplebar.min.css";
import "aos/dist/aos.css";
import "reactflow/dist/style.css";
import "./App.css";
import './styles/syncfusion-theme-override.css';
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

// Apply initial theme based on localStorage
const applyInitialTheme = () => {
  try {
    // بررسی system preference
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    
    const storedState = localStorage.getItem('recoil-persist');
    let theme = 'light';
    
    if (storedState) {
      const { pageMode } = JSON.parse(storedState);
      theme = pageMode?.mode || (prefersDark ? 'dark' : 'light');
    } else {
      theme = prefersDark ? 'dark' : 'light';
    }
    
    document.documentElement.classList.toggle('dark', theme === 'dark');
    document.documentElement.setAttribute('data-theme', theme);
  } catch (e) {
    console.error('Error applying initial theme:', e);
  }
};

// Apply theme before rendering
applyInitialTheme();

// Configure React Query with better defaults
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      retry: 1,
      staleTime: 5 * 60 * 1000, // 5 minutes
    },
  },
});

// Error boundary component
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null, showDetails: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    console.error('Error caught by boundary:', error, errorInfo);
    // ارسال خطا به سرویس monitoring
    // ذخیره اطلاعات خطا برای نمایش/گزارش
    this.setState({ errorInfo });
    this.logErrorToService(error, errorInfo);
  }

  // ارسال خطا به سرویس مانیتورینگ (پیاده‌سازی ساده موقت)
  logErrorToService(error, errorInfo) {
    try {
      // در محیط توسعه در کنسول چاپ می‌کنیم
      if (typeof window !== 'undefined' && process && process.env && process.env.NODE_ENV !== 'production') {
        console.error('Reporting error to service (dev):', { error, errorInfo });
      }
      // TODO: در صورت نیاز، ارسال به سرویس‌هایی مثل Sentry/LogRocket اضافه شود
    } catch (e) {
      // جلوگیری از کرش شدن در صورت بروز خطا هنگام گزارش‌دهی
      console.error('Failed to report error:', e);
    }
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="error-boundary min-h-screen flex items-center justify-center bg-slate-50 dark:bg-slate-900 p-4">
          <div className="w-full max-w-2xl bg-white dark:bg-slate-800 rounded-2xl shadow-xl border border-slate-200 dark:border-slate-700 p-7 rtl">
            <div className="flex items-center gap-3 mb-3">
              <div className="w-11 h-11 rounded-xl bg-gradient-to-br from-rose-200 to-rose-300 dark:from-rose-300/20 dark:to-rose-400/20 flex items-center justify-center ring-1 ring-white/50">
                <svg className="w-[22px] h-[22px]" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 9v4" className="stroke-rose-700 dark:stroke-rose-400" strokeWidth="2" strokeLinecap="round" />
                  <path d="M12 17h.01" className="stroke-rose-700 dark:stroke-rose-400" strokeWidth="2" strokeLinecap="round" />
                  <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" className="stroke-rose-500" strokeWidth="1.6" fill="#fff" />
                </svg>
              </div>
              <div>
                <h2 className="m-0 text-xl font-bold text-slate-900 dark:text-slate-100"> مشکلی پیش آمده است</h2>
                <p className="mt-1 text-slate-600 dark:text-slate-300 leading-6">
                  متأسفانه هنگام نمایش این صفحه خطایی رخ داد. می‌توانید دوباره تلاش کنید یا اگر مشکل ادامه داشت با پشتیبانی تماس بگیرید.
                </p>
              </div>
            </div>

            <div className="flex flex-wrap items-center gap-2 mt-4">
              <a
                href="/dashboard"
                className="inline-flex items-center justify-center px-4 py-2 rounded-xl font-semibold text-white bg-gradient-to-br from-blue-600 to-blue-700 shadow-md shadow-blue-600/25 hover:from-blue-500 hover:to-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500/50"
              >
                رفتن به داشبورد
              </a>
              <button
                onClick={() => this.setState({ showDetails: !this.state.showDetails })}
                className="inline-flex items-center justify-center px-3 py-2 rounded-xl font-semibold border border-slate-200 dark:border-slate-700 bg-slate-100 text-slate-900 dark:bg-slate-700 dark:text-slate-100 hover:bg-slate-200 dark:hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-slate-400/40"
              >
                {this.state.showDetails ? 'بستن جزئیات' : 'نمایش جزئیات'}
              </button>
              <a
                href="/"
                className="inline-flex items-center justify-center px-3 py-2 rounded-xl font-semibold border border-slate-200 dark:border-slate-700 bg-white text-slate-900 dark:bg-slate-800 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400/40"
              >
                بازگشت به خانه
              </a>
            </div>

            {this.state.showDetails && (this.state.error || this.state.errorInfo) && (
              <pre className="mt-4 p-3 rounded-xl bg-slate-900 text-slate-200 overflow-auto max-h-56 text-xs leading-6 font-mono whitespace-pre-wrap">
                {this.state.error?.toString()}
                {'\n'}
                {this.state.errorInfo?.componentStack}
              </pre>
            )}
          </div>
        </div>
      );
    }
    return this.props.children;
  }
}

ReactDOM.createRoot(document.getElementById("root")).render(
  <ErrorBoundary>
    <BrowserRouter>
      <QueryClientProvider client={queryClient}>
        <RecoilRoot>
          <AuthProvider>
            <Suspense fallback={<LoadingStatic />}>
              <App />
            </Suspense>
          </AuthProvider>
        </RecoilRoot>
      </QueryClientProvider>
    </BrowserRouter>
  </ErrorBoundary>
);