<script lang="ts">
	import { Button } from '$lib/components/button';
	import { Heart } from '@lucide/svelte';
	import { onMount } from 'svelte';
	import { browser } from '$app/environment';
	import { writable } from 'svelte/store';

	interface Props {
		findId: string;
		isLiked?: boolean;
		likeCount?: number;
		size?: 'sm' | 'default' | 'lg';
		class?: string;
	}

	let {
		findId,
		isLiked = false,
		likeCount = 0,
		size = 'default',
		class: className = ''
	}: Props = $props();

	// Local state stores for this like button - start with props but will be overridden by global state
	const likeState = writable({
		isLiked: isLiked,
		likeCount: likeCount,
		isLoading: false
	});

	let apiSync: typeof import('$lib/stores/api-sync').apiSync | null = null;

	// Initialize API sync and subscribe to global state
	onMount(async () => {
		if (browser) {
			try {
				// Dynamically import the API sync
				const module = await import('$lib/stores/api-sync');
				apiSync = module.apiSync;

				// Check if global state already exists for this find
				const existingState = apiSync.getEntityState('find', findId);

				if (existingState) {
					// Use existing global state - it's more current than props
					console.log(`Using existing global state for find ${findId}`, existingState);
				} else {
					// Initialize with minimal data only if no global state exists
					console.log(`Initializing new minimal state for find ${findId}`);
					apiSync.setEntityState('find', findId, {
						id: findId,
						isLikedByUser: isLiked,
						likeCount: likeCount,
						// Minimal data needed for like functionality
						title: '',
						latitude: '',
						longitude: '',
						isPublic: true,
						createdAt: new Date(),
						userId: '',
						username: '',
						isFromFriend: false
					});
				}

				// Subscribe to global state for this find
				const globalLikeState = apiSync.subscribeFindLikes(findId);
				globalLikeState.subscribe(
					(state: { isLiked: boolean; likeCount: number; isLoading: boolean }) => {
						likeState.set({
							isLiked: state.isLiked,
							likeCount: state.likeCount,
							isLoading: state.isLoading
						});
					}
				);
			} catch (error) {
				console.error('Failed to initialize API sync:', error);
			}
		}
	});

	async function toggleLike() {
		if (!apiSync || !browser) return;

		if ($likeState.isLoading) return;

		try {
			await apiSync.toggleLike(findId);
		} catch (error) {
			console.error('Failed to toggle like:', error);
		}
	}
</script>

<Button
	variant="ghost"
	{size}
	class="group gap-1.5 {className}"
	onclick={toggleLike}
	disabled={$likeState.isLoading}
>
	<Heart
		class="h-4 w-4 transition-all duration-200 {$likeState.isLiked
			? 'scale-110 fill-red-500 text-red-500'
			: 'text-gray-500 group-hover:scale-105 group-hover:text-red-400'} {$likeState.isLoading
			? 'animate-pulse'
			: ''}"
	/>
	{#if $likeState.likeCount > 0}
		<span
			class="text-sm font-medium transition-colors {$likeState.isLiked
				? 'text-red-500'
				: 'text-gray-500 group-hover:text-red-400'}"
		>
			{$likeState.likeCount}
		</span>
	{/if}
</Button>
