import { Button } from "@/components/ui/button";
import { UserMenu } from "@/components/app/user-menu";
import { GlobalSearch } from "@/components/app/global-search";
import { NotificationsBell } from "@/components/app/notifications-bell";
import { ThemeToggle } from "@/components/app/theme-toggle";

export function AppTopbar({ title, subtitle }: { title: string; subtitle?: string }) {
  // Public-site URL resolves env-aware:
  // dev → http://localhost:3000/   prod → https://southarmzglobal.com/
  // Opens in a new tab so Glenn doesn't lose his /app context.
  const publicSiteUrl =
    (process.env.NEXT_PUBLIC_SITE_URL?.replace(/\/$/, "") || "") + "/";
  return (
    <header className="sticky top-0 z-30 h-16 border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60 flex items-center justify-between px-6 md:px-8 shrink-0">
      <div className="min-w-0">
        <h1 className="text-lg md:text-xl font-semibold leading-tight truncate tracking-tight">{title}</h1>
        {subtitle && <p className="text-xs text-muted-foreground truncate mt-0.5">{subtitle}</p>}
      </div>
      <div className="flex items-center gap-1.5 shrink-0">
        <GlobalSearch />
        <NotificationsBell />
        <ThemeToggle />
        <Button asChild variant="ghost" size="sm" className="hidden lg:inline-flex">
          <a href={publicSiteUrl || "/"} target="_blank" rel="noopener noreferrer">
            View public site ↗
          </a>
        </Button>
        <UserMenu />
      </div>
    </header>
  );
}