/* ============================================================
   Auth chrome — identity control (top bar), login popover with
   role-scoped accounts, and the compact review/guest feedback dock.
   Mirrors the backend tables: users · user_sessions ·
   user_access_grants (SHARED | EDITORIAL) · content_feedback.
   ============================================================ */
const { useState: uSau, useEffect: uEau, useRef: uRau } = React;

/* bilingual chrome labels for the identity control + login popover */
const SIGN = {
  en: { signin: "Sign in", who: "Who's editing?", chooseSub: "Choose an account. Each one carries its own role and access rights.",
        pwLabel: "Password", enter: "Enter", stay: "Stay connected on this device",
        adminMode: "Admin Board", editMode: "Enter edit mode", reviewMode: "Enter review mode", publishMode: "Enter publish mode", testerMode: "Enter tester mode", editHere: "Edit this page",
        closeAdmin: "Close edit mode", closeEdit: "Close edit mode", closeReview: "Close review mode", closePublish: "Close publish mode", closeTester: "Close tester mode",
        board: "Admin Board", settings: "Open settings", manage: "Manage roles & shared content", logout: "Log out", account: "Account settings",
        shared: "Shared with you", seeAll: "See all my shared content", noShared: "No content shared with you yet.", priv: "private",
        editNote: "You edit drafts & untranslated content. Publishing, settings and users stay locked.",
        reviewNote: "You can validate pieces in review and leave feedback. Read-only otherwise.",
        publishNote: "You publish validated pieces and schedule go-live dates. Private pages can't be published.",
        testerNote: "You preview pre-released (in-review & validated) public pages before they go live." },
  fr: { signin: "Connexion", who: "Qui \u00e9dite ?", chooseSub: "Choisissez un compte. Chacun porte son propre r\u00f4le et ses droits d'acc\u00e8s.",
        pwLabel: "Mot de passe", enter: "Entrer", stay: "Rester connect\u00e9 sur cet appareil",
        adminMode: "Tableau d'admin", editMode: "Entrer en mode \u00e9dition", reviewMode: "Entrer en mode relecture", publishMode: "Entrer en mode publication", testerMode: "Entrer en mode testeur", editHere: "\u00c9diter cette page",
        closeAdmin: "Fermer le mode \u00e9dition", closeEdit: "Fermer le mode \u00e9dition", closeReview: "Fermer le mode relecture", closePublish: "Fermer le mode publication", closeTester: "Fermer le mode testeur",
        board: "Tableau d'admin", settings: "Ouvrir les r\u00e9glages", manage: "G\u00e9rer les r\u00f4les & contenus partag\u00e9s", logout: "Se d\u00e9connecter", account: "Mon compte",
        shared: "Partag\u00e9 avec vous", seeAll: "Voir tous mes contenus partag\u00e9s", noShared: "Aucun contenu partag\u00e9 pour l'instant.", priv: "priv\u00e9e",
        editNote: "Vous \u00e9ditez les brouillons & contenus non traduits. Publication, r\u00e9glages et utilisateurs restent verrouill\u00e9s.",
        reviewNote: "Vous pouvez valider les contenus en relecture et laisser un feedback. Lecture seule sinon.",
        publishNote: "Vous publiez les contenus valid\u00e9s et programmez leur mise en ligne. Les pages priv\u00e9es ne peuvent pas \u00eatre publi\u00e9es.",
        testerNote: "Vous pr\u00e9visualisez les pages en pr\u00e9-sortie (en relecture & valid\u00e9es) avant leur mise en ligne." },
};
function useSign() { const { lang } = useNav(); return SIGN[lang] || SIGN.en; }

/* ============================================================
   AUTH MODE — sign-in strategy.
   For now sign-in uses a demo PASSWORD per account, so we can hop
   between visitor roles (admin / editor / reviewer / tester / guest)
   while testing. The production flow will be passwordless:
     1. the visitor types their EMAIL
     2. a Cloudflare TURNSTILE challenge proves they're human
     3. we email them a one-time MAGIC LINK (no password is ever stored)
     4. the link opens #/auth/verify?token=… → verifyMagicLink() resolves
        the session.
   The pieces below are scaffolded & wired but inert. Flip AUTH_MODE to
   "magiclink", set TURNSTILE_SITEKEY, and point requestMagicLink /
   verifyMagicLink at the backend to switch the whole app over — no UI
   surgery required.
   ============================================================ */
