"use client";

import { Sun, Moon, ChevronDown } from "lucide-react";
import { Icon } from "./ui";
import { user } from "./account-data";
import { useAuth } from "@abe-kap/appshell-sdk/react";

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 }: { theme: "dark" | "light"; onToggle: () => void; title: string; subtitle: string }) {
  // When signed in through the Shell, show the real identity from the App Context
  // Envelope; otherwise fall back to the static demo user.
  const { user: me } = useAuth();
  const name = me?.displayName || user.name;
  const initials = me ? initialsOf(me.displayName) : user.initials;
  return (
    <header className="dash-topbar">
      <div className="dash-title">
        <h1>{title}</h1>
        <p>{subtitle}</p>
      </div>
      <div className="top-actions">
        <button className="ic-btn" aria-label="Search"><Icon name="search" size={18} /></button>
        <button className="ic-btn" aria-label="Toggle theme" onClick={onToggle}>
          {theme === "dark" ? <Moon size={18} /> : <Sun size={18} />}
        </button>
        <button className="ic-btn" aria-label="Notifications" style={{ position: "relative" }}>
          <Icon name="bell" size={18} />
          <span style={{ position: "absolute", top: 9, right: 10, width: 7, height: 7, borderRadius: 99, background: "var(--orange)", border: "2px solid var(--panel)" }} />
        </button>
        <button className="top-user">
          <span className="av" style={{ background: user.avatarGradient, display: "grid", placeItems: "center", color: "#fff", fontWeight: 700, fontSize: 12 }}>{initials}</span>
          <div style={{ textAlign: "left" }}>
            <div className="nm">{name}</div>
            <div className="rl">{user.role}</div>
          </div>
          <ChevronDown size={16} />
        </button>
      </div>
    </header>
  );
}