// Daoob AI — top-level app
const App = () => {
  // Read initial page from hash
  const initialPage = () => {
    const h = window.location.hash.replace("#", "");
    const valid = ["home","map","services","pricing","report","about","dashboard","contact","auth","request","admin"];
    return valid.includes(h) ? h : "home";
  };
  const [page, setPageRaw] = React.useState(initialPage());
  const [lang, setLangRaw] = React.useState(() => {
    // 1) user's last choice  2) WP Customizer default  3) Arabic
    const themeDefault = (window.DAOOB_THEME && window.DAOOB_THEME.defaultLang) || "ar";
    return localStorage.getItem("daoob_lang") || themeDefault;
  });
  const [selectedParcel, setSelectedParcel] = React.useState("RYD-4421-OL");
  const [preselectedServices, setPreselectedServices] = React.useState(null);

  const setPage = (p) => {
    setPageRaw(p);
    window.location.hash = p;
    window.scrollTo({ top: 0, behavior: "instant" });
  };
  const setLang = (l) => {
    setLangRaw(l);
    localStorage.setItem("daoob_lang", l);
  };

  // Sync hash <-> state
  React.useEffect(() => {
    const onHash = () => setPageRaw(initialPage());
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  // Apply lang to html
  React.useEffect(() => {
    document.documentElement.lang = lang;
    document.documentElement.dir = lang === "ar" ? "rtl" : "ltr";
  }, [lang]);

  const t = window.I18N[lang];

  let view;
  switch (page) {
    case "map":       view = <MapPage    t={t} lang={lang} selectedParcel={selectedParcel} setSelectedParcel={setSelectedParcel} setPage={setPage} setPreselectedServices={setPreselectedServices}/>; break;
    case "services":  view = <Pricing    t={t} lang={lang} setPage={setPage} setPreselectedServices={setPreselectedServices}/>; break;
    case "pricing":   view = <Pricing    t={t} lang={lang} setPage={setPage} setPreselectedServices={setPreselectedServices}/>; break;
    case "report":    view = <Report     t={t} lang={lang} selectedParcel={selectedParcel} setPage={setPage}/>; break;
    case "about":     view = <About      t={t} lang={lang}/>; break;
    case "dashboard": view = <Dashboard  t={t} lang={lang} setPage={setPage} setSelectedParcel={setSelectedParcel}/>; break;
    case "contact":   view = <Contact    t={t} lang={lang}/>; break;
    case "auth":      view = <Auth       t={t} lang={lang} setPage={setPage}/>; break;
    case "request":   view = <Request    t={t} lang={lang} selectedParcel={selectedParcel} setPage={setPage} preselectedServices={preselectedServices}/>; break;
    case "admin":     view = <Admin      t={t} lang={lang}/>; break;
    case "home":
    default:          view = <Home       t={t} lang={lang} setPage={setPage} setSelectedParcel={setSelectedParcel}/>;
  }

  // Pages that should not have site footer (admin/dashboard/map/auth)
  const hideFooter = ["map","dashboard","admin","auth","report"].includes(page);
  // Auth page hides nav
  const hideNav = page === "auth";

  return (
    <div data-screen-label={page} key={lang /* force re-render on lang flip */}>
      {!hideNav && <Nav page={page} setPage={setPage} lang={lang} setLang={setLang} t={t}/>}
      {hideNav && (
        // Minimal nav for auth — just logo + lang toggle
        <nav className="nav">
          <div className="nav-inner">
            <div className="nav-logo" onClick={() => setPage("home")}>
              <Logo size={44}/>
              <span className="nav-logo-text">{t.brand_full}</span>
            </div>
            <div className="lang-toggle">
              <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
              <button className={lang === "ar" ? "on" : ""} onClick={() => setLang("ar")}>عربي</button>
            </div>
          </div>
        </nav>
      )}
      {view}
      {!hideFooter && <Footer t={t} setPage={setPage}/>}
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);