// Shared top-bar / app chrome used on every authenticated screen
// (workspace, settings, chat, plan). Left side: brand. Right side: nav
// links + API-key status pill + user initials menu.

const { useState: useStateTB } = React;

function AppTopBar({ user, active, onNewCase, onOpenWorkspace, onOpenSettings, onSignOut, byoKeyStatus, creditStatus }) {
  const [menuOpen, setMenuOpen] = useStateTB(false);
  const initials = window.Auth?.initials(user) || "??";
  const creditLabel = creditStatus
    ? `${Math.floor(creditStatus.remaining)} credits left`
    : null;
  const creditTitle = creditStatus
    ? `${creditStatus.remaining} of ${creditStatus.allowance} weekly credits left for platform AI calls. BYO provider-key calls do not use these credits. Resets ${new Date(creditStatus.replenishesAt).toLocaleDateString()}.`
    : "";

  return (
    <header className="app-topbar">
      <div className="app-topbar-l">
        <button
          className="app-topbar-brand"
          onClick={onOpenWorkspace || (() => {})}
          aria-label="Go to workspace"
        >
          <img src="assets/cabl-logo.png" alt="CABL" className="app-topbar-logo"/>
          <div className="app-topbar-brand-text">
            <div className="app-topbar-product">CABL Procurement Lab</div>
            <div className="app-topbar-strap">Procurement Negotiation Intelligence</div>
          </div>
        </button>
      </div>

      <nav className="app-topbar-r no-print">
        {creditStatus && (
          <div
            className="key-pill key-pill-demo"
            title={`${creditTitle} Click to view plans.`}
            onClick={() => window.dispatchEvent(new CustomEvent("cabl:open-pricing"))}
            role="button"
            style={{ cursor: "pointer" }}
          >
            <Icon name="coins" size={14}/>
            <span className="key-pill-label">{creditLabel}</span>
          </div>
        )}
        {byoKeyStatus && (
          <div
            className={`key-pill key-pill-${byoKeyStatus.kind}`}
            title={byoKeyStatus.tooltip || byoKeyStatus.label}
            onClick={onOpenSettings}
            role="button"
          >
            <Icon name={byoKeyStatus.kind === "ok" ? "key-round" : "lock"} size={14}/>
            <span className="key-pill-label">{byoKeyStatus.label}</span>
          </div>
        )}
        {onNewCase && (
          <button
            className={`app-topbar-link ${active === "chat" ? "is-active" : ""}`}
            onClick={onNewCase}
          >
            <IconText name="plus">New case</IconText>
          </button>
        )}
        {onOpenSettings && (
          <button
            className={`app-topbar-link ${active === "settings" ? "is-active" : ""}`}
            onClick={onOpenSettings}
          >
            <IconText name="settings">Settings</IconText>
          </button>
        )}

        <div className="app-topbar-user" onClick={() => setMenuOpen(v => !v)}>
          <div className="app-topbar-avatar">{initials}</div>
          {menuOpen && (
            <div className="app-topbar-menu" onClick={e => e.stopPropagation()}>
              <div className="app-topbar-menu-head">
                <div className="app-topbar-menu-name">{user?.fullName || "—"}</div>
                <div className="app-topbar-menu-meta">{user?.email}</div>
                <div className="app-topbar-menu-meta">{user?.company}</div>
              </div>
              <button className="app-topbar-menu-item" onClick={() => { setMenuOpen(false); onOpenSettings && onOpenSettings(); }}>
                <IconText name="settings">Settings</IconText>
              </button>
              <button className="app-topbar-menu-item app-topbar-menu-item-bad" onClick={() => { setMenuOpen(false); onSignOut(); }}>
                <IconText name="log-out">Sign out</IconText>
              </button>
            </div>
          )}
        </div>
      </nav>
    </header>
  );
}

window.AppTopBar = AppTopBar;