// ── Oasis HMS · Embeddable root component ────────────────────────────────────
const { useState: uS, useRef: uR, useEffect: uE, useLayoutEffect: uLE } = React;
const Oa = window.OASIS;

// The 1920×1080 application canvas (sidebar + topbar + active screen + overlays)
function Stage({ view, setView, alerts, setAlerts }) {
  const [modal, setModal] = uS(null); // null | {editing}
  const [toast, setToast] = uS(null);
  const [staffOpen, setStaffOpen] = uS(false);
  const [alertsOpen, setAlertsOpen] = uS(false);
  const [arrivalsOpen, setArrivalsOpen] = uS(false);
  const [newArrivalOpen, setNewArrivalOpen] = uS(false);

  const openAdd = () => setModal({ editing: null });
  const openEdit = (a) => setModal({ editing: a });

  const submitAlert = (alert, isEdit) => {
    if (isEdit) setAlerts((list) => list.map((x) => x.id === alert.id ? alert : x));else
    setAlerts((list) => [{ ...alert, time: "now" }, ...list]);
    setModal(null);
    setToast(isEdit ? "The alert was updated and the department notified." : "A new Alert was created and assigned to the department.");
    setTimeout(() => setToast(null), 2600);
  };

  const onNav = (id) => {
    if (id === "dashboard") setView({ name: "dashboard" });else
    if (id === "rooms") setView({ name: "rooms" });else
    if (id === "staff") setView({ name: "staff" });else
    setView({ name: "rooms" }); // unbuilt sections route to Rooms - see TODO below
    // TODO: Maintenance / Security / Reservations screens were not present as
    // full frames in the Figma file - only Dashboard, Rooms and Room detail were designed.
  };

  const openNewArrival = () => setNewArrivalOpen(true);
  const saveArrival = (guestName, roomNo) => {
    setNewArrivalOpen(false);
    setToast(`${guestName}'s arrival was added to Room ${roomNo}.`);
    setTimeout(() => setToast(null), 2600);
  };

  const activeNav = view.name === "roomDetail" ? "rooms" : view.name;

  return (
    <div style={{ position: "relative", width: 1920, height: 1080, background: "#fff", overflow: "hidden", fontFamily: Oa.font, padding: "0px" }}>
      <Sidebar active={activeNav} onNav={onNav} />
      <TopBar>
        {view.name === "dashboard" && <span>Dashboard</span>}
        {view.name === "rooms" && <span>Rooms</span>}
        {view.name === "staff" && <span>Staff</span>}
        {view.name === "roomDetail" &&
        <span style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <span style={{ color: "#AEB6C4", cursor: "pointer" }} onClick={() => setView({ name: "rooms" })}>Rooms</span>
            <Icon name="chevron-down" size={16} color="#C9D2DE" style={{ transform: "rotate(-90deg)" }} />
            <span>Room {view.room?.no || "433"}</span>
          </span>
        }
      </TopBar>

      <div style={{ position: "absolute", left: 75, top: 53, width: 1845, height: 1027, background: Oa.workbg, borderRadius: 20, boxSizing: "border-box", padding: "28px 40px", overflow: "hidden" }}>
        {view.name === "dashboard" && <Dashboard alerts={alerts} onAddAlert={openAdd} onEditAlert={openEdit} onOpenStaff={() => setStaffOpen(true)} onAddArrival={openNewArrival} onViewAlerts={() => setAlertsOpen(true)} onViewArrivals={() => setArrivalsOpen(true)} />}
        {view.name === "rooms" && <RoomsPage onOpenRoom={(r) => setView({ name: "roomDetail", room: r })} />}
        {view.name === "staff" && <StaffPage />}
        {view.name === "roomDetail" && <RoomDetail room={view.room} onBack={() => setView({ name: "rooms" })} />}
      </div>

      <NewAlertModal open={!!modal} editing={modal?.editing} onClose={() => setModal(null)} onSubmit={submitAlert} />
      <AlertsModal open={alertsOpen} alerts={alerts} onClose={() => setAlertsOpen(false)}
        onEdit={(a) => { setAlertsOpen(false); openEdit(a); }}
        onAdd={() => { setAlertsOpen(false); openAdd(); }} />
      <ArrivalsModal open={arrivalsOpen} onClose={() => setArrivalsOpen(false)}
        onAdd={() => { setArrivalsOpen(false); openNewArrival(); }} />
      <NewArrivalModal open={newArrivalOpen} onClose={() => setNewArrivalOpen(false)} onSave={saveArrival} />
      <StaffModal open={staffOpen} onClose={() => setStaffOpen(false)} />
      <SuccessToast show={!!toast} message={toast || ""} />
    </div>);

}

// Scales the 1920×1080 app to fill its container (the whole screen).
function FigmaProject({ view: viewProp = "dashboard" }) {
  const [view, setView] = uS({ name: viewProp });
  const [alerts, setAlerts] = uS(window.ALERTS);
  const ref = uR(null);
  const [box, setBox] = uS({ w: 0, h: 0 });

  uLE(() => {
    const el = ref.current;if (!el) return;
    const measure = () => {const r = el.getBoundingClientRect();setBox({ w: r.width, h: r.height });};
    measure();
    const ro = new ResizeObserver(measure);
    ro.observe(el);
    return () => ro.disconnect();
  }, []);

  // contain-fit: show the entire 1920×1080 canvas (sidebar included), filling as
  // much of the container as possible. White letterbox blends with the app chrome.
  const scale = box.w && box.h ? Math.min(box.w / 1920, box.h / 1080) : 0;

  return (
    <div ref={ref} style={{ position: "relative", width: "100%", height: "100%", overflow: "hidden", background: Oa.white }}>
      <div style={{ position: "absolute", left: "50%", top: "50%", width: 1920, height: 1080, transform: `translate(-50%,-50%) scale(${scale})`, transformOrigin: "center center", opacity: scale ? 1 : 0, transition: "opacity .2s ease" }}>
        <Stage view={view} setView={setView} alerts={alerts} setAlerts={setAlerts} />
      </div>
    </div>);

}
window.FigmaProject = FigmaProject;