/* global React, ReactDOM, Sidebar, Topbar,
   PageDashboard, PageSales, PageRebooking,
   PageBookings, PageBookingDetail, PagePayments,
   PageAgencies, PageAgencyDetail, PageVendors, PageVendorDetail, PageCarCompanies, PageCarCompanyDetail, PageTravelGroups,
   PageUsersRoles, PageHomepage, PageSettings, PageSignIn */

var { useState } = React;

// URL pathname <-> route.name mapping. The prototype's internal SPA route
// names don't always match the URL slug (e.g. /car-rental -> "cars",
// /travel-groups -> "travelGroups"), so we keep an explicit table.
var PATH_TO_ROUTE = {
  "/": "dashboard",
  "/dashboard": "dashboard",
  "/sales": "sales",
  "/rebooking": "rebooking",
  "/bookings": "bookings",
  "/payments": "payments",
  "/agencies": "agencies",
  "/travel-groups": "travelGroups",
  "/vendors": "vendors",
  "/markups": "markups",
  "/mapping": "mapping",
  "/transfers": "transfers",
  "/car-rental": "cars",
  "/carcos": "carcos",
  "/airport-lounge": "lounge",
  "/vip-airport": "vipairport",
  "/users": "users",
  "/homepage": "homepage",
  "/settings": "settings",
  "/reporting": "dashboard",
};
var ROUTE_TO_PATH = (function () {
  var map = {};
  Object.keys(PATH_TO_ROUTE).forEach(function (p) {
    var r = PATH_TO_ROUTE[p];
    // Prefer a non-root path so dashboard->/dashboard (not /).
    if (!map[r] || p !== "/") map[r] = p;
  });
  return map;
})();
function pathToRoute(pathname) {
  // Strip trailing slash except for root
  var p = pathname && pathname.length > 1 && pathname.endsWith("/")
    ? pathname.slice(0, -1) : pathname;
  return PATH_TO_ROUTE[p] || "dashboard";
}
function routeToPath(name) {
  return ROUTE_TO_PATH[name] || "/dashboard";
}

// Parse window.location.pathname into a route + entity. Deep-link URLs
// for detail screens look like /bookings/<shortId>, /agencies/<key>,
// /vendors/<key>, /carcos/<key>. When an entry was pushed to history with
// the real entity, prefer that (avoids a refetch on back/forward). When
// the user pastes a deep-link cold, we surface a minimal stub with
// { _key, shortId } so the detail page can resolve the rest.
function parseLocation() {
  var path = window.location.pathname || "/";
  var stateEntity = (window.history.state && window.history.state.entity) || null;
  var m;
  if ((m = path.match(/^\/bookings\/(.+)$/))) {
    return { name: "bookingDetail", entity: stateEntity || { shortId: decodeURIComponent(m[1]) } };
  }
  if ((m = path.match(/^\/agencies\/(.+)$/))) {
    return { name: "agencyDetail", entity: stateEntity || { _key: decodeURIComponent(m[1]) } };
  }
  if ((m = path.match(/^\/vendors\/(.+)$/))) {
    return { name: "vendorDetail", entity: stateEntity || { _key: decodeURIComponent(m[1]) } };
  }
  if ((m = path.match(/^\/carcos\/(.+)$/))) {
    return { name: "carcoDetail", entity: stateEntity || { _key: decodeURIComponent(m[1]) } };
  }
  return { name: pathToRoute(path) };
}

// Build the deep-link path for a (route, entity) pair so nav() can push
// it into window.history. Returns the parent path when entity is missing
// the expected identifier (e.g. /bookings instead of /bookings/<id>).
function detailPathFor(name, entity) {
  if (!entity) return null;
  if (name === "bookingDetail" && entity.shortId != null) return "/bookings/" + encodeURIComponent(entity.shortId);
  if (name === "agencyDetail") {
    var ak = entity.id || entity.uuid || entity.account_id || entity._key || entity.name;
    if (ak) return "/agencies/" + encodeURIComponent(ak);
  }
  if (name === "vendorDetail") {
    var vk = entity.id || entity.vendor_id || entity._key || entity.name;
    if (vk) return "/vendors/" + encodeURIComponent(vk);
  }
  if (name === "carcoDetail") {
    var ck = entity.id || entity._key || entity.name;
    if (ck) return "/carcos/" + encodeURIComponent(ck);
  }
  return null;
}

