'use client';

import { Image as ImageIcon } from 'lucide-react';
import { Link } from '@/core/lib/navigation';
import { CdnImage as Image } from '@/ui/shared/cdn-image';
import type { ProductRecommendation } from 'brainerce';
import { PriceDisplay } from '@/ui/product/price-display';
import { cn } from '@/core/lib/utils';

interface RecommendationCardProps {
  item: ProductRecommendation;
  className?: string;
}

function RecommendationCard({ item, className }: RecommendationCardProps) {
  const firstImage = item.images?.[0];
  const imageUrl = typeof firstImage === 'string' ? firstImage : firstImage?.url || null;
  const slug = item.slug || item.id;
  // ⛔ NOT region-converted, and it cannot be. `ProductRecommendation` is a
  // trimmed shape that carries `basePrice` / `salePrice` only: the backend
  // attaches no displayPrice/displayCurrency to it, so there is no converted
  // amount to render and converting here would mean inventing an FX rate.
  // These tiles stay in the store currency on a multi-region store. Do not
  // "fix" it with a client-side conversion.
  const basePrice = parseFloat(item.basePrice);
  const salePrice = item.salePrice ? parseFloat(item.salePrice) : undefined;
  const isOnSale = salePrice != null && salePrice < basePrice;
  // ⛔ No price on a KIT tile. The recommendations endpoint does not resolve
  // kits, so `item.basePrice` here is the kit's stored PLACEHOLDER — right only
  // for FIXED pricing and wrong for every SUM / SUM_MINUS_PERCENT kit. Showing
  // it would quote a price the product page then contradicts. The tile still
  // links through, and the product page reads the resolved price from the API.
  // Do NOT recompute a kit price on the client.
  const priceIsUnresolved = item.type === 'KIT';

  return (
    <Link
      href={`/products/${slug}`}
      className={cn(
        // Card-equivalent shell (bg-card + border + rounded-lg) as a link —
        // the whole recommendation tile is clickable.
        'bg-card text-card-foreground group block overflow-hidden rounded-lg border transition-shadow hover:shadow-md',
        className
      )}
    >
      <div className="bg-muted relative aspect-square overflow-hidden">
        {imageUrl ? (
          <Image
            src={imageUrl}
            alt={item.name}
            fill
            sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw"
            className="object-cover transition-transform duration-300 group-hover:scale-105"
          />
        ) : (
          <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
            <ImageIcon className="h-10 w-10" strokeWidth={1.5} aria-hidden="true" />
          </div>
        )}
      </div>
      <div className="space-y-1.5 p-3">
        <h3 className="text-foreground group-hover:text-primary line-clamp-2 text-sm font-medium transition-colors">
          {item.name}
        </h3>
        {priceIsUnresolved ? null : (
          <PriceDisplay price={basePrice} salePrice={isOnSale ? salePrice : undefined} size="sm" />
        )}
      </div>
    </Link>
  );
}

interface RecommendationSectionProps {
  title: string;
  items: ProductRecommendation[];
  className?: string;
}

export function RecommendationSection({ title, items, className }: RecommendationSectionProps) {
  if (items.length === 0) return null;

  return (
    <div className={cn('', className)}>
      <h2 className="text-foreground mb-4 text-xl font-semibold">{title}</h2>
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
        {items.map((item) => (
          <RecommendationCard key={item.id} item={item} />
        ))}
      </div>
    </div>
  );
}

interface CartRecommendationSectionProps {
  title: string;
  items: ProductRecommendation[];
  className?: string;
}

export function CartRecommendationSection({
  title,
  items,
  className,
}: CartRecommendationSectionProps) {
  if (items.length === 0) return null;

  return (
    <div className={cn('', className)}>
      <h2 className="text-foreground mb-4 text-lg font-semibold">{title}</h2>
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
        {items.map((item) => (
          <RecommendationCard key={item.id} item={item} />
        ))}
      </div>
    </div>
  );
}