// Define the component
const FloatingCreditTrackerComponent = {
    props: ['initial', 'available', 'plan-label', 'plan-slug', 'upgrade-url', 'add-credit-url'],
    data() {
        return {
            previousValue: 0,
            isUpdated: false,
            isLoading: false
        };
    },
    methods: {
        generatePost() {
            if (this.isLoading) return; // Prevent multiple clicks

            // Set loading state
            this.isLoading = true;

            // Trigger the same action as the main generate button
            document.getElementById('generate_post').click();

            // Listen for the generating state change in the main app
            const checkGeneratingState = () => {
                const mainApp = document.getElementById('app').__vue__;
                if (mainApp && typeof mainApp.generating !== 'undefined') {
                    if (!mainApp.generating) {
                        // When main app is done generating, reset our loading state
                        this.isLoading = false;
                    } else {
                        // Check again in 500ms
                        setTimeout(checkGeneratingState, 500);
                    }
                } else {
                    // If we can't find the main app or its generating state, reset after 10 seconds as a fallback
                    setTimeout(() => {
                        this.isLoading = false;
                    }, 10000);
                }
            };

            // Start checking the generating state
            setTimeout(checkGeneratingState, 500);
        }
    },
    watch: {
        initial(newVal, oldVal) {
            if (newVal !== oldVal) {
                this.previousValue = oldVal;
                this.isUpdated = true;

                // Remove the class after animation completes
                setTimeout(() => {
                    this.isUpdated = false;
                }, 600);
            }
        }
    },
    mounted() {
        this.previousValue = this.initial;
    },
    template: `
    <div class="floating-credit-tracker">
        <div class="floating-credit-content">
            <div class="floating-credit-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                     viewBox="0 0 24 24" fill="none" stroke="currentColor"
                     stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"
                     class="credit-svg premium-icon">
                    <path d="M20 12V8h2a2 2 0 0 0-2-2h-2.18C17.6 4.84
                             16.37 4 15 4c-1.37 0-2.6.84-2.82 2H5c-1.1
                             0-2 .9-2 2v10c0 1.1.9 2 2 2h7"></path>
                    <circle cx="17" cy="17" r="5" class="credit-circle"></circle>
                    <path d="M17 14.5v5" class="credit-line"></path>
                    <path d="M14.5 17h5" class="credit-line"></path>
                </svg>
            </div>
            <div class="floating-credit-details">
                <div class="floating-credit-info">
                    <div class="floating-credit-title">Credits Required</div>
                    <div class="floating-credit-count animated-count premium-text" :class="{ 'updated': isUpdated }">
                        {{ initial }}
                    </div>
                </div>
                <div class="floating-credit-info" v-if="available !== undefined">
                    <div class="floating-credit-title">Available Credits</div>
                    <div class="floating-credit-count available-credits" :class="{'low-credits': available < 5 && available > 0, 'zero-credits': available == 0}">
                        {{ available }}
                    </div>
                </div>
                <div class="floating-credit-info" v-if="planLabel">
                    <div class="floating-credit-title">Plan</div>
                    <div class="floating-credit-plan">
                        {{ planLabel }}
                    </div>
                </div>
            </div>
            <div class="floating-credit-actions">
                <button class="floating-generate-btn" @click="generatePost" :disabled="isLoading">
                    <svg v-if="!isLoading" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <polygon points="5 3 19 12 5 21 5 3"></polygon>
                    </svg>
                    <svg v-if="isLoading" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin">
                        <circle cx="12" cy="12" r="10" stroke-dasharray="32" stroke-dashoffset="16"></circle>
                    </svg>
                    {{ isLoading ? 'Loading...' : 'Generate Post' }}
                </button>
                <a v-if="addCreditUrl" :href="addCreditUrl" class="floating-credit-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M12 5v14M5 12h14"></path>
                    </svg>
                    Add Credits
                </a>
                <a v-if="upgradeUrl && planSlug !== 'pro-ultimate'" :href="upgradeUrl" class="floating-upgrade-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M16 16v-8M8 8v8M12 4v16M20 12H4"></path>
                    </svg>
                    Upgrade
                </a>
            </div>
        </div>
    </div>
    `
};

// Check if we're in a Vue 2 or Vue 3 environment
if (typeof Vue !== 'undefined') {
    if (Vue.createApp) {
        // Vue 3
        if (typeof app !== 'undefined') {
            // If app is already defined, register the component
            app.component('floating-credit-tracker', FloatingCreditTrackerComponent);
        } else {
            // Otherwise, create a new app and register the component
            const app = Vue.createApp({});
            app.component('floating-credit-tracker', FloatingCreditTrackerComponent);
            // Note: You'll need to mount this app to an element
        }
    } else if (Vue.component) {
        // Vue 2
        Vue.component('floating-credit-tracker', FloatingCreditTrackerComponent);
    }
}