const AUTH_MODE = "password";        // "password" (demo) | "magiclink" (production)
const TURNSTILE_SITEKEY = "";        // Cloudflare Turnstile site key (production)

/* Turnstile widget — renders the real challenge when a site key + script are
   present, otherwise a labelled stub so the layout is already in place. */
function TurnstileBox({ onVerify }) {
  const ref = uRau(null);
  uEau(() => {
    if (!TURNSTILE_SITEKEY || !ref.current) return;
    const ts = window.turnstile;
    if (ts && ts.render) { try { ts.render(ref.current, { sitekey: TURNSTILE_SITEKEY, callback: onVerify }); } catch (e) {} }
  }, []);
  if (!TURNSTILE_SITEKEY) {
    return <div className="ts-stub"><Icon name="lock" size={13} /> <span className="mono">Turnstile — human check (active in production)</span></div>;
  }
  return <div ref={ref} className="cf-turnstile" data-sitekey={TURNSTILE_SITEKEY} />;
}

/* Ask the backend to email a one-time magic link. Stubbed for the demo. */
async function requestMagicLink(email, turnstileToken) {
  // PROD: POST /api/auth/magic-link { email, turnstileToken }
  //       → backend creates a one-time token, emails  …/#/auth/verify?token=…
  return { ok: true, email };
}
/* Verify a magic-link token and resolve the session. Stubbed for the demo. */
async function verifyMagicLink(token) {
  // PROD: POST /api/auth/verify { token } → { user, session }
  return { ok: false };
}

/* compact name diminutive — "Cannelle Richter" → "CR" (keeps the chip a fixed size) */
function initialsOf(u) {
  if (!u) return "?";
  const parts = String(u.name || u.first || "?").trim().split(/\s+/);
  const a = (parts[0] || "?")[0] || "?";
  const b = parts.length > 1 ? (parts[parts.length - 1][0] || "") : "";
  return (a + b).toUpperCase();
}

/* ---------- account settings (available to every signed-in user) ---------- */
function AccountSettingsModal({ user, onClose }) {
  const { update } = useStore();
  const s = useSign();
  const [u, setU] = uSau({ name: user.name || "", first: user.first || "", email: user.email || "", company: user.company || "", title: user.title || "" });
  const set = (k, v) => setU(p => ({ ...p, [k]: v }));
  const save = () => {
    update(d => { const x = (d.users || []).find(z => z.id === user.id); if (x) { x.name = u.name.trim() || x.name; x.first = (u.name || "").trim().split(/\s+/)[0] || u.first || x.first; x.email = u.email; x.company = u.company; x.title = u.title; } });
    onClose();
  };
  return (
    <Modal title={s.account} onClose={onClose}
      footer={<><button className="btn ghost" onClick={onClose}>Cancel</button><button className="btn accent" onClick={save}><Icon name="save" size={16} /> Save</button></>}>
      <div className="row gap-8" style={{ alignItems: "center", marginBottom: 12 }}>
        <Avatar user={user} size={42} />
        <div><div className="mono dim" style={{ fontSize: 11, letterSpacing: ".1em" }}>ID</div><div className="mono" style={{ fontSize: 13 }}>{user.id}</div></div>
        <span className="grow" /><RoleBadge role={user.role} />
      </div>
      <div className="field-row">
        <div><label>First name</label><input value={u.first} onChange={e => set("first", e.target.value)} /></div>
        <div><label>Full name</label><input value={u.name} onChange={e => set("name", e.target.value)} placeholder="Cannelle Richter" /></div>
      </div>
      <div><label>Email</label><input value={u.email} onChange={e => set("email", e.target.value)} placeholder="you@domain.com" /></div>
      <div className="field-row">
        <div><label>Company</label><input value={u.company} onChange={e => set("company", e.target.value)} placeholder="Studio / org" /></div>
        <div><label>Function</label><input value={u.title} onChange={e => set("title", e.target.value)} placeholder="Role / title" /></div>
      </div>
    </Modal>
  );
}

/* ---------- small role badge ---------- */
function RoleBadge({ role, size = "sm" }) {
  const m = roleMeta(role);
  return (
    <span className={"rolebadge " + size} style={{ "--rc": m.color }}>
      <span className="rb-dot" />{m.label}
    </span>
  );
}

