<!--
/**
 * inPIPE Subscription Component - Free Version
 *
 * Clean subscription component with no premium installation complexity.
 * Handles subscription key verification and provides upgrade information for free version.
 *
 * @package InPipe
 * @subpackage Free/Shared
 * @since 1.0.0
 * @since 1.0.2 Updated auto-refresh to use cache-busting URL instead of deprecated reload(true)
 * @author Seresa
 * @license GPL-2.0+
 * @link https://seresa.io
 */
-->

<template>
  <div class="subscription-container">
    <!-- Security Check Failed Message -->
    <div v-if="securityCheckFailed" class="security-warning">
      <inPipeBaseCard>
        <div class="text-center">
          <inPipeBaseText variant="danger" tag="h2">
            {{ $__("common.access_denied", "Access Denied") }}
          </inPipeBaseText>
          <div class="text-group">
            <inPipeBaseText>
              {{ $__("common.permission_error", "You don't have permission to access this component directly.") }}
            </inPipeBaseText>
            <inPipeBaseText>
              {{ $__("common.use_main_interface", "Please use the main application interface.") }}
            </inPipeBaseText>
          </div>
        </div>
      </inPipeBaseCard>
    </div>

    <div v-else class="subscription-content">
      <!-- Header Card -->
      <inPipeBaseCard>
        <div class="text-center">
          <inPipeBaseText variant="title" tag="h2" class="main-title">
            {{ $__("components.subscription.title", "Subscription Management") }}
          </inPipeBaseText>
          <div class="text-group">
            <inPipeBaseText variant="description">
              {{ $__("components.subscription.description", "Manage your Seresa Transmute Engine™ subscription") }}
            </inPipeBaseText>
          </div>
        </div>
      </inPipeBaseCard>

      <!-- Current Status Card -->
      <inPipeBaseCard class="mt-6">
        <div class="status-header">
          <inPipeBaseText variant="title" tag="h3">
            {{ $__("components.subscription.status.title", "Current Status") }}
          </inPipeBaseText>
        </div>

        <div class="status-content">
          <div class="status-badge free">
            <span class="status-icon">📦</span>
            <span class="status-text">
              {{ $__("components.subscription.status.free", "inPIPE Free Version") }}
            </span>
          </div>

          <div class="status-description">
            <inPipeBaseText>
              {{ $__("components.subscription.status.free_description", "You are currently using the free version of inPIPE with basic UTM generation and tracking features.") }}
            </inPipeBaseText>
          </div>

          <div class="features-list">
            <inPipeBaseText variant="title" tag="h4">
              {{ $__("components.subscription.features.included", "Features Included:") }}
            </inPipeBaseText>
            <ul class="feature-items">
              <li class="feature-item">
                <span class="feature-icon">✅</span>
                <span>{{ $__("components.subscription.features.utm_generation", "UTM Parameter Generation") }}</span>
              </li>
              <li class="feature-item">
                <span class="feature-icon">✅</span>
                <span>{{ $__("components.subscription.features.url_encoding", "URL Encoding & Decoding") }}</span>
              </li>
              <li class="feature-item">
                <span class="feature-icon">✅</span>
                <span>{{ $__("components.subscription.features.basic_storage", "Basic UTM Storage") }}</span>
              </li>
              <li class="feature-item">
                <span class="feature-icon">✅</span>
                <span>{{ $__("components.subscription.features.copy_urls", "Copy & Share URLs") }}</span>
              </li>
            </ul>
          </div>
        </div>
      </inPipeBaseCard>

      <!-- Premium Upgrade Information -->
      <inPipeBaseCard class="mt-6">
        <div class="upgrade-header">
          <inPipeBaseText variant="title" tag="h3">
            {{ $__("components.subscription.upgrade.title", "Upgrade to our Premium Transmute Engine™ service for WordPress") }}
          </inPipeBaseText>
          <inPipeBaseText variant="description">
            {{ $__("components.subscription.upgrade.description", "Managed through inPIPE plugin seamlessly send your event data to multiple endpoints like GA4, gAds, Facebook Ads, Klaviyo & Big Query all processed server side for maximum efficiency and reliability. No Google Tag Manager Required!") }}
          </inPipeBaseText>
        </div>

        <div class="upgrade-actions">
          <inPipeBaseButton
            variant="primary"
            @click="handleLearnMore"
            class="upgrade-button"
          >
            <div class="button-content">
              <span class="button-icon">🚀</span>
              <span>{{ $__("components.subscription.upgrade.learn_more", "Learn More") }}</span>
            </div>
          </inPipeBaseButton>

          <inPipeBaseButton
            variant="ghost"
            @click="handleFreeTrial"
            class="upgrade-button"
          >
            <div class="button-content">
              <span class="button-icon">🎁</span>
              <span>{{ $__("components.subscription.upgrade.free_trial", "Free Trial") }}</span>
            </div>
          </inPipeBaseButton>
        </div>
      </inPipeBaseCard>

      <!-- Subscription Key Input (for future premium upgrade) -->
      <inPipeBaseCard class="mt-6">
        <div class="subscription-form-header">
          <inPipeBaseText variant="title" tag="h3">
            {{ $__("components.subscription.activate.title", "Have a Premium Key?") }}
          </inPipeBaseText>
          <inPipeBaseText variant="description">
            {{ $__("components.subscription.activate.description", "Enter your premium subscription key to upgrade") }}
          </inPipeBaseText>
        </div>

        <form @submit.prevent="handleSubscriptionVerification" class="subscription-form">
          <div class="subscription-input-container">
            <label for="subscriptionCode" class="subscription-label">
              {{ $__("components.subscription.activate.key_label", "Premium Subscription Key:") }}
            </label>
            
            <div class="subscription-input-wrapper">
              <inPipeBaseInput
                id="subscriptionCode"
                v-model="subscriptionCode"
                type="text"
                :placeholder="$__('components.subscription.activate.key_placeholder', 'Enter Your Premium Subscription Key')"
                :disabled="isSubmitting"
                class="subscription-input"
              />
              
              <inPipeBaseButton
                type="submit"
                variant="primary"
                :disabled="isSubmitting || !subscriptionCode"
                :loading="isSubmitting"
                class="subscription-button"
              >
                <div class="button-content">
                  <span class="button-icon">🔐</span>
                  <span>
                    {{ isSubmitting
                      ? $__("components.subscription.activate.verifying", "Verifying...")
                      : $__("components.subscription.activate.submit", "Activate Premium")
                    }}
                  </span>
                </div>
              </inPipeBaseButton>
            </div>

            <div v-if="subscriptionError" class="subscription-error">
              <inPipeBaseText variant="danger">
                {{ subscriptionError }}
              </inPipeBaseText>
            </div>
          </div>
        </form>

        <inPipeBaseText variant="description" class="key-format-info">
          {{ $__("components.subscription.activate.format_info", "Premium keys follow the format: SER-xxxxxxxxxxxxxxxx") }}
        </inPipeBaseText>
      </inPipeBaseCard>

      <!-- Success Message -->
      <div v-if="savedMessage" class="mt-6">
        <inPipeBaseCard>
          <div class="saved-message">
            <inPipeBaseText variant="success">
              <span class="success-icon">✅</span>
              {{ verificationSuccessMessage }}
            </inPipeBaseText>
          </div>
        </inPipeBaseCard>
      </div>

      <!-- Support Information -->
      <inPipeBaseCard class="mt-6">
        <div class="support-header">
          <inPipeBaseText variant="title" tag="h3">
            {{ $__("components.subscription.support.title", "Need Help?") }}
          </inPipeBaseText>
        </div>

        <div class="support-content">
          <div class="support-options">
            <div class="support-option">
              <span class="support-icon">📚</span>
              <div class="support-option-content">
                <inPipeBaseText variant="title" tag="h5">
                  {{ $__("components.subscription.support.documentation", "Documentation") }}
                </inPipeBaseText>
                <inPipeBaseText variant="description">
                  {{ $__("components.subscription.support.documentation_desc", "Learn how to use inPIPE features") }}
                </inPipeBaseText>
                <inPipeBaseButton variant="ghost" size="small" @click="openDocumentation">
                  {{ $__("components.subscription.support.view_docs", "View Docs") }}
                </inPipeBaseButton>
              </div>
            </div>

            <div class="support-option">
              <span class="support-icon">🎯</span>
              <div class="support-option-content">
                <inPipeBaseText variant="title" tag="h5">
                  {{ $__("components.subscription.support.tutorials", "Videos") }}
                </inPipeBaseText>
                <inPipeBaseText variant="description">
                  {{ $__("components.subscription.support.tutorials_desc", "Youtube video channel") }}
                </inPipeBaseText>
                <inPipeBaseButton variant="ghost" size="small" @click="openTutorials">
                  {{ $__("components.subscription.support.watch_videos", "Watch Videos") }}
                </inPipeBaseButton>
              </div>
            </div>

            <div class="support-option">
              <span class="support-icon">💌</span>
              <div class="support-option-content">
                <inPipeBaseText variant="title" tag="h5">
                  {{ $__("components.subscription.support.contact", "Contact Support") }}
                </inPipeBaseText>
                <inPipeBaseText variant="description">
                  {{ $__("components.subscription.support.contact_desc", "Get help from our support team") }}
                </inPipeBaseText>
                <inPipeBaseButton variant="ghost" size="small" @click="openSupport">
                  {{ $__("components.subscription.support.get_help", "Get Help") }}
                </inPipeBaseButton>
              </div>
            </div>
          </div>
        </div>
      </inPipeBaseCard>
    </div>
  </div>
