'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { ShoppingBag } from 'lucide-react';
import { useBookingDraft } from '@/lib/store/booking-draft';
import { formatPrice } from '@/lib/utils';

interface FloatingCartSummaryProps {
  locale: string;
}

export function FloatingCartSummary({ locale }: FloatingCartSummaryProps) {
  const t = useTranslations('checkout.items');
  const pathname = usePathname();
  const booking = useBookingDraft((s) => s.booking);

  const itemCount = booking?.vendors?.reduce((sum, v) => sum + v.items.length, 0) ?? 0;
  const subtotal = booking?.subtotal_minor ?? 0;
  const isOnCheckout = pathname.includes('/checkout');
  // Feature 054 (US14, density / R8) — these routes render their own bottom-fixed
  // element (cart totals + min-order sticky, vendor "Add to event" CTA, service
  // booking panel). Suppress the global cart pill there so the viewport never
  // stacks more than two fixed elements above the BottomNav.
  const ownsBottomRegion =
    pathname.endsWith('/cart') ||
    /\/vendors\/[^/]+$/.test(pathname) ||
    /\/services\/[^/]+$/.test(pathname);

  if (itemCount === 0 || isOnCheckout || ownsBottomRegion) return null;

  return (
    <div className="fixed bottom-[var(--bottom-nav-height)] md:bottom-4 start-0 end-0 z-40 flex justify-center px-4 pointer-events-none">
      <div className="pointer-events-auto w-full max-w-sm rounded-xl border border-neutral-200 bg-white shadow-lg flex items-center justify-between gap-3 px-4 py-3">
        <div className="flex items-center gap-2">
          <ShoppingBag className="h-5 w-5 text-primary-600 flex-shrink-0" aria-hidden />
          <div>
            <p className="text-xs font-medium text-neutral-900">
              {itemCount} {itemCount === 1 ? t('item') : t('items')}
            </p>
            {subtotal > 0 && (
              <p className="text-xs text-neutral-500">{formatPrice(subtotal, locale)}</p>
            )}
          </div>
        </div>
        <Link
          href={`/${locale}/checkout/items`}
          className="btn-primary shrink-0 text-xs"
        >
          {t('continue')} →
        </Link>
      </div>
    </div>
  );
}