// ── Oasis HMS · Room / Guest detail ──────────────────────────────────────────
const Ox = window.OASIS;

const detailInput = {
  width: "100%", height: 44, padding: "0 14px", borderRadius: 10, boxSizing: "border-box",
  border: "1px solid #E2EAF4", background: "#fff", outline: "none",
  fontFamily: Ox.font, fontSize: 14.5, color: Ox.navy
};

function InfoRow({ icon, label, value }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
      <Icon name={icon} size={19} color={Ox.primary} stroke={1.8} />
      <span style={{ flex: "0 0 132px", fontFamily: Ox.font, fontSize: 14.5, color: "#AEB6C4" }}>{label}</span>
      <span style={{ fontFamily: Ox.font, fontWeight: 500, fontSize: 14.5, color: Ox.navy }}>{value}</span>
    </div>);

}

// Editable row used in "new arrival" mode
function EditRow({ icon, label, value, placeholder, onChange, type }) {
  const [focus, setFocus] = useState(false);
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
      <Icon name={icon} size={19} color={Ox.primary} stroke={1.8} />
      <span style={{ flex: "0 0 132px", fontFamily: Ox.font, fontSize: 14.5, color: "#AEB6C4" }}>{label}</span>
      <input type={type || "text"} value={value} placeholder={placeholder} onChange={(e) => onChange(e.target.value)}
      onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
      style={{ ...detailInput, flex: 1, height: 40, borderColor: focus ? Ox.primary : "#E2EAF4" }} />
    </div>);

}

function GuestInfoCard({ g }) {
  return (
    <Card pad={28}>
      <div style={{ fontFamily: Ox.font, fontWeight: 500, fontSize: 20, color: Ox.navy, marginBottom: 22 }}>Guest Information</div>
      <div style={{ display: "flex", gap: 30 }}>
        <div style={{ flex: "0 0 46%", borderRadius: 14, overflow: "hidden", alignSelf: "flex-start" }}>
          <img src={(window.__resources && window.__resources.passport) || "assets/passport.jpg"} alt="Passport scan" style={{ display: "block", width: "100%", height: "auto" }} />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontFamily: Ox.font, fontWeight: 500, fontSize: 20, color: Ox.navy, marginBottom: 20 }}>{g.name}</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 19 }}>
            <InfoRow icon="id-card" label="Passport No." value={g.passport} />
            <InfoRow icon="phone" label="Phone Number" value={g.phone} />
            <InfoRow icon="globe" label="Nationality" value={g.nationality} />
            <InfoRow icon="calendar" label="Date of Birth" value={g.dob} />
            <InfoRow icon="mail" label="Email Address" value={g.email} />
          </div>
        </div>
      </div>
    </Card>);

}

// New-arrival editable guest form (empty, manager fills it in)
function GuestInfoForm({ form, set }) {
  return (
    <Card pad={28}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 22 }}>
        <div style={{ fontFamily: Ox.font, fontWeight: 500, fontSize: 20, color: Ox.navy }}>Guest Information</div>
        <span style={{ display: "inline-flex", alignItems: "center", height: 28, padding: "0 12px", borderRadius: 8, background: "#E7F1FC", color: Ox.primary, fontFamily: Ox.font, fontWeight: 500, fontSize: 13 }}>New Guest</span>
      </div>
      <div style={{ display: "flex", gap: 30 }}>
        <label style={{ flex: "0 0 46%", borderRadius: 14, aspectRatio: "900 / 637", alignSelf: "flex-start", cursor: "pointer",
          border: "2px dashed #CBDAEC", background: "#F7FAFE", display: "flex", flexDirection: "column",
          alignItems: "center", justifyContent: "center", gap: 12, textAlign: "center", padding: 16, boxSizing: "border-box" }}>
          <Icon name="id-card" size={34} color={Ox.primary} stroke={1.6} />
          <span style={{ fontFamily: Ox.font, fontWeight: 500, fontSize: 14.5, color: Ox.navy }}>Upload ID / Passport</span>
          <span style={{ fontFamily: Ox.font, fontSize: 12.5, color: "#9AA3B2" }}>Click to add a scan or photo</span>
          <input type="file" accept="image/*" style={{ display: "none" }} />
        </label>
        <div style={{ flex: 1, minWidth: 0 }}>
          <input value={form.name} placeholder="Full name" onChange={(e) => set("name", e.target.value)}
          style={{ ...detailInput, height: 46, fontWeight: 500, fontSize: 18, marginBottom: 18 }} />
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <EditRow icon="id-card" label="Passport No." value={form.passport} placeholder="e.g. 545123456" onChange={(v) => set("passport", v)} />
            <EditRow icon="phone" label="Phone Number" value={form.phone} placeholder="+1 ..." onChange={(v) => set("phone", v)} />
            <EditRow icon="globe" label="Nationality" value={form.nationality} placeholder="Country" onChange={(v) => set("nationality", v)} />
            <EditRow icon="calendar" label="Date of Birth" value={form.dob} placeholder="DD Month YYYY" onChange={(v) => set("dob", v)} />
            <EditRow icon="mail" label="Email Address" value={form.email} placeholder="name@email.com" type="email" onChange={(v) => set("email", v)} />
          </div>
        </div>
      </div>
    </Card>);

}