</template>

<script setup>
/**
 * Subscription Component Script - Free Version
 * Simple subscription management with no premium installation complexity
 */

import { ref } from "vue";
import { useToast } from "vue-toastification";
import { $__ } from "@utils/inPipeTranslate.js";
import api from "@utils/inPipeAxios.js";
import API_ENDPOINTS, { PARAM_NAMES } from '@utils/inPipeApiEndpoints.js';

// Import clean base components
import inPipeBaseCard from "@base/inPipeBaseCard.vue";
import inPipeBaseText from "@base/inPipeBaseText.vue";
import inPipeBaseButton from "@base/inPipeBaseButton.vue";
import inPipeBaseInput from "@base/inPipeBaseInput.vue";

// Define emits for parent communication
const emit = defineEmits(['subscription-activated']);

// Toast instance
const toast = useToast();

// Security check state
const securityCheckFailed = ref(false);

// Component state - simple reactive variables
const subscriptionCode = ref("");
const isInstalling = ref(false);
const isPremium = ref(false);
const premiumPlan = ref('');
const premiumExpires = ref('');
const justUpgraded = ref(false);
const isSubmitting = ref(false);
const subscriptionError = ref("");
const savedMessage = ref(false);
const verificationSuccessMessage = ref("");

// Subscription code validation pattern
const SUBSCRIPTION_CODE_PATTERN = /^SER-[a-f0-9]{16}$/;