/* ---------- avatar: coloured initial ---------- */
function Avatar({ user, size = 30 }) {
  if (!user) return null;
  const init = (user.first || user.name || "?").trim().charAt(0).toUpperCase();
  return (
    <span className="avatar" style={{ width: size, height: size, background: user.color || "#211e1a", fontSize: size * 0.44 }}>{init}</span>
  );
}

/* ===================== LOGIN POPOVER ===================== */
function LoginPopover({ onClose, dark }) {
  const { db } = useStore();
  const { go, login, lang } = useNav();
  const fr = lang === "fr";
  const s = useSign();
  const [sel, setSel] = uSau(null);          // selected user id
  const [pw, setPw] = uSau("");
  const [stay, setStay] = uSau(true);
  const [err, setErr] = uSau(false);
  const [linkSent, setLinkSent] = uSau(false);
  const [tsOk, setTsOk] = uSau(!TURNSTILE_SITEKEY);   // no site key in demo → auto-pass the stub
  const users = db.users || [];
  const selUser = users.find(u => u.id === sel);

  uEau(() => { const k = (e) => e.key === "Escape" && onClose(); window.addEventListener("keydown", k); return () => window.removeEventListener("keydown", k); }, []);

  const pick = (u) => { setSel(u.id); setPw(""); setErr(false); setLinkSent(false); };
  const enter = () => {
    if (!selUser) return;
    if (pw.trim().toLowerCase() !== String(selUser.pass).toLowerCase()) { setErr(true); return; }
    login(selUser, stay);
    onClose();
    // login lands everyone in read-only mode; each role then enters its mode from the identity menu
  };
  // production passwordless path (scaffolded; inert while AUTH_MODE === "password")
  const sendLink = async () => {
    if (!selUser || !tsOk) return;
    const res = await requestMagicLink(selUser.email, "stub");
    if (res && res.ok) setLinkSent(true);
  };

  return (
    <>
      <div className="id-scrim" onClick={onClose} />
      <div className="login-pop" onClick={e => e.stopPropagation()}>
        <div className="lp-head">
          <div>
            <div className="lp-kicker">{s.signin.toUpperCase()}</div>
            <h3 className="lp-title">{s.who}</h3>
          </div>
          <button className="iconbtn" onClick={onClose}><Icon name="close" size={16} /></button>
        </div>
        <p className="lp-sub">{s.chooseSub}</p>
        <div className="lp-list">
          {users.map(u => (
            <button key={u.id} className={"lp-acct" + (sel === u.id ? " on" : "")} onClick={() => pick(u)}>
              <Avatar user={u} size={36} />
              <span className="lp-acct-main">
                <span className="lp-acct-name">{u.name}</span>
                <span className="lp-acct-mail">{u.email}</span>
              </span>
              <RoleBadge role={u.role} />
            </button>
          ))}
        </div>
        {selUser && (AUTH_MODE === "password" ? (
          <div className="lp-auth">
            <label className="lp-lbl">{s.pwLabel} <span className="lp-hint mono">demo · “{selUser.pass}”</span></label>
            <div className="row gap-8">
              <input type="password" autoFocus value={pw} placeholder={s.pwLabel.toLowerCase()}
                onChange={e => { setPw(e.target.value); setErr(false); }}
                onKeyDown={e => e.key === "Enter" && enter()} />
              <button className="btn accent" onClick={enter}><Icon name="arrow" size={16} /> {s.enter}</button>
            </div>
            {err && <div className="lp-err">Try “{selUser.pass}”.</div>}
            <label className="lp-stay"><input type="checkbox" checked={stay} onChange={e => setStay(e.target.checked)} /> {s.stay}</label>
          </div>
        ) : (
          <div className="lp-auth">
            <label className="lp-lbl">{fr ? "Lien magique" : "Magic link"} <span className="lp-hint mono">{selUser.email}</span></label>
            {linkSent ? (
              <div className="lp-sent"><Icon name="check" size={15} /> {fr ? "Lien envoyé — vérifiez votre boîte mail." : "Link sent — check your inbox."}</div>
            ) : (
              <>
                <TurnstileBox onVerify={() => setTsOk(true)} />
                <button className="btn accent" disabled={!tsOk} style={{ opacity: tsOk ? 1 : .5, marginTop: 10 }} onClick={sendLink}><Icon name="arrow" size={16} /> {fr ? "Envoyer le lien" : "Send magic link"}</button>
              </>
            )}
            <label className="lp-stay"><input type="checkbox" checked={stay} onChange={e => setStay(e.target.checked)} /> {s.stay}</label>
          </div>
        ))}
      </div>
    </>
  );
}