function StatField({ label, value, sub, grow }) {
  return (
    <div style={{ flex: grow || 1, border: "1px solid #E2EAF4", borderRadius: 12, padding: "15px 18px", minWidth: 0 }}>
      <div style={{ fontFamily: Ox.font, fontSize: 13.5, color: "#AEB6C4" }}>{label}</div>
      <div style={{ fontFamily: Ox.font, fontWeight: 500, fontSize: 16, color: Ox.navy, marginTop: 8, whiteSpace: "nowrap" }}>{value}</div>
      {sub && <div style={{ fontFamily: Ox.font, fontSize: 14, color: Ox.muted, marginTop: 6 }}>{sub}</div>}
    </div>);

}

function CurrentReservation({ r }) {
  const [req, setReq] = useState("Select");
  const [open, setOpen] = useState(false);
  const ref = React.useRef(null);
  window.useOutsideClose(ref, open, () => setOpen(false));
  const opts = ["Extra Pillows", "Late Checkout", "Airport Pickup", "Champagne"];
  return (
    <Card pad={28}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ fontFamily: Ox.font, fontWeight: 500, fontSize: 20, color: Ox.navy }}>Current Reservation</div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: Ox.font, fontWeight: 500, fontSize: 15, color: Ox.primary }}>
          Booking ID {r.bookingId} <Icon name="edit" size={15} color={Ox.primary} />
        </div>
      </div>
      <div style={{ display: "flex", gap: 16, marginTop: 24 }}>
        <StatField grow={1.25} label="Check In" value={r.checkIn} sub={r.checkInTime} />
        <StatField grow={1.25} label="Check Out" value={r.checkOut} sub={r.checkOutTime} />
        <StatField label="Guests" value={r.guests} />
        <StatField label="Duration" value={r.duration} />
      </div>
      <div ref={ref} style={{ marginTop: 22, position: "relative" }}>
        <div style={{ fontFamily: Ox.font, fontWeight: 500, fontSize: 15, color: Ox.navy, marginBottom: 10 }}>Special Requests</div>
        <button onClick={() => setOpen((o) => !o)} style={{
          width: 260, height: 46, padding: "0 16px", borderRadius: 10, cursor: "pointer", background: "#F4F9FF",
          border: `1px solid ${open ? Ox.primary : "#DCE7F5"}`, display: "flex", alignItems: "center", justifyContent: "space-between",
          fontFamily: Ox.font, fontWeight: 500, fontSize: 15, color: req === "Select" ? Ox.primary : Ox.navy
        }}>{req} <Icon name="chevron-down" size={16} color={Ox.primary} /></button>
        {open &&
        <div style={{ position: "absolute", top: 96, left: 0, width: 260, background: "#fff", borderRadius: 10, boxShadow: "0 12px 30px rgba(31,42,68,.14)", border: `1px solid ${Ox.hairline}`, zIndex: 20, overflow: "hidden" }}>
            {opts.map((o) =>
          <div key={o} onMouseDown={() => {setReq(o);setOpen(false);}} style={{ padding: "12px 16px", fontFamily: Ox.font, fontSize: 14.5, cursor: "pointer", color: Ox.navy }}
          onMouseEnter={(e) => e.currentTarget.style.background = "#F6FAFF"} onMouseLeave={(e) => e.currentTarget.style.background = "#fff"}>{o}</div>
          )}
          </div>
        }
      </div>
    </Card>);

}

