'use client';

import { useState } from 'react';
import { CdnImage as Image } from '@/ui/shared/cdn-image';
import type { CartBundleOffer as CartBundleOfferType } from 'brainerce';
import { formatPrice } from 'brainerce';
import { useCurrency } from '@/core/lib/use-currency';
import { useTranslations } from '@/core/lib/translations';
import { toAddToCartError, type AddToCartError } from '@/core/lib/add-to-cart-error';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { cn } from '@/core/lib/utils';

interface CartBundleOfferCardProps {
  offer: CartBundleOfferType;
  cartId: string;
  onAdd: () => void;
  className?: string;
}

export function CartBundleOfferCard({ offer, cartId, onAdd, className }: CartBundleOfferCardProps) {
  const t = useTranslations('cart');
  const tp = useTranslations('productDetail');
  const currency = useCurrency();
  const [adding, setAdding] = useState(false);
  const [addError, setAddError] = useState<AddToCartError | null>(null);

  const offered = offer.offeredProducts;

  const totalOriginal = parseFloat(offer.totalOriginalPrice);
  const totalDiscounted = parseFloat(offer.totalDiscountedPrice);
  const discountLabel =
    offer.discountType === 'PERCENTAGE'
      ? `${offer.discountValue}%`
      : (formatPrice(parseFloat(offer.discountValue), { currency }) as string);

  async function handleAdd() {
    if (adding) return;
    setAddError(null);
    try {
      setAdding(true);
      const { getClient } = await import('@/core/lib/brainerce');
      const client = getClient();
      // No variant selections in the default template — products with
      // variants are best handled with a dedicated picker per offered item.
      await client.addBundleToCart(cartId, offer.id);
      onAdd();
    } catch (err) {
      // The cart page is where a shopper is most likely to be AT the 50-line
      // cap, and a bundle adds one line per offered product. Logging alone
      // left the button spinning back to idle with nothing added.
      setAddError(toAddToCartError(err));
      console.error('Failed to add bundle:', err);
    } finally {
      setAdding(false);
    }
  }

  return (
    <Card className={cn('p-4 shadow-none', className)}>
      <div className="mb-3">
        <p className="text-foreground text-sm font-medium">{offer.name}</p>
        {offer.description && (
          <p className="text-muted-foreground mt-0.5 text-xs">{offer.description}</p>
        )}
      </div>

      <ul className="space-y-2">
        {offered.map((p) => {
          const firstImage = p.images?.[0];
          const imageUrl = firstImage?.url ?? null;
          return (
            <li key={p.id} className="flex items-center gap-3">
              <div className="bg-muted relative h-12 w-12 flex-shrink-0 overflow-hidden rounded">
                {imageUrl ? (
                  <Image src={imageUrl} alt={p.name} fill sizes="48px" className="object-cover" />
                ) : null}
              </div>
              <div className="min-w-0 flex-1">
                <p className="text-foreground truncate text-sm">{p.name}</p>
                <div className="mt-0.5 flex items-center gap-2">
                  <span className="text-muted-foreground text-xs line-through">
                    {formatPrice(parseFloat(p.originalPrice), { currency }) as string}
                  </span>
                  <span className="text-foreground text-xs font-semibold">
                    {formatPrice(parseFloat(p.discountedPrice), { currency }) as string}
                  </span>
                </div>
              </div>
            </li>
          );
        })}
      </ul>

      <Separator className="mt-3" />
      <div className="flex items-center justify-between pt-3">
        <div className="flex items-center gap-2">
          <span className="text-muted-foreground text-sm line-through">
            {formatPrice(totalOriginal, { currency }) as string}
          </span>
          <span className="text-foreground text-sm font-semibold">
            {formatPrice(totalDiscounted, { currency }) as string}
          </span>
          <Badge
            variant="outline"
            className="bg-destructive/10 text-destructive rounded border-transparent px-1.5 py-0.5 font-medium"
          >
            -{discountLabel}
          </Badge>
        </div>
        <Button
          type="button"
          size="sm"
          onClick={handleAdd}
          disabled={adding}
          className="h-auto flex-shrink-0 rounded px-4 py-2 text-xs"
        >
          {adding ? t('addingBundle') : t('addBundleItem')}
        </Button>
      </div>

      {/*
        Why the bundle was refused. Without this the button resets and
        nothing is added, which reads as a broken button.
      */}
      {addError && (
        <p role="alert" className="text-destructive mt-2 text-xs">
          {addError === 'CART_FULL' ? tp('cartFull') : tp('addToCartFailed')}
        </p>
      )}
    </Card>
  );
}