/* ===================== IDENTITY CONTROL (top bar) ===================== */
function IdentityControl({ dark }) {
  const { db } = useStore();
  const nav = useNav();
  const { go, session, role, isAdmin, logout, setEdit, setReview, setPublish, setTmode, edit, reviewMode, publishMode, testerMode, route, lang } = nav;
  const ed = window.useEdit ? window.useEdit() : {};
  const s = useSign();
  const [menu, setMenu] = uSau(false);
  const [loginOpen, setLoginOpen] = uSau(false);
  const [manage, setManage] = uSau(false);
  const [acct, setAcct] = uSau(false);
  const home = db.profile.defaultRoute;
  const grants = userGrantsRanked(db, session).filter(g => g.kind !== "section");

  if (!session) {
    return (
      <div className="id-wrap">
        <button className={"id-signin" + (dark ? " on-dark" : "")} onClick={() => setLoginOpen(true)} title={s.signin}>
          <Icon name="user" size={16} /> <span className="id-signin-lbl">{s.signin}</span>
        </button>
        {loginOpen && <LoginPopover onClose={() => setLoginOpen(false)} dark={dark} />}
      </div>
    );
  }

  const editActive = (isAdmin || role === "editor") && edit;
  const inMode = editActive || reviewMode || publishMode || testerMode;   // any focused collaborator mode is active
  const close = (fn) => { setMenu(false); fn && fn(); };
  const enterAdmin = () => close(() => go("/board"));
  // jump straight into editing the CURRENT page (blog → its editor, domain → its panel)
  const editHere = () => close(() => { setEdit(true); if (route.path === "/board" || route.path === "/admin") go(home); });
  const enterEdit = () => close(() => { setEdit(true); go(home); });
  const closeEdit = () => close(() => { setEdit(false); go(home); });
  const enterReview = () => close(() => { setReview(true); go(home); });
  const closeReview = () => close(() => { setReview(false); go(home); });
  const enterPublish = () => close(() => { setPublish(true); go(home); });
  const closePublish = () => close(() => { setPublish(false); go(home); });
  const enterTester = () => close(() => { setTmode(true); go(home); });
  const closeTester = () => close(() => { setTmode(false); go(home); });
  const toBoard = () => close(() => go("/board"));
  const openSettings = () => close(() => { setEdit(true); if (ed.setPanelMode) ed.setPanelMode("global"); if (ed.setPanelOpen) ed.setPanelOpen(true); go(home); });
  const openManage = () => { setMenu(false); setManage(true); };
  const doLogout = () => close(() => { logout(); go(home); });
  const openGrant = (g) => close(() => go(g.route));

  const grantIcon = (k) => k === "video" ? "play" : k === "secret" ? "lock" : k === "section" ? "compass" : "edit";
  const fr = lang === "fr";
  // shared content shown as the SECTIONS it lives in (like the public section tabs)
  const sharedGroups = (() => {
    const groups = [];
    grants.forEach(g => {
      const key = g.sectionId || "other";
      let grp = groups.find(x => x.key === key);
      if (!grp) {
        const sec = (db.sections || []).find(x => x.id === g.sectionId);
        grp = { key, label: sec ? secLabel(sec, lang) : (g.sectionLabel || "Other"), logo: sec ? sec.logo : (g.logo || null), kind: sec ? sec.kind : g.sectionKind, items: [] };
        groups.push(grp);
      }
      grp.items.push(g);
    });
    return groups;
  })();
  const SharedBlock = () => (
    <div className="idm-group">
      <div className="idm-cap">{s.shared}</div>
      {sharedGroups.length ? (<>
        {sharedGroups.map(grp => (
          <button key={grp.key} className="idm-item grant" onClick={() => close(() => go("/shared/" + grp.key))}>
            <Icon name={window.iconForKind ? window.iconForKind(grp.kind || "blog") : "edit"} size={15} />
            <span className="idm-grant-l">{grp.label}</span>
            <span className="grow" />
            <span className="dim mono" style={{ fontSize: 11 }}>{grp.items.length}</span>
          </button>
        ))}
        <button className="idm-item seeall" onClick={() => close(() => go("/shared"))}>
          <Icon name="compass" size={15} /><span className="idm-grant-l">{s.seeAll}</span><span className="grow" /><Icon name="right" size={14} />
        </button>
      </>) : <div className="idm-note">{s.noShared}</div>}
    </div>
  );

  return (
    <div className="id-wrap">
      <button className={"id-chip" + (dark ? " on-dark" : "") + (inMode ? " in-mode" : "")} onClick={() => setMenu(v => !v)} title={session.name}>
        <Avatar user={session} size={26} />
        <span className="id-name">{inMode ? session.name : initialsOf(session)}</span>
        <Icon name="down" size={15} />
      </button>
      {menu && (
        <>
          <div className="id-scrim" onClick={() => setMenu(false)} />
          <div className="id-menu">
            <div className="idm-head">
              <Avatar user={session} size={40} />
              <div className="idm-id">
                <div className="idm-name">{session.name}</div>
                <RoleBadge role={role} />
              </div>
            </div>
            <p className="idm-blurb">{roleMeta(role).blurb}</p>

            {isAdmin && (
              <>
                {!editActive
                  ? <>
                      <div className="idm-group">
                        <button className="idm-item" onClick={editHere}><Icon name="edit" size={16} /> {s.editMode}</button>
                      </div>
                      <div className="idm-group">
                        <button className="idm-item" onClick={enterAdmin}><Icon name="chart" size={16} /> {s.adminMode}</button>
                      </div>
                    </>
                  : <div className="idm-group">
                      <button className="idm-item" onClick={openSettings}><Icon name="edit" size={16} /> {s.settings}</button>
                      <button className="idm-item" onClick={openManage}><Icon name="user" size={16} /> {s.manage}</button>
                      <button className="idm-item" onClick={toBoard}><Icon name="chart" size={16} /> {s.board}</button>
                      <button className="idm-item danger-item" onClick={closeEdit}><Icon name="close" size={16} /> {s.closeAdmin}</button>
                    </div>}
              </>
            )}
            {role === "editor" && (
              <div className="idm-group">
                {!edit
                  ? <button className="idm-item" onClick={enterEdit}><Icon name="edit" size={16} /> {s.editMode}</button>
                  : <button className="idm-item danger-item" onClick={closeEdit}><Icon name="close" size={16} /> {s.closeEdit}</button>}
                <div className="idm-note">{s.editNote}</div>
              </div>
            )}
            {role === "reviewer" && (
              <div className="idm-group">
                {!reviewMode
                  ? <button className="idm-item" onClick={enterReview}><Icon name="check" size={16} /> {s.reviewMode}</button>
                  : <button className="idm-item danger-item" onClick={closeReview}><Icon name="close" size={16} /> {s.closeReview}</button>}
                <div className="idm-note">{s.reviewNote}</div>
              </div>
            )}
            {role === "publisher" && (
              <div className="idm-group">
                {!publishMode
                  ? <button className="idm-item" onClick={enterPublish}><Icon name="check" size={16} /> {s.publishMode}</button>
                  : <button className="idm-item danger-item" onClick={closePublish}><Icon name="close" size={16} /> {s.closePublish}</button>}
                <div className="idm-note">{s.publishNote}</div>
              </div>
            )}
            {role === "tester" && (
              <div className="idm-group">
                {!testerMode
                  ? <button className="idm-item" onClick={enterTester}><Icon name="play" size={16} /> {s.testerMode}</button>
                  : <button className="idm-item danger-item" onClick={closeTester}><Icon name="close" size={16} /> {s.closeTester}</button>}
                <div className="idm-note">{s.testerNote}</div>
              </div>
            )}
            {(role === "reviewer" || role === "guest" || role === "editor" || role === "tester" || role === "publisher") && !inMode && <SharedBlock />}

            <button className="idm-item" onClick={() => { setMenu(false); setAcct(true); }}><Icon name="user" size={16} /> {s.account}</button>
            <button className="idm-item logout" onClick={doLogout}><Icon name="lock" size={16} /> {s.logout}</button>
          </div>
        </>
      )}
      {manage && window.ManageAccessModal && <window.ManageAccessModal onClose={() => setManage(false)} />}
      {acct && <AccountSettingsModal user={session} onClose={() => setAcct(false)} />}
    </div>
  );
}

