"use client";

import { useEffect, useState } from "react";

import { useCart } from "@/components/cart/CartProvider";
import { Spinner } from "@/components/ui";
import type { Product } from "@/types/product";

/**
 * Add-to-cart control.
 *
 * Renders as a real `<button>` and gives immediate feedback: a spinner while
 * the (synchronous, but visually async) action commits, then a confirmation for
 * a moment before returning to the idle label.
 */
export function AddToCartButton({
  product,
  quantity = 1,
  variant = "primary",
  className = "",
  label,
}: {
  product: Product;
  quantity?: number;
  variant?: "primary" | "compact";
  className?: string;
  label?: string;
}) {
  const { addItem } = useCart();
  const [state, setState] = useState<"idle" | "adding" | "added">("idle");
  const disabled = product.stock <= 0;

  useEffect(() => {
    if (state !== "added") return;
    const timeout = setTimeout(() => setState("idle"), 1800);
    return () => clearTimeout(timeout);
  }, [state]);

  function handleClick() {
    if (disabled || state === "adding") return;
    setState("adding");
    addItem(product, quantity);
    setState("added");
  }

  const base =
    variant === "compact"
      ? "rounded-lg px-3 py-2 text-xs font-semibold"
      : "rounded-xl px-4 py-2.5 text-sm font-semibold";

  return (
    <button
      type="button"
      onClick={handleClick}
      disabled={disabled || state === "adding"}
      aria-live="polite"
      className={`${base} inline-flex items-center justify-center gap-2 transition focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:outline-none ${
        disabled
          ? "cursor-not-allowed bg-slate-200 text-slate-500"
          : state === "added"
            ? "bg-emerald-600 text-white hover:bg-emerald-700"
            : "bg-indigo-600 text-white hover:bg-indigo-700 active:scale-[0.98]"
      } ${className}`}
    >
      {state === "adding" ? <Spinner /> : null}
      <span>
        {disabled
          ? "Out of stock"
          : state === "added"
            ? "Added to cart"
            : (label ?? "Add to cart")}
      </span>
    </button>
  );
}