<script setup lang="ts">
import { ref, computed } from 'vue'
import { __ } from '@wordpress/i18n'
import {
  getI18n,
  triggerActionRequest,
} from '@/helper'
import { Header } from '@/apps/partials'

const savetoWishlistObj = window.savetowishlistObj
const teamPhotoUrl = computed(() => `${savetoWishlistObj?.pluginDirUrl}assets/images/rymera-team.svg`)
const pluginStatuses = ref(savetoWishlistObj?.pluginStatuses || {})

const installingPlugin = ref<string>('')

const infoData = {
  title: getI18n('title', __( 'About SaveTo Wishlist', 'saveto-wishlist-lite-for-woocommerce' )),
  description: getI18n('description', __( 'Hello and welcome to SaveTo Wishlist, the most popular wishlist solution for WooCommerce.', 'saveto-wishlist-lite-for-woocommerce' )),
}

const getPluginStatusText = (pluginKey: string) => {
  return pluginStatuses.value[pluginKey as keyof typeof pluginStatuses.value]
    ? getI18n('installed', __( 'Installed', 'saveto-wishlist-lite-for-woocommerce' ))
    : getI18n('not_installed', __( 'Not installed', 'saveto-wishlist-lite-for-woocommerce' ))
}

const getPluginIconUrl = (pluginSlug: string) => {
  if (savetoWishlistObj?.pluginLogos?.[pluginSlug]) {
    return savetoWishlistObj.pluginLogos[pluginSlug]
  }
  return `${savetoWishlistObj?.pluginDirUrl}assets/images/plugin-icons/${pluginSlug}.png`
}

const installPlugin = async (pluginSlug: string, abbSlug: string) => {
  installingPlugin.value = pluginSlug
  
  try {
    const response = await triggerActionRequest({
      action: 'install_plugin',
      plugin_slug: pluginSlug,
    })

    installingPlugin.value = ''

    if (response.type === 'success') {
      pluginStatuses.value[abbSlug] = true
    }
  } catch (error) {
    console.error('Failed to install plugin:', error)
    installingPlugin.value = ''
  }
}
</script>

