<script lang="ts">
  import { toggleFavorite } from "$lib/services/favorites";
  import { haptics } from "$lib/utils/haptics";
  import { toast } from "$lib/stores/toast";

  interface Props {
    itemId: string;
    isFavorite?: boolean;
    size?: "sm" | "md" | "lg";
    className?: string;
  }

  let { itemId, isFavorite = $bindable(false), size = "md", className = "" }: Props = $props();

  let isLoading = $state(false);
  let isAnimating = $state(false);

  const sizeClasses = {
    sm: "w-4 h-4",
    md: "w-5 h-5",
    lg: "w-6 h-6",
  };

  async function handleToggle() {
    if (isLoading) return;

    isLoading = true;
    isAnimating = true;

    try {
      const newValue = await toggleFavorite(itemId, isFavorite);
      isFavorite = newValue;

      // Haptic feedback
      if (newValue) {
        haptics.success();
        toast.show("Added to favorites", "success", 1500);
      } else {
        haptics.tap();
        toast.show("Removed from favorites", "info", 1500);
      }

      // Reset animation after it completes
      setTimeout(() => {
        isAnimating = false;
      }, 600);
    } catch (error) {
      console.error("Failed to toggle favorite:", error);
      toast.show("Failed to update favorites", "error");
      isAnimating = false;
    } finally {
      isLoading = false;
    }
  }

  // Compute button classes
  const buttonClass = $derived.by(() => {
    const baseClasses = "p-2 rounded-full transition-all";
    const colorClasses = isFavorite ? "text-red-500 hover:text-red-400" : "text-gray-400 hover:text-white";
    const loadingClasses = isLoading ? "opacity-50 cursor-wait" : "";
    return `${baseClasses} ${colorClasses} ${loadingClasses} ${className}`.trim();
  });

  // Compute SVG classes
  const svgClass = $derived.by(() => {
    const sizeClass = sizeClasses[size];
    return sizeClass;
  });

  // Inline animation styles
  const buttonStyle = $derived(isAnimating ? "animation: bounce-once 0.6s ease-in-out;" : "");
  const svgStyle = $derived(isAnimating && isFavorite ? "animation: heart-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);" : "");
</script>

<button
  onclick={handleToggle}
  disabled={isLoading}
  class={buttonClass}
  style={buttonStyle}
  title={isFavorite ? "Remove from favorites" : "Add to favorites"}
  aria-label={isFavorite ? "Remove from favorites" : "Add to favorites"}
>
  {#if isFavorite}
    <!-- Filled heart with scale animation -->
    <svg
      class={svgClass}
      style={svgStyle}
      fill="currentColor"
      viewBox="0 0 24 24"
    >
      <path
        d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
      />
    </svg>
  {:else}
    <!-- Outline heart -->
    <svg class={sizeClasses[size]} fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
      />
    </svg>
  {/if}
</button>

<style>
  @keyframes heart-pop {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.3);
    }
    100% {
      transform: scale(1);
    }
  }

  @keyframes bounce-once {
    0%, 100% {
      transform: translateY(0);
    }
    25% {
      transform: translateY(-8px);
    }
    50% {
      transform: translateY(0);
    }
    75% {
      transform: translateY(-4px);
    }
  }
</style>
