einfach-produktiv/app/components/AddToCartInlineButton.tsx

"use client";

import { useEffect, useRef, useState } from "react";
import Image from "next/image";
import { addToCart, useCart } from "../lib/cart";
import { useCartFly } from "./CartFly";
import { NotifyMeForm, NotifyMeFormReservedSpace } from "./NotifyMeForm";

// Exported so consumers like RelatedProducts.tsx can delay their own
// follow-up UI changes (e.g. swapping out this exact card) until after
// the success state has actually had time to be seen.
export const FEEDBACK_MS = 2000;

/**
 * Add-to-cart button that stays on the page (unlike AddToCartButton, which
 * navigates to /cart) — used wherever a product grid lets you keep browsing,
 * so a click needs its own success confirmation instead of relying on the
 * navigation itself as feedback.
 */
export function AddToCartInlineButton({
  id,
  numericId,
  label = "In den Warenkorb",
  className,
  outOfStock = false,
  maxQty = null,
  variants = [],
}: {
  id: string;
  /** Payload's real numeric product id (`product.numericId`) — only used to
   * scope a NotifyMeForm signup once out of stock, never for the cart/
   * checkout path itself (that stays on the slug `id` above). */
  numericId: number;
  label?: string;
  className?: string;
  /** Product-level — only meaningful when `variants` is empty. A varianted
   * product's buyability is entirely per-variant instead (see below). */
  outOfStock?: boolean;
  /** Product-level cap on total cart quantity — only meaningful when
   * `variants` is empty, same split as `outOfStock`. null means no cap
   * (backorder allowed / inventory untracked). See lib/payload.ts's
   * maxPurchasableQty(). */
  maxQty?: number | null;
  /** Optional — products.variants (name + optional priceOverride + its own
   * outOfStock). When non-empty, a variant must be picked (defaults to the
   * first *in-stock* one, or just the first if all are out) before "add to
   * cart" is enabled — the selected variant's name is snapshotted onto the
   * cart line and, later, the order itself. */
  variants?: { name: string; priceOverride: number | null; outOfStock: boolean; lowStock: boolean; maxQty: number | null }[];
}) {
  const [added, setAdded] = useState(false);
  const [selectedVariant, setSelectedVariant] = useState(variants.find((v) => !v.outOfStock)?.name ?? variants[0]?.name);
  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
  const buttonRef = useRef<HTMLButtonElement>(null);
  const { fly } = useCartFly();
  const cart = useCart();

  useEffect(() => () => clearTimeout(timeoutRef.current), []);

  // Whichever is actually being offered right now — the selected variant's
  // own flag if there are variants, otherwise the plain product-level one.
  const currentlyOutOfStock = variants.length > 0 ? (variants.find((v) => v.name === selectedVariant)?.outOfStock ?? false) : outOfStock;
  const currentMaxQty = variants.length > 0 ? (variants.find((v) => v.name === selectedVariant)?.maxQty ?? null) : maxQty;
  // How much of this exact (id, variant) line is already sitting in the
  // cart — capped adds mean "In den Warenkorb" must go disabled once this
  // reaches currentMaxQty, not just when the product is fully sold out.
  const qtyInCart = cart.find((i) => i.id === id && i.variant === selectedVariant)?.qty ?? 0;
  const limitReached = currentMaxQty != null && qtyInCart >= currentMaxQty;
  const disabled = currentlyOutOfStock || limitReached;

  function handleClick() {
    if (disabled) return;
    addToCart(id, 1, selectedVariant);
    if (buttonRef.current) fly(buttonRef.current);
    setAdded(true);
    clearTimeout(timeoutRef.current);
    timeoutRef.current = setTimeout(() => setAdded(false), FEEDBACK_MS);
  }

  const base =
    className ??
    "flex items-center justify-between px-5 py-3 rounded-sm border w-full transition-all duration-200 active:scale-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base";
  // Branch the border/bg classes instead of appending an "override" on top
  // of the default ones — Tailwind v4 has no leading-`!` important prefix
  // anymore (it's a trailing `!` now), so two conflicting utilities like
  // border-border/border-success both being present would silently race on
  // CSS source order instead of one cleanly winning.
  const stateClasses = disabled
    ? "border-border opacity-60 cursor-not-allowed"
    : added
      ? "border-success bg-success-subtle"
      : "border-border hover:border-brand";

  return (
    // Low stock isn't shown as its own text line here (see
    // AddToCartButton.tsx's identical comment on why) — the image-overlaid
    // pill badge (ProductGrid.tsx/RelatedProducts.tsx, position: absolute,
    // outside layout flow) is where this shows now, same as
    // Ausverkauft/discount already do.
    <div className="flex flex-col gap-2 w-full">
      {variants.length > 0 && (
        <select
          value={selectedVariant}
          onChange={(e) => setSelectedVariant(e.target.value)}
          className="w-full rounded-sm border border-border px-3 py-2 text-body-sm text-text-primary bg-bg-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand"
          aria-label="Variante auswählen"
        >
          {variants.map((v) => (
            <option key={v.name} value={v.name}>
              {v.name}
              {v.outOfStock ? " (ausverkauft)" : v.lowStock ? " (nur noch wenige)" : ""}
            </option>
          ))}
        </select>
      )}
      {/* grid + [grid-area:1/1] stack — NotifyMeFormReservedSpace (an
          invisible, non-interactive twin of NotifyMeForm's markup) always
          contributes its height here, even for an in-stock card that
          never shows the real form. Without it, only out-of-stock cards
          would be tall enough to need the input+button, and plain CSS
          Grid's row-stretch (ProductGrid.tsx has no explicit row height)
          would push every sibling card's button down to match whichever
          card in the row happens to be out of stock. */}
      <div className="relative grid w-full">
        <div className="invisible pointer-events-none [grid-area:1/1]">
          <NotifyMeFormReservedSpace />
        </div>
        {/* self-start, not the stretch default — the button's TOP edge is
            what must align across cards (ProductGrid.tsx's flex-1 spacer
            pins this whole block to a card's bottom already); the extra
            reserved height below a single button just stays blank. */}
        <div className="[grid-area:1/1] self-start">
          {currentlyOutOfStock ? (
            <NotifyMeForm productId={numericId} variantName={variants.length > 0 ? (selectedVariant ?? "") : ""} />
          ) : (
            <button
              ref={buttonRef}
              type="button"
              onClick={handleClick}
              disabled={disabled}
              className={`${base} ${stateClasses}`}
            >
              <span
                className={
                  "text-body-sm transition-colors " +
                  (disabled ? "text-text-muted" : added ? "font-semibold text-success" : "text-text-primary")
                }
              >
                {limitReached ? "Maximale Menge im Warenkorb" : added ? "Hinzugefügt ✓" : label}
              </span>
              <Image alt="" src="/icon-cart-outline.png" width={32} height={30} className="h-[1.875rem] w-8 object-contain" />
            </button>
          )}
        </div>
      </div>
    </div>
  );
}