/* ===================== REVIEW / GUEST FEEDBACK DOCK ===================== */
function pageSubject(db, path) {
  const segs = path.split("/").filter(Boolean);
  const secByKind = (kind) => (db.sections || []).find(s => s.kind === kind);
  if (segs.length === 2) {
    const c = (db.content || []).find(x => x.ref === segs[1]);
    if (c) { const sec = secByKind(c.type); const secL = sec ? sec.label : (c.type === "video" ? "Videos" : "Blog"); const w = wholeLang(c, "en"); const t = w.title || c.ref; return { ref: c.id, label: t, crumb: `${secL}/${t}` }; }
    const sec = (db.sections || []).find(s => s.route === "/" + segs[0]);
    if (sec) return { ref: sec.id, label: sec.label, crumb: sec.label };
  }
  if (segs[0] === "other" && segs[1]) {
    const p = (db.otherPages || []).find(x => x.route === path);
    if (p) { const w = pageWholeLang(p, "en"); const t = w.label || p.id; return { ref: p.id, label: t, crumb: `Other/${t}` }; }
  }
  const sec = (db.sections || []).find(s => s.route === path);
  if (sec) return { ref: sec.id, label: sec.label, crumb: sec.label };
  const dom = (db.domains || []).find(d => d.route === path);
  if (dom) return { ref: dom.id, label: dom.label, crumb: dom.label };
  if (path === "/about") return { ref: "about", label: "About me", crumb: "About me" };
  if (path === "/shared") return { ref: "shared", label: "Shared content", crumb: "Shared content" };
  if (path === "/" || path === "") { const h = (db.domains || [])[0]; return { ref: h ? h.id : "home", label: h ? h.label : "Home", crumb: h ? h.label : "Home" }; }
  return { ref: "page", label: "This page", crumb: "This page" };
}

