"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { RiHeartFill, RiHeartLine } from "@remixicon/react";
import { toggleWishlist } from "@/lib/actions/wishlist";
import { cn } from "@/lib/utils";

/**
 * Wishlist heart that actually persists state through toggleWishlist.
 * Guests are sent to the login page instead of being shown a dead heart.
 */
export default function WishlistButton({
  productId,
  initialWishlisted = false,
  className,
  ...props
}: {
  productId: string;
  initialWishlisted?: boolean;
  className?: string;
} & React.ButtonHTMLAttributes<HTMLButtonElement>) {
  const router = useRouter();
  const [wishlisted, setWishlisted] = useState(initialWishlisted);
  const [busy, setBusy] = useState(false);

  async function handleClick() {
    if (busy) return;
    setBusy(true);
    const res = await toggleWishlist(productId);
    setBusy(false);
    if (!res.ok) {
      if (res.code === "UNAUTHENTICATED") {
        router.push("/login");
      }
      return;
    }
    setWishlisted(Boolean(res.data?.wishlisted));
    router.refresh();
  }

  return (
    <button
      type="button"
      aria-pressed={wishlisted}
      aria-label={wishlisted ? "Remove from wishlist" : "Add to wishlist"}
      onClick={handleClick}
      className={cn("rounded-full", className)}
      disabled={busy}
      {...props}
    >
      <div className="bg-white p-1 shadow-sm rounded-b-full transition-colors duration-200">
        {wishlisted ? (
          <RiHeartFill size={16} className="text-primary" />
        ) : (
          <RiHeartLine size={16} className="hover:text-primary" />
        )}
      </div>
    </button>
  );
}