function App() {
  const [signedIn, setSignedIn] = useState(true);
  const [route, setRoute] = useState(function () {
    // Initial route derived from window.location.pathname so /bookings,
    // /agencies, /markups etc. open the right page on first load. Detail
    // URLs like /bookings/<shortId> rehydrate into a {name, entity} route.
    return parseLocation();
  });

  React.useEffect(() => {
    const h = (e) => {
      var entity = e.detail;
      setRoute({ name: "bookingDetail", entity: entity });
      // Keep URL + history.state in sync with the route, mirroring nav().
      var detailPath = detailPathFor("bookingDetail", entity);
      if (detailPath) {
        try {
          if (window.location.pathname !== detailPath) {
            window.history.pushState({ entity: entity }, "", detailPath);
          } else {
            window.history.replaceState({ entity: entity }, "", detailPath);
          }
        } catch (_e) { /* ignore */ }
      }
      window.scrollTo(0, 0);
    };
    window.addEventListener("trekko:openBooking", h);
    // Browser back/forward must sync the SPA route - including detail
    // entities pulled from history.state when available.
    const popHandler = () => {
      setRoute(parseLocation());
    };
    window.addEventListener("popstate", popHandler);
    return () => {
      window.removeEventListener("trekko:openBooking", h);
      window.removeEventListener("popstate", popHandler);
    };
  }, []);

  if (!signedIn) {
    return <PageSignIn onSignIn={() => setSignedIn(true)} />;
  }

  // ---- crumbs map ----
  const crumbsFor = (r) => {
    switch (r.name) {
      case "dashboard":   return [{ label: "Dashboard" }];
      case "sales":       return [{ label: "Dashboards", to: "dashboard" }, { label: "Sales Manager" }];
      case "rebooking":   return [{ label: "Dashboards", to: "dashboard" }, { label: "Rebooking Tool" }];
      case "bookings":    return [{ label: "Bookings" }];
      case "bookingDetail": return [{ label: "Bookings", to: "bookings" }, { label: `#${(r.entity?.shortId) ?? ""}` }];
      case "transfers":   return [{ label: "Transfers" }];
      case "cars":        return [{ label: "Car Rental" }];
      case "lounge":      return [{ label: "Airport Lounge" }];
      case "vipairport":  return [{ label: "VIP Airport Services" }];
      case "payments":    return [{ label: "Payment Management" }];
      case "agencies":    return [{ label: "Travel Agencies" }];
      case "agencyDetail":return [{ label: "Travel Agencies", to: "agencies" }, { label: r.entity?.name ?? "" }];
      case "travelGroups":return [{ label: "Travel Agency Management", to: "agencies" }, { label: "Travel Groups" }];
      case "vendors":     return [{ label: "Vendors" }];
      case "vendorDetail":return [{ label: "Vendors", to: "vendors" }, { label: r.entity?.name ?? "" }];
      case "cars":        return [{ label: "Car Rental" }];
      case "markups":     return [{ label: "Markups" }];
      case "mapping":     return [{ label: "Hotel Mapping & Portfolio" }];
      case "users":       return [{ label: "Sub Users & Roles" }];
      case "homepage":    return [{ label: "Homepage & SEO" }];
      case "settings":    return [{ label: "Settings" }];
      default:            return [{ label: "Dashboard" }];
    }
  };

  // map route → sidebar active id
  const activeMap = {
    dashboard: "dashboard", sales: "sales", rebooking: "rebooking",
    bookings: "bookings", bookingDetail: "bookings",
    transfers: "transfers", cars: "cars", lounge: "lounge", vipairport: "vipairport",
    payments: "payments",
    agencies: "agencies", agencyDetail: "agencies",
    travelGroups: "travelGroups",
    vendors: "vendors", vendorDetail: "vendors",
    markups: "markups",
    mapping: "mapping",
    users: "users", homepage: "homepage", settings: "settings",
  };
  const active = activeMap[route.name] || "dashboard";

  // navigation helpers
  const nav = (name, entity) => {
    setRoute({ name, entity });
    // Sync the URL so a hard refresh / sharing the link lands on the
    // same screen. Detail views now also get their identifier baked
    // into the path (/bookings/<shortId>, /agencies/<key>, etc.) and
    // the full entity is stashed in history.state so back/forward can
    // restore it without a refetch.
    var detailPath = detailPathFor(name, entity);
    var path = detailPath || routeToPath(name);
    try {
      if (window.location.pathname !== path) {
        window.history.pushState({ entity: entity || null }, "", path);
      } else if (entity) {
        window.history.replaceState({ entity: entity }, "", path);
      }
    } catch (e) { /* ignore in iframes / sandboxed contexts */ }
    // scroll the main area to top
    setTimeout(() => {
      const main = document.querySelector(".main");
      if (main) main.scrollTop = 0;
    }, 0);
  };

  // ---- render the active page ----
  let body = null;
  switch (route.name) {
    case "dashboard":     body = <window.PageDashboardNew onNav={nav} />; break;
    case "sales":         body = <PageSalesEnhanced onNav={nav} />; break;
    case "rebooking":     body = <PageRebookingEnhanced onNav={nav} />; break;
    case "bookings":      body = <PageBookings onNav={nav} onOpenDetail={(b) => nav("bookingDetail", b)} />; break;
    case "bookingDetail": body = <PageBookingDetail booking={route.entity} onNav={nav} />; break;
    case "payments":      body = <PagePaymentsEnhanced onOpenDetail={(b) => nav("bookingDetail", b)} />; break;
    case "agencies":      body = <PageAgencies onOpen={(a) => nav("agencyDetail", a)} />; break;
    case "agencyDetail":  body = <PageAgencyDetail agency={route.entity} onNav={nav} />; break;
    case "travelGroups":  body = <PageTravelGroupsEnhanced />; break;
    case "vendors":       body = <PageVendors onOpen={(v) => nav("vendorDetail", v)} />; break;
    case "vendorDetail":  body = <PageVendorDetail vendor={route.entity} onNav={nav} />; break;
    case "markups":       body = <window.PageMarkups />; break;
    case "mapping":       body = <window.PageHotelMapping />; break;
    // Service-vertical pages — backend doesn't yet expose endpoints for
    // car/transfer/lounge/vip-airport bookings, so these screens render
    // 100% MOCK data. They were silently falling through to <PageDashboard/>,
    // which was the cause of "click something → page breaks/kicks you out".
    case "cars":          body = <window.PageCarRental onNav={nav} />; break;
    case "transfers":     body = <window.PageTransfers onNav={nav} />; break;
    case "lounge":        body = <window.PageVIPLounge onNav={nav} />; break;
    case "vipairport":    body = <window.PageVIPAirport onNav={nav} />; break;
    case "carcos":        body = <PageCarCompanies onOpen={(c) => nav("carcoDetail", c)} />; break;
    case "carcoDetail":   body = <PageCarCompanyDetail company={route.entity} onNav={nav} />; break;
    case "users":         body = <PageUsersRoles onNav={nav} />; break;
    case "homepage":      body = <PageHomepage />; break;
    case "settings":      body = <PageSettings />; break;
    default:              body = <PageDashboard onNav={nav} />;
  }

  return (
    <div className="app">
      <Sidebar active={active} onNav={(id) => nav(id)} />
      <Topbar crumbs={crumbsFor(route)} onNav={(id) => nav(id)} />
      <main className="main" data-screen-label={route.name}>
        <div className="page">{body}</div>
      </main>
      <Toaster />
    </div>
  );
}

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