// Onboarding.jsx — first-run getting-started overlay
(function () {
  // ---- A7: first-run getting-started overlay ----
  // Persists checklist progress under localStorage["emplix-onboarding"] with its
  // own v1 guard (independent of every other key). The overlay deep-links into
  // the relevant screens, captures a light company profile, is dismissible and
  // re-openable from the topbar. RBAC-aware: steps the acting level cannot act
  // on render disabled-with-reason (never hidden), mirroring the rest of the demo.
  const ONBOARD_KEY = "emplix-onboarding";
  const ONBOARD_VERSION = 2;
  function loadOnboarding() {
    try {
      const raw = localStorage.getItem(ONBOARD_KEY);
      if (!raw) return null;
      const saved = JSON.parse(raw);
      if (!saved || saved.version !== ONBOARD_VERSION) return null;
      return saved;
    } catch (e) { return null; }
  }
  function saveOnboarding(rec) {
    try { localStorage.setItem(ONBOARD_KEY, JSON.stringify(Object.assign({ version: ONBOARD_VERSION }, rec))); } catch (e) {}
  }

  function Onboarding({ role, onClose, office, openPage, startDay0 }) {
    const h2 = React.createElement;
    const Btn = window.Button;
    const canResetDemo = window.EmplixPermissions.can(role, "resetDemo");
    const resetDemoReason = window.EmplixPermissions.denyReason(role, "resetDemo");
    const day0 = !!(office && office.onboarding && office.onboarding.day0);
    const recId = (office && office.recommendedRole) || (office && office.day0Seed && office.day0Seed.recommendedRole) || "clerk";
    const recRole = office && office.roleById && office.roleById[recId];
    const recTitle = (recRole && recRole.title) || "your first employee";
    return h2("div", { onClick: onClose, style: { position: "fixed", inset: 0, zIndex: 90, display: "grid", placeItems: "center", padding: 20,
      background: "rgba(20,28,45,0.46)", backdropFilter: "blur(4px)", animation: "fadeUp .2s" } },
      h2("div", { onClick: (e) => e.stopPropagation(), className: "glass onboarding-dialog", role: "dialog", "aria-modal": "true", "aria-label": "Get started with Emplix", "data-onboarding-guide": "true", "data-onboarding-day0": day0 ? "true" : "false", "data-onboarding-recommended-role": recId, style: { width: 460, maxWidth: "94vw", boxShadow: "var(--shadow-lg)", padding: 0, animation: "fadeUp .24s" } },
        h2("div", { className: "row between onboarding-header", style: { padding: "18px 22px", borderBottom: "1px solid var(--border)" } },
          h2("div", { className: "row gap10" },
            h2("div", { style: { width: 34, height: 34, borderRadius: 10, background: "linear-gradient(135deg,#5aa2ff,#6438e8)", display: "grid", placeItems: "center", color: "#fff", flex: "none" } }, h2(window.Icon, { name: "sparkle", size: 18 })),
            h2("div", null,
              h2("div", { style: { fontWeight: 700, fontSize: 16, letterSpacing: "-0.01em" } }, "Get started with Emplix"),
              h2("div", { style: { fontSize: 12.5, color: "var(--text-faint)", marginTop: 2 } }, "Static demo — no real accounts, no charges."))),
          h2(Btn, { variant: "ghost", icon: "x", onClick: onClose, ariaLabel: "Close", "data-onboarding-action": "close" })),
        h2("div", { className: "onboarding-body", style: { padding: "20px 22px" } },
          h2("p", { style: { fontSize: 13.5, color: "var(--text-dim)", lineHeight: 1.6, margin: "0 0 16px" } },
            day0
              ? "Your office starts empty. Brief the first employee, review the draft, then stamp or return it."
              : "Brief an AI employee in plain words. It drafts from your files and waits on My Desk."),
          day0
            ? h2(Btn, { variant: "primary", iconRight: "arrowRight", "data-onboarding-action": "brief-employee", "data-onboarding-target-role": recId, onClick: () => { onClose(); openPage("employee", recId); } }, h2("span", null, "Brief "), h2("span", null, recTitle))
            : h2("div", { className: "row gap10 onboarding-actions", style: { flexWrap: "wrap" } },
                h2(Btn, { variant: "primary", iconRight: "arrowRight", "data-onboarding-action": "brief-employee", "data-onboarding-target-role": recId, onClick: () => { onClose(); openPage("employee", recId); } }, "Brief an employee"),
                h2(Btn, { variant: "ghost", "data-onboarding-action": "open-floor", onClick: () => { onClose(); window.location.hash = "floor"; } }, "Open the Floor View"))),
        h2("div", { className: "row between onboarding-footer", style: { padding: "14px 22px", borderTop: "1px solid var(--border)" } },
          (!day0 && startDay0)
            ? canResetDemo
              ? h2(Btn, { variant: "ghost", sm: true, "data-onboarding-action": "start-day0", onClick: () => startDay0() }, "Start fresh at Day 0")
              : h2(Btn, { variant: "ghost", sm: true, "data-onboarding-action": "start-day0", disabled: true, title: resetDemoReason, "aria-disabled": "true" }, "Start fresh at Day 0")
            : h2("span", { style: { fontSize: 11.5, color: "var(--text-faint)" } }, "You can reopen this anytime from the top bar."),
          h2(Btn, { variant: "ghost", "data-onboarding-action": "dismiss", onClick: onClose }, "Dismiss for now"))));
  }

  window.EmplixOnboarding = {
    ONBOARD_KEY,
    ONBOARD_VERSION,
    loadOnboarding,
    saveOnboarding,
    Onboarding,
  };
  window.Onboarding = Onboarding;
})();