"use client";

import { useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { Sun, Moon, ChevronDown, LogOut } from "lucide-react";
import { useAuth } from "@abe-kap/appshell-sdk/react";
import { GlobalSearch } from "./global-search";
import { NotificationBell } from "./notification-bell";
import { AnchoredPopover } from "./anchored-popover";
import { user } from "./account-data";

function initialsOf(name: string): string {
  return name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]).join("").toUpperCase() || "?";
}

export function Topbar({ theme, onToggle, title, subtitle, onNavigate }: { theme: "dark" | "light"; onToggle: () => void; title: string; subtitle: string; onNavigate: (surface: "messenger" | "inbox", threadId: string) => void }) {
  // When signed in through the Shell, show the real identity from the App Context
  // Envelope; otherwise fall back to the static demo user.
  const router = useRouter();
  const { user: me, logout, context } = useAuth();
  const [menuOpen, setMenuOpen] = useState(false);
  const userBtnRef = useRef<HTMLButtonElement>(null);
  const roleLabel = context?.scope?.role ? context.scope.role.charAt(0).toUpperCase() + context.scope.role.slice(1) : "";
  const name = me?.displayName || user.name;
  const initials = me ? initialsOf(me.displayName) : user.initials;
  const secondary = me?.email || roleLabel || user.role;

  async function signOut() {
    setMenuOpen(false);
    try { await logout(); } catch { /* ignore */ }
    router.replace("/portal/login");
  }

  return (
    <header className="dash-topbar">
      <div className="dash-title">
        <h1>{title}</h1>
        <p>{subtitle}</p>
      </div>
      <div className="top-actions">
        <GlobalSearch onNavigate={onNavigate} />
        <button className="ic-btn" aria-label="Toggle theme" onClick={onToggle}>
          {theme === "dark" ? <Moon size={18} /> : <Sun size={18} />}
        </button>
        <NotificationBell />
        <div className="top-user-wrap" style={{ position: "relative" }}>
          <button ref={userBtnRef} className="top-user" onClick={() => setMenuOpen((o) => !o)} aria-haspopup="menu" aria-expanded={menuOpen}>
            <span className="av" style={{ background: user.avatarGradient, display: "grid", placeItems: "center", color: "#fff", fontWeight: 700, fontSize: 12 }}>{initials}</span>
            <div style={{ textAlign: "left", minWidth: 0 }}>
              <div className="nm">{name}</div>
              <div className="rl" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: 150 }}>{secondary}</div>
            </div>
            <ChevronDown size={16} />
          </button>
          {/* Portalled for the same reason as the bell: the sticky topbar traps any in-place
              dropdown below module chrome (the gallery SDK stacks up to 1400). */}
          <AnchoredPopover anchorRef={userBtnRef} open={menuOpen} onClose={() => setMenuOpen(false)} width={190}>
            <button className="danger" onClick={signOut}><LogOut size={15} /> Sign out</button>
          </AnchoredPopover>
        </div>
      </div>
    </header>
  );
}
