import React, { ErrorInfo, ReactNode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import Router from './components/Router.tsx';
import { DataProvider } from './components/DataContext.tsx';

interface ErrorBoundaryProps {
  children?: ReactNode;
}

interface ErrorBoundaryState {
  hasError: boolean;
  error?: Error;
}

// ErrorBoundary class component to catch rendering errors in its child component tree and display a fallback UI.
// Fixed property access errors by using explicit member declarations which ensures 'state' and 'props' are correctly typed and accessible.
class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
  // Explicitly defining state and props to resolve "Property 'state'/'props' does not exist" errors.
  public state: ErrorBoundaryState;
  public props: ErrorBoundaryProps;

  constructor(props: ErrorBoundaryProps) {
    super(props);
    // Initialize component state correctly.
    this.state = { hasError: false };
  }

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

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error("OneQlek Application Crash:", error, errorInfo);
  }

  render() {
    // Access state through this.state.
    if (this.state.hasError) {
      return (
        <div className="min-h-screen bg-[#080C18] flex items-center justify-center p-8 text-center font-sans">
          <div className="max-w-md bg-[#101729] border border-white/10 p-8 rounded-3xl shadow-2xl">
            <div className="w-16 h-16 bg-red-500/10 text-red-500 rounded-full flex items-center justify-center mx-auto mb-6">
                <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
            </div>
            <h1 className="text-2xl font-bold text-white mb-4">Initialization Error</h1>
            <p className="text-slate-400 mb-6 text-sm leading-relaxed">
              We encountered a technical issue while loading the dashboard engine. This usually happens due to a module resolution conflict.
            </p>
            {/* Display error information if caught to aid debugging. */}
            {this.state.error && (
              <pre className="text-left bg-black/40 p-4 rounded-xl text-red-400 text-[10px] overflow-auto mb-6 max-h-40 border border-white/5 custom-scrollbar">
                {this.state.error.stack || this.state.error.toString()}
              </pre>
            )}
            <button 
              onClick={() => window.location.reload()} 
              className="w-full bg-blue-600 text-white px-6 py-3 rounded-xl font-bold hover:bg-blue-700 transition-all shadow-lg shadow-blue-600/20"
            >
              Restart Application
            </button>
          </div>
        </div>
      );
    }

    // Access props through this.props.
    return this.props.children;
  }
}

const container = document.getElementById('root');

if (container) {
  try {
    const root = createRoot(container);
    root.render(
      <React.StrictMode>
        <ErrorBoundary>
          <DataProvider>
            <Router />
          </DataProvider>
        </ErrorBoundary>
      </React.StrictMode>
    );
    
    // Smooth transition from loader to application
    requestAnimationFrame(() => {
        const loader = document.getElementById('initial-loader');
        if (loader) {
            setTimeout(() => {
                // Cast to HTMLElement to ensure 'style' property exists.
                (loader as HTMLElement).style.opacity = '0';
                setTimeout(() => loader.remove(), 500);
            }, 800); // Slight delay for visual comfort
        }
    });
  } catch (err) {
    console.error("Critical mounting failure:", err);
  }
} else {
    console.error("Target container '#root' not found in DOM.");
}