/**
 * Subscription JavaScript file
 *
 * This file handles the subscription functionality for the Postomatic plugin.
 *
 * @package Postomatic
 */

document.addEventListener('DOMContentLoaded', function() {
    // Create Vue app
    const app = Vue.createApp({
        data() {
            return {
                loading: true,
                showNotice: false,
                noticeTitle: '',
                noticeText: '',
                noticeBtnText: '',
                noticeBtnLink: '',
                showVipOverlay: false,
                showBasicOverlay: false,
                plan: 'starter',
                currentPlanState: {
                    has_active_subscription: false,
                    status: 'Inactive'
                },
                currentInitialData: {
                    plan_slug: 'free',
                    plan: 'Free',
                    has_active_subscription: false,
                    ends_date: '',
                    auto_renew: false,
                    credit: 0,
                    manage_subscription_url: null
                },
                remainingDays: 0,
                plans: {
                    'starter': {
                        title: 'Starter',
                        slug: 'starter',
                        price: '0',
                        initial_credit: 10,
                        features: [
                            'Basic Content Generation',
                            'Standard Support',
                            'Limited API Access'
                        ],
                        bonus_percent: 0,
                        url: '#'
                    },
                    'basic': {
                        title: 'Basic',
                        slug: 'basic',
                        price: '9.99',
                        initial_credit: 100,
                        features: [
                            'Advanced Content Generation',
                            'Priority Support',
                            'Full API Access',
                            'Custom Templates'
                        ],
                        bonus_percent: 10,
                        url: '#'
                    },
                    'pro-ultimate': {
                        title: 'Pro Ultimate',
                        slug: 'pro-ultimate',
                        price: '19.99',
                        initial_credit: 250,
                        features: [
                            'Premium Content Generation',
                            'VIP Support',
                            'Unlimited API Access',
                            'Custom Templates',
                            'Advanced Analytics',
                            'White Label Options'
                        ],
                        bonus_percent: 25,
                        url: '#'
                    }
                },
                trustItems: [
                    {
                        title: 'AI-Powered Content',
                        text: 'Generate high-quality content with our advanced AI technology.',
                        icon: '<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg>',
                        link: { text: 'Learn More', url: '#' }
                    },
                    {
                        title: 'Time-Saving',
                        text: 'Save hours of work with automated content generation.',
                        icon: '<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>',
                        link: { text: 'See How', url: '#' }
                    },
                    {
                        title: 'SEO Optimized',
                        text: 'All content is optimized for search engines by default.',
                        icon: '<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>',
                        link: { text: 'SEO Tips', url: '#' }
                    },
                    {
                        title: 'Reliable Support',
                        text: 'Get help whenever you need it with our dedicated support team.',
                        icon: '<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>',
                        link: { text: 'Contact Us', url: '#' }
                    }
                ]
            };
        },
        mounted() {
            // Simulate loading data
            setTimeout(() => {
                this.loading = false;
            }, 1000);
            
            // Show VIP overlay for demo purposes
            setTimeout(() => {
                if (this.plan === 'pro-ultimate' || this.plan === 'starter') {
                    this.showVipOverlay = true;
                } else if (this.plan === 'basic') {
                    this.showBasicOverlay = true;
                }
            }, 2000);
        },
        methods: {
            hideVip() {
                this.showVipOverlay = false;
            },
            hideBasic() {
                this.showBasicOverlay = false;
            },
            hasDiscount(planKey) {
                // Demo function - in real implementation, this would check if there's a discount for the plan
                return planKey === 'pro-ultimate';
            },
            getDiscountPercentage(planKey) {
                // Demo function - in real implementation, this would return the discount percentage
                return planKey === 'pro-ultimate' ? 20 : 0;
            },
            getOriginalPrice(planKey) {
                // Demo function - in real implementation, this would return the original price
                return '$' + this.plans[planKey].price;
            },
            getDiscountedPrice(planKey) {
                // Demo function - in real implementation, this would calculate the discounted price
                const price = parseFloat(this.plans[planKey].price);
                const discount = this.getDiscountPercentage(planKey) / 100;
                return '$' + (price * (1 - discount)).toFixed(2);
            },
            shouldShowSubscribeBtn(planKey) {
                // Demo function - in real implementation, this would determine if the subscribe button should be shown
                return true;
            },
            shouldDisableSubscribeBtn(planKey) {
                // Demo function - in real implementation, this would determine if the subscribe button should be disabled
                return false;
            },
            manageSubscription() {
                // Demo function - in real implementation, this would redirect to the subscription management page
                alert('Redirecting to subscription management page...');
            },
            cancelSubscription() {
                // Demo function - in real implementation, this would handle subscription cancellation
                if (confirm('Are you sure you want to cancel your subscription?')) {
                    alert('Subscription cancelled successfully.');
                }
            }
        }
    });

    // Mount the app
    app.mount('#app');
});