// @design-system: domain/VendorResultCard
'use client';

import { cn } from '@/lib/cn';
import { Image } from '@/components/ui/primitives/Image';
import { StarRating } from '@/components/ui/primitives/StarRating';
import { FavoriteButton } from '@/components/ui/domain/FavoriteButton/FavoriteButton';
import { dealCardVariants } from '@/components/ui/domain/DealCard/variants';
import { useT } from '@/lib/i18n/react';
import { useWishlistContext } from '@/features/wishlist/WishlistContext.js';
import { useAuthGateStore } from '@/lib/stores/auth-gate';
import type { VendorSearchResult } from '@/server/catalog/public/search';

export interface VendorResultCardProps {
  vendor: VendorSearchResult;
  className?: string;
}

function VendorResultCardInner({ vendor, className }: VendorResultCardProps) {
  const tSearch = useT('search');
  const tStores = useT('stores');
  const { favoritedVendorIds } = useWishlistContext();
  const alwaysVisible = favoritedVendorIds.has(vendor.id);

  const score = parseFloat(vendor.reviewsScore);
  const hasRating = vendor.reviewsCount > 0 && !Number.isNaN(score) && score > 0;

  const metaParts: string[] = [];
  if (vendor.businessTypeName) metaParts.push(vendor.businessTypeName);
  if (vendor.city) metaParts.push(vendor.city);
  const metaLine = metaParts.join(' · ');

  return (
    <a
      href={`/business/${vendor.id}`}
      className={cn(dealCardVariants({ variant: 'grid' }), 'group no-underline', className)}
      aria-label={vendor.displayName}
    >
      {/* ── Media ── */}
      <div className="bg-surface-default relative aspect-[4/3] w-full overflow-hidden">
        {vendor.heroImageUrl ? (
          <Image
            src={vendor.heroImageUrl}
            alt=""
            decorative
            variant="hero"
            width={320}
            height={240}
            loading="lazy"
            sizes="(max-width: 40rem) 100vw, 20rem"
            className="h-full w-full object-cover"
          />
        ) : vendor.logoUrl ? (
          <Image
            src={vendor.logoUrl}
            alt=""
            decorative
            variant="hero"
            width={320}
            height={240}
            loading="lazy"
            sizes="(max-width: 40rem) 100vw, 20rem"
            className="h-full w-full object-cover"
          />
        ) : (
          <div className="from-brand-primary-700 to-brand-primary-500 h-full w-full bg-gradient-to-br" />
        )}

        {/* Business badge — top-end, mirrors DealCard discount badge slot */}
        <span className="text-neutral-0 tracking-price-tight absolute start-2.5 top-2.5 rounded-md bg-neutral-900 px-2 py-1 font-[family-name:var(--font-he)] text-xs font-[var(--font-weight-extrabold)]">
          {tSearch('businessResult')}
        </span>

        {/* Corner CTA pill — favorite star, mirrors DealCardCornerCta positioning */}
        <div
          className={cn(
            'absolute end-2 top-2 z-20',
            !alwaysVisible && [
              'lg-hover-only',
              'pointer-events-none opacity-0',
              'motion-safe:transition-opacity motion-safe:duration-150',
              'group-hover:pointer-events-auto group-hover:opacity-100',
              'group-focus-within:pointer-events-auto group-focus-within:opacity-100',
            ],
          )}
        >
          <div className="bg-surface-default/85 flex items-center gap-0 rounded-full p-0.5 shadow-md backdrop-blur">
            <FavoriteButton
              vendorId={vendor.id}
              onAuthRequired={() => useAuthGateStore.getState().triggerAuth()}
              className="hover:bg-surface-subtle rounded-full bg-transparent p-1.5 shadow-none"
            />
          </div>
        </div>
      </div>

      {/* ── Body ── */}
      <div className="flex flex-1 flex-col gap-2.5 p-3">
        {metaLine && <p className="text-text-muted line-clamp-1 text-sm">{metaLine}</p>}

        <div className="text-text-primary line-clamp-2 text-base leading-tight font-extrabold">
          {vendor.displayName}
        </div>

        <div className="mt-auto flex flex-wrap items-center gap-2 pt-1.5">
          {hasRating && <StarRating value={score} count={vendor.reviewsCount} size="sm" />}
          {vendor.activeDealsCount > 0 && (
            <span className="text-text-muted text-xs">
              {tStores('deals_count').replace('{n}', String(vendor.activeDealsCount))}
            </span>
          )}
        </div>
      </div>
    </a>
  );
}

export const VendorResultCard = VendorResultCardInner;