pn-new-crm/src/components/layout/topbar.tsx

'use client';

import { ChevronLeft, Plus } from 'lucide-react';
import { useRouter, usePathname } from 'next/navigation';

import { useUIStore } from '@/stores/ui-store';
import { useMobileChrome } from '@/components/layout/mobile/mobile-layout-provider';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Separator } from '@/components/ui/separator';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Breadcrumbs } from '@/components/layout/breadcrumbs';
import { CommandSearch } from '@/components/search/command-search';
import { Inbox } from '@/components/layout/inbox';
import { UserMenu } from '@/components/layout/user-menu';
import type { Port } from '@/lib/db/schema/ports';

interface TopbarProps {
  ports: Port[];
  user?: { name: string; email: string };
}

export function Topbar({ ports, user }: TopbarProps) {
  const router = useRouter();
  const pathname = usePathname();
  const currentPortSlug = useUIStore((s) => s.currentPortSlug);
  const base = currentPortSlug ? `/${currentPortSlug}` : '';
  // Reuse the existing per-page chrome state (originally built for the
  // mobile topbar) so any detail page that already declares
  // `showBackButton: true` automatically gets the back affordance on
  // desktop too. Saves duplicating the wiring across N detail headers.
  const { showBackButton: mobileShowBack } = useMobileChrome();
  // Auto-show on entity-detail pages: `/[portSlug]/[section]/[id]` and
  // deeper. Top-level lists like `/[portSlug]/clients` stay clean.
  // The mobile-chrome flag still wins when a page explicitly opts in.
  // Pages that already render their own "back to X" link inline
  // (residential interest detail, expense scan flow, etc.) opt OUT
  // by setting the chrome flag to false on mount — the flag override
  // path here lets them suppress this auto-show.
  const segments = pathname.split('/').filter(Boolean);
  const isDeepPage = segments.length > 2;
  const showBackButton = mobileShowBack || isDeepPage;

  return (
    // Three-column grid: breadcrumbs left, search center, actions right.
    // The brand logo lives in the sidebar header (per design feedback) so the
    // topbar center is dedicated to the global search bar.
    <header className="grid h-14 grid-cols-[minmax(0,1fr)_minmax(360px,640px)_minmax(0,1fr)] items-center border-b border-border bg-background gap-3 px-4 shrink-0">
      {/* LEFT: optional back button + breadcrumbs / page title */}
      <div className="min-w-0 flex items-center gap-1.5">
        {showBackButton && (
          <button
            type="button"
            onClick={() => router.back()}
            aria-label="Go back"
            title="Go back"
            className={cn(
              'inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md',
              'text-muted-foreground hover:text-foreground hover:bg-accent transition-colors',
            )}
          >
            <ChevronLeft className="h-4 w-4" />
          </button>
        )}
        <Breadcrumbs />
      </div>

      {/* CENTER: global search - capped width and horizontally centered
          inside its grid slot so it sits visually in the middle of the
          topbar regardless of breadcrumb / action-row width. */}
      <div className="flex items-center justify-center min-w-0">
        <div className="w-full max-w-md mx-auto min-w-0">
          <CommandSearch />
        </div>
      </div>

      {/* RIGHT: action row */}
      <div className="flex items-center gap-2 shrink-0 justify-end">
        {/* + New dropdown */}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button
              size="sm"
              className="bg-gradient-brand hover:opacity-90 text-white gap-1.5 shadow-sm transition-all duration-base ease-smooth hover:scale-[1.02]"
            >
              <Plus className="w-4 h-4" />
              <span className="hidden sm:inline">New</span>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-44">
            <DropdownMenuLabel className="text-xs text-muted-foreground">Create</DropdownMenuLabel>
            <DropdownMenuSeparator />
            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
            <DropdownMenuItem onClick={() => router.push(`${base}/clients/new` as any)}>
              New Client
            </DropdownMenuItem>
            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
            <DropdownMenuItem onClick={() => router.push(`${base}/interests/new` as any)}>
              New Interest
            </DropdownMenuItem>
            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
            <DropdownMenuItem onClick={() => router.push(`${base}/expenses/new` as any)}>
              New Expense
            </DropdownMenuItem>
            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
            <DropdownMenuItem onClick={() => router.push(`${base}/reminders/new` as any)}>
              New Reminder
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>

        {/* Unified inbox - combines system alerts (operational) and personal
            notifications (user-targeted) into a single bell with two tabs.
            Replaces the previous AlertBell + NotificationBell pair. */}
        <Inbox />

        <Separator orientation="vertical" className="h-6" />

        {/* User menu - single source of truth for the profile dropdown.
            Same component is mounted in the sidebar footer so the menu
            items (incl. port switcher) stay consistent across triggers. */}
        <UserMenu
          align="end"
          user={user}
          ports={ports}
          trigger={
            // Button shrunk to match the Avatar's visible footprint so
            // the hover halo lands as a tight circle behind the avatar
            // (was h-11 w-11 default — the rounded-full halo extended
            // well past the visible avatar and read as a square glow).
            <Button variant="ghost" className="rounded-full h-9 w-9 p-0">
              <Avatar className="w-7 h-7">
                <AvatarImage src={undefined} />
                <AvatarFallback className="bg-brand text-white text-xs font-semibold">
                  {(user?.name ?? 'U').slice(0, 1).toUpperCase()}
                </AvatarFallback>
              </Avatar>
            </Button>
          }
        />
      </div>
    </header>
  );
}