<script setup>
import { motion } from 'motion-v'
import { ArrowRight, FileText, HelpCircle, PhoneCall, Search, Shield } from 'lucide-vue-next'
import { buildHelpPageSeo, useHelpContent } from '~/content/help'
import { buildPublicSeoLinks } from '~/utils/public-seo'

definePageMeta({
  siteHeaderTheme: 'dark',
  siteHeaderOverlay: true,
})

const helpContent = useHelpContent()
const helpContentPage = computed(() => helpContent.helpContentPage.value)
const helpTopicLinks = computed(() => helpContent.helpTopicLinks.value)
const helpUi = computed(() => helpContent.helpUi.value)

const helpCategoryIcons = {
  'file-text': FileText,
  'phone-call': PhoneCall,
  shield: Shield,
}

const categories = computed(() => helpContent.helpCategories.value.map((category) => ({
  ...category,
  icon: helpCategoryIcons[category.iconKey] || HelpCircle,
})))

const searchQuery = ref('')
const runtimeConfig = useRuntimeConfig()
const pageOrigin = computed(() => String(runtimeConfig.public.siteBaseUrl || '').replace(/\/+$/, ''))
const helpPageSeo = computed(() => buildHelpPageSeo(helpContentPage.value, pageOrigin.value))

const popularArticles = computed(() => {
  if (!searchQuery.value.trim()) {
    return helpTopicLinks.value
  }

  const query = searchQuery.value.trim().toLowerCase()
  return helpTopicLinks.value.filter((article) => article.title.toLowerCase().includes(query))
})

useSeoMeta({
  title: () => helpPageSeo.value.title,
  description: () => helpPageSeo.value.description,
  ogTitle: () => helpPageSeo.value.ogTitle,
  ogDescription: () => helpPageSeo.value.ogDescription,
  ogImage: () => helpPageSeo.value.ogImage || undefined,
  robots: () => helpPageSeo.value.robots,
})

useHead(() => ({
  link: buildPublicSeoLinks(helpPageSeo.value),
}))
</script>

<template>
  <div class="min-h-screen font-sans text-slate-900 pb-24 relative flex flex-col">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 mt-6 w-full">
      <div class="bg-slate-900 text-white pt-16 pb-24 px-4 sm:px-6 relative overflow-hidden rounded-[2.5rem] shadow-2xl">
        <div class="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_top_right,_var(--tw-gradient-stops))] from-brand-orange via-slate-900 to-slate-900" />

        <div class="max-w-4xl mx-auto text-center relative z-10">
          <motion.h1
            :initial="{ opacity: 0, y: 20 }"
            :animate="{ opacity: 1, y: 0 }"
            class="text-4xl md:text-6xl font-black uppercase tracking-tight mb-6"
          >
            {{ helpContentPage.title }}
          </motion.h1>

          <motion.p
            :initial="{ opacity: 0, y: 20 }"
            :animate="{ opacity: 1, y: 0 }"
            :transition="{ delay: 0.1 }"
            class="text-lg text-slate-300 mb-10 max-w-2xl mx-auto"
          >
            {{ helpContentPage.excerpt }}
          </motion.p>

          <motion.div
            :initial="{ opacity: 0, y: 20 }"
            :animate="{ opacity: 1, y: 0 }"
            :transition="{ delay: 0.2 }"
            class="relative max-w-2xl mx-auto"
          >
            <div class="absolute inset-y-0 left-4 flex items-center pointer-events-none">
              <Search class="w-5 h-5 text-slate-400" />
            </div>
            <input
              v-model="searchQuery"
              type="text"
              :placeholder="helpUi.searchPlaceholder"
              class="w-full pl-12 pr-4 py-4 rounded-xl bg-white/10 border border-white/20 text-white placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:border-transparent backdrop-blur-sm transition-all"
            >
          </motion.div>
        </div>
      </div>
    </div>

    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 -mt-10 relative z-20 w-full">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
        <motion.div
          v-for="(category, index) in categories"
          :key="category.title"
          :initial="{ opacity: 0, y: 20 }"
          :animate="{ opacity: 1, y: 0 }"
          :transition="{ delay: 0.1 * index }"
        >
          <NuxtLink :to="category.link" class="block h-full bg-white rounded-2xl p-6 shadow-sm hover:shadow-md transition-all group">
            <div class="w-12 h-12 bg-slate-50 text-slate-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-brand-orange group-hover:text-white transition-colors">
              <component :is="category.icon" class="w-6 h-6" />
            </div>
            <h3 class="text-lg font-bold text-slate-900 mb-2">{{ category.title }}</h3>
            <p class="text-sm text-slate-600 leading-relaxed">{{ category.description }}</p>
          </NuxtLink>
        </motion.div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
        <div class="lg:col-span-2">
          <h2 class="text-2xl font-black uppercase tracking-tight text-slate-900 mb-6">{{ helpUi.articlesHeading }}</h2>
          <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
            <div
              v-if="popularArticles.length === 0"
              class="p-6 text-slate-500"
            >
              {{ helpUi.emptySearchState }}
            </div>
            <NuxtLink
              v-for="article in popularArticles"
              :key="article.title"
              :to="article.link"
              class="flex items-center justify-between p-4 sm:p-6 hover:bg-slate-50 transition-colors group"
            >
              <div class="flex items-center gap-4">
                <HelpCircle class="w-5 h-5 text-slate-400 group-hover:text-brand-orange transition-colors" />
                <span class="font-medium text-slate-700 group-hover:text-slate-900 transition-colors">{{ article.title }}</span>
              </div>
              <ArrowRight class="w-4 h-4 text-slate-300 group-hover:text-brand-orange group-hover:translate-x-1 transition-all" />
            </NuxtLink>
          </div>
        </div>

        <div>
          <div class="bg-slate-900 rounded-2xl p-8 text-white text-center">
            <div class="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-6">
              <PhoneCall class="w-8 h-8 text-brand-orange" />
            </div>
            <h3 class="text-xl font-bold mb-4">{{ helpUi.supportTitle }}</h3>
            <p class="text-slate-300 text-sm mb-8 leading-relaxed">
              {{ helpUi.supportDescription }}
            </p>
            <NuxtLink
              :to="helpUi.supportCtaUrl"
              class="inline-block w-full bg-brand-orange text-white font-bold py-3 px-6 rounded-xl hover:bg-white hover:text-slate-900 transition-colors"
            >
              {{ helpUi.supportCtaLabel }}
            </NuxtLink>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
