/* Marque Talent Desk shell — TOP-NAV shell, one navigation owner (the bar owns
   all five destinations; there is no sidebar and no second row of navigation).
   Five destinations is under the six the sidebar shell wants, and the record
   work happens *inside* a destination rather than across many of them, so the
   count decides it. Inferred, not requested — noted in the README.
   Density: 64px bar, 32px page gutters, editorial display type at the top of a
   page against 32px ledger rows where the work happens.
   Separation: hairlines and full-bleed --sidebar washes on the --background
   page plane; a card is used only where a thing is genuinely liftable off the
   page (the deal sheet, an inbound brief).
   Active state: foreground token + a filled --accent pill, derived from the
   route; counts sit after the label inside the pill.
   App-scope duties: search → the bar's palette field · session and account →
   the bar's account menu · utility → the bar (notifications, theme) · page
   context → the page header's breadcrumb and title.
   Primary content per destination:
     Roster       — the book: full-width creator bands, hairline-divided
     Briefs       — the triage deck over the pipeline ledger
     Deliverables — the three-week ladder over grouped work rows
     Performance  — the promise wall, chart-led, with the posts beneath it
     Money        — two facing ledgers with the commission as the spine
   Money is the destination that would most plausibly have been a table and is
   not: it answers two questions at once — what is coming in and what has to go
   out — and the only fact that matters is which side is blocking the other.
   Facing ledgers put the blocked payout beside the invoice that blocks it; two
   tables would have hidden that in a join. */
