einfach-produktiv/app/components/AddToCartInlineButton.tsx

"use client";

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

// 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,
  label = "In den Warenkorb",
  className,
  outOfStock = false,
  lowStock = false,
  variants = [],
}: {
  id: string;
  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 low-stock hint, same "only meaningful without variants"
   * split as outOfStock. */
  lowStock?: boolean;
  /** 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 }[];
}) {
  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();

  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 currentlyLowStock = variants.length > 0 ? (variants.find((v) => v.name === selectedVariant)?.lowStock ?? false) : lowStock;

  function handleClick() {
    if (currentlyOutOfStock) 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 = currentlyOutOfStock
    ? "border-border opacity-60 cursor-not-allowed"
    : added
      ? "border-success bg-success-subtle"
      : "border-border hover:border-brand";

  return (
    <div className="flex flex-col gap-1 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>
      )}
      {currentlyLowStock && !currentlyOutOfStock && (
        <p className="text-label font-bold text-warning">Nur noch wenige verfügbar</p>
      )}
      <button
        ref={buttonRef}
        type="button"
        onClick={handleClick}
        disabled={currentlyOutOfStock}
        className={`${base} ${stateClasses}`}
      >
        <span
          className={
            "text-body-sm transition-colors " +
            (currentlyOutOfStock ? "text-text-muted" : added ? "font-semibold text-success" : "text-text-primary")
          }
        >
          {currentlyOutOfStock ? "Ausverkauft" : 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>
  );
}