import { LoaderCircle } from "lucide-react";
import { useEffect } from "react";
import { useI18n } from "../i18n";
import { useFavorites } from "./FavoritesProvider";

type FavoriteButtonProps = {
  resourceId: string;
  className?: string;
  size?: "sm" | "md";
  onFavoriteChange?: (favorited: boolean) => void;
};

function FigmaBookmarkIcon() {
  return (
    <svg
      width="14"
      height="16"
      viewBox="0 0 14 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <path
        d="M12.8146 0H1.20137C0.882749 0 0.577175 0.123344 0.351874 0.342899C0.126573 0.562454 0 0.860233 0 1.17073V14.6341C0.000313518 14.8904 0.0758979 15.1412 0.217822 15.357C0.359747 15.5728 0.56208 15.7444 0.800915 15.8517C0.993567 15.9502 1.20808 16.0011 1.42563 16C1.71496 15.9908 1.99446 15.8954 2.22654 15.7268L6.51144 12.6049C6.65008 12.5035 6.8187 12.4488 6.99199 12.4488C7.16529 12.4488 7.3339 12.5035 7.47254 12.6049L11.7574 15.7268C11.9657 15.879 12.2133 15.9717 12.4725 15.9945C12.7318 16.0172 12.9924 15.9692 13.2252 15.8558C13.458 15.7423 13.6538 15.568 13.7907 15.3522C13.9275 15.1364 14 14.8878 14 14.6341V1.17073C14 0.862919 13.8757 0.567481 13.6538 0.348369C13.432 0.129258 13.1305 0.00410415 12.8146 0Z"
        fill="currentColor"
      />
    </svg>
  );
}

export function FavoriteButton({
  resourceId,
  className = "",
  size = "md",
  onFavoriteChange,
}: FavoriteButtonProps) {
  const { t } = useI18n();
  const favorites = useFavorites();
  const status = favorites.statusFor(resourceId);
  const pending = favorites.pendingIds.has(resourceId);
  const isFavorite = status === "favorited";

  useEffect(() => {
    void favorites.ensureFavoriteIds([resourceId]).catch(() => undefined);
  }, [favorites, resourceId]);

  const dimension = size === "sm" ? "h-9 w-9" : "h-10 w-10";

  return (
    <button
      type="button"
      onClick={(event) => {
        event.preventDefault();
        event.stopPropagation();
        void favorites
          .toggleFavorite(resourceId)
          .then((favorited) => {
            if (favorited !== null) onFavoriteChange?.(favorited);
          })
          .catch(() => undefined);
      }}
      disabled={pending}
      aria-pressed={isFavorite}
      aria-label={isFavorite ? t("favoriteRemove") : t("favoriteAdd")}
      title={isFavorite ? t("favoriteRemove") : t("favoriteAdd")}
      className={[
        "inline-flex shrink-0 items-center justify-center rounded-full border outline-none transition active:scale-95 focus-visible:ring-2 focus-visible:ring-ark-gold/80 disabled:cursor-wait md:disabled:opacity-70",
        dimension,
        isFavorite
          ? "border-ark-gold/60 bg-ark-gold text-black md:hover:bg-ark-gold2"
          : "border-white/10 bg-[#191921]/90 text-[#A8A9AE] md:hover:border-ark-gold md:hover:bg-[#191921] md:hover:text-ark-gold",
        className,
      ].join(" ")}
      aria-busy={pending}
    >
      {pending ? (
        <>
          <span className="md:hidden">
            <FigmaBookmarkIcon />
          </span>
          <LoaderCircle
            className="hidden h-5 w-5 animate-spin md:block"
            strokeWidth={2.2}
          />
        </>
      ) : (
        <FigmaBookmarkIcon />
      )}
    </button>
  );
}
