<script setup lang="ts">
import { __ } from '@wordpress/i18n'
import {
  getI18n,
} from '@/helper'
import { Header } from '@/apps/partials'
import { getSavetoWishlistObj, savetoWishlistSiteURL } from '@/config'

// Helper function to get UTM URL (similar to PHP helper)
const getUtmUrl = (urlPath: string, utmSource: string = 'stwlite', utmMedium: string = 'action', utmCampaign: string = 'default') => {
  const siteUrl = savetoWishlistSiteURL
  const baseUrl = siteUrl.endsWith('/') ? siteUrl : siteUrl + '/'
  const fullUrl = baseUrl + urlPath

  // Get installed_by option if available
  const utmContent = getSavetoWishlistObj?.stwInstalledBy || false

  const params = new URLSearchParams({
    utm_source: utmSource,
    utm_medium: utmMedium,
    utm_campaign: utmCampaign,
  })

  if (utmContent) {
    params.append('utm_content', utmContent)
  }

  return `${fullUrl}?${params.toString()}`
}

const infoData = {
  title: getI18n('title', __('Help & Support', 'saveto-wishlist-lite-for-woocommerce')),
  description: getI18n('description', __('Get help and support for SaveTo Wishlist for WooCommerce.', 'saveto-wishlist-lite-for-woocommerce')),
}
</script>

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

  <!-- Main Help 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">

    <!-- Help Resources Grid -->
    <div class="stwlite-tw-grid stwlite-tw-grid-cols-1 lg:stwlite-tw-grid-cols-2 stwlite-tw-gap-8">

      <!-- Knowledge Base -->
      <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-border stwlite-tw-border-gray-200 stwlite-tw-p-8 hover:stwlite-tw-shadow-lg stwlite-tw-transition-shadow">
        <div class="stwlite-tw-space-y-4">
          <h3 class="stwlite-tw-text-xl stwlite-tw-font-semibold stwlite-tw-text-gray-900">
            {{ getI18n('knowledge_base', __('Knowledge Base', 'saveto-wishlist-lite-for-woocommerce')) }}
          </h3>
          <p class="stwlite-tw-text-gray-600 stwlite-tw-leading-relaxed">
            {{ getI18n('knowledge_base_description', __('Access our self-service help documentation via the Knowledge Base. You\'ll find answers and solutions for a wide range of well known situations. You\'ll also find a Getting Started guide here for the plugin.', 'saveto-wishlist-lite-for-woocommerce')) }}
          </p>
          <a
            :href="getUtmUrl('knowledge-base', 'stwlite', 'helppage', 'helppageopenkbbutton')"
            target="_blank"
            class="stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-px-6 stwlite-tw-py-3 stwlite-tw-border stwlite-tw-border-transparent stwlite-tw-text-base 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 stwlite-tw-no-underline hover:stwlite-tw-text-white"
          >
            {{ getI18n('open_knowledge_base', __('Open Knowledge Base', 'saveto-wishlist-lite-for-woocommerce')) }}
          </a>
        </div>
      </div>

      <!-- WordPress.org Forums -->
      <div class="stwlite-tw-bg-white stwlite-tw-rounded-lg stwlite-tw-border stwlite-tw-border-gray-200 stwlite-tw-p-8 hover:stwlite-tw-shadow-lg stwlite-tw-transition-shadow">
        <div class="stwlite-tw-space-y-4">
          <h3 class="stwlite-tw-text-xl stwlite-tw-font-semibold stwlite-tw-text-gray-900">
            {{ getI18n('forums', __('Free Version WordPress.org Help Forums', 'saveto-wishlist-lite-for-woocommerce')) }}
          </h3>
          <p class="stwlite-tw-text-gray-600 stwlite-tw-leading-relaxed">
            {{ getI18n('forums_description', __('Our support staff regularly check and help our free users at the official plugin WordPress.org help forums. Submit a post there with your question and we\'ll get back to you as soon as possible.', 'saveto-wishlist-lite-for-woocommerce')) }}
          </p>
          <a
            href="https://wordpress.org/support/plugin/saveto-wishlist-lite-for-woocommerce/"
            target="_blank"
            class="stwlite-tw-inline-flex stwlite-tw-items-center stwlite-tw-px-6 stwlite-tw-py-3 stwlite-tw-border stwlite-tw-border-transparent stwlite-tw-text-base stwlite-tw-font-medium stwlite-tw-rounded-md stwlite-tw-text-white stwlite-tw-bg-green-600 hover:stwlite-tw-bg-green-700 focus:stwlite-tw-outline-none focus:stwlite-tw-ring-2 focus:stwlite-tw-ring-offset-2 focus:stwlite-tw-ring-green-500 stwlite-tw-transition-colors stwlite-tw-no-underline hover:stwlite-tw-text-white"
          >
            {{ getI18n('visit_forums', __('Visit WordPress.org Forums', 'saveto-wishlist-lite-for-woocommerce')) }}
          </a>
        </div>
      </div>

    </div>

  </div>
</template>

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