// ── Oasis HMS · Staff Status Details modal ───────────────────────────────────
const Os = window.OASIS;
const { useState: uSt } = React;

function rating(r) {
  if (r >= 1) return { label: "Good", fg: "#2E9E48", bg: "#E0FAE5" };
  if (r >= 0.6) return { label: "Okay", fg: "#D68600", bg: "#FFE8C0" };
  return { label: "Low", fg: "#DE4343", bg: "#FFD0D0" };
}
function barColors(r) {
  if (r >= 1) return { c: "#36AC4D", t: "#DDF3E1" };
  if (r >= 0.6) return { c: "#E79A1A", t: "#FBEBCF" };
  return { c: "#E36B6B", t: "#FBD9D9" };
}

function DeptMiniCard({ s, active, onClick }) {
  const r = s.on / s.total,bc = barColors(r),dep = window.DEPARTMENTS[s.dept];
  return (
    <button onClick={onClick} style={{
      textAlign: "left", cursor: "pointer", borderRadius: 14, padding: "11px 14px",
      border: `1.5px solid ${active ? Os.primary : "#E9EFF7"}`, background: active ? "#EFF6FF" : "#fff",
      display: "flex", flexDirection: "column", gap: 8, transition: "all .14s ease"
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <Icon name={dep.icon} size={20} color={Os.primary} />
        <span style={{ flex: 1, fontFamily: Os.font, fontWeight: 500, fontSize: 15.5, color: Os.navy }}>{s.dept}</span>
        <span style={{ fontFamily: Os.font, fontWeight: 500, fontSize: 15, color: Os.navy }}>{s.on}/{s.total}</span>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <span style={{ fontFamily: Os.font, fontSize: 13, color: "#9AA3B2" }}>On Shift</span>
        <div style={{ flex: 1, height: 8, borderRadius: 6, background: bc.t, overflow: "hidden" }}>
          <div style={{ width: `${r * 100}%`, height: "100%", background: bc.c, borderRadius: 6 }} />
        </div>
      </div>
    </button>);

}

// Shared inner content (dept list + detail) used by both the modal and full page
function StaffBody({ sel, setSel }) {
  const s = window.STAFF.find((x) => x.dept === sel) || window.STAFF[0];
  const rt = rating(s.on / s.total);
  const missing = s.total - s.on;
  const dep = window.DEPARTMENTS[sel];
  const roster = window.STAFF_ROSTER[sel] ?
  window.STAFF_ROSTER[sel].slice(0, s.total) :
  (() => {
    // distinct, non-overlapping slice of the shared pool so names never repeat
    let offset = 0;
    for (const st of window.STAFF) {
      if (st.dept === sel) break;
      if (!window.STAFF_ROSTER[st.dept]) offset += st.total;
    }
    return window.STAFF_POOL.slice(offset, offset + s.total).map((p) => ({ ...p, role: `${sel} Staff` }));
  })();

  // Next shift: a distinct, non-overlapping slice per department so names never repeat
  const deptIdx = window.STAFF.findIndex((x) => x.dept === sel);
  const nextStart = (deptIdx < 0 ? 0 : deptIdx) * 3 % window.NEXT_SHIFT_POOL.length;
  const nextShift = Array.from({ length: 3 }, (_, i) => window.NEXT_SHIFT_POOL[(nextStart + i) % window.NEXT_SHIFT_POOL.length]);

  return (
    <div style={{ flex: 1, display: "grid", gridTemplateColumns: "300px 1fr", gap: 28, minHeight: 0 }}>
      {/* dept list */}
      <div style={{ display: "flex", flexDirection: "column", gap: 10, justifyContent: "space-between", paddingRight: 2 }}>
        {window.STAFF.map((st) =>
        <DeptMiniCard key={st.dept} s={st} active={st.dept === sel} onClick={() => setSel(st.dept)} />
        )}
      </div>

      {/* detail */}
      <div style={{ display: "flex", flexDirection: "column", minHeight: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <Icon name={dep.icon} size={26} color={Os.primary} />
          <span style={{ fontFamily: Os.font, fontWeight: 500, fontSize: 21, color: Os.navy }}>{sel}</span>
          <span style={{ display: "inline-flex", alignItems: "center", height: 28, padding: "0 14px", borderRadius: 8, background: rt.bg, color: rt.fg, fontFamily: Os.font, fontWeight: 500, fontSize: 14 }}>{rt.label}</span>
        </div>
        <div style={{ fontFamily: Os.font, fontSize: 15, color: "#AEB6C4", margin: "10px 0 18px" }}>Currently on shift ({s.on})</div>

        <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1.4fr 1fr .9fr", gap: 8, paddingBottom: 12, borderBottom: `1px solid ${Os.hairline}` }}>
          {["Name", "Role", "Allocation", "Status"].map((c) =>
          <span key={c} style={{ fontFamily: Os.font, fontWeight: 500, fontSize: 14, color: "#AEB6C4" }}>{c}</span>
          )}
        </div>
        <div className="oasis-scroll" style={{ flex: 1, overflowY: "auto", minHeight: 60 }}>
          {roster.map((p, i) => {
            const onDuty = i < s.on;
            return (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "1.3fr 1.4fr 1fr .9fr", gap: 8, alignItems: "center", padding: "13px 0", borderBottom: `1px solid ${Os.hairline}`, fontFamily: Os.font, fontSize: 14.5, color: Os.navy }}>
              <span>{p.name}</span>
              <span style={{ color: "#5B6475" }}>{p.role}</span>
              <span style={{ color: "#5B6475" }}>{onDuty ? p.alloc : "-"}</span>
              <span>{onDuty ?
                <span style={{ display: "inline-flex", alignItems: "center", height: 26, padding: "0 12px", borderRadius: 7, background: "#E0FAE5", color: "#2E9E48", fontWeight: 500, fontSize: 13 }}>On Duty</span> :
                <span style={{ display: "inline-flex", alignItems: "center", height: 26, padding: "0 12px", borderRadius: 7, background: "#FFD0D0", color: "#DE4343", fontWeight: 500, fontSize: 13 }}>Missing</span>
              }</span>
            </div>);
          })}
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 18, marginTop: 16 }}>
          <div style={{ border: `1px solid ${Os.hairline}`, borderRadius: 14, padding: "18px 20px", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", gap: 10 }}>
            <div style={{ alignSelf: "flex-start", fontFamily: Os.font, fontWeight: 500, fontSize: 15.5, color: Os.navy }}>Important Information</div>
            {missing > 0 ?
            <React.Fragment>
              <Icon name="alert-circle" size={26} color={Os.red} stroke={1.8} />
              <span style={{ fontFamily: Os.font, fontSize: 14, color: Os.muted }}>
                Missing {missing} employee{missing > 1 ? "s" : ""}, workload may be affected.
              </span>
            </React.Fragment> :
            <React.Fragment>
              <Icon name="check-circle" size={26} color={Os.green} />
              <span style={{ fontFamily: Os.font, fontSize: 14, color: Os.muted }}>There's nothing to show at the moment.</span>
            </React.Fragment>
            }
          </div>
          <div style={{ border: `1px solid ${Os.hairline}`, borderRadius: 14, padding: "16px 20px" }}>
            <div style={{ fontFamily: Os.font, fontWeight: 500, fontSize: 15.5, color: Os.navy, marginBottom: 12 }}>Next Shift (Starting at 03 PM) ({nextShift.length})</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {nextShift.map((p) =>
              <div key={p.name} style={{ display: "flex", justifyContent: "space-between", fontFamily: Os.font, fontSize: 14 }}>
                  <span style={{ color: Os.navy, fontWeight: 500 }}>{p.name}</span>
                  <span style={{ color: "#5B6475" }}>{p.role}</span>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>);

}

function StaffModal({ open, onClose }) {
  const [sel, setSel] = uSt("Housekeeping");
  if (!open) return null;

  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: 1040, height: 760, maxHeight: "92%", 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>
            <div style={{ fontFamily: Os.font, fontWeight: 500, fontSize: 23, color: Os.navy }}>Staff Status Details</div>
            <div style={{ fontFamily: Os.font, fontSize: 14.5, color: "#AEB6C4", marginTop: 8 }}>
              Overview of staff for today, <span style={{ textDecoration: "underline" }}>February 16, 2026</span>.
            </div>
          </div>
          <button onClick={onClose} style={{ border: "none", background: "transparent", cursor: "pointer", padding: 4 }}><Icon name="x" size={22} color={Os.navy} /></button>
        </div>
        <div style={{ flex: 1, padding: "0 36px 32px", minHeight: 0, display: "flex" }}>
          <StaffBody sel={sel} setSel={setSel} />
        </div>
      </div>
    </div>);

}
window.StaffModal = StaffModal;

// Full-page version (sidebar “Staff” nav). Lives inside the working area.
function StaffPage() {
  const [sel, setSel] = uSt("Housekeeping");
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 22, height: "100%" }}>
      <div style={{ flex: "0 0 auto" }}>
        <div style={{ fontFamily: Os.font, fontWeight: 500, fontSize: 24, color: Os.navy }}>Staff Status Details</div>
        <div style={{ fontFamily: Os.font, fontSize: 14.5, color: "#AEB6C4", marginTop: 6 }}>
          Overview of staff for today, <span style={{ textDecoration: "underline" }}>February 16, 2026</span>.
        </div>
      </div>
      <Card style={{ flex: 1, display: "flex", minHeight: 0 }} pad={28}>
        <StaffBody sel={sel} setSel={setSel} />
      </Card>
    </div>);

}
window.StaffPage = StaffPage;