import React, { useState, useEffect } from "react";
import { createRoot } from "react-dom/client";
import { SimpleCalculator } from "./components/SimpleCalculator";
import { HeroGraphic } from "./components/HeroGraphic";
import "./index.css";

const initReactApps = () => {
  // Island 1: Hero Graphic
  const heroEl = document.getElementById("hero-graphic");
  if (heroEl) {
    const root = createRoot(heroEl);
    
    const HeroWrapper = () => {
      const [lang, setLang] = useState<"en" | "sw">(() => {
        try {
          return (localStorage.getItem("mml-preferred-lang") as "en" | "sw") || "en";
        } catch (e) {
          console.warn("Storage access blocked:", e);
          return "en";
        }
      });
      
      useEffect(() => {
        const handleLangChange = (e: Event) => {
          const customEvent = e as CustomEvent;
          if (customEvent.detail) {
            setLang(customEvent.detail);
          }
        };
        window.addEventListener("mml-lang-change", handleLangChange);
        return () => {
          window.removeEventListener("mml-lang-change", handleLangChange);
        };
      }, []);
      
      return <HeroGraphic lang={lang} />;
    };
    
    root.render(<HeroWrapper />);
  }

  // Island 2: Calculator App
  const calculatorEl = document.getElementById("calculator-react-root");
  if (calculatorEl) {
    const root = createRoot(calculatorEl);
    
    const CalcWrapper = () => {
      const [lang, setLang] = useState<"en" | "sw">(() => {
        try {
          return (localStorage.getItem("mml-preferred-lang") as "en" | "sw") || "en";
        } catch (e) {
          console.warn("Storage access blocked:", e);
          return "en";
        }
      });
      
      useEffect(() => {
        const handleLangChange = (e: Event) => {
          const customEvent = e as CustomEvent;
          if (customEvent.detail) {
            setLang(customEvent.detail);
          }
        };
        window.addEventListener("mml-lang-change", handleLangChange);
        return () => {
          window.removeEventListener("mml-lang-change", handleLangChange);
        };
      }, []);
      
      return <SimpleCalculator lang={lang} />;
    };
    
    root.render(<CalcWrapper />);
  }
};

if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", initReactApps);
} else {
  initReactApps();
}