// ── Oasis HMS · Shared chrome & primitives ──────────────────────────────────
const { useState } = React;
const O = window.OASIS;

// Closes a dropdown when the user mousedowns outside `ref`. Capture phase so it
// fires even inside modals that stop propagation in the bubble phase.
function useOutsideClose(ref, open, onClose) {
  React.useEffect(() => {
    if (!open) return;
    const handler = (e) => {if (ref.current && !ref.current.contains(e.target)) onClose();};
    document.addEventListener("mousedown", handler, true);
    return () => document.removeEventListener("mousedown", handler, true);
  }, [open]);
}
window.useOutsideClose = useOutsideClose;

// Outline icon → filled counterpart, used for the active sidebar item
const FILLED_NAV = {
  "grid": "grid-fill",
  "bed-line": "bed-fill",
  "users": "users-fill",
  "wrench-line": "wrench-fill",
  "shield-line": "shield-fill",
  "calendar-check": "calendar-check-fill"
};

// Card surface
function Card({ children, style, pad = 24, flat = false, ...rest }) {
  return (
    <div {...rest} style={{ ...{
        background: O.white, borderRadius: 20, boxShadow: flat ? "none" : O.shadowCard,
        padding: pad, boxSizing: "border-box", ...style, gap: "8px"
      }, padding: "37px" }}>{children}</div>);

}

// Status badge (Available / Occupied / In Cleaning / Maintenance / Ready ...)
function Badge({ status, style }) {
  const c = window.OASIS_STATUS[status] || { fg: O.muted, bg: "#EEF1F6" };
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", height: 30, padding: "0 14px",
      borderRadius: 8, background: c.bg, color: c.fg, fontWeight: 500, fontSize: 14,
      fontFamily: O.font, whiteSpace: "nowrap", ...style
    }}>{status}</span>);

}

// Left sidebar
function Sidebar({ active, onNav }) {
  const [hover, setHover] = useState(null);
  return (
    <div style={{
      position: "absolute", left: 0, top: 0, width: 75, height: "100%",
      display: "flex", flexDirection: "column", alignItems: "center",
      paddingTop: 96, paddingBottom: 40, zIndex: 5
    }}>
      <div style={{ display: "flex", flexDirection: "column", gap: 24, alignItems: "center" }}>
        {window.NAV.map((n) => {
          const disabled = n.id === "maint" || n.id === "security" || n.id === "calendar";
          const on = active === n.id,hl = hover === n.id;
          const iconColor = on ? O.primary : hl ? O.primary : "#AEB6C4";
          const iconName = on ? FILLED_NAV[n.icon] || n.icon : n.icon;
          return (
            <button key={n.id} title={n.label}
            onClick={() => { if (!disabled && onNav) onNav(n.id); }}
            onMouseEnter={() => setHover(n.id)} onMouseLeave={() => setHover(null)}
            style={{
              position: "relative", border: "none", background: "transparent", cursor: "pointer", padding: 0,
              width: 40, height: 40,
              display: "flex", alignItems: "center", justifyContent: "center",
              transform: hl && !on ? "scale(1.1)" : "scale(1)",
              transition: "transform .16s ease"
            }}>
              {on && <span style={{
                position: "absolute", left: -22, top: "50%", transform: "translateY(-50%)",
                width: 4, height: 26, borderRadius: 4, background: O.primary
              }} />}
              <Icon name={iconName} size={24} color={iconColor} stroke={2} />
            </button>);

        })}
      </div>
      <div style={{ marginTop: "auto" }}>
        <Icon name="user-circle" size={26} color={O.navy} stroke={1.8} />
      </div>
    </div>);

}

// Top bar (title / breadcrumb + live date)
function TopBar({ children }) {
  return (
    <div style={{
      position: "absolute", left: 130, right: 64, top: 8, height: 30,
      display: "flex", alignItems: "center", justifyContent: "space-between", zIndex: 4, padding: "0px 0px 32px"
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, fontFamily: O.font, fontWeight: 500, fontSize: 22, color: O.navy }}>
        {children}
      </div>
      <div style={{ fontFamily: O.font, fontWeight: 500, fontSize: 18, color: O.navy }}>
        February 16, 2026 11:23
      </div>
    </div>);

}

// Pill button used for KPI CTAs and primary actions
function PillButton({ children, tone = "blue", onClick, icon, variant = "soft", style }) {
  const [h, setH] = useState(false);
  const tones = {
    red: { fg: "#DE4343", soft: "#FFEDED", solid: "#DE4343" },
    green: { fg: "#2E9E48", soft: "#E8FBEC", solid: "#2E9E48" },
    blue: { fg: O.primary, soft: "#EAF3FF", solid: O.primary },
    purple: { fg: O.purpleDk, soft: "#F1EAFE", solid: O.purple }
  };
  const t = tones[tone] || tones.blue;
  const solid = variant === "solid";
  return (
    <button onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
    style={{
      display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
      height: 48, padding: "0 22px", borderRadius: 12, border: "none", cursor: "pointer",
      fontFamily: O.font, fontWeight: 500, fontSize: 16,
      background: solid ? t.solid : t.soft,
      color: solid ? "#fff" : t.fg,
      boxShadow: h ? solid ? "0 8px 20px rgba(74,144,226,.32)" : "0 6px 16px rgba(74,144,226,.14)" : "none",
      transform: h ? "translateY(-1px)" : "none", transition: "all .16s ease", ...style
    }}>
      {icon === "plus" && <Icon name="plus" size={18} color={solid ? "#fff" : t.fg} />}
      {children}
      {icon === "arrow" && <Icon name="arrow-right" size={18} color={solid ? "#fff" : t.fg} />}
    </button>);

}

// Small select / dropdown chip (non-functional visual or simple toggle)
function SelectChip({ label, icon, value, tone = "blue", style, onClick }) {
  const [h, setH] = useState(false);
  return (
    <button onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
    style={{
      display: "inline-flex", alignItems: "center", gap: 8, height: 44, padding: "0 14px",
      borderRadius: 10, border: `1px solid ${h ? O.primary : "#DCE7F5"}`, background: "#fff",
      cursor: "pointer", fontFamily: O.font, fontWeight: 500, fontSize: 15, color: O.primary,
      transition: "border-color .15s ease", whiteSpace: "nowrap", ...style
    }}>
      {icon && <Icon name={icon} size={16} color={O.primary} />}
      <span>{value || label}</span>
      <Icon name="chevron-down" size={16} color={O.primary} />
    </button>);

}

Object.assign(window, { Card, Badge, Sidebar, TopBar, PillButton, SelectChip });