import Link from 'next/link';
import toast, { Toast } from 'react-hot-toast';
import ProductImage from './ProductImage';

export type CartToastAction = 'add' | 'increase' | 'remove';

interface CartToastItem {
  variantId: number;
  productId?: number;
  productName: string;
  productSlug?: string;
  brandName: string;
  volume: string;
  price?: number;
  image?: string;
  productType?: string;
}

interface CartToastProps {
  t: Toast;
  action: CartToastAction;
  item: CartToastItem;
  onUndo?: () => void;
}

const ACTION_COPY: Record<CartToastAction, string> = {
  add: 'Přidáno do košíku',
  increase: 'Množství zvýšeno',
  remove: 'Odebráno z košíku',
};

const CartToast: React.FC<CartToastProps> = ({ t, action, item, onUndo }) => {
  const isRemove = action === 'remove';

  return (
    <div
      className={`pointer-events-auto w-[min(100vw-2rem,22rem)] rounded-xl border bg-luxury-dark shadow-2xl shadow-black/50 transition-all duration-300 ${
        t.visible ? 'translate-y-0 opacity-100' : 'translate-y-2 opacity-0'
      } ${isRemove ? 'border-luxury-gold/40' : 'border-luxury-gold'}`}
    >
      <div className="flex gap-3 p-3">
        <div className="h-16 w-16 flex-shrink-0 overflow-hidden rounded-lg bg-luxury-dark/80 border border-luxury-gold/20">
          <ProductImage
            src={item.image}
            alt={item.productName}
            className="h-full w-full object-contain"
          />
        </div>

        <div className="min-w-0 flex-1">
          <p className="text-[10px] font-semibold uppercase tracking-wider text-luxury-gold">
            {item.brandName}
          </p>
          <p className="truncate text-sm font-bold text-luxury-light">
            {item.productName}
          </p>
          <p className="mt-0.5 text-xs text-luxury-light/60">
            {item.volume}
            <span className="mx-1.5 text-luxury-gold/50">·</span>
            {ACTION_COPY[action]}
          </p>

          <div className="mt-2 flex items-center gap-3">
            {isRemove && onUndo ? (
              <button
                type="button"
                onClick={() => {
                  onUndo();
                  toast.dismiss(t.id);
                }}
                className="text-xs font-bold uppercase tracking-wider text-luxury-gold hover:text-yellow-300"
              >
                Vrátit zpět
              </button>
            ) : (
              <Link
                href="/cart"
                onClick={() => toast.dismiss(t.id)}
                className="text-xs font-bold uppercase tracking-wider text-luxury-gold hover:text-yellow-300"
              >
                Zobrazit košík
              </Link>
            )}
          </div>
        </div>

        <button
          type="button"
          onClick={() => toast.dismiss(t.id)}
          aria-label="Zavřít"
          className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full text-luxury-light/50 hover:bg-luxury-gold/10 hover:text-luxury-gold"
        >
          ✕
        </button>
      </div>
    </div>
  );
};

export function showCartToast(
  action: CartToastAction,
  item: CartToastItem,
  onUndo?: () => void
) {
  toast.custom(
    (t) => <CartToast t={t} action={action} item={item} onUndo={onUndo} />,
    {
      id: `cart-${item.variantId}`,
      duration: 4200,
      position: 'top-right',
    }
  );
}

export default CartToast;