<template>
  <div class="flex flex-col gap-4">
    <PageHeader :title="t('help.title')">
      <template #search>
        <div class="relative">
          <Search :size="15" class="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-zinc-500" />
          <input v-model="query" class="input pl-8" :placeholder="t('help.searchPlaceholder')" />
        </div>
      </template>
    </PageHeader>
    <p class="text-sm text-zinc-400">{{ t('help.intro') }}</p>

    <section v-for="section in filtered" :key="section.id" class="card flex flex-col gap-3">
      <header class="flex items-center gap-2">
        <component :is="iconFor(section.id)" :size="18" class="text-emerald-400" :stroke-width="1.75" />
        <h2 class="text-sm font-semibold text-zinc-100">{{ section.title }}</h2>
      </header>
      <p class="text-xs text-zinc-500">{{ section.blurb }}</p>
      <dl class="flex flex-col gap-2">
        <div v-for="(item, i) in section.items" :key="i" class="card-inset">
          <dt class="text-sm font-medium text-zinc-200">{{ item.title }}</dt>
          <dd class="mt-0.5 text-sm leading-relaxed text-zinc-400">{{ item.body }}</dd>
        </div>
      </dl>
    </section>

    <EmptyState v-if="!filtered.length" :icon="SearchX" :title="t('help.noMatch')" />
  </div>
</template>

<script setup lang="ts">
import { computed, ref, type Component } from 'vue';
import { useI18n } from 'vue-i18n';
import { Boxes, Command, GitBranch, KeyRound, Puzzle, Search, SearchX, Settings, Smartphone, TerminalSquare } from '@lucide/vue';
import type { AppLocale } from '../i18n';
import { helpSections, type HelpSection } from './help-content';
import PageHeader from '../components/layout/PageHeader.vue';
import EmptyState from '../components/ui/EmptyState.vue';

const { t, locale } = useI18n();
const query = ref('');

const ICONS: Record<string, Component> = {
  gettingStarted: KeyRound,
  worktrees: GitBranch,
  sessions: TerminalSquare,
  mobile: Smartphone,
  groups: Boxes,
  productivity: Command,
  settings: Settings,
  integrations: Puzzle,
};
const iconFor = (id: string): Component => ICONS[id] ?? KeyRound;

const sections = computed<HelpSection[]>(() => helpSections[locale.value as AppLocale] ?? helpSections.en);

const filtered = computed<HelpSection[]>(() => {
  const q = query.value.trim().toLowerCase();
  if (!q) return sections.value;
  return sections.value
    .map((s) => {
      const sectionMatches = (s.title + ' ' + s.blurb).toLowerCase().includes(q);
      const items = sectionMatches ? s.items : s.items.filter((it) => (it.title + ' ' + it.body).toLowerCase().includes(q));
      return items.length ? { ...s, items } : null;
    })
    .filter((s): s is HelpSection => s !== null);
});
</script>
