// ── Oasis HMS · Rooms page ───────────────────────────────────────────────────
const Or = window.OASIS;

const ROOM_KPI_TONE = {
  red:   { fg: "#DE4343",  border: "#F2B4B4", bg: "#FFF4F4", iconBg: "#FBD5D5" },
  green: { fg: "#36AC4D",  border: "#A8DEB4", bg: "#F4FCF6", iconBg: "#CFF0D7" },
  blue:  { fg: Or.primary, border: "#AECBF0", bg: "#F3F8FE", iconBg: "#CFE3FA" },
  amber: { fg: "#D68600",  border: "#F2CE8C", bg: "#FFFBF2", iconBg: "#FBE3B4" },
};

function RoomKpiCard({ kpi }) {
  const t = ROOM_KPI_TONE[kpi.tone];
  return (
    <div
      style={{ flex: 1, height: 132, borderRadius: 18, background: t.bg, border: `1.5px solid ${t.border}`,
        padding: "22px 24px", boxSizing: "border-box", display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
      <div style={{ display: "flex", flexDirection: "column" }}>
        <div style={{ fontFamily: Or.font, fontWeight: 500, fontSize: 17, color: t.fg }}>{kpi.label}</div>
        <div style={{ fontFamily: Or.font, fontWeight: 500, fontSize: 42, color: Or.navy, lineHeight: 1.05, margin: "6px 0 4px" }}>{kpi.value}</div>
        <div style={{ fontFamily: Or.font, fontSize: 13, color: "#9AA3B2" }}>{kpi.sub}</div>
      </div>
      <div style={{ width: 52, height: 52, borderRadius: 13, background: t.iconBg, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
        <Icon name={kpi.icon} size={28} color={t.fg} />
      </div>
    </div>
  );
}

function FilterSelect({ label, value, options, onChange }) {
  const [open, setOpen] = useState(false);
  const ref = React.useRef(null);
  window.useOutsideClose(ref, open, () => setOpen(false));
  return (
    <div ref={ref} style={{ display: "flex", flexDirection: "column", gap: 8, position: "relative" }}>
      <span style={{ fontFamily: Or.font, fontSize: 14, color: "#AEB6C4" }}>{label}</span>
      <button onClick={() => setOpen((o) => !o)} style={{
        width: 200, height: 48, padding: "0 16px", borderRadius: 12, background: "#fff", cursor: "pointer",
        border: `1px solid ${open ? Or.primary : "#DCE7F5"}`, display: "flex", alignItems: "center", justifyContent: "space-between",
        fontFamily: Or.font, fontWeight: 500, fontSize: 15, color: Or.primary,
      }}>
        {value} <Icon name="chevron-down" size={16} color={Or.primary} />
      </button>
      {open && (
        <div style={{ position: "absolute", top: 84, left: 0, width: 200, background: "#fff", borderRadius: 12, boxShadow: "0 12px 30px rgba(31,42,68,.14)", border: `1px solid ${Or.hairline}`, zIndex: 20, overflow: "hidden" }}>
          {options.map((o) => (
            <div key={o} onMouseDown={() => { onChange(o); setOpen(false); }} style={{
              padding: "12px 16px", fontFamily: Or.font, fontSize: 14.5, cursor: "pointer",
              color: o === value ? Or.primary : Or.navy, background: o === value ? "#F2F8FF" : "#fff",
            }} onMouseEnter={(e) => e.currentTarget.style.background = "#F6FAFF"} onMouseLeave={(e) => e.currentTarget.style.background = o === value ? "#F2F8FF" : "#fff"}>{o}</div>
          ))}
        </div>
      )}
    </div>
  );
}

function RoomCard({ room, onOpen }) {
  const [h, setH] = useState(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ background: "#fff", borderRadius: 18, boxShadow: h ? "0 20px 44px rgba(75,144,226,.16)" : Or.shadowSoft,
        transform: h ? "translateY(-3px)" : "none", transition: "all .18s ease", overflow: "hidden", display: "flex", flexDirection: "column" }}>
      <div style={{ padding: "22px 22px 18px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
          <span style={{ fontFamily: Or.font, fontWeight: 500, fontSize: 34, color: Or.navy, lineHeight: 1 }}>{room.no}</span>
          <Badge status={room.status} />
        </div>
        <div style={{ fontFamily: Or.font, fontWeight: 500, fontSize: 17, color: Or.navy, marginTop: 8 }}>{room.type}</div>
        <div style={{ display: "flex", gap: 24, marginTop: 22 }}>
          {room.guest && (
            <div style={{ flex: 1 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 7, color: "#AEB6C4", fontFamily: Or.font, fontSize: 13 }}>
                <Icon name="users" size={15} color={Or.primary} stroke={1.8} /> Guest
              </div>
              <div style={{ fontFamily: Or.font, fontSize: 14.5, color: "#9AA3B2", marginTop: 8 }}>{room.guest}</div>
            </div>
          )}
          <div style={{ flex: 1 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 7, color: "#AEB6C4", fontFamily: Or.font, fontSize: 13 }}>
              <Icon name={room.dateLabel === "Check Out" ? "calendar" : "calendar-check"} size={15} color={Or.primary} stroke={1.8} /> {room.dateLabel}
            </div>
            <div style={{ fontFamily: Or.font, fontSize: 14.5, color: "#9AA3B2", marginTop: 8 }}>{room.date}</div>
          </div>
        </div>
      </div>
      <button onClick={() => onOpen(room)} style={{
        borderTop: `1px solid ${Or.hairline}`, height: 54, border: "none", borderTopColor: Or.hairline, borderTopStyle: "solid", borderTopWidth: 1,
        background: h ? "#F4F9FF" : "#fff", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
        fontFamily: Or.font, fontWeight: 500, fontSize: 15, color: Or.primary, transition: "background .15s ease",
      }}>
        View More <Icon name="arrow-right" size={16} color={Or.primary} />
      </button>
    </div>
  );
}

function RoomsPage({ onOpenRoom }) {
  const [q, setQ] = useState("");
  const [type, setType] = useState("All Types");
  const [status, setStatus] = useState("All Statuses");
  const [floor, setFloor] = useState("All Floors");

  const rooms = window.ROOMS.filter((r) => {
    if (q && !(`${r.no} ${r.type} ${r.guest || ""}`.toLowerCase().includes(q.toLowerCase()))) return false;
    if (type !== "All Types" && r.type !== type) return false;
    if (status !== "All Statuses" && r.status !== status) return false;
    if (floor !== "All Floors" && `Floor ${r.floor}` !== floor) return false;
    return true;
  });

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 24, height: "100%" }}>
      <div style={{ display: "flex", gap: 24, flex: "0 0 auto" }}>
        {window.ROOM_KPIS.map((k) => <RoomKpiCard key={k.id} kpi={k} />)}
      </div>

      {/* filter bar */}
      <div style={{ display: "flex", alignItems: "flex-end", gap: 24, flex: "0 0 auto" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, height: 48, padding: "0 18px", background: "#fff", borderRadius: 12, border: "1px solid #DCE7F5", width: 340 }}>
          <Icon name="search" size={18} color={Or.primary} />
          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search..." style={{
            border: "none", outline: "none", flex: 1, fontFamily: Or.font, fontSize: 15, color: Or.navy, background: "transparent",
          }} />
        </div>
        <FilterSelect label="Room Type" value={type} onChange={setType} options={["All Types", "Suite", "Family", "Double"]} />
        <FilterSelect label="Status" value={status} onChange={setStatus} options={["All Statuses", "Available", "Occupied", "In Cleaning", "Maintenance"]} />
        <FilterSelect label="Floor" value={floor} onChange={setFloor} options={["All Floors", "Floor 1", "Floor 2", "Floor 3", "Floor 4", "Floor 5"]} />
      </div>

      {/* grid */}
      <div className="oasis-scroll" style={{ flex: 1, overflowY: "auto", minHeight: 0, paddingRight: 8, paddingBottom: 8 }}>
        {rooms.length === 0 ? (
          <div style={{ height: 200, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: Or.font, color: "#AEB6C4", fontSize: 16 }}>No rooms match your filters.</div>
        ) : (
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, minmax(0,1fr))", gap: 24 }}>
            {rooms.map((r) => <RoomCard key={r.no} room={r} onOpen={onOpenRoom} />)}
          </div>
        )}
      </div>
    </div>
  );
}
window.RoomsPage = RoomsPage;