/**
 * Perform security check
 * 
 * @return {boolean} True if security check passes
 * @since 1.0.0
 */
const performSecurityCheck = () => {
  if (!window.inPipeData) {
    securityCheckFailed.value = true;
    return false;
  }
  return true;
};

/**
 * Check if subscription code is valid format
 * 
 * @return {boolean} True if valid format
 * @since 1.0.0
 * @since 1.0.3 Added trim() to strip leading/trailing whitespace
 */
const isValidSubscriptionCode = () => {
  return SUBSCRIPTION_CODE_PATTERN.test(subscriptionCode.value.trim());
};

/**
 * Show saved message temporarily
 * 
 * @param {string} message - Message to display
 * @since 1.0.0
 */
const showSavedMessage = (message) => {
  verificationSuccessMessage.value = message || $__("components.subscription.notifications.verification_success", "Subscription verified successfully!");
  savedMessage.value = true;
  setTimeout(() => {
    savedMessage.value = false;
  }, 5000);
};

/**
 * Handle subscription verification
 * Note: In free version, this primarily validates the key format and provides feedback
 * Actual premium activation happens at server level with full /dist replacement
 *
 * @since 1.0.0
 * @since 1.0.3 Added trim() to strip leading/trailing whitespace from subscription code input
 */
const handleSubscriptionVerification = async () => {
  // DEBUG_START
  console.log('[inPipe Subscription] Starting subscription verification');
  console.log('[inPipe Subscription] Subscription code:', subscriptionCode.value);
  // DEBUG_END

  subscriptionError.value = "";

  // Trim whitespace from input
  subscriptionCode.value = subscriptionCode.value.trim();

  // Basic validation
  if (!subscriptionCode.value) {
    subscriptionError.value = $__("components.subscription.validation.key_required", "Please enter a subscription code.");
    toast.warning(subscriptionError.value);
    return;
  }

  if (!isValidSubscriptionCode()) {
    subscriptionError.value = $__("components.subscription.validation.key_invalid", "Invalid subscription code format. Please check your key.");
    toast.warning(subscriptionError.value);
    return;
  }

  isSubmitting.value = true;
  toast.info($__("components.subscription.notifications.checking_status", "Verifying subscription code..."));

  try {
    // DEBUG_START
    console.log('[inPipe Subscription] Sending verification request');
    console.log('[inPipe Subscription] API endpoint:', API_ENDPOINTS.SUBSCRIPTION_VERIFY);
    // DEBUG_END

    const response = await api.post(API_ENDPOINTS.SUBSCRIPTION_VERIFY, {
      [PARAM_NAMES.SUBSCRIPTION_CODE]: subscriptionCode.value,
    });
    
    // DEBUG_START
    console.log('[inPipe Subscription] Verification response:', response.data);
    // DEBUG_END

    if (!response.data || !response.data.success) {
      throw new Error(
        response.data?.message || $__("components.subscription.errors.VERIFICATION_FAILED", "Failed to verify subscription code.")
      );
    }

    // Show success message
    showSavedMessage($__("components.subscription.notifications.verification_success", "Subscription code verified successfully! Your premium features will be activated shortly."));
    
    // Emit to parent
    emit('subscription-activated', {
      subscriptionCode: subscriptionCode.value,
      status: 'verified'
    });

    // DEBUG_START
    console.log("Subscription Activated Emitted");
    // DEBUG_END

    // Automatically trigger premium installation
    await triggerPremiumInstallation();

    // Clear the form
    subscriptionCode.value = "";
    
    // Note: In the new architecture, actual premium activation happens via server-side
    // /dist replacement. The free app doesn't handle the installation process.
    
  } catch (error) {
    // DEBUG_START
    console.error('[inPipe Subscription] Verification error:', error);
    console.error('[inPipe Subscription] Error response:', error.response?.data);
    // DEBUG_END
    
    // Handle specific error types
    const errorResponse = error.response?.data;
    let errorMessage = '';
    
    if (errorResponse) {
      errorMessage = errorResponse.message || error.message;
      
      // Domain authentication errors
      if (errorMessage.includes('domain')) {
        const fullErrorMessage = $__("components.subscription.errors.DOMAIN_ERROR_FULL", "Subscription key is not authorized for this domain. Please check that you're using the correct subscription key for this website.");
        const toastErrorMessage = $__("components.subscription.errors.DOMAIN_ERROR_SHORT", "Subscription key is not authorized for this domain.");
        
        toast.error(toastErrorMessage);
        subscriptionError.value = fullErrorMessage;
        return;
      }
      
      // Rate limit errors
      if (errorMessage.includes('429') || errorResponse.status === 429 || errorResponse?.code === 429) {
        const fullErrorMessage = $__("components.subscription.errors.RATE_LIMIT_ERROR_FULL", "Subscription verification is rate limited. Please try again later or contact support at support@seresa.io.");
        const toastErrorMessage = $__("components.subscription.errors.RATE_LIMIT_ERROR_SHORT", "Rate limit reached. Please try again later or contact support.");
        
        toast.error(toastErrorMessage);
        subscriptionError.value = fullErrorMessage;
        return;
      }
    } else {
      errorMessage = error.message || $__("components.subscription.errors.UNEXPECTED_ERROR", "An unexpected error occurred during verification.");
    }
    
    toast.error(errorMessage);
    subscriptionError.value = errorMessage;
  } finally {
    isSubmitting.value = false;
  }
};