(() => {
  const { Button, Input, Kbd, MenuItem, MenuGroupLabel, Toast, ToastRegion, Avatar } = window.OriginDesignSystem_7c998b;

  /* Declared once for the product: 1280 full bar · 1024 search collapses to an
     icon · below 900 the destinations collapse into one menu. Nothing is lost
     on the way down — the menu carries the same labels and the same counts. */
  function useShellMode() {
    const read = () => (window.innerWidth >= 1280 ? "full" : window.innerWidth >= 900 ? "compact" : "menu");
    const [mode, setMode] = React.useState(read);
    React.useEffect(() => {
      const onResize = () => setMode(read());
      window.addEventListener("resize", onResize);
      return () => window.removeEventListener("resize", onResize);
    }, []);
    return mode;
  }

  const badgeFor = (route, data) => {
    if (!route.badge) return null;
    const spec = NAV_BADGES[route.badge];
    return { count: spec.count(data), label: spec.label };
  };

  /* A deal has no destination of its own; it belongs to Briefs, which is where
     it came from and where the route table puts it. */
  const isActive = (path, route) =>
    path === route.path || (route.path !== "/" && path.indexOf(route.path + "/") === 0) || (route.path === "/briefs" && path.indexOf("/deals/") === 0) || (route.path === "/" && path.indexOf("/talent/") === 0);

  function Destinations({ path, data, onNavigate }) {
    return (
      <nav className="mq-dests" aria-label="Talent desk">
        {MARQUE_DESTINATIONS.map((route) => {
          const badge = badgeFor(route, data);
          return (
            <button type="button" key={route.path} className="mq-dest" aria-current={isActive(path, route) ? "page" : undefined} onClick={() => onNavigate(route.path)}>
              {route.label}
              {badge && badge.count > 0 ? <span className="mq-dest__count" aria-label={badge.count + " " + badge.label}>{badge.count}</span> : null}
            </button>
          );
        })}
      </nav>
    );
  }

  function DestinationsMenu({ path, data, onNavigate }) {
    const current = MARQUE_DESTINATIONS.find((r) => isActive(path, r)) || MARQUE_DESTINATIONS[0];
    const trigger = (
      <Button variant="ghost" size="sm" aria-label="Destinations">
        <Icon name="menu" />{current.label}<Icon name="chevron-down" />
      </Button>
    );
    return (
      <Floating trigger={trigger} align="start" width="15rem" label="Destinations">
        {(close) => MARQUE_DESTINATIONS.map((route) => {
          const badge = badgeFor(route, data);
          return (
            <MenuItem key={route.path} onClick={() => { onNavigate(route.path); close(); }}>
              {route.label}{badge && badge.count > 0 ? <span className="mq-dest__count"> {badge.count}</span> : null}
            </MenuItem>
          );
        })}
      </Floating>
    );
  }

  function AccountMenu({ onNavigate, user }) {
    const trigger = (
      <button type="button" className="mq-account" aria-label={"Account — " + user.name}>
        <Avatar size={28} src={user.avatar || undefined} alt="" fallback={user.name.trim().split(/\s+/).map((w) => w[0]).slice(0, 2).join("").toUpperCase()} />
        <span className="mq-account__text">
          <span className="mq-account__name">{user.name}</span>
          <span className="mq-account__role">{user.role}</span>
        </span>
      </button>
    );
    return (
      <Floating trigger={trigger} align="end" width="16rem" label="Account">
        {(close) => (
          <>
            <MenuGroupLabel>{user.name} · {user.role}</MenuGroupLabel>
            {MARQUE_ACCOUNT_MENU.map((route) => (
              <MenuItem key={route.path} onClick={() => { onNavigate(route.path); close(); }}>{route.label}</MenuItem>
            ))}
          </>
        )}
      </Floating>
    );
  }

  function NotificationsButton({ items, unread, onRead, onNavigate }) {
    const trigger = (
      <span className="mq-utility">
        <Button variant="ghost" size="icon-sm" aria-label={unread ? unread + " unread notifications" : "Notifications"}><Icon name="bell" /></Button>
        {unread ? <span className="mq-badge-dot" aria-hidden="true">{unread}</span> : null}
      </span>
    );
    return (
      <Floating trigger={trigger} align="end" width="24rem" role="dialog" panelClass="o-popover mq-notify" label="Notifications">
        {(close) => (
          <>
            <div className="mq-notify__head">
              <span className="o-popover__title">Notifications</span>
              <Button variant="ghost" size="xs" onClick={onRead}>Mark all read</Button>
            </div>
            <div className="mq-notify__list">
              {items.map((n) => (
                <button type="button" key={n.id} className="mq-notify__item" onClick={() => { onNavigate(n.route); close(); }}>
                  <span className="mq-notify__title">{n.title}</span>
                  <span className="mq-notify__body">{n.body}</span>
                  <span className="mq-notify__time" title={formatAbsolute(n.at)}>{formatWhen(n.at, MARQUE_NOW)}</span>
                </button>
              ))}
            </div>
            {/* The panel shows the lines; the inbox is where they are worked
                through, so the destination behind the badge is one click away
                rather than only in the palette. */}
            <div className="mq-notify__foot">
              <button type="button" className="mq-link" onClick={() => { onNavigate("/inbox"); close(); }}>Open the inbox</button>
            </div>
          </>
        )}
      </Floating>
    );
  }

  function MarqueShell({ path, onNavigate, dark, onToggleTheme, data, user, notifications, unread, onRead, palette, toasts, onDismissToast, controls, children }) {
    registerBreadcrumbNavigate(onNavigate);
    const mode = useShellMode();
    return (
      <div className="mq-shell" data-mode={mode} data-controls={controls || "compact"}>
        <header className="mq-bar">
          {mode === "menu" ? <DestinationsMenu path={path} data={data} onNavigate={onNavigate} /> : null}
          <button type="button" className="mq-brand" onClick={() => onNavigate("/")} aria-label={MARQUE_AGENCY.name + " — " + MARQUE_AGENCY.desk}>
            <img className="mq-brand__mark" src="../../assets/templates/logos/27-logo-demo.svg" alt="" width="40" height="40" />
            <span className="mq-brand__name">{MARQUE_AGENCY.name}</span>
          </button>
          {mode === "menu" ? null : <Destinations path={path} data={data} onNavigate={onNavigate} />}
          <div className="mq-bar__end">
            {mode === "full" ? (
              <div className="mq-search" onClick={() => palette.setOpen(true)}>
                <Input readOnly size="sm" aria-label="Search the talent desk" placeholder="Search briefs, deals and brands…" startAddon={<Icon name="search" />} endAddon={<Kbd>⌘K</Kbd>} onFocus={() => palette.setOpen(true)} />
              </div>
            ) : (
              <FloatingTip label="Search briefs, deals and brands" side="bottom">
                <Button variant="ghost" size="icon-sm" aria-label="Search the talent desk" onClick={() => palette.setOpen(true)}><Icon name="search" /></Button>
              </FloatingTip>
            )}
            <NotificationsButton items={notifications} unread={unread} onRead={onRead} onNavigate={onNavigate} />
            <FloatingTip label={dark ? "Switch to light" : "Switch to dark"} side="bottom">
              <Button variant="ghost" size="icon-sm" aria-label={dark ? "Switch to light theme" : "Switch to dark theme"} onClick={onToggleTheme}><Icon name={dark ? "sun" : "moon"} /></Button>
            </FloatingTip>
            <AccountMenu onNavigate={onNavigate} user={user} />
          </div>
        </header>

        <main className="mq-main">{children}</main>

        <ToastRegion>
          {toasts.map((t) => (
            <Toast key={t.id} variant={t.variant} title={t.title} description={t.description} onClose={() => onDismissToast(t.id)}
              action={t.onUndo ? <Button variant="outline" size="xs" onClick={() => { t.onUndo(); onDismissToast(t.id); }}>Undo</Button> : null} />
          ))}
        </ToastRegion>
      </div>
    );
  }

  Object.assign(window, { MarqueShell, useShellMode });
})();
