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

'use client';

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

import { cn } from '@/lib/utils';
import { useMobileChrome } from './mobile-layout-provider';

/**
 * Fixed mobile topbar (56px + safe-area top inset). Marina-editorial premium:
 * deep-navy gradient surface with white type, the brand "PN" mark on the
 * left when there's no back affordance, and a soft glow shadow underneath
 * for depth instead of a hard divider line.
 *
 * Slots: title (auto-truncating), back arrow, primary action - all driven by
 * `useMobileChrome()` from the active page. When no page has set a title the
 * URL's last segment is title-cased as a fallback.
 */
export function MobileTopbar() {
  const { title, primaryAction, showBackButton } = useMobileChrome();
  const router = useRouter();
  const pathname = usePathname();

  // UUID detection - the URL's last segment on detail pages is the
  // entity's UUID, and title-casing it produces an ugly "Abc 123 Uuid"
  // flash before the page calls `useMobileChrome.setChrome({title: ...})`
  // with the real entity name. When the segment matches the UUID shape,
  // walk back to the parent collection segment ("clients", "yachts",
  // "documents", …) which IS a clean, human-readable label.
  const segments = pathname.split('/').filter(Boolean);
  const last = segments[segments.length - 1] ?? '';
  const isUuid = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(last);
  const fallbackSegment = isUuid ? segments[segments.length - 2] : last;
  // Derive a sensible title from the current path slug when no
  // page-level title is set. Avoids hardcoding a specific tenant name -
  // a fresh deploy with port slug `marina-alpha` reads as "Marina Alpha"
  // here without code edits.
  const portSlug = segments[0] ?? '';
  const portTitle = portSlug.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
  const fallbackTitle =
    fallbackSegment?.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase()) ||
    portTitle ||
    'CRM';

  // Brand-mark initials derived from the port slug
  // ("port-nimara" → "PN", "marina-alpha" → "MA"). Cheap, self-contained,
  // no extra DB round-trip.
  const initials = portSlug
    ? portSlug
        .split('-')
        .map((part) => part[0]?.toUpperCase() ?? '')
        .join('')
        .slice(0, 2)
    : 'CR';

  return (
    <header
      className={cn(
        'fixed top-0 inset-x-0 z-40',
        'bg-linear-to-b from-[#1e2844] to-[#171f35]',
        'shadow-[0_4px_18px_-6px_rgba(15,23,42,0.45)]',
        'h-[calc(56px+env(safe-area-inset-top))] pt-safe-top',
        'flex items-center gap-2 px-3',
      )}
    >
      {showBackButton ? (
        <button
          type="button"
          onClick={() => router.back()}
          aria-label="Go back"
          className={cn(
            'size-11 inline-flex items-center justify-center rounded-full -ml-1',
            'text-white/95 active:bg-white/10 transition-colors',
          )}
        >
          <ChevronLeft className="size-[22px] stroke-[2.25]" aria-hidden />
        </button>
      ) : (
        <div
          aria-label={portTitle || 'Home'}
          className={cn(
            'size-9 shrink-0 rounded-lg flex items-center justify-center',
            'bg-[#3a7bc8] shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_1px_2px_rgba(0,0,0,0.25)]',
          )}
        >
          <span className="text-white font-bold text-[13px] tracking-tight">{initials}</span>
        </div>
      )}

      <h1
        className={cn(
          'flex-1 min-w-0 truncate text-center',
          'text-[17px] font-semibold tracking-tight text-white',
        )}
      >
        {title ?? fallbackTitle}
      </h1>

      <div className="size-11 inline-flex items-center justify-center text-white/95">
        {primaryAction}
      </div>
    </header>
  );
}