/**
 * Handle learn more button click
 *
 * @since 1.0.0
 * @since 1.0.2 Updated to new Transmute Engine URL
 */
const handleLearnMore = () => {
  // DEBUG_START
  console.log("[inPipe Subscription] Learn more clicked");
  // DEBUG_END

  window.open("https://seresa.io/transmute-engine-by-seresa", "_blank");
};

/**
 * Handle free trial button click
 *
 * @since 1.0.0
 * @since 1.0.2 Updated to new free trial URL
 */
const handleFreeTrial = () => {
  // DEBUG_START
  console.log("[inPipe Subscription] Free trial clicked");
  // DEBUG_END

  window.open("https://seresa.io/transmute-engine-free-trial", "_blank");
};

/**
 * Open documentation
 *
 * @since 1.0.0
 * @since 1.0.2 Updated to new support URL
 */
const openDocumentation = () => {
  window.open("https://support.seresa.io", "_blank");
};

/**
 * Open tutorials
 *
 * @since 1.0.0
 * @since 1.0.2 Updated to YouTube channel URL
 */
const openTutorials = () => {
  window.open("https://www.youtube.com/@Seresa8", "_blank");
};

/**
 * Open support
 *
 * @since 1.0.0
 * @since 1.0.2 Updated to new support URL
 */
const openSupport = () => {
  window.open("https://support.seresa.io", "_blank");
};

// Lifecycle hooks
import { onBeforeMount } from "vue";

