/* =========================================================
   app.jsx — router, app shell, mount
   ========================================================= */

function navigate(to){
  if(!to.startsWith("/")) to = "/"+to;
  if(("#"+to) === window.location.hash) { window.scrollTo(0,0); return; }
  window.location.hash = to;
}
window.navigate = navigate;

function parseHash(){
  let h = window.location.hash.replace(/^#/,"") || "/";
  const [path, query=""] = h.split("?");
  const params = {};
  query.split("&").forEach(p=>{ if(!p) return; const [k,v]=p.split("="); params[k]=decodeURIComponent(v||""); });
  const seg = path.split("/").filter(Boolean).map(s=>{ try{ return decodeURIComponent(s); }catch(e){ return s; } });
  return { path, seg, params };
}

function Router(){
  const [route, setRoute] = useState(parseHash());
  useEffect(()=>{
    const on = ()=>{ setRoute(parseHash()); };
    window.addEventListener("hashchange", on);
    return ()=> window.removeEventListener("hashchange", on);
  },[]);

  // reliably scroll to top whenever the route path changes (after render)
  useEffect(()=>{
    window.scrollTo(0,0);
    if(document.scrollingElement) document.scrollingElement.scrollTop = 0;
  },[route.path]);

  const { seg, params } = route;
  const base = "/"+(seg[0]||"");

  let page, headerRoute = base;
  if(seg.length===0){ page = <LandingPage/>; headerRoute="/"; }
  else if(seg[0]==="connect"){ page = <ConnectPage/>; }
  else if(seg[0]==="hotels" && seg[1]){ page = <HotelDetailPage id={seg[1]}/>; headerRoute="/hotels"; }
  else if(seg[0]==="hotels"){ page = <HotelsPage/>; }
  else if(seg[0]==="book" && seg[1]){ page = <BookPage hotelId={seg[1]} roomIdx={+(params.room||0)}/>; }
  else if(seg[0]==="my-bookings"){ page = <MyBookingsPage/>; }
  else if(seg[0]==="bookings" && seg[1]){ page = <BookingDetailPage id={seg[1]}/>; headerRoute="/my-bookings"; }
  else if(seg[0]==="hotel"){ page = <HotelDashboardPage/>; headerRoute="/hotel/dashboard"; }
  else { page = <LandingPage/>; headerRoute="/"; }

  return (
    <>
      <Header route={headerRoute} />
      {page}
      <Footer />
      <TxModal />
      <Toast />
    </>
  );
}

function App(){
  return (
    <StoreProvider>
      <Router />
    </StoreProvider>
  );
}

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