@props([
    'rating' => 0,
    'disabled' => false,
    'size' => '8', 
])

<div x-data="{
    rating: parseFloat('{{ $rating }}'),
    hoverRating: parseFloat('{{ $rating }}'),
    disabled: {{ $disabled ? 'true' : 'false' }},
    ratings: [0, 1, 2, 3, 4],
    init() {
        // Watch for parent Alpine data changes (if parent has currentRating or review)
        if (this.$parent) {
            // Watch parent's currentRating if it exists
            if (typeof this.$parent.currentRating !== 'undefined') {
                this.$watch('$parent.currentRating', (value) => {
                    if (value !== null && value !== undefined) {
                        this.rating = Number(value);
                        this.hoverRating = Number(value);
                    }
                });
            }
            // Also watch parent's review.rating if it exists
            if (this.$parent.review && typeof this.$parent.review.rating !== 'undefined') {
                this.$watch('$parent.review.rating', (value) => {
                    if (value !== null && value !== undefined) {
                        this.rating = Number(value);
                        this.hoverRating = Number(value);
                    }
                });
            }
        }
        // Update hidden rating input if it exists
        this.$watch('rating', (value) => {
            const hiddenInput = document.getElementById('rating');
            if (hiddenInput) {
                hiddenInput.value = value;
                hiddenInput.dispatchEvent(new Event('input', { bubbles: true }));
                hiddenInput.dispatchEvent(new Event('change', { bubbles: true }));
            }
        });
    },
    rate(value) {
        if (!this.disabled) {
            this.rating = value;
            this.hoverRating = value;
        }
    },
    isHalfStar(index) {
        return Math.floor(this.rating) === index && this.rating % 1 >= 0.25 && this.rating % 1 < 0.99;
    },
    isFullStar(index) {
        return this.rating >= index + 1 || (!this.disabled && this.hoverRating >= index + 1);
    }
}">
    <div class="flex space-x-1 justify-center">
        <template x-for="(star, index) in ratings" :key="index">
            <span
                @click="rate(index + 1)"
                @mouseover="if (!disabled) hoverRating = index + 1"
                @mouseleave="if (!disabled) hoverRating = rating"
                class="rounded-sm fill-current focus:outline-none focus:shadow-outline  m-0"
                :class="{
                    'cursor-pointer': !disabled,
                    'cursor-default': disabled,
                }"
            >
                <!-- Half Star -->
                <template x-if="isHalfStar(index)">
                    <svg class="w-{{ $size }} h-{{ $size }} transition duration-150" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <defs>
                            <clipPath :id="'half-clip-' + index">
                                <rect x="0" y="0" width="10" height="20" />
                            </clipPath>
                        </defs>
                        <path
                            d="M10 1.3l2.388 6.722H18.8l-5.232 3.948 1.871 6.928L10 14.744l-5.438 4.154 1.87-6.928-5.233-3.948h6.412L10 1.3z"
                            fill="#e5e7eb"
                        />
                        <path
                            d="M10 1.3l2.388 6.722H18.8l-5.232 3.948 1.871 6.928L10 14.744l-5.438 4.154 1.87-6.928-5.233-3.948h6.412L10 1.3z"
                            fill="#FFBF00"
                            :clip-path="'url(#half-clip-' + index + ')'"
                        />
                    </svg>
                </template>

                <!-- Full Star -->
                <template x-if="isFullStar(index)">
                    <svg class="w-{{ $size }} h-{{ $size }} transition duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#FFBF00">
                        <path d="M10 1.3l2.388 6.722H18.8l-5.232 3.948 1.871 6.928L10 14.744l-5.438 4.154 1.87-6.928-5.233-3.948h6.412L10 1.3z" />
                    </svg>
                </template>

                <!-- Empty Star -->
                <template x-if="!isHalfStar(index) && !isFullStar(index)">
                    <svg class="w-{{ $size }} h-{{ $size }} transition duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#e5e7eb">
                        <path d="M10 1.3l2.388 6.722H18.8l-5.232 3.948 1.871 6.928L10 14.744l-5.438 4.154 1.87-6.928-5.233-3.948h6.412L10 1.3z" />
                    </svg>
                </template>
            </span>
        </template>
    </div>
</div>