onBeforeMount(async () => {
  performSecurityCheck();
  await checkPremiumStatus(); // Check premium status on load
});

// Function to check premium status (NEW)
const checkPremiumStatus = async () => {
  try {
    const response = await api.get(API_ENDPOINTS.PREMIUM_STATUS);
    
    if (response.data?.success && response.data?.data) {
      const premiumData = response.data.data;
      
      isPremium.value = premiumData.is_premium || false;
      premiumPlan.value = premiumData.plan || '';
      premiumExpires.value = premiumData.expires || '';
      
      // Check for post-upgrade success indicators
      const premiumSuccess = window.sessionStorage.getItem('inpipe_premium_success');
      const cleanupCompleted = window.sessionStorage.getItem('inpipe_cleanup_completed');
      
      if (isPremium.value && premiumSuccess) {
        justUpgraded.value = true;
        
        // Clean up session flags
        window.sessionStorage.removeItem('inpipe_premium_success');
        window.sessionStorage.removeItem('inpipe_cleanup_completed');
        
        // Show success message with cleanup status
        setTimeout(() => {
          const message = cleanupCompleted === 'true' 
            ? '🎉 Welcome to inPIPE Premium! Your premium features are optimized and ready to use.'
            : '🎉 Welcome to inPIPE Premium! Your premium features are now active.';
          
          toast.success(message);
        }, 500);
      }
    }
  } catch (error) {
    // Silently ignore in production. UI will default to non-premium state if status check fails.
    // DEBUG_START
    console.error('Failed to check premium status:', error);
    // DEBUG_END
  }
};

/**
 * Trigger premium installation after subscription verification
 *
 * Handles the complete premium installation flow including file replacement,
 * cleanup, and automatic page refresh with cache-busting to display new features.
 *
 * @since 1.0.0
 * @since 1.0.2 Updated to use cache-busting URL for hard refresh instead of deprecated reload(true)
 * @return {Promise<void>}
 */
const triggerPremiumInstallation = async () => {
  isInstalling.value = true;
  
  try {
    toast.info($__("components.subscription.notifications.installing", "Installing premium features..."));
    
    const installResponse = await api.post(API_ENDPOINTS.PREMIUM_INSTALL);
    
    if (installResponse.data?.success) {
      const responseData = installResponse.data.data || {};
      
      if (responseData.safe_to_refresh && responseData.require_refresh) {
        // Premium installation and cleanup successful
        const message = responseData.cleanup_triggered 
          ? $__("components.subscription.notifications.install_success_optimized", "Premium features installed and optimized! Refreshing interface...")
          : $__("components.subscription.notifications.install_success", "Premium features installed successfully! Refreshing interface...");
        
        toast.success(message);
        
        // Set success flags for post-refresh detection
        window.sessionStorage.setItem('inpipe_premium_success', 'true');
        window.sessionStorage.setItem('inpipe_cleanup_completed', responseData.cleanup_triggered ? 'true' : 'false');
        
        // Refresh with slight delay for user feedback
        setTimeout(() => {
          // Use cache-busting URL to force browser to fetch fresh HTML with new asset URLs
          // This ensures premium CSS/JS loads correctly without requiring manual hard refresh
          const url = new URL(window.location.href);
          url.searchParams.set('_inpipe_refresh', Date.now());
          window.location.href = url.toString();
        }, 2000);
        
      } else {
        // Success but no refresh needed (should ideally not happen with current backend logic but good to have a path)
        toast.success($__("components.subscription.notifications.install_complete", "Premium features activated successfully!"));
        await checkPremiumStatus();
      }
      
    } else {
      // Handle different failure scenarios from backend
      const responseData = installResponse.data?.data || {}; // Ensure data object exists
      
      if (responseData.restored && responseData.safe_state) {
        // Installation failed but safely restored
        toast.warning($__("components.subscription.errors.INSTALL_FAILED_RESTORED", 
          "Premium installation encountered an issue but your site has been safely restored. Please try again."));
      } else if (responseData.critical_error) {
        // Critical error requiring support
        toast.error($__("components.subscription.errors.CRITICAL_ERROR", 
          "Critical installation error occurred. Please contact support."));
      } else {
        // Generic failure from API (success: false, but no specific error code)
        throw new Error(installResponse.data?.message || $__("components.subscription.errors.INSTALL_FAILED_GENERIC", "Installation failed. Please check logs or contact support."));
      }
    }
    
  } catch (error) {
    // DEBUG_START
    console.error('Premium installation error:', error);
    // DEBUG_END
    
    // This catch block handles network errors or errors thrown from the success:false block above
    const errorMessage = error.response?.data?.message || 
                        error.message || 
                        $__("components.subscription.errors.INSTALL_FAILED", "Failed to install premium features. Please try again or contact support.");
    
    toast.error(errorMessage);
    
    // Consider if auto-refresh is desired for all error types or only specific ones (e.g. 500 errors)
    // The provided spec has a condition: error.response?.status >= 500 || !error.response
    if (error.response?.status >= 500 || !error.response) {
        // DEBUG_START
        console.log('[inPipe Subscription] Network or server error during installation, suggesting refresh.');
        // DEBUG_END
        // Optionally add a specific toast message for this scenario before reload
        setTimeout(() => {
            // Use cache-busting URL to check if installation completed on server
            const url = new URL(window.location.href);
            url.searchParams.set('_inpipe_refresh', Date.now());
            window.location.href = url.toString();
        }, 3000);
    }
    
  } finally {
    isInstalling.value = false;
  }
};
</script>

