'use client';

import { usePathname } from 'next/navigation';

import { cn } from '@/lib/utils';
import { BackButton } from '@/components/layout/back-button';
import { useSmartBack } from '@/hooks/use-smart-back';
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 } = useMobileChrome();
  const pathname = usePathname();
  // Mobile back affordance now derives from the same smart-back hook as
  // the desktop topbar so the destination is consistent across viewports
  // (and survives deep-link refresh). When useSmartBack returns null
  // (top-level pages) the brand-mark fallback renders in its place.
  const backTarget = useSmartBack();

  // 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',
      )}
    >
      {backTarget ? (
        <BackButton variant="mobile" />
      ) : (
        <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>
  );
}
