/* Topbar — the single sticky chrome bar above every page. Holds:
   - back-arrow(s) for parent breadcrumbs (drops the last crumb, since
     that one is redundant with the page title)
   - the page title (rendered into a portal slot by <PageHeader />)
   - the page actions (also portalled)
   - a help icon
*/
function Topbar({ breadcrumb, pageIcon }) {
  const crumbs = breadcrumb || [];
  const parents = crumbs.slice(0, -1); /* everything except the current page */

  return (
    <header style={{
      height: 56,
      display: "flex", alignItems: "center",
      borderBottom: "1px solid var(--line)",
      padding: "0 16px 0 24px",
      background: "var(--bg)",
      gap: 12,
      flexShrink: 0,
      minWidth: 0,
    }}>
      {parents.map((c, i) => (
        <React.Fragment key={i}>
          <button
            onClick={c.onClick}
            style={{
              display: "inline-flex", alignItems: "center", gap: 4,
              padding: "4px 8px 4px 4px", borderRadius: 6,
              fontSize: 12.5, fontWeight: 500,
              color: "var(--ink-3)",
              transition: "background 120ms, color 120ms",
              flexShrink: 0,
            }}
            onMouseEnter={(e) => { e.currentTarget.style.background = "var(--inset)"; e.currentTarget.style.color = "var(--ink)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--ink-3)"; }}
          >
            <Icon name="chevron-left" size={14} />
            {c.label}
          </button>
          <span style={{ width: 1, height: 18, background: "var(--line)", flexShrink: 0 }} />
        </React.Fragment>
      ))}

      {/* Page icon — sits left of the title */}
      {pageIcon && (
        <div style={{
          width: 28, height: 28, borderRadius: 7,
          background: "var(--inset)", color: "var(--ink-2)",
          display: "flex", alignItems: "center", justifyContent: "center",
          flexShrink: 0,
        }}>
          <Icon name={pageIcon} size={14} />
        </div>
      )}

      {/* Title slot — PageHeader portals title + subtitle into this. */}
      <div
        id="__page-title-slot"
        style={{ flex: "1 1 0", minWidth: 0, display: "flex", alignItems: "center", gap: 14, minHeight: 32, overflow: "hidden" }}
      />

      {/* Inline AI ask bar — sits between title and actions. Allowed to
         shrink at narrow widths so the page-actions cluster stays reachable. */}
      <div className="topbar-ai" style={{ flex: "0 1 auto", minWidth: 0 }}>
        {window.AIInputBar ? <window.AIInputBar /> : null}
      </div>

      {/* Actions slot. Allowed to shrink (icon-only buttons retain meaning
         via title attrs) so they don't push out of the viewport. */}
      <div
        id="__page-actions-slot"
        style={{ display: "flex", alignItems: "center", gap: 6, flexShrink: 1, flexWrap: "nowrap", minWidth: 0, overflow: "hidden" }}
      />

      <style>{`
        /* Hide page subtitle (next to the title) below 900px so badges
           and the AI bar keep room. */
        @media (max-width: 1200px) {
          /* Halve the AI bar's resting width when the topbar is tight. */
          .topbar-ai .ai-input-bar { width: 169px !important; }
          .topbar-ai .ai-input-bar:focus-within { width: 546px !important; }
          /* Drop the ⌘J hint at this width — the bar is too narrow to fit it. */
          .topbar-ai kbd { display: none; }
          .topbar-ai .ai-input-bar:focus-within kbd { display: none; }
        }
        @media (max-width: 900px) {
          #__page-title-slot > div:not(h1) { display: none; }
          #__page-title-slot > span[style*="background: var(--line)"] { display: none; }
          /* Drop the ⌘J hint to give the input characters more room. */
          .topbar-ai kbd { display: none; }
        }
        @media (max-width: 760px) {
          /* Collapse the AI bar to a compact sparkle pill — the user can
             still click it to expand (focus widens it back to 420px). */
          .topbar-ai .ai-input-bar { width: 36px !important; }
          .topbar-ai .ai-input-bar:focus-within { width: min(320px, 60vw) !important; }
          .topbar-ai input { font-size: 0; }
          .topbar-ai .ai-input-bar:focus-within input { font-size: 12.5px; }
        }

        /* Detail pages (contact-detail / account-detail) carry a busy
           header — collapse the AI bar to a round 36px sparkle button so
           the page actions stay reachable. Clicking it expands the bar in
           place (focus-within widens it). */
        .app[data-page="contact-detail"] .topbar-ai .ai-input-bar,
        .app[data-page="account-detail"] .topbar-ai .ai-input-bar {
          width: 36px !important;
        }
        .app[data-page="contact-detail"] .topbar-ai .ai-input-bar:focus-within,
        .app[data-page="account-detail"] .topbar-ai .ai-input-bar:focus-within {
          width: 546px !important;
        }
        .app[data-page="contact-detail"] .topbar-ai .ai-input-bar input,
        .app[data-page="account-detail"] .topbar-ai .ai-input-bar input { font-size: 0; }
        .app[data-page="contact-detail"] .topbar-ai .ai-input-bar:focus-within input,
        .app[data-page="account-detail"] .topbar-ai .ai-input-bar:focus-within input { font-size: 12.5px; }
        .app[data-page="contact-detail"] .topbar-ai kbd,
        .app[data-page="account-detail"] .topbar-ai kbd { display: none; }
      `}</style>
    </header>
  );
}

window.Topbar = Topbar;
