import { createRoot } from "react-dom/client";
import "./index.css";

// Minimal test component first
const TestApp = () => {
  return (
    <div style={{ 
      padding: "2rem", 
      textAlign: "center", 
      minHeight: "100vh",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      backgroundColor: "#f3f4f6"
    }}>
      <div>
        <h1 style={{ color: "#1f2937", marginBottom: "1rem", fontSize: "2rem" }}>React is Working!</h1>
        <p style={{ color: "#6b7280", marginBottom: "2rem" }}>If you see this, React is rendering correctly.</p>
        <p style={{ color: "#9ca3af", fontSize: "0.875rem" }}>Loading full app...</p>
      </div>
    </div>
  );
};

// Add error handling and ensure root element exists
console.log("🚀 Starting app initialization...");

const rootElement = document.getElementById("root");
if (!rootElement) {
  console.error("❌ Root element not found!");
  document.body.innerHTML = `
    <div style="display: flex; align-items: center; justify-content: center; height: 100vh; font-family: sans-serif; background: #f3f4f6;">
      <div style="text-align: center; padding: 2rem;">
        <h1 style="color: #dc2626; margin-bottom: 1rem; font-size: 2rem;">Critical Error</h1>
        <p style="color: #6b7280; margin-bottom: 1rem;">Root element (#root) not found in HTML.</p>
      </div>
    </div>
  `;
} else {
  console.log("✅ Root element found");
  try {
    console.log("🔄 Creating React root...");
    const root = createRoot(rootElement);
    console.log("🔄 Rendering test component...");
    
    // First render a simple test component
    root.render(<TestApp />);
    console.log("✅ Test component rendered");
    
    // Then load the full app asynchronously
    setTimeout(async () => {
      try {
        console.log("🔄 Loading full App component...");
        const appModule = await import("./App.tsx");
        const App = appModule.default;
        console.log("🔄 Rendering full App...");
        root.render(<App />);
        console.log("✅ Full App rendered successfully");
      } catch (error) {
        console.error("❌ Failed to load full app:", error);
        const errorMessage = error instanceof Error ? error.message : String(error);
        root.render(
          <div style={{ 
            padding: "2rem", 
            textAlign: "center", 
            minHeight: "100vh",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            backgroundColor: "#f3f4f6"
          }}>
            <div>
              <h1 style={{ color: "#dc2626", marginBottom: "1rem" }}>App Load Error</h1>
              <p style={{ color: "#6b7280", marginBottom: "1rem" }}>{errorMessage}</p>
              <button 
                onClick={() => window.location.reload()} 
                style={{ 
                  marginTop: "1rem",
                  padding: "0.75rem 1.5rem", 
                  background: "#3b82f6", 
                  color: "white", 
                  border: "none", 
                  borderRadius: "0.5rem", 
                  cursor: "pointer" 
                }}
              >
                Refresh Page
              </button>
            </div>
          </div>
        );
      }
    }, 100);
  } catch (error) {
    console.error("❌ Failed to initialize React:", error);
    const errorMessage = error instanceof Error ? error.message : String(error);
    rootElement.innerHTML = `
      <div style="display: flex; align-items: center; justify-content: center; height: 100vh; font-family: sans-serif; background: #f3f4f6;">
        <div style="text-align: center; padding: 2rem; max-width: 600px;">
          <h1 style="color: #dc2626; margin-bottom: 1rem; font-size: 2rem;">React Initialization Error</h1>
          <p style="color: #6b7280; margin-bottom: 1rem;">${errorMessage}</p>
          <button 
            onclick="window.location.reload()" 
            style="padding: 0.75rem 1.5rem; background: #3b82f6; color: white; border: none; border-radius: 0.5rem; cursor: pointer; font-size: 1rem;"
          >
            Refresh Page
          </button>
        </div>
      </div>
    `;
  }
}