'use client';

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(className)}>
      {/* `relative` + `aspect-square` are layout-critical for next/image fill */}
      <span className="relative block aspect-square">
        {imageUrl ? (
          <Image
            src={imageUrl}
            alt={item.name}
            fill
            sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw"
          />
        ) : null}
      </span>
      <span className="block">
        <span className="block">{item.name}</span>
        {priceIsUnresolved ? null : (
          <PriceDisplay price={basePrice} salePrice={isOnSale ? salePrice : undefined} size="sm" />
        )}
      </span>
    </Link>
  );
}

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

/**
 * DESIGN ME — recommendation strip on the product page (upsells / related);
 * items come from useProductPage().recommendations, title is passed in.
 *
 * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
 */
export function RecommendationSection({ title, items, className }: RecommendationSectionProps) {
  if (items.length === 0) return null;

  return (
    <section className={cn(className)}>
      <h2>{title}</h2>
      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
        {items.map((item) => (
          <RecommendationCard key={item.id} item={item} />
        ))}
      </div>
    </section>
  );
}

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

/**
 * DESIGN ME — cross-sell strip on the cart page ("you might also need");
 * items come from useCartPage().cartRecs.
 *
 * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
 */
export function CartRecommendationSection({
  title,
  items,
  className,
}: CartRecommendationSectionProps) {
  if (items.length === 0) return null;

  return (
    <section className={cn(className)}>
      <h2>{title}</h2>
      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
        {items.map((item) => (
          <RecommendationCard key={item.id} item={item} />
        ))}
      </div>
    </section>
  );
}