<template>
  <div class="max-w-4xl mx-auto">
    <div class="mb-6 mt-6">
      <h1 class="text-3xl font-bold text-gray-900 m-0">Help & Guide</h1>
      <p class="text-gray-600 mt-2">Quick pointers to get the most out of Zeno Chatbot.</p>
    </div>

    <div class="space-y-3">
      <!-- Accordion Item: Why this plugin -->
      <section class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
        <button
          class="w-full flex items-center justify-between px-5 py-4 text-left select-none focus:outline-none focus:ring-2 focus:ring-primary-500"
          @click="toggle('why')"
          :aria-expanded="isOpen('why')"
        >
          <div class="flex items-center gap-3">
            <AppIcon name="question-line" size="md" class="text-primary-600" />
            <h3 class="text-base font-semibold text-gray-800 m-0">Why Zeno Chatbot</h3>
          </div>
          <AppIcon :name="isOpen('why') ? 'arrow-up-s-line' : 'arrow-down-s-line'" size="md" class="text-gray-500" />
        </button>
        <div v-show="isOpen('why')" class="px-6 pt-2 pb-5 text-[15px]">
          <ul class="list-disc pl-5 space-y-2 text-gray-700">
            <li>Answers visitor questions using your WordPress content and optional external docs.</li>
            <li>Reduces support load with instant, 24/7 assistance.</li>
            <li>Easy to set up and designed to fit most WordPress themes.</li>
          </ul>
        </div>
      </section>

      <!-- Accordion Item: How to Use -->
      <section class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
        <button
          class="w-full flex items-center justify-between px-5 py-4 text-left select-none focus:outline-none focus:ring-2 focus:ring-primary-500"
          @click="toggle('how')"
          :aria-expanded="isOpen('how')"
        >
          <div class="flex items-center gap-3">
            <AppIcon name="guide-line" size="md" class="text-primary-600" />
            <h3 class="text-base font-semibold text-gray-800 m-0">How to Use</h3>
          </div>
          <AppIcon :name="isOpen('how') ? 'arrow-up-s-line' : 'arrow-down-s-line'" size="md" class="text-gray-500" />
        </button>
        <div v-show="isOpen('how')" class="px-6 pt-2 pb-5 text-[15px]">
          <ol class="list-decimal pl-5 space-y-2 text-gray-700">
            <li>Go to Settings → choose your AI provider (OpenAI or Gemini).</li>
            <li>Add your API key and save.</li>
            <li>Select what content to include and optionally add external reference URLs.</li>
            <li>Enable the floating chat widget.</li>
            <li>Visit your site and start chatting with the assistant.</li>
          </ol>
        </div>
      </section>

      <!-- Accordion Item: How it Helps -->
      <section class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
        <button
          class="w-full flex items-center justify-between px-5 py-4 text-left select-none focus:outline-none focus:ring-2 focus:ring-primary-500"
          @click="toggle('helps')"
          :aria-expanded="isOpen('helps')"
        >
          <div class="flex items-center gap-3">
            <AppIcon name="sparkling-line" size="md" class="text-primary-600" />
            <h3 class="text-base font-semibold text-gray-800 m-0">How it Helps</h3>
          </div>
          <AppIcon :name="isOpen('helps') ? 'arrow-up-s-line' : 'arrow-down-s-line'" size="md" class="text-gray-500" />
        </button>
        <div v-show="isOpen('helps')" class="px-6 pt-2 pb-5 text-[15px]">
          <ul class="list-disc pl-5 space-y-2 text-gray-700">
            <li>Provides contextual answers grounded in your site content.</li>
            <li>Improves response speed and visitor satisfaction.</li>
            <li>Optional chat history and analytics help you understand user needs.</li>
          </ul>
        </div>
      </section>

      <!-- Accordion Item: Set up LLM & API Key -->
      <section class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
        <button
          class="w-full flex items-center justify-between px-5 py-4 text-left select-none focus:outline-none focus:ring-2 focus:ring-primary-500"
          @click="toggle('llm')"
          :aria-expanded="isOpen('llm')"
        >
          <div class="flex items-center gap-3">
            <AppIcon name="settings-3-line" size="md" class="text-primary-600" />
            <h3 class="text-base font-semibold text-gray-800 m-0">Set up LLM & API Key</h3>
          </div>
          <AppIcon :name="isOpen('llm') ? 'arrow-up-s-line' : 'arrow-down-s-line'" size="md" class="text-gray-500" />
        </button>
        <div v-show="isOpen('llm')" class="px-6 pt-2 pb-5 text-[15px]">
          <div class="space-y-3 text-gray-700">
            <p>
              Supported providers: <strong>OpenAI</strong> and <strong>Google Gemini</strong>.
            </p>
            <ul class="list-disc pl-5 space-y-1">
              <li>OpenAI: create an API key in your OpenAI account dashboard and paste it into LLM Settings.</li>
              <li>Gemini: get an API key from Google AI Studio and paste it into LLM Settings.</li>
            </ul>
            <p class="text-sm text-gray-500">Your API keys are stored securely. Only your selected provider receives prompts.</p>
          </div>
        </div>
      </section>

      <!-- Accordion Item: Options at a Glance -->
      <section class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
        <button
          class="w-full flex items-center justify-between px-5 py-4 text-left select-none focus:outline-none focus:ring-2 focus:ring-primary-500"
          @click="toggle('options')"
          :aria-expanded="isOpen('options')"
        >
          <div class="flex items-center gap-3">
            <AppIcon name="list-check-3" size="md" class="text-primary-600" />
            <h3 class="text-base font-semibold text-gray-800 m-0">Options at a Glance</h3>
          </div>
          <AppIcon :name="isOpen('options') ? 'arrow-up-s-line' : 'arrow-down-s-line'" size="md" class="text-gray-500" />
        </button>
        <div v-show="isOpen('options')" class="px-6 pt-2 pb-5 text-[15px]">
          <div class="grid md:grid-cols-2 grid-cols-1 gap-6 text-gray-700">
            <div>
              <h4 class="font-semibold text-gray-800 mb-2">General</h4>
              <ul class="list-disc pl-5 space-y-1">
                <li>Widget enable/disable and appearance basics.</li>
                <li>Site name and assistant persona.</li>
              </ul>
            </div>
            <div>
              <h4 class="font-semibold text-gray-800 mb-2">LLM</h4>
              <ul class="list-disc pl-5 space-y-1">
                <li>Provider selection (OpenAI or Gemini).</li>
                <li>API key and model options.</li>
              </ul>
            </div>
            <div>
              <h4 class="font-semibold text-gray-800 mb-2">Chat</h4>
              <ul class="list-disc pl-5 space-y-1">
                <li>Welcome message and tone.</li>
                <li>History and analytics preferences.</li>
              </ul>
            </div>
            <div>
              <h4 class="font-semibold text-gray-800 mb-2">Data Source</h4>
              <ul class="list-disc pl-5 space-y-1">
                <li>Select post types (posts/pages) to index.</li>
                <li>Add external reference URLs for extra context.</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <!-- Accordion Item: Credits -->
      <section class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
        <button
          class="w-full flex items-center justify-between px-5 py-4 text-left select-none focus:outline-none focus:ring-2 focus:ring-primary-500"
          @click="toggle('credits')"
          :aria-expanded="isOpen('credits')"
        >
          <div class="flex items-center gap-3">
            <AppIcon name="information-line" size="md" class="text-primary-600" />
            <h3 class="text-base font-semibold text-gray-800 m-0">Credits</h3>
          </div>
          <AppIcon :name="isOpen('credits') ? 'arrow-up-s-line' : 'arrow-down-s-line'" size="md" class="text-gray-500" />
        </button>
        <div v-show="isOpen('credits')" class="px-6 pt-2 pb-5 text-[15px]">
          <div class="grid md:grid-cols-2 grid-cols-1 gap-6 text-gray-700">
            <div>
              <h4 class="font-semibold text-gray-800 mb-2">Technology</h4>
              <ul class="list-disc pl-5 space-y-1">
                <li>WordPress & PHP</li>
                <li>Vue 3 & Vite</li>
                <li>Tailwind CSS</li>
                <li>Iconify (Remix Icons)</li>
              </ul>
            </div>
            <div>
              <h4 class="font-semibold text-gray-800 mb-2">People</h4>
              <ul class="list-disc pl-5 space-y-1">
                <li>
                    <a href="https://profiles.wordpress.org/r_mizan/" target="_blank" class="text-blue-600 hover:underline">
                        Mizanur Rahman
                    </a>
                </li>
                <li>
                    <a href="https://profiles.wordpress.org/arcith/" target="_blank" class="text-blue-600 hover:underline">
                        Angristan
                    </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
import AppIcon from '@/Admin/Components/Icon.vue'
import { reactive } from 'vue'

const state = reactive({ open: new Set(['why']) })

const toggle = (key) => {
  if (state.open.has(key)) {
    state.open.delete(key)
  } else {
    // allow multiple open; if single-open desired, clear before adding
    state.open.add(key)
  }
}

const isOpen = (key) => state.open.has(key)
</script>