function ReservationHistory({ rows }) {
  const cols = ["Booking ID", "Check In", "Check Out", "Duration", "Status"];
  const [sortKey, setSortKey] = useState(null);
  const [dir, setDir] = useState(1);
  let data = [...rows];
  if (sortKey) {
    const keyMap = { "Booking ID": "id", "Check In": "checkIn", "Check Out": "checkOut", "Duration": "duration", "Status": "status" };
    const k = keyMap[sortKey];
    data.sort((a, b) => (a[k] > b[k] ? 1 : -1) * dir);
  }
  const toggle = (c) => {if (sortKey === c) setDir((d) => -d);else {setSortKey(c);setDir(1);}};
  return (
    <Card pad={28} style={{ display: "flex", flexDirection: "column", minHeight: 0, flex: 1 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
        <div style={{ fontFamily: Ox.font, fontWeight: 500, fontSize: 20, color: Ox.navy }}>Reservation History</div>
        <PillButton tone="blue" variant="solid" icon="plus" style={{ height: 42, fontSize: 15 }}>Add Future Arrival</PillButton>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr 1.1fr .9fr 1fr", gap: 8, paddingBottom: 12, borderBottom: `1px solid ${Ox.hairline}` }}>
        {cols.map((c) =>
        <button key={c} onClick={() => toggle(c)} style={{ display: "flex", alignItems: "center", gap: 5, border: "none", background: "transparent", cursor: "pointer", fontFamily: Ox.font, fontWeight: 500, fontSize: 14, color: sortKey === c ? Ox.primary : "#AEB6C4", padding: 0 }}>
            {c} <Icon name="sort" size={13} color={sortKey === c ? Ox.primary : "#C9D2DE"} />
          </button>
        )}
      </div>
      <div className="oasis-scroll" style={{ flex: 1, overflowY: "auto", minHeight: 0 }}>
        {data.map((r, i) =>
        <div key={r.id} style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr 1.1fr .9fr 1fr", gap: 8, alignItems: "center", padding: "16px 10px", borderRadius: 10, background: i === 0 ? "#F4F9FF" : "transparent", fontFamily: Ox.font, fontSize: 14.5, color: Ox.navy }}>
            <span style={{ fontWeight: 500 }}>{r.id}</span>
            <span>{r.checkIn}</span>
            <span>{r.checkOut}</span>
            <span>{r.duration}</span>
            <span style={{ color: window.OASIS_STATUS[r.status]?.fg }}>{r.status}</span>
          </div>
        )}
      </div>
    </Card>);

}

function RoomInfoCard({ room, amenities }) {
  const info = [
  ["Room Size", room.size], ["Room Number", room.no], ["Floor", String(room.floor)],
  ["Room Type", room.type], ["Max. Guests", room.maxGuests], ["View", room.view],
  ["Bed Type", room.bed]];

  return (
    <Card pad={32} style={{ flex: 1 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <span style={{ fontFamily: Ox.font, fontWeight: 500, fontSize: 30, color: Ox.navy }}>Room {room.no}</span>
          <Badge status={room.status} />
        </div>
      </div>

      <div style={{ fontFamily: Ox.font, fontWeight: 500, fontSize: 18, color: Ox.navy, margin: "28px 0 18px" }}>Room Information</div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", rowGap: 22, columnGap: 16, padding: "0px 0px 43px" }}>
        {info.map(([l, v]) =>
        <div key={l}>
            <div style={{ fontFamily: Ox.font, fontSize: 14, color: "#AEB6C4" }}>{l}</div>
            <div style={{ fontFamily: Ox.font, fontWeight: 500, fontSize: 15.5, color: Ox.navy, marginTop: 6 }}>{v}</div>
          </div>
        )}
      </div>

      <div style={{ fontFamily: Ox.font, fontWeight: 500, fontSize: 18, color: Ox.navy, margin: "28px 0 18px" }}>Room Amenities</div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 16, padding: "0px" }}>
        {amenities.map((a) =>
        <div key={a.label} style={{ border: "1px solid #E2EAF4", borderRadius: 14, height: 100, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 14, textAlign: "center", padding: "0 6px" }}>
            <span style={{ fontFamily: Ox.font, fontSize: 13.5, color: Ox.muted }}>{a.label}</span>
            <Icon name={a.icon} size={26} color={Ox.primary} stroke={1.9} />
          </div>
        )}
        <button style={{ border: "1px solid #E2EAF4", borderRadius: 14, height: 100, display: "flex", alignItems: "center", justifyContent: "center", background: "#fff", cursor: "pointer", fontFamily: Ox.font, fontWeight: 500, fontSize: 14, color: Ox.muted }}>See All (16)</button>
      </div>
    </Card>);

}

function PhotoGallery({ grow }) {
  const R = window.__resources || {};
  const photos = [R.room1 || "assets/room1.jpg", R.room2 || "assets/room2.jpg", R.room3 || "assets/room3.jpg", R.room2 || "assets/room2.jpg"];
  return (
    <Card pad={28} style={grow ? { flex: 1, display: "flex", flexDirection: "column", minHeight: 0 } : undefined}>
      <div style={{ fontFamily: Ox.font, fontWeight: 500, fontSize: 20, color: Ox.navy, marginBottom: 18 }}>Photo Gallery</div>
      <div style={{ display: "flex", gap: 16, flex: grow ? 1 : "0 0 auto", minHeight: 190 }}>
        {photos.map((src, i) =>
        <div key={i} style={{ flex: 1, height: grow ? "auto" : 190, borderRadius: 14, position: "relative", overflow: "hidden",
          backgroundColor: "#E7EEF6", backgroundImage: `url(${src})`, backgroundSize: "cover", backgroundPosition: "center", cursor: "pointer" }}>
            {i === 3 &&
          <div style={{ position: "absolute", inset: 0, background: "rgba(31,42,68,.55)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <span style={{ fontFamily: Ox.font, fontWeight: 500, fontSize: 38, color: "#fff" }}>4+</span>
              </div>
          }
          </div>
        )}
      </div>
    </Card>);

}

// Editable field used in the new-arrival reservation card
function StatInput({ label, value, placeholder, onChange, grow }) {
  const [focus, setFocus] = useState(false);
  return (
    <div style={{ flex: grow || 1, border: `1px solid ${focus ? Ox.primary : "#E2EAF4"}`, borderRadius: 12, padding: "11px 16px", minWidth: 0, transition: "border-color .15s ease" }}>
      <div style={{ fontFamily: Ox.font, fontSize: 13.5, color: "#AEB6C4" }}>{label}</div>
      <input value={value} placeholder={placeholder} onChange={(e) => onChange(e.target.value)}
      onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
      style={{ border: "none", outline: "none", width: "100%", marginTop: 6, fontFamily: Ox.font, fontWeight: 500, fontSize: 15, color: Ox.navy, background: "transparent" }} />
    </div>);

}

const CAL_MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const CAL_DOW = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];

// Date field with a dashboard-styled calendar popover
function DateField({ label, value, onChange, grow }) {
  const [open, setOpen] = useState(false);
  const [view, setView] = useState({ y: 2026, m: 1 }); // Feb 2026
  const ref = React.useRef(null);
  window.useOutsideClose(ref, open, () => setOpen(false));

  const first = new Date(view.y, view.m, 1).getDay();
  const days = new Date(view.y, view.m + 1, 0).getDate();
  const cells = [];
  for (let i = 0; i < first; i++) cells.push(null);
  for (let d = 1; d <= days; d++) cells.push(d);

  const pick = (d) => {onChange(`${d} ${CAL_MONTHS[view.m]} ${view.y}`);setOpen(false);};
  const step = (dir) => setView((v) => {
    let m = v.m + dir,y = v.y;
    if (m < 0) {m = 11;y--;}if (m > 11) {m = 0;y++;}
    return { y, m };
  });
  // highlight the selected day if it belongs to the visible month
  const selMatch = value && value.match(/^(\d+)\s+(\w+)\s+(\d+)$/);
  const selDay = selMatch && selMatch[2] === CAL_MONTHS[view.m] && +selMatch[3] === view.y ? +selMatch[1] : null;

  return (
    <div ref={ref} style={{ flex: grow || 1, minWidth: 0, position: "relative" }}>
      <button onClick={() => setOpen((o) => !o)} style={{
        width: "100%", border: `1px solid ${open ? Ox.primary : "#E2EAF4"}`, borderRadius: 12, padding: "11px 16px",
        background: "#fff", cursor: "pointer", textAlign: "left", transition: "border-color .15s ease",
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10
      }}>
        <span style={{ minWidth: 0 }}>
          <span style={{ display: "block", fontFamily: Ox.font, fontSize: 13.5, color: "#AEB6C4" }}>{label}</span>
          <span style={{ display: "block", marginTop: 6, fontFamily: Ox.font, fontWeight: 500, fontSize: 15, color: value ? Ox.navy : "#AEB6C4", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{value || "Select date"}</span>
        </span>
        <Icon name="calendar" size={18} color={Ox.primary} />
      </button>
      {open &&
      <div style={{ position: "absolute", bottom: "calc(100% + 8px)", left: 0, width: 268, background: "#fff", borderRadius: 16, boxShadow: "0 -10px 40px rgba(31,42,68,.18)", border: `1px solid ${Ox.hairline}`, zIndex: 40, padding: 16 }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
            <button onClick={() => step(-1)} style={{ width: 30, height: 30, borderRadius: 8, border: "1px solid #E2EAF4", background: "#fff", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name="arrow-left" size={15} color={Ox.primary} />
            </button>
            <span style={{ fontFamily: Ox.font, fontWeight: 500, fontSize: 15, color: Ox.navy }}>{CAL_MONTHS[view.m]} {view.y}</span>
            <button onClick={() => step(1)} style={{ width: 30, height: 30, borderRadius: 8, border: "1px solid #E2EAF4", background: "#fff", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name="arrow-right" size={15} color={Ox.primary} />
            </button>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2, marginBottom: 6 }}>
            {CAL_DOW.map((d) => <span key={d} style={{ textAlign: "center", fontFamily: Ox.font, fontSize: 12, color: "#AEB6C4", padding: "4px 0" }}>{d}</span>)}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2 }}>
            {cells.map((d, i) => {
            if (!d) return <span key={i} />;
            const sel = d === selDay;
            return (
              <button key={i} onClick={() => pick(d)} style={{
                height: 32, borderRadius: 8, border: "none", cursor: "pointer",
                fontFamily: Ox.font, fontSize: 13.5, fontWeight: sel ? 600 : 400,
                background: sel ? Ox.primary : "transparent", color: sel ? "#fff" : Ox.navy, transition: "background .12s ease"
              }}
              onMouseEnter={(e) => {if (!sel) e.currentTarget.style.background = "#EFF6FF";}}
              onMouseLeave={(e) => {if (!sel) e.currentTarget.style.background = "transparent";}}>{d}</button>);

          })}
          </div>
        </div>
      }
    </div>);

}

// New-arrival reservation form (empty, manager fills it in)
function NewReservationForm({ form, set, rooms, roomNo, setRoomNo }) {
  const [open, setOpen] = useState(false);
  const ref = React.useRef(null);
  window.useOutsideClose(ref, open, () => setOpen(false));
  return (
    <Card pad={28}>
      <div style={{ fontFamily: Ox.font, fontWeight: 500, fontSize: 20, color: Ox.navy }}>Reservation Details</div>
      <div ref={ref} style={{ position: "relative", marginTop: 20 }}>
        <div style={{ fontFamily: Ox.font, fontWeight: 500, fontSize: 15, color: Ox.navy, marginBottom: 10 }}>Assign Room *</div>
        <button onClick={() => setOpen((o) => !o)} style={{
          ...detailInput, height: 48, display: "flex", alignItems: "center", justifyContent: "space-between", cursor: "pointer",
          borderColor: open ? Ox.primary : "#E2EAF4", color: roomNo ? Ox.navy : "#AEB6C4"
        }}>
          <span>{roomNo ? `Room ${roomNo}` : "Select an available room"}</span>
          <span style={{ display: "inline-flex", transform: open ? "rotate(180deg)" : "none", transition: "transform .15s ease" }}>
            <Icon name="chevron-down" size={16} color={Ox.primary} />
          </span>
        </button>
        {open &&
        <div className="oasis-scroll" style={{ position: "absolute", top: 96, left: 0, right: 0, maxHeight: 220, overflowY: "auto", background: "#fff", borderRadius: 12, boxShadow: "0 14px 34px rgba(31,42,68,.16)", border: `1px solid ${Ox.hairline}`, zIndex: 30, padding: 6 }}>
            {rooms.length === 0 && <div style={{ padding: "12px 14px", fontFamily: Ox.font, fontSize: 14, color: "#9AA3B2" }}>No available rooms</div>}
            {rooms.map((rm) => {
            const sel = roomNo === rm.no;
            return (
              <div key={rm.no} onMouseDown={() => {setRoomNo(rm.no);setOpen(false);}} style={{
                display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, padding: "11px 12px", borderRadius: 8, cursor: "pointer",
                fontFamily: Ox.font, fontSize: 14.5, fontWeight: sel ? 600 : 400, color: sel ? Ox.primary : Ox.navy, background: sel ? "#F2F8FF" : "#fff"
              }}
              onMouseEnter={(e) => {if (!sel) e.currentTarget.style.background = "#F6FAFF";}}
              onMouseLeave={(e) => {e.currentTarget.style.background = sel ? "#F2F8FF" : "#fff";}}>
                  <span style={{ whiteSpace: "nowrap" }}>Room {rm.no} · {rm.type}</span>
                  {sel && <Icon name="check" size={15} color={Ox.primary} />}
                </div>);

          })}
          </div>
        }
      </div>
      <div style={{ display: "flex", gap: 16, marginTop: 20 }}>
        <DateField grow={1.25} label="Check In" value={form.checkIn} onChange={(v) => set("checkIn", v)} />
        <DateField grow={1.25} label="Check Out" value={form.checkOut} onChange={(v) => set("checkOut", v)} />
        <StatInput label="Guests" value={form.guests} placeholder="2 Adults" onChange={(v) => set("guests", v)} />
        <StatInput label="Duration" value={form.duration} placeholder="3 Nights" onChange={(v) => set("duration", v)} />
      </div>
    </Card>);

}

function RoomDetail({ room, onBack }) {
  const d = window.ROOM_DETAIL;

  // ── Existing room/guest detail ──
  // TODO: Only "Room 433" was fully designed in the Figma file. We reflect the
  // clicked room's identity (number, type, status, floor, guest) in the header &
  // room-info; the rich guest/reservation/amenity/history record is illustrative.
  const merged = room ? { ...d.room, no: room.no, type: room.type, status: room.status, floor: room.floor } : d.room;
  const guest = room && room.guest ? { ...d.guest, name: room.guest } : d.guest;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 24, height: "100%" }}>
      <button onClick={onBack} style={{ display: "flex", alignItems: "center", gap: 10, border: "none", background: "transparent", cursor: "pointer", color: Ox.primary, fontFamily: Ox.font, fontWeight: 500, fontSize: 17, flex: "0 0 auto" }}>
        <Icon name="arrow-left" size={20} color={Ox.primary} /> Back to Rooms
      </button>
      <div className="oasis-scroll" style={{ flex: 1, overflowY: "auto", minHeight: 0, paddingRight: 8, paddingBottom: 8 }}>
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 0.82fr) minmax(0, 1.18fr)", gap: 24, alignItems: "stretch" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <GuestInfoCard g={guest} />
            <CurrentReservation r={d.reservation} />
            <ReservationHistory rows={d.history} />
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <RoomInfoCard room={merged} amenities={d.amenities} />
            <PhotoGallery grow />
          </div>
        </div>
      </div>
    </div>);

}
window.RoomDetail = RoomDetail;

// ── New Arrival - opens as a modal (blank, fillable guest + reservation) ──────
function NewArrivalModal({ open, onClose, onSave }) {
  const d = window.ROOM_DETAIL;
  const [guestForm, setGuestForm] = useState({ name: "", passport: "", phone: "", nationality: "", dob: "", email: "" });
  const [resForm, setResForm] = useState({ checkIn: "", checkOut: "", guests: "", duration: "" });
  const [roomNo, setRoomNo] = useState("");
  const setGuest = (k, v) => setGuestForm((f) => ({ ...f, [k]: v }));
  const setRes = (k, v) => setResForm((f) => ({ ...f, [k]: v }));

  // reset whenever it (re)opens
  React.useEffect(() => {
    if (open) {
      setGuestForm({ name: "", passport: "", phone: "", nationality: "", dob: "", email: "" });
      setResForm({ checkIn: "", checkOut: "", guests: "", duration: "" });
      setRoomNo("");
    }
  }, [open]);

  if (!open) return null;
  const available = window.ROOMS.filter((r) => r.status === "Available");
  const chosen = window.ROOMS.find((r) => r.no === roomNo);
  const roomForView = chosen ?
  { ...d.room, no: chosen.no, type: chosen.type, status: "Available", floor: chosen.floor } :
  { ...d.room, no: "-", status: "Available", floor: "-", type: "-" };
  const canSave = guestForm.name.trim() && roomNo;

  return (
    <div onMouseDown={onClose} style={{
      position: "absolute", inset: 0, background: "rgba(31,42,68,.32)", backdropFilter: "blur(2px)",
      display: "flex", alignItems: "center", justifyContent: "center", zIndex: 60, animation: "oasisFade .2s ease", padding: 24, boxSizing: "border-box"
    }}>
      <div onMouseDown={(e) => e.stopPropagation()} style={{
        width: 1620, maxWidth: "100%", maxHeight: "100%", background: "#F4F9FF", borderRadius: 24, boxShadow: "0 40px 90px rgba(31,42,68,.3)",
        display: "flex", flexDirection: "column", overflow: "hidden", animation: "oasisPop .22s cubic-bezier(.2,.8,.3,1.1)"
      }}>
        <div style={{ padding: "26px 32px", display: "flex", alignItems: "center", justifyContent: "space-between", background: "#fff", borderBottom: `1px solid ${Ox.hairline}` }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <div style={{ width: 44, height: 44, borderRadius: 12, background: "#E7F1FC", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name="calendar-check" size={24} color={Ox.primary} />
            </div>
            <div>
              <div style={{ fontFamily: Ox.font, fontWeight: 500, fontSize: 22, color: Ox.navy }}>New Arrival</div>
              <div style={{ fontFamily: Ox.font, fontSize: 14, color: "#AEB6C4", marginTop: 4 }}>Register a guest and assign an available room.</div>
            </div>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
            <PillButton tone="blue" variant="solid" onClick={() => canSave && onSave(guestForm.name.trim(), roomNo)}
            style={{ opacity: canSave ? 1 : 0.5, pointerEvents: canSave ? "auto" : "none" }}>
              <Icon name="check" size={18} color="#fff" /> Save Arrival
            </PillButton>
            <button onClick={onClose} style={{ border: "none", background: "transparent", cursor: "pointer", padding: 4 }}><Icon name="x" size={22} color={Ox.navy} /></button>
          </div>
        </div>
        <div className="oasis-scroll" style={{ flex: 1, overflowY: "auto", minHeight: 0, padding: 24 }}>
          <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 0.88fr) minmax(0, 1.12fr)", gap: 20, alignItems: "stretch" }}>
            <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
              <GuestInfoForm form={guestForm} set={setGuest} />
              <NewReservationForm form={resForm} set={setRes} rooms={available} roomNo={roomNo} setRoomNo={setRoomNo} />
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
              <RoomInfoCard room={roomForView} amenities={d.amenities} />
            </div>
          </div>
        </div>
      </div>
    </div>);

}
window.NewArrivalModal = NewArrivalModal;