'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();

  const fallbackTitle =
    pathname
      .split('/')
      .filter(Boolean)
      .pop()
      ?.replace(/-/g, ' ')
      .replace(/\b\w/g, (c) => c.toUpperCase()) ?? 'Port Nimara';

  return (
    <header
      className={cn(
        'fixed top-0 inset-x-0 z-40',
        'bg-gradient-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]" />
        </button>
      ) : (
        <div
          aria-label="Port Nimara"
          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">PN</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>
  );
}