'use client';

/**
 * VendorHeroBanner — stateless desktop vendor hero banner.
 *
 * Renders the full-width h-40 banner with logo, name, rating, and breadcrumb.
 * `showHeroImage` helper moved here since it is only consumed by this component.
 * Owns no state.
 */

import { Breadcrumb } from '@/components/ui/layout/Breadcrumb';
import { Image } from '@/components/ui/primitives/Image';
import { useT } from '@/lib/i18n/react';

export interface VendorHeroBannerVendor {
  displayName: string;
  slug: string;
  city?: string | null;
  reviewsCount: number;
  reviewsScore: number;
  logoUrl?: string | null;
  heroImageUrl?: string | null;
  heroImageApprovalStatus?: string;
  heroFocalX?: number | null;
  heroFocalY?: number | null;
  tier?: string;
}

export interface VendorHeroBannerProps {
  vendor: VendorHeroBannerVendor;
  dealTitle: string;
  dealType: string;
}

function showHeroImage(vendor: {
  heroImageUrl?: string | null;
  heroImageApprovalStatus?: string;
  tier?: string;
}): boolean {
  if (!vendor.heroImageUrl) return false;
  const status = vendor.heroImageApprovalStatus;
  const tier = vendor.tier;
  if (status === 'REJECTED') return false;
  if (status === 'APPROVED') return true;
  // PENDING: show for established vendors (VETERAN), hide for NEW
  return tier !== 'NEW';
}

export function VendorHeroBanner({ vendor, dealTitle, dealType }: VendorHeroBannerProps) {
  const t = useT('deal_detail');
  const tNav = useT('nav');

  const vendorInitial = vendor.displayName.charAt(0).toUpperCase();

  return (
    <div className="relative h-40 w-full overflow-hidden">
      {/* Floating breadcrumb pill overlaid on hero */}
      <div className="absolute start-8 top-4 z-10">
        <Breadcrumb
          items={[
            { label: tNav('home'), href: '/' },
            dealType === 'GROUP'
              ? { label: tNav('group_deals'), href: '/deals/group' }
              : { label: tNav('deals'), href: '/deals' },
            {
              label: vendor.displayName,
              href: `/business/${vendor.slug}`,
              userContent: true,
            },
            { label: dealTitle, userContent: true },
          ]}
          variant="hero-overlay"
        />
      </div>
      {/* Background: hero image or brand-primary gradient */}
      {showHeroImage(vendor) ? (
        <Image
          src={vendor.heroImageUrl!}
          alt=""
          decorative
          loading="eager"
          fetchpriority="high"
          className="absolute inset-0 h-full w-full object-cover blur-xl"
          style={{
            objectPosition: `${(vendor.heroFocalX ?? 0.5) * 100}% ${(vendor.heroFocalY ?? 0.5) * 100}%`,
          }}
        />
      ) : null}
      {/* Gradient overlay — always present for legibility */}
      <div
        className={`absolute inset-0 ${showHeroImage(vendor) ? 'bg-gradient-to-t from-black/70 via-black/30 to-black/10' : 'bg-brand-primary-700'}`}
      />

      {/* Vendor identity — positioned bottom-start */}
      <div className="absolute start-0 bottom-0 flex items-end gap-4 ps-8 pb-5">
        {/* Vendor logo circle */}
        <div
          className="border-surface-base h-16 w-16 shrink-0 overflow-hidden rounded-full border-2"
          aria-hidden
        >
          {vendor.logoUrl ? (
            <Image
              src={vendor.logoUrl}
              alt=""
              decorative
              loading="eager"
              fetchpriority="auto"
              className="h-full w-full object-cover"
            />
          ) : (
            <div className="bg-brand-primary-100 text-brand-primary-700 flex h-full w-full items-center justify-center text-xl font-bold">
              {vendorInitial}
            </div>
          )}
        </div>

        {/* Vendor name + rating/city */}
        <div className="flex flex-col gap-0.5 pb-1">
          <a
            href={`/business/${vendor.slug}`}
            data-user-content
            className="text-2xl font-bold text-white hover:text-white/90 focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none"
          >
            {vendor.displayName}
          </a>
          <p data-user-content className="text-sm text-white/80">
            {vendor.reviewsCount > 0 ? (
              <span aria-label={`${t('vendor_rating_aria')} ${vendor.reviewsScore}`}>
                {vendor.reviewsScore} <span aria-hidden="true">⭐</span>
              </span>
            ) : null}
            {vendor.reviewsCount > 0 && vendor.city ? ' · ' : null}
            {vendor.city ?? null}
          </p>
        </div>
      </div>
    </div>
  );
}