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

'use client';

import { Plus, Moon, Sun, LogOut, User, Settings, Bell } from 'lucide-react';
import { useRouter } from 'next/navigation';

import { useUIStore } from '@/stores/ui-store';
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 { PortSwitcher } from '@/components/layout/port-switcher';
import { Breadcrumbs } from '@/components/layout/breadcrumbs';
import { CommandSearch } from '@/components/search/command-search';
import { NotificationBell } from '@/components/notifications/notification-bell';
import { AlertBell } from '@/components/alerts/alert-bell';
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 currentPortSlug = useUIStore((s) => s.currentPortSlug);
  const darkMode = useUIStore((s) => s.darkMode);
  const toggleDarkMode = useUIStore((s) => s.toggleDarkMode);

  const base = currentPortSlug ? `/${currentPortSlug}` : '';

  function handleToggleDarkMode() {
    toggleDarkMode();
    document.documentElement.classList.toggle('dark');
  }

  return (
    <header className="h-14 border-b border-border bg-background flex items-center gap-3 px-4 shrink-0">
      {/* Breadcrumbs / page title */}
      <div className="flex-1 min-w-0">
        <Breadcrumbs />
      </div>

      {/* Actions row */}
      <div className="flex items-center gap-2 shrink-0">
        {/* Global search — inline with dropdown results */}
        <CommandSearch />

        {/* Port switcher — hidden for single port */}
        <PortSwitcher ports={ports} />

        {/* + 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>

        {/* Phase B operational alerts — distinct from user notifications */}
        <AlertBell />

        {/* Notification bell — real-time via socket */}
        <NotificationBell />

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

        {/* User menu */}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="icon" className="rounded-full">
              <Avatar className="w-7 h-7 shadow-sm ring-2 ring-background">
                <AvatarImage src={undefined} />
                <AvatarFallback className="bg-brand text-white text-xs font-semibold">
                  {(user?.name ?? 'U').slice(0, 1).toUpperCase()}
                </AvatarFallback>
              </Avatar>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-56">
            <DropdownMenuLabel>
              <div className="font-medium">{user?.name ?? 'My Account'}</div>
              {user?.email && (
                <div className="text-xs text-muted-foreground font-normal">{user.email}</div>
              )}
            </DropdownMenuLabel>
            <DropdownMenuSeparator />
            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
            <DropdownMenuItem onClick={() => router.push(`${base}/settings/profile` as any)}>
              <User className="w-4 h-4 mr-2" />
              Profile
            </DropdownMenuItem>
            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
            <DropdownMenuItem onClick={() => router.push(`${base}/settings` as any)}>
              <Settings className="w-4 h-4 mr-2" />
              Settings
            </DropdownMenuItem>
            <DropdownMenuItem
              // eslint-disable-next-line @typescript-eslint/no-explicit-any
              onClick={() => router.push(`${base}/notifications/preferences` as any)}
            >
              <Bell className="w-4 h-4 mr-2" />
              Notification preferences
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem onClick={handleToggleDarkMode}>
              {darkMode ? (
                <>
                  <Sun className="w-4 h-4 mr-2" />
                  Light Mode
                </>
              ) : (
                <>
                  <Moon className="w-4 h-4 mr-2" />
                  Dark Mode
                </>
              )}
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem
              className="text-destructive focus:text-destructive"
              onClick={() => router.push('/api/auth/sign-out')}
            >
              <LogOut className="w-4 h-4 mr-2" />
              Sign Out
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </header>
  );
}