<style scoped>
/**
 * Subscription Component Styles
 * Clean styling for free version with emphasis on upgrade options
 */

.subscription-container {
  max-width: 900px;
  margin: 0 auto;
}

.subscription-content {
  space-y: 1.5rem;
}

.text-center {
  text-align: center;
}

.main-title {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.text-group {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.status-header {
  margin-bottom: 1.5rem;
}

.status-content {
  space-y: 1.5rem;
}

.status-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
}

.status-badge.free {
  background-color: #eff6ff;
  border: 1px solid #3b82f6;
  color: #1e40af;
}

.status-icon {
  font-size: 1.5rem;
}

.status-text {
  font-size: 1.125rem;
}

.status-description {
  padding: 1rem;
  background-color: #f9fafb;
  border-radius: 0.5rem;
}

.features-list {
  padding: 1rem;
  background-color: #f0fdf4;
  border: 1px solid #16a34a;
  border-radius: 0.5rem;
}

.feature-items {
  list-style: none;
  margin: 0.75rem 0 0 0;
  padding: 0;
  space-y: 0.5rem;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.feature-icon {
  font-size: 1rem;
}

.upgrade-header {
  margin-bottom: 1.5rem;
  text-align: center;
}

.trial-link {
  color: #2563eb;
  text-decoration: underline;
  margin-left: 0.25rem;
}

.trial-link:hover {
  color: #1d4ed8;
}

.premium-features {
  space-y: 2rem;
}

.premium-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.premium-feature {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background-color: #fafafa;
}

.premium-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.premium-feature-content {
  space-y: 0.5rem;
}

.upgrade-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.5rem;
  background-color: #f8fafc;
  border-radius: 0.5rem;
}

.upgrade-button,
.contact-button {
  min-width: 200px;
}

.button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.button-icon {
  font-size: 1rem;
}

.subscription-form-header {
  margin-bottom: 1.5rem;
}

.subscription-form {
  space-y: 1rem;
}

.subscription-input-container {
  space-y: 0.75rem;
}

.subscription-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.subscription-input-wrapper {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.subscription-input {
  flex: 1;
  min-width: 250px;
}

.subscription-button {
  flex-shrink: 0;
}

.subscription-error {
  padding: 0.75rem;
  background-color: #fef2f2;
  border: 1px solid #ef4444;
  border-radius: 0.5rem;
}

.key-format-info {
  margin-top: 1rem;
  padding: 1rem;
  background-color: #f3f4f6;
  border-radius: 0.5rem;
  width: auto;
}

.saved-message {
  padding: 1rem;
  background-color: #d1fae5;
  border: 1px solid #059669;
  border-radius: 0.5rem;
  text-align: center;
}

.success-icon {
  margin-right: 0.5rem;
}

.support-header {
  margin-bottom: 1.5rem;
}

.support-content {
  space-y: 1rem;
}

.support-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.support-option {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background-color: #ffffff;
}

.support-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.support-option-content {
  space-y: 0.5rem;
  flex: 1;
}

.security-warning {
  padding: 2rem;
}

/* Responsive design */
@media (max-width: 768px) {
  .premium-features-grid {
    grid-template-columns: 1fr;
  }
  
  .upgrade-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .subscription-input-wrapper {
    flex-direction: column;
  }
  
  .subscription-input {
    min-width: auto;
  }
  
  .support-options {
    grid-template-columns: 1fr;
  }
}

/* Utility classes */
.mt-6 { margin-top: 1.5rem; }
</style>