// ── Oasis HMS · High Priority Alerts modal ───────────────────────────────────
const Oal = window.OASIS;

function AlertsModal({ open, alerts, onClose, onEdit, onAdd }) {
  if (!open) return null;
  const high = alerts.filter((a) => a.priority === "high");

  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: 620, 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 32px 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: "#FCE5E5", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
              <Icon name="alert-triangle" size={24} color={Oal.red} />
            </div>
            <div>
              <div style={{ fontFamily: Oal.font, fontWeight: 500, fontSize: 22, color: Oal.navy }}>High Priority Alerts</div>
              <div style={{ fontFamily: Oal.font, fontSize: 14.5, color: "#AEB6C4", marginTop: 6 }}>
                {high.length} alert{high.length === 1 ? "" : "s"} require immediate action.
              </div>
            </div>
          </div>
          <button onClick={onClose} style={{ border: "none", background: "transparent", cursor: "pointer", padding: 4 }}><Icon name="x" size={22} color={Oal.navy} /></button>
        </div>

        <div className="oasis-scroll" style={{ flex: 1, overflowY: "auto", padding: "0 32px", minHeight: 0 }}>
          {high.length === 0 ? (
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 12, padding: "40px 0 48px", textAlign: "center" }}>
              <Icon name="check-circle" size={30} color={Oal.green} />
              <span style={{ fontFamily: Oal.font, fontSize: 15, color: Oal.muted }}>No high priority alerts right now.</span>
            </div>
          ) : high.map((a) => {
            const dep = a.dept ? window.DEPARTMENTS[a.dept] : null;
            return (
              <div key={a.id} style={{ borderBottom: `1px solid ${Oal.hairline}`, padding: "18px 4px" }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                  <span style={{ display: "inline-block", padding: "6px 13px", borderRadius: 8, fontFamily: Oal.font, fontWeight: 500, fontSize: 15.5, background: "#FFE2E2", color: Oal.red }}>{a.title}</span>
                  <button onClick={() => onEdit(a)} style={{ display: "flex", alignItems: "center", gap: 6, height: 34, padding: "0 14px", borderRadius: 9, border: "1px solid #BFD9F5", background: "#fff", cursor: "pointer", color: Oal.primary, fontFamily: Oal.font, fontWeight: 500, fontSize: 14 }}>
                    <Icon name="edit" size={14} color={Oal.primary} /> Edit
                  </button>
                </div>
                <div style={{ fontFamily: Oal.font, fontSize: 13.5, color: "#AEB6C4", margin: "12px 0 12px 2px" }}>{a.where} • {a.time}</div>
                <div style={{ display: "inline-flex", alignItems: "center", gap: 8, height: 36, padding: "0 14px", borderRadius: 9, border: "1px solid #E2EAF4", background: "#fff", marginLeft: 2 }}>
                  {dep ? <Icon name={dep.icon} size={17} color={Oal.navy} /> : null}
                  <span style={{ fontFamily: Oal.font, fontSize: 14.5, color: a.dept ? Oal.navy : "#AEB6C4" }}>{a.dept || "No Department Assigned"}</span>
                </div>
              </div>
            );
          })}
        </div>

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

}
window.AlertsModal = AlertsModal;