/**
 * Credit Tracker Component
 *
 * This file contains the Vue component for tracking and displaying credit usage.
 * It shows the user's current plan, available credits, and credit usage in a visual format.
 * The component adapts to different Vue versions (2 or 3) and displays appropriate UI based on the user's plan.
 *
 * @package Postomatic
 * @since 1.0.0
 */

const CreditTrackerComponent = {
    props: {
        initial: {type: [Number, String], default: 0},
        available: {type: [Number, String], default: 0},
        planLabel: {type: String, default: ''},
        planSlug: {type: String, default: ''},
        upgradeUrl: {type: String, default: ''},
        addCreditUrl: {type: String, default: ''},
        // Ordered plan slugs (lowest tier first) supplied by PHP.
        planTiers: {
            type: Array,
            default: function () {
                return ['starter', 'basic', 'pro-ultimate'];
            }
        }
    },
    computed: {
        // whether required exceeds available.
        over() {
            return this.initial > this.available;
        },
        // whether available credits are low but not over.
        lowBalance() {
            return !this.over && this.available < 10;
        },
        // % fill for the bar.
        percent() {
            return this.available
                ? Math.min(100, (this.initial / this.available) * 100)
                : 0;
        },
        // text underneath bar.
        usageText() {
            return `${this.initial} of ${this.available} credits used`;
        },
        // plan display name with proper formatting.
        planDisplayName() {
            if (!this.planLabel) return 'Starter';
            // Convert plan label to title case if needed.
            return this.planLabel.charAt(0).toUpperCase() + this.planLabel.slice(1);
        },
        // rank of the current plan inside planTiers; -1 when unknown / 'free'.
        planRank() {
            return this.planTiers.indexOf(String(this.planSlug || '').toLowerCase());
        },
        // determine if user has a premium plan (anything above the entry tier).
        isPremiumPlan() {
            return this.planRank > 0;
        },
        // determine if user is already on the top tier.
        isHighestPlan() {
            return this.planTiers.length > 0 && this.planRank === this.planTiers.length - 1;
        },
        // determine if upgrade button should be shown. Hidden on the top plan,
        // where there is nothing left to upgrade to.
        showUpgradeButton() {
            return Boolean(this.upgradeUrl) && !this.isHighestPlan;
        }
    },
    template: `
    <div class="credit-tracker-new">
      <!-- Plan and Available Credits Section -->
      <div class="plan-info-wrapper">
        <div class="plan-details">
          <div class="plan-label">Current Plan</div>
          <div class="plan-name" 
               :class="{ 'premium-plan': isPremiumPlan }"
               :style="{ overflow: 'visible', whiteSpace: 'nowrap' }">
            {{ planDisplayName }}
          </div>
          <a v-if="showUpgradeButton" :href="upgradeUrl" class="upgrade-plan-btn">
            <span>Upgrade Plan</span>
            <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">
              <line x1="5" y1="12" x2="19" y2="12"></line>
              <polyline points="12 5 19 12 12 19"></polyline>
            </svg>
          </a>
        </div>
        <div class="available-credits">
          <div class="available-label">Available Credits</div>
          <div class="available-count" 
               :class="{ 'low-credits': lowBalance, 'no-credits': over }"
               :style="{ overflow: 'visible', whiteSpace: 'nowrap' }">
            {{ available }}
          </div>
          <a v-if="addCreditUrl" :href="addCreditUrl" class="add-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">
              <circle cx="12" cy="12" r="10"></circle>
              <line x1="12" y1="8" x2="12" y2="16"></line>
              <line x1="8" y1="12" x2="16" y2="12"></line>
            </svg>
            <span>Add Credits</span>
          </a>
        </div>
      </div>

      <!-- Credit Usage Section -->
      <div class="credit-info-wrapper">
        <div class="credit-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"
               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="credit-details">
          <div class="credit-title">Credits Required</div>
          <div class="credit-count animated-count premium-text"
               :style="{ 
                 color: over ? '#dc2626' : (lowBalance ? '#eab308' : 'white'),
                 overflow: 'visible',
                 whiteSpace: 'nowrap'
               }">
            {{ initial }}
          </div>
        </div>
        <div class="credit-usage">
          <!-- usage-bar background colored red if over, yellow if low balance -->
          <div class="usage-bar premium-bar"
               :style="over
                 ? { backgroundColor: '#dc2626' }
                 : (lowBalance ? { backgroundColor: '#eab308' } : {})">
            <div class="usage-fill premium-gradient"
                 :style="Object.assign(
                   { width: percent + '%' },
                   over ? { backgroundColor: '#dc2626' }
                 : (lowBalance ? { backgroundColor: '#eab308' } : {})
               )">
              <div class="usage-glow premium-glow"></div>
              <div class="usage-sparkle"></div>
            </div>
          </div>
          <div class="usage-text fade-in premium-info"
               :style="{ 
                 color: over ? '#dc2626' : (lowBalance ? '#eab308' : 'white'),
                 overflow: 'visible',
                 whiteSpace: 'nowrap'
               }">
            {{ usageText }}
          </div>
        </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('credit-tracker', CreditTrackerComponent);
        } else {
            // Otherwise, create a new app and register the component.
            const app = Vue.createApp({});
            app.component('credit-tracker', CreditTrackerComponent);
            // Note: You'll need to mount this app to an element.
        }
    } else if (Vue.component) {
        // Vue 2.
        Vue.component('credit-tracker', CreditTrackerComponent);
    }
}
