// ── Oasis HMS · Upcoming Arrivals (Check-Ins) modal ──────────────────────────
const Oar = window.OASIS;

function ArrivalsModal({ open, onClose, onAdd }) {
  const [sortKey, setSortKey] = React.useState(null);
  const [dir, setDir] = React.useState(1);
  if (!open) return null;

  const cols = ["Booking ID", "Guest Name", "Room No.", "Room Type", "Status"];
  const keyMap = { "Booking ID": "id", "Guest Name": "guest", "Room No.": "room", "Room Type": "type", "Status": "status" };
  let rows = [...window.ARRIVALS];
  if (sortKey) { const k = keyMap[sortKey]; rows.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 (
    <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",
    }}>
      <div onMouseDown={(e) => e.stopPropagation()} style={{
        width: 760, maxHeight: "84%", background: "#fff", 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: "30px 36px 22px", display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
          <div style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
            <div style={{ width: 46, height: 46, borderRadius: 12, background: "#E2F6E7", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
              <Icon name="calendar" size={24} color={Oar.green} />
            </div>
            <div>
              <div style={{ fontFamily: Oar.font, fontWeight: 500, fontSize: 22, color: Oar.navy }}>Check-Ins Today</div>
              <div style={{ fontFamily: Oar.font, fontSize: 14.5, color: "#AEB6C4", marginTop: 6 }}>
                {rows.length} upcoming arrival{rows.length === 1 ? "" : "s"} for February 16, 2026.
              </div>
            </div>
          </div>
          <button onClick={onClose} style={{ border: "none", background: "transparent", cursor: "pointer", padding: 4 }}><Icon name="x" size={22} color={Oar.navy} /></button>
        </div>

        <div className="oasis-scroll" style={{ flex: 1, overflowY: "auto", padding: "0 36px", minHeight: 0 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr .8fr 1fr 1fr", gap: 8, paddingBottom: 14, borderBottom: `1px solid ${Oar.hairline}`, position: "sticky", top: 0, background: "#fff" }}>
            {cols.map((c) => (
              <button key={c} onClick={() => toggle(c)} style={{ display: "flex", alignItems: "center", gap: 5, border: "none", background: "transparent", cursor: "pointer", fontFamily: Oar.font, fontWeight: 500, fontSize: 14, color: sortKey === c ? Oar.primary : "#AEB6C4", justifyContent: "flex-start", padding: 0 }}>
                {c} <Icon name="sort" size={13} color={sortKey === c ? Oar.primary : "#C9D2DE"} />
              </button>
            ))}
          </div>
          {rows.map((r) => (
            <div key={r.id} style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr .8fr 1fr 1fr", gap: 8, alignItems: "center", padding: "17px 0", borderBottom: `1px solid ${Oar.hairline}`, fontFamily: Oar.font, fontSize: 14.5, color: Oar.navy }}>
              <span style={{ fontWeight: 500 }}>{r.id}</span>
              <span>{r.guest}</span>
              <span>{r.room}</span>
              <span>{r.type}</span>
              <span><span style={{ display: "inline-flex", alignItems: "center", height: 28, padding: "0 12px", borderRadius: 8, fontWeight: 500, fontSize: 13.5, background: window.OASIS_STATUS[r.status]?.bg, color: window.OASIS_STATUS[r.status]?.fg }}>{r.status}</span></span>
            </div>
          ))}
        </div>

        <div style={{ padding: "18px 36px", borderTop: `1px solid ${Oar.hairline}`, display: "flex", justifyContent: "flex-end" }}>
          <PillButton tone="blue" variant="solid" icon="plus" onClick={onAdd} style={{ height: 44 }}>Add New Arrival</PillButton>
        </div>
      </div>
    </div>);

}
window.ArrivalsModal = ArrivalsModal;