'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 compact topbar (52px + safe-area top inset). Renders the page title
 * (auto-truncating), an optional back button, and an optional primary action
 * — all driven by `useMobileChrome()` from the active page.
 */
export function MobileTopbar() {
  const { title, primaryAction, showBackButton } = useMobileChrome();
  const router = useRouter();
  const pathname = usePathname();

  // Fall back to the last path segment (Title Case) if no page-supplied title.
  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-background border-b border-border',
        'h-[calc(52px+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="-ml-1 size-11 inline-flex items-center justify-center text-foreground"
        >
          <ChevronLeft className="size-5" />
        </button>
      ) : (
        <div className="size-11" aria-hidden />
      )}

      <h1 className="flex-1 text-base font-semibold truncate text-foreground">
        {title ?? fallbackTitle}
      </h1>

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