<template>
  <Header :infoData="infoData" />

  <!-- Main About Content -->
  <div class="stwlite-tw-max-w-7xl stwlite-tw-mx-auto stwlite-tw-px-4 sm:stwlite-tw-px-6 lg:stwlite-tw-px-8 stwlite-tw-py-8 stwlite-tw-space-y-12">

    <!-- About Rymera Web Co Section -->
    <div class="stwlite-tw-grid stwlite-tw-grid-cols-1 lg:stwlite-tw-grid-cols-2 stwlite-tw-gap-8 stwlite-tw-items-center">
      <div class="stwlite-tw-space-y-4">
        <h3 class="stwlite-tw-text-2xl stwlite-tw-font-bold stwlite-tw-text-gray-900">
          {{ getI18n('about_the_makers', __( 'About The Makers - Rymera Web Co', 'saveto-wishlist-lite-for-woocommerce' )) }}
        </h3>
        <p class="stwlite-tw-text-gray-600 stwlite-tw-leading-relaxed">
          {{ getI18n('about_the_makers_description', __( 'Over the years we\'ve worked with thousands of smart store owners that were frustrated by having separate workflows for wishlists between their online WooCommerce stores.', 'saveto-wishlist-lite-for-woocommerce' )) }}
        </p>
        <p class="stwlite-tw-text-gray-600 stwlite-tw-leading-relaxed">
          {{ getI18n('about_the_makers_description_2', __( 'That\'s why we decided to make SaveTo Wishlist - a state of the art solution focused suite of plugins that make it easy to manage wishlists alongside your existing WooCommerce store.', 'saveto-wishlist-lite-for-woocommerce' )) }}
        </p>
        <p class="stwlite-tw-text-gray-600 stwlite-tw-leading-relaxed">
          {{ getI18n('about_the_makers_description_3', __( 'SaveTo Wishlist is brought to you by the same team that\'s behind the best coupon feature plugin for WooCommerce, Advanced Coupons and the best wholesale solution for WooCommerce, Wholesale Suite. We\'ve also been in the WordPress space for over a decade.', 'saveto-wishlist-lite-for-woocommerce' )) }}
        </p>
        <p class="stwlite-tw-text-gray-600 stwlite-tw-leading-relaxed">
          {{ getI18n('about_the_makers_description_4', __( 'We\'re thrilled you\'re using our tool and invite you to try our other tools as well.', 'saveto-wishlist-lite-for-woocommerce' )) }}
        </p>
      </div>
      <div class="stwlite-tw-text-center">
        <img
          id="stww-team-photo"
          :src="teamPhotoUrl"
          :alt="getI18n('save_to_wishlist', __( 'SaveTo Wishlist', 'saveto-wishlist-lite-for-woocommerce' ))"
          class="stwlite-tw-w-full stwlite-tw-rounded-lg stwlite-tw-shadow-lg"
        />
      </div>
    </div>

    <!-- Plugin Sections Container -->
    <div class="stwlite-tw-space-y-8">
      <!-- First Row: Advanced Coupons & Wholesale Suite -->
      <div class="stwlite-tw-grid stwlite-tw-grid-cols-1 lg:stwlite-tw-grid-cols-2 stwlite-tw-gap-8">
        <!-- Advanced Coupons -->
        <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-border stwlite-tw-border-gray-200 stwlite-tw-p-6 hover:stwlite-tw-shadow-lg stwlite-tw-transition-shadow">
          <div class="stwlite-tw-flex stwlite-tw-items-start stwlite-tw-space-x-4">
            <img
              :src="getPluginIconUrl('acfwf')"
              :alt="getI18n('plugin_names.acfwf', __( 'Advanced Coupons', 'saveto-wishlist-lite-for-woocommerce' ))"
              class="stwlite-tw-w-9 stwlite-tw-h-9 stwlite-tw-rounded"
            />
            <div class="stwlite-tw-flex-1">
              <h4 class="stwlite-tw-text-lg stwlite-tw-font-semibold stwlite-tw-text-gray-900 stwlite-tw-mt-0 stwlite-tw-mb-2">
                {{ getI18n('plugin_names.acfwf', __( 'Advanced Coupons for WooCommerce (Free Plugin)', 'saveto-wishlist-lite-for-woocommerce' )) }}
              </h4>
              <p class="stwlite-tw-text-gray-600 stwlite-tw-text-sm stwlite-tw-leading-relaxed stwlite-tw-mb-4">
                {{ getI18n('plugin_descriptions.acfwf', __( 'Extends your coupon features so you can market your store better. Adds cart conditions (coupon rules), buy one get one (BOGO) deals, url coupons, coupon categories and loads more. Install this free plugin.', 'saveto-wishlist-lite-for-woocommerce' )) }}
              </p>
              <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between">
                <div class="stwlite-tw-text-sm">
                  <span class="stwlite-tw-font-medium stwlite-tw-text-gray-900">{{ getI18n('status', __( 'Status:', 'saveto-wishlist-lite-for-woocommerce' )) }}</span>
                  <span
                    :class="pluginStatuses.acfwf ? 'text-green-600' : 'text-red-600'"
                    class="stwlite-tw-ml-1"
                  >
                    {{ getPluginStatusText('acfwf') }}
                  </span>
                </div>
                <button
                  v-if="!pluginStatuses.acfwf"
                  @click="installPlugin('advanced-coupons-for-woocommerce-free', 'acfwf')"
                  class="stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-px-4 stwlite-tw-py-2 stwlite-tw-border stwlite-tw-border-transparent stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-rounded-md stwlite-tw-text-white stwlite-tw-bg-blue-600 hover:stwlite-tw-bg-blue-700 focus:stwlite-tw-outline-none focus:stwlite-tw-ring-2 focus:stwlite-tw-ring-offset-2 focus:stwlite-tw-ring-blue-500 stwlite-tw-transition-colors"
                  :disabled="installingPlugin !== ''"
                >
                  {{ installingPlugin === 'advanced-coupons-for-woocommerce-free' ? getI18n('installing', __( 'Installing...', 'saveto-wishlist-lite-for-woocommerce' )) : getI18n('install_plugin', __( 'Install Plugin', 'saveto-wishlist-lite-for-woocommerce' )) }}
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Wholesale Suite -->
        <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-border stwlite-tw-border-gray-200 stwlite-tw-p-6 hover:stwlite-tw-shadow-lg stwlite-tw-transition-shadow">
          <div class="stwlite-tw-flex stwlite-tw-items-start stwlite-tw-space-x-4">
            <img
              :src="getPluginIconUrl('wwp')"
              :alt="getI18n('plugin_names.wwp', __( 'Wholesale Suite', 'saveto-wishlist-lite-for-woocommerce' ))"
              class="stwlite-tw-w-9 stwlite-tw-h-9 stwlite-tw-rounded"
            />
            <div class="stwlite-tw-flex-1">
              <h4 class="stwlite-tw-text-lg stwlite-tw-font-semibold stwlite-tw-text-gray-900 stwlite-tw-mt-0 stwlite-tw-mb-2">
                {{ getI18n('plugin_names.wwp', __( 'Wholesale Suite (Free Plugin)', 'saveto-wishlist-lite-for-woocommerce' )) }}
              </h4>
              <p class="stwlite-tw-text-gray-600 stwlite-tw-text-sm stwlite-tw-leading-relaxed stwlite-tw-mb-4">
                {{ getI18n('plugin_descriptions.wwp', __( 'Selling to wholesale in WooCommerce requires a full strategy, that\'s why we made the Wholesale Suite bundle. Advanced wholesale pricing, tax, shipping mapping, payment gateway mapping, an optimized form and a wholesale registration.', 'saveto-wishlist-lite-for-woocommerce' )) }}
              </p>
              <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between">
                <div class="stwlite-tw-text-sm">
                  <span class="stwlite-tw-font-medium stwlite-tw-text-gray-900">{{ getI18n('status', __( 'Status:', 'saveto-wishlist-lite-for-woocommerce' )) }}</span>
                  <span
                    :class="pluginStatuses.wwp ? 'text-green-600' : 'text-red-600'"
                    class="stwlite-tw-ml-1"
                  >
                    {{ getPluginStatusText('wwp') }}
                  </span>
                </div>
                <button
                  v-if="!pluginStatuses.wwp"
                  @click="installPlugin('woocommerce-wholesale-prices', 'wwp')"
                  class="stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-px-4 stwlite-tw-py-2 stwlite-tw-border stwlite-tw-border-transparent stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-rounded-md stwlite-tw-text-white stwlite-tw-bg-blue-600 hover:stwlite-tw-bg-blue-700 focus:stwlite-tw-outline-none focus:stwlite-tw-ring-2 focus:stwlite-tw-ring-offset-2 focus:stwlite-tw-ring-blue-500 stwlite-tw-transition-colors"
                  :disabled="installingPlugin !== ''"
                >
                  {{ installingPlugin === 'woocommerce-wholesale-prices' ? getI18n('installing', __( 'Installing...', 'saveto-wishlist-lite-for-woocommerce' )) : getI18n('install_plugin', __( 'Install Plugin', 'saveto-wishlist-lite-for-woocommerce' )) }}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Second Row: StoreAgent AI & Product Feed Pro -->
      <div class="stwlite-tw-grid stwlite-tw-grid-cols-1 lg:stwlite-tw-grid-cols-2 stwlite-tw-gap-8">
        <!-- StoreAgent AI -->
        <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-border stwlite-tw-border-gray-200 stwlite-tw-p-6 hover:stwlite-tw-shadow-lg stwlite-tw-transition-shadow">
          <div class="stwlite-tw-flex stwlite-tw-items-start stwlite-tw-space-x-4">
            <img
              :src="getPluginIconUrl('storeagent')"
              :alt="getI18n('plugin_names.storeagent', __( 'StoreAgent AI', 'saveto-wishlist-lite-for-woocommerce' ))"
              class="stwlite-tw-w-9 stwlite-tw-h-9 stwlite-tw-rounded"
            />
            <div class="stwlite-tw-flex-1">
              <h4 class="stwlite-tw-text-lg stwlite-tw-font-semibold stwlite-tw-text-gray-900 stwlite-tw-mt-0 stwlite-tw-mb-2">
                {{ getI18n('plugin_names.storeagent', __( 'StoreAgent AI for WooCommerce (Free Plugin)', 'saveto-wishlist-lite-for-woocommerce' )) }}
              </h4>
              <p class="stwlite-tw-text-gray-600 stwlite-tw-text-sm stwlite-tw-leading-relaxed stwlite-tw-mb-4">
                {{ getI18n('plugin_descriptions.storeagent', __( 'Get AI Agents for WooCommerce with StoreAgent.ai, the free AI-powered plugin designed to automate tasks, personalize customer interactions, and optimize your eCommerce operations.', 'saveto-wishlist-lite-for-woocommerce' )) }}
              </p>
              <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between">
                <div class="stwlite-tw-text-sm">
                  <span class="stwlite-tw-font-medium stwlite-tw-text-gray-900">{{ getI18n('status', __( 'Status:', 'saveto-wishlist-lite-for-woocommerce' )) }}</span>
                  <span
                    :class="pluginStatuses.storeagent ? 'text-green-600' : 'text-red-600'"
                    class="stwlite-tw-ml-1"
                  >
                    {{ getPluginStatusText('storeagent') }}
                  </span>
                </div>
                <button
                  v-if="!pluginStatuses.storeagent"
                  @click="installPlugin('storeagent-ai-for-woocommerce', 'storeagent')"
                  class="stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-px-4 stwlite-tw-py-2 stwlite-tw-border stwlite-tw-border-transparent stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-rounded-md stwlite-tw-text-white stwlite-tw-bg-blue-600 hover:stwlite-tw-bg-blue-700 focus:stwlite-tw-outline-none focus:stwlite-tw-ring-2 focus:stwlite-tw-ring-offset-2 focus:stwlite-tw-ring-blue-500 stwlite-tw-transition-colors"
                  :disabled="installingPlugin !== ''"
                >
                  {{ installingPlugin === 'storeagent-ai-for-woocommerce' ? getI18n('installing', __( 'Installing...', 'saveto-wishlist-lite-for-woocommerce' )) : getI18n('install_plugin', __( 'Install Plugin', 'saveto-wishlist-lite-for-woocommerce' )) }}
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Product Feed Pro -->
        <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-border stwlite-tw-border-gray-200 stwlite-tw-p-6 hover:stwlite-tw-shadow-lg stwlite-tw-transition-shadow">
          <div class="stwlite-tw-flex stwlite-tw-items-start stwlite-tw-space-x-4">
            <img
              :src="getPluginIconUrl('adtribes')"
              :alt="getI18n('plugin_names.adtribes', __( 'Product Feed Pro', 'saveto-wishlist-lite-for-woocommerce' ))"
              class="stwlite-tw-w-9 stwlite-tw-h-9 stwlite-tw-rounded"
            />
            <div class="stwlite-tw-flex-1">
              <h4 class="stwlite-tw-text-lg stwlite-tw-font-semibold stwlite-tw-text-gray-900 stwlite-tw-mt-0 stwlite-tw-mb-2">
                {{ getI18n('plugin_names.adtribes', __( 'Product Feed Pro (Free Plugin)', 'saveto-wishlist-lite-for-woocommerce' )) }}
              </h4>
              <p class="stwlite-tw-text-gray-600 stwlite-tw-text-sm stwlite-tw-leading-relaxed stwlite-tw-mb-4">
                {{ getI18n('plugin_descriptions.adtribes', __( 'Helps you generate and manage product feeds for various marketing channels, such as Google Shopping, Facebook, and more, to optimize your eCommerce store\'s visibility and sales.', 'saveto-wishlist-lite-for-woocommerce' )) }}
              </p>
              <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between">
                <div class="stwlite-tw-text-sm">
                  <span class="stwlite-tw-font-medium stwlite-tw-text-gray-900">{{ getI18n('status', __( 'Status:', 'saveto-wishlist-lite-for-woocommerce' )) }}</span>
                  <span
                    :class="pluginStatuses.adtribes ? 'text-green-600' : 'text-red-600'"
                    class="stwlite-tw-ml-1"
                  >
                    {{ getPluginStatusText('adtribes') }}
                  </span>
                </div>
                <button
                  v-if="!pluginStatuses.adtribes"
                  @click="installPlugin('woo-product-feed-pro', 'adtribes')"
                  class="stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-px-4 stwlite-tw-py-2 stwlite-tw-border stwlite-tw-border-transparent stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-rounded-md stwlite-tw-text-white stwlite-tw-bg-blue-600 hover:stwlite-tw-bg-blue-700 focus:stwlite-tw-outline-none focus:stwlite-tw-ring-2 focus:stwlite-tw-ring-offset-2 focus:stwlite-tw-ring-blue-500 stwlite-tw-transition-colors"
                  :disabled="installingPlugin !== ''"
                >
                  {{ installingPlugin === 'woo-product-feed-pro' ? getI18n('installing', __( 'Installing...', 'saveto-wishlist-lite-for-woocommerce' )) : getI18n('install_plugin', __( 'Install Plugin', 'saveto-wishlist-lite-for-woocommerce' )) }}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Third Row: WC Vendors & Invoice Gateway -->
      <div class="stwlite-tw-grid stwlite-tw-grid-cols-1 lg:stwlite-tw-grid-cols-2 stwlite-tw-gap-8">
        <!-- WC Vendors -->
        <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-border stwlite-tw-border-gray-200 stwlite-tw-p-6 hover:stwlite-tw-shadow-lg stwlite-tw-transition-shadow">
          <div class="stwlite-tw-flex stwlite-tw-items-start stwlite-tw-space-x-4">
            <img
              :src="getPluginIconUrl('wcvendors')"
              :alt="getI18n('plugin_names.wcvendors', __( 'WC Vendors Marketplace', 'saveto-wishlist-lite-for-woocommerce' ))"
              class="stwlite-tw-w-9 stwlite-tw-h-9 stwlite-tw-rounded"
            />
            <div class="stwlite-tw-flex-1">
              <h4 class="stwlite-tw-text-lg stwlite-tw-font-semibold stwlite-tw-text-gray-900 stwlite-tw-mt-0 stwlite-tw-mb-2">
                {{ getI18n('plugin_names.wcvendors', __( 'WC Vendors (Free Plugin)', 'saveto-wishlist-lite-for-woocommerce' )) }}
              </h4>
              <p class="stwlite-tw-text-gray-600 stwlite-tw-text-sm stwlite-tw-leading-relaxed stwlite-tw-mb-4">
                {{ getI18n('plugin_descriptions.wcvendors', __( 'Easiest way to create your multivendor marketplace and earn commission from every sale. Create a WooCommerce marketplace with multi-seller, product vendor & multi vendor commissions.', 'saveto-wishlist-lite-for-woocommerce' )) }}
              </p>
              <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between">
                <div class="stwlite-tw-text-sm">
                  <span class="stwlite-tw-font-medium stwlite-tw-text-gray-900">{{ getI18n('status', __( 'Status:', 'saveto-wishlist-lite-for-woocommerce' )) }}</span>
                  <span
                    :class="pluginStatuses.wcvendors ? 'text-green-600' : 'text-red-600'"
                    class="stwlite-tw-ml-1"
                  >
                    {{ getPluginStatusText('wcvendors') }}
                  </span>
                </div>
                <button
                  v-if="!pluginStatuses.wcvendors"
                  @click="installPlugin('wc-vendors', 'wcvendors')"
                  class="stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-px-4 stwlite-tw-py-2 stwlite-tw-border stwlite-tw-border-transparent stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-rounded-md stwlite-tw-text-white stwlite-tw-bg-blue-600 hover:stwlite-tw-bg-blue-700 focus:stwlite-tw-outline-none focus:stwlite-tw-ring-2 focus:stwlite-tw-ring-offset-2 focus:stwlite-tw-ring-blue-500 stwlite-tw-transition-colors"
                  :disabled="installingPlugin !== ''"
                >
                  {{ installingPlugin === 'wc-vendors' ? getI18n('installing', __( 'Installing...', 'saveto-wishlist-lite-for-woocommerce' )) : getI18n('install_plugin', __( 'Install Plugin', 'saveto-wishlist-lite-for-woocommerce' )) }}
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Invoice Gateway -->
        <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-border stwlite-tw-border-gray-200 stwlite-tw-p-6 hover:stwlite-tw-shadow-lg stwlite-tw-transition-shadow">
          <div class="stwlite-tw-flex stwlite-tw-items-start stwlite-tw-space-x-4">
            <img
              :src="getPluginIconUrl('invoiceGateway')"
              :alt="getI18n('plugin_names.invoiceGateway', __( 'Invoice Gateway for WooCommerce', 'saveto-wishlist-lite-for-woocommerce' ))"
              class="stwlite-tw-w-9 stwlite-tw-h-9 stwlite-tw-rounded"
            />
            <div class="stwlite-tw-flex-1">
              <h4 class="stwlite-tw-text-lg stwlite-tw-font-semibold stwlite-tw-text-gray-900 stwlite-tw-mt-0 stwlite-tw-mb-2">
                {{ getI18n('plugin_names.invoiceGateway', __( 'Invoice Gateway for WooCommerce (Free Plugin)', 'saveto-wishlist-lite-for-woocommerce' )) }}
              </h4>
              <p class="stwlite-tw-text-gray-600 stwlite-tw-text-sm stwlite-tw-leading-relaxed stwlite-tw-mb-4">
                {{ getI18n('plugin_descriptions.invoiceGateway', __( 'Accept orders via a special invoice payment gateway method which lets your customer enter their order without upfront payment. Then just issue an invoice from your accounting system and paste in the number.', 'saveto-wishlist-lite-for-woocommerce' )) }}
              </p>
              <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between">
                <div class="stwlite-tw-text-sm">
                  <span class="stwlite-tw-font-medium stwlite-tw-text-gray-900">{{ getI18n('status', __( 'Status:', 'saveto-wishlist-lite-for-woocommerce' )) }}</span>
                  <span
                    :class="pluginStatuses.invoiceGateway ? 'text-green-600' : 'text-red-600'"
                    class="stwlite-tw-ml-1"
                  >
                    {{ getPluginStatusText('invoiceGateway') }}
                  </span>
                </div>
                <button
                  v-if="!pluginStatuses.invoiceGateway"
                  @click="installPlugin('invoice-gateway-for-woocommerce', 'invoiceGateway')"
                  class="stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-px-4 stwlite-tw-py-2 stwlite-tw-border stwlite-tw-border-transparent stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-rounded-md stwlite-tw-text-white stwlite-tw-bg-blue-600 hover:stwlite-tw-bg-blue-700 focus:stwlite-tw-outline-none focus:stwlite-tw-ring-2 focus:stwlite-tw-ring-offset-2 focus:stwlite-tw-ring-blue-500 stwlite-tw-transition-colors"
                  :disabled="installingPlugin !== ''"
                >
                  {{ installingPlugin === 'invoice-gateway-for-woocommerce' ? getI18n('installing', __( 'Installing...', 'saveto-wishlist-lite-for-woocommerce' )) : getI18n('install_plugin', __( 'Install Plugin', 'saveto-wishlist-lite-for-woocommerce' )) }}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Fourth Row: Store Toolkit & Store Exporter -->
      <div class="stwlite-tw-grid stwlite-tw-grid-cols-1 lg:stwlite-tw-grid-cols-2 stwlite-tw-gap-8">
        <!-- Store Toolkit -->
        <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-border stwlite-tw-border-gray-200 stwlite-tw-p-6 hover:stwlite-tw-shadow-lg stwlite-tw-transition-shadow">
          <div class="stwlite-tw-flex stwlite-tw-items-start stwlite-tw-space-x-4">
            <img
              :src="getPluginIconUrl('storeToolkit')"
              :alt="getI18n('plugin_names.storeToolkit', __( 'Store Toolkit', 'saveto-wishlist-lite-for-woocommerce' ))"
              class="stwlite-tw-w-9 stwlite-tw-h-9 stwlite-tw-rounded"
            />
            <div class="stwlite-tw-flex-1">
              <h4 class="stwlite-tw-text-lg stwlite-tw-font-semibold stwlite-tw-text-gray-900 stwlite-tw-mt-0 stwlite-tw-mb-2">
                {{ getI18n('plugin_names.storeToolkit', __( 'Store Toolkit for WooCommerce (Free Plugin)', 'saveto-wishlist-lite-for-woocommerce' )) }}
              </h4>
              <p class="stwlite-tw-text-gray-600 stwlite-tw-text-sm stwlite-tw-leading-relaxed stwlite-tw-mb-4">
                {{ getI18n('plugin_descriptions.storeToolkit', __( 'A growing set of commonly-used WooCommerce admin tools such as deleting WooCommerce data in bulk, such as products, orders, coupons, and customers. It also adds extra small features, order filtering, and more.', 'saveto-wishlist-lite-for-woocommerce' )) }}
              </p>
              <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between">
                <div class="stwlite-tw-text-sm">
                  <span class="stwlite-tw-font-medium stwlite-tw-text-gray-900">{{ getI18n('status', __( 'Status:', 'saveto-wishlist-lite-for-woocommerce' )) }}</span>
                  <span
                    :class="pluginStatuses.storeToolkit ? 'text-green-600' : 'text-red-600'"
                    class="stwlite-tw-ml-1"
                  >
                    {{ getPluginStatusText('storeToolkit') }}
                  </span>
                </div>
                <button
                  v-if="!pluginStatuses.storeToolkit"
                  @click="installPlugin('woocommerce-store-toolkit', 'storeToolkit')"
                  class="stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-px-4 stwlite-tw-py-2 stwlite-tw-border stwlite-tw-border-transparent stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-rounded-md stwlite-tw-text-white stwlite-tw-bg-blue-600 hover:stwlite-tw-bg-blue-700 focus:stwlite-tw-outline-none focus:stwlite-tw-ring-2 focus:stwlite-tw-ring-offset-2 focus:stwlite-tw-ring-blue-500 stwlite-tw-transition-colors"
                  :disabled="installingPlugin !== ''"
                >
                  {{ installingPlugin === 'woocommerce-store-toolkit' ? getI18n('installing', __( 'Installing...', 'saveto-wishlist-lite-for-woocommerce' )) : getI18n('install_plugin', __( 'Install Plugin', 'saveto-wishlist-lite-for-woocommerce' )) }}
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Store Exporter -->
        <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-border stwlite-tw-border-gray-200 stwlite-tw-p-6 hover:stwlite-tw-shadow-lg stwlite-tw-transition-shadow">
          <div class="stwlite-tw-flex stwlite-tw-items-start stwlite-tw-space-x-4">
            <img
              :src="getPluginIconUrl('storeExporter')"
              :alt="getI18n('plugin_names.storeExporter', __( 'Store Exporter for WooCommerce', 'saveto-wishlist-lite-for-woocommerce' ))"
              class="stwlite-tw-w-9 stwlite-tw-h-9 stwlite-tw-rounded"
            />
            <div class="stwlite-tw-flex-1">
              <h4 class="stwlite-tw-text-lg stwlite-tw-font-semibold stwlite-tw-text-gray-900 stwlite-tw-mt-0 stwlite-tw-mb-2">
                {{ getI18n('plugin_names.storeExporter', __( 'Store Exporter for WooCommerce (Free Plugin)', 'saveto-wishlist-lite-for-woocommerce' )) }}
              </h4>
              <p class="stwlite-tw-text-gray-600 stwlite-tw-text-sm stwlite-tw-leading-relaxed stwlite-tw-mb-4">
                {{ getI18n('plugin_descriptions.storeExporter', __( 'Easily export Orders, Subscriptions, Coupons, Products, Categories, Tags to a variety of formats. The deluxe version also adds scheduled exporting for easy reporting and syncing with other systems.', 'saveto-wishlist-lite-for-woocommerce' )) }}
              </p>
              <div class="stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-between">
                <div class="stwlite-tw-text-sm">
                  <span class="stwlite-tw-font-medium stwlite-tw-text-gray-900">{{ getI18n('status', __( 'Status:', 'saveto-wishlist-lite-for-woocommerce' )) }}</span>
                  <span
                    :class="pluginStatuses.storeExporter ? 'text-green-600' : 'text-red-600'"
                    class="stwlite-tw-ml-1"
                  >
                    {{ getPluginStatusText('storeExporter') }}
                  </span>
                </div>
                <button
                  v-if="!pluginStatuses.storeExporter"
                  @click="installPlugin('woocommerce-exporter', 'storeExporter')"
                  class="stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-px-4 stwlite-tw-py-2 stwlite-tw-border stwlite-tw-border-transparent stwlite-tw-text-sm stwlite-tw-font-medium stwlite-tw-rounded-md stwlite-tw-text-white stwlite-tw-bg-blue-600 hover:stwlite-tw-bg-blue-700 focus:stwlite-tw-outline-none focus:stwlite-tw-ring-2 focus:stwlite-tw-ring-offset-2 focus:stwlite-tw-ring-blue-500 stwlite-tw-transition-colors"
                  :disabled="installingPlugin !== ''"
                >
                  {{ installingPlugin === 'woocommerce-exporter' ? getI18n('installing', __( 'Installing...', 'saveto-wishlist-lite-for-woocommerce' )) : getI18n('install_plugin', __( 'Install Plugin', 'saveto-wishlist-lite-for-woocommerce' )) }}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
</style>