function ReviewFeedbackDock() {
  const { db, update } = useStore();
  const { route, session, role, lang } = useNav();
  const [open, setOpen] = uSau(false);
  const [text, setText] = uSau("");
  const [sent, setSent] = uSau(false);
  const subj = pageSubject(db, route.path);
  const m = roleMeta(role);
  const fr = lang === "fr";

  const send = () => {
    if (!text.trim()) return;
    update(d => {
      d.contentFeedback = d.contentFeedback || [];
      d.contentFeedback.unshift({
        id: uid("cf"), target: subj.ref, targetLabel: subj.label, lang,
        by: session.name, role, date: new Date().toISOString().slice(0, 10), text: text.trim(),
      });
      d.notifications.unshift({ id: uid("n"), tile: "t3", time: new Date().toISOString().slice(0, 16).replace("T", " "), text: `${m.label} feedback from ${session.first} on “${subj.label}”.` });
    });
    setSent(true); setText("");
    setTimeout(() => { setSent(false); setOpen(false); }, 1500);
  };

  return (
    <div className={"rf-dock" + (open ? " open" : "")} style={{ "--rc": m.color }}>
      {open ? (
        <div className="rf-card">
          <div className="rf-head">
            <span className="rf-title"><Icon name="msg" size={15} /> Feedback</span>
            <RoleBadge role={role} />
            <span className="grow" />
            <button className="iconbtn sm" onClick={() => setOpen(false)}><Icon name="close" size={15} /></button>
          </div>
          <div className="rf-subj">{fr ? "Sur" : "On"} <b className="mono">{subj.crumb}</b></div>
          {sent ? (
            <div className="rf-sent"><Icon name="check" size={18} /> {fr ? "Envoyé — merci !" : "Sent — thank you!"}</div>
          ) : (
            <>
              <textarea className="rf-text" rows={3} autoFocus value={text} onChange={e => setText(e.target.value)}
                placeholder={role === "reviewer" ? (fr ? "Une correction, une question, quelque chose à régler avant publication…" : "Note a change, a question, anything to fix before publishing…") : (fr ? "Dites à Cannelle ce que vous en pensez…" : "Tell Cannelle what you think…")} />
              <button className="rf-send" disabled={!text.trim()} onClick={send}><Icon name="arrow" size={16} /> {fr ? "Envoyer le feedback" : "Send feedback"}</button>
            </>
          )}
        </div>
      ) : (
        <button className="rf-fab" onClick={() => setOpen(true)} title={fr ? "Laisser un feedback" : "Leave feedback"}>
          <Icon name="msg" size={18} /> <span>Feedback</span>
        </button>
      )}
    </div>
  );
}

Object.assign(window, { RoleBadge, Avatar, LoginPopover, IdentityControl, ReviewFeedbackDock, pageSubject, AccountSettingsModal, initialsOf });