"use client";

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

const FEEDBACK_MS = 2000;

/**
 * Shared by /todo-cards's Hero + pricing panel and Home's product
 * spotlight. Used to navigate straight to /cart on click; now stays on the
 * page instead (matching AddToCartInlineButton's behavior everywhere else)
 * — adds to the cart, plays the fly-to-navbar-icon animation, and shows a
 * brief inline success state instead of leaving the page.
 */
export function AddToCartButton({
  label,
  className,
  productId = "todo-karten",
}: {
  label: string;
  className?: string;
  /** Defaults to "todo-karten" for /todo-cards' own hardcoded usage — Home's
   * ProductSpotlight passes the actual CMS-selected spotlight product's id
   * explicitly, since that can now be a different product. */
  productId?: string;
}) {
  const [added, setAdded] = useState(false);
  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
  const buttonRef = useRef<HTMLButtonElement>(null);
  const { fly } = useCartFly();

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

  function handleClick() {
    addToCart(productId);
    if (buttonRef.current) fly(buttonRef.current);
    setAdded(true);
    clearTimeout(timeoutRef.current);
    timeoutRef.current = setTimeout(() => setAdded(false), FEEDBACK_MS);
  }

  const base =
    className ??
    "inline-flex items-center justify-center px-6 py-[0.8125rem] rounded-sm bg-brand hover:bg-brand-hover active:scale-[0.97] transition-all font-bold text-body text-text-primary whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base";
  // Trailing `!` — Tailwind v4's important-modifier syntax moved from a
  // leading `!` to this trailing suffix — forces the success color to win
  // over whatever bg-brand/text-text-primary each caller already baked
  // into `base`, since appending on top can't rely on CSS source order
  // the way branching a whole className (AddToCartInlineButton's
  // approach) can when the base itself varies per caller.
  // Pale success-subtle fill + success text + a success-colored border, not
  // a solid success-green fill with white text — same restrained pairing
  // AddToCartInlineButton already uses (border-success + bg-success-subtle),
  // a solid bright-green button read as too loud here. `border` (width) is
  // added here too since `base` has none by default, unlike
  // AddToCartInlineButton's own base which already carries a plain border.
  const stateClasses = added
    ? "border border-success! bg-success-subtle! hover:bg-success-subtle! text-success!"
    : "";

  return (
    <button
      ref={buttonRef}
      type="button"
      onClick={handleClick}
      className={`${base} ${stateClasses}`}
    >
      {/* CSS-grid text-stack, not just swapping the button's text node
          directly — this button is inline-flex/content-sized (no w-full),
          so "Hinzugefügt ✓" being shorter than most labels made the whole
          button visibly shrink while showing the success state. Stacking
          both possible texts in the same grid cell (both invisible ones
          still contribute to sizing) reserves width for whichever is
          wider, so the button's box never changes size either way. */}
      <span className="relative grid">
        <span className="invisible [grid-area:1/1]" aria-hidden="true">
          {label}
        </span>
        <span className="invisible [grid-area:1/1]" aria-hidden="true">
          Hinzugefügt ✓
        </span>
        <span className="[grid-area:1/1]">{added ? "Hinzugefügt ✓" : label}</span>
      </span>
    </button>
  );
}