'use client';

import { Plus } from 'lucide-react';
import { useRouter } from 'next/navigation';
import type { Route } from 'next';
import type { ReactNode } from 'react';

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 { BackButton } from '@/components/layout/back-button';
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 };
  /** Optional leading slot rendered before the breadcrumbs on tablet
   *  viewports - used by AppShell to mount a sidebar trigger button
   *  (logo) when the sidebar is hidden behind a slide-over Sheet. */
  leadingSlot?: ReactNode;
}

export function Topbar({ ports, user, leadingSlot }: TopbarProps) {
  const router = useRouter();
  const currentPortSlug = useUIStore((s) => s.currentPortSlug);
  const base = currentPortSlug ? `/${currentPortSlug}` : '';

  return (
    // Three-column grid: smart back button left, search center, actions right.
    // The brand logo lives in the sidebar header so the topbar center is
    // dedicated to the global search bar.
    //
    // Grid is `auto auto 1fr` so the left + right columns size to their
    // actual content (back-button label on the left; New / Inbox / Avatar
    // on the right) and the search column soaks up the rest.
    //
    // Wayfinding model: the legacy breadcrumb chain was removed in favor
    // of a single contextual back button ("Back to Clients", "Back to
    // Sarah Doe"). Detail pages register their parent via
    // `useBreadcrumbHint` so the label is entity-aware; everything else
    // is URL-derived. See src/hooks/use-smart-back.ts.
    <header className="relative grid h-14 grid-cols-[auto_1fr_auto] items-center border-b border-border bg-background gap-3 px-4 shrink-0">
      {/* LEFT: optional sidebar trigger (tablet) + smart back button.
          Hard-capped width so the column never extends into the
          absolutely-positioned search bar's footprint. The cap is
          conservative on smaller widths to leave the search bar
          breathing room, more generous at xl. */}
      <div className="min-w-0 flex items-center gap-1.5 max-w-[180px] lg:max-w-[220px] xl:max-w-[260px]">
        {leadingSlot}
        <BackButton variant="desktop" />
      </div>

      {/* CENTER (spacer): the search bar is absolutely positioned below
          so it anchors to true viewport center regardless of left/right
          column widths. This empty grid track keeps `auto 1fr auto` so
          the right column behaves the same as before. */}
      <div aria-hidden />

      {/* CENTER: global search, anchored to true viewport center.
          The topbar element starts AFTER the 256px sidebar at lg+, so
          `left: 50%` of the topbar lands sidebar/2 (=128px) right of the
          viewport center. We subtract that offset at lg+ so the search
          bar sits under the browser address bar; below lg the sidebar
          is hidden behind a Sheet and the topbar spans the full
          viewport, so plain `left: 50%` is already correct.

          Caps scale by viewport tier so the bar doesn't crowd the side
          columns. The previous max-w-2xl (672px) at xl ate so much of
          the topbar that the back-button column on the left got
          visually clipped by the search bar; tightened to max-w-xl so
          a "Back to Administration"-class label can render in full:
            base: max-w-md  (28rem)
            lg:   max-w-lg  (32rem)
            xl:   max-w-xl  (36rem)
          The wrapper is pointer-events-none so it doesn't capture
          clicks meant for the left/right columns underneath; only the
          input itself receives pointer events. */}
      <div className="pointer-events-none absolute inset-y-0 left-1/2 lg:left-[calc(50%-var(--width-sidebar)/2)] flex w-full max-w-md -translate-x-1/2 items-center px-4 lg:max-w-lg xl:max-w-xl">
        <div className="pointer-events-auto w-full 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" aria-hidden />
              <span className="hidden sm:inline">New</span>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-48">
            <DropdownMenuLabel className="text-xs text-muted-foreground">Create</DropdownMenuLabel>
            <DropdownMenuSeparator />
            {/* Each item routes to the list page with ?create=1 so the
                relevant create sheet pops automatically (see
                useCreateFromUrl). The legacy `/clients/new`-style routes
                this menu used to push to landed on the dynamic detail
                page with id="new" and silently 404'd. */}
            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
            <DropdownMenuItem onClick={() => router.push(`${base}/clients?create=1` as any)}>
              New Client
            </DropdownMenuItem>
            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
            <DropdownMenuItem onClick={() => router.push(`${base}/yachts?create=1` as any)}>
              New Yacht
            </DropdownMenuItem>
            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
            <DropdownMenuItem onClick={() => router.push(`${base}/companies?create=1` as any)}>
              New Company
            </DropdownMenuItem>
            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
            <DropdownMenuItem onClick={() => router.push(`${base}/interests?create=1` as any)}>
              New Interest
            </DropdownMenuItem>
            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
            <DropdownMenuItem onClick={() => router.push(`${base}/expenses?create=1` as any)}>
              New Expense
            </DropdownMenuItem>
            {/* /reminders 301s to /inbox#reminders (the merged page) and
                the server redirect strips the query string, so point
                straight at the new path. The Reminders section's
                useCreateFromUrl handler still picks up ?create=1. */}
            <DropdownMenuItem
              onClick={() => router.push(`${base}/inbox?create=1#reminders` as unknown as Route)}
            >
              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>
  );
}