<template>
  <Teleport to="body">
    <section v-if="open" class="help-center glass-panel" :style="{ left: `${position.x}px`, top: `${position.y}px` }">
      <header class="help-header" @pointerdown="startDrag">
        <div>
          <span class="eyebrow">ONLINE HELP</span>
          <h3>POSHManager Help Library</h3>
        </div>
        <button class="modal-close" type="button" @click="$emit('close')">x</button>
      </header>

      <div class="help-toolbar">
        <label>
          <Search :size="15" />
          <input :value="query" placeholder="Search operations, API, PSADT, cmdlets..." @input="$emit('search', $event.target.value, activeCategory)" />
        </label>
        <select v-model="activeCategory" @change="$emit('search', query, activeCategory)">
          <option value="">All categories</option>
          <option v-for="category in categories" :key="category" :value="category">{{ category }}</option>
        </select>
      </div>

      <div class="help-body">
        <aside class="help-results">
          <button
            v-for="article in articles"
            :key="article.id"
            :class="{ active: article.id === selectedArticle?.id }"
            type="button"
            @click="$emit('select', article.id)"
          >
            <span>{{ article.category }}</span>
            <strong>{{ article.title }}</strong>
            <small>{{ article.summary }}</small>
          </button>
          <p v-if="!articles.length" class="widget-empty">No help articles match the current search.</p>
        </aside>

        <main class="help-article">
          <div v-if="loading" class="widget-empty">Loading help...</div>
          <template v-else-if="selectedArticle">
            <span class="eyebrow">{{ selectedArticle.category }}</span>
            <h4>{{ selectedArticle.title }}</h4>
            <p>{{ selectedArticle.summary }}</p>
            <article v-for="part in selectedArticle.sections" :key="part.heading">
              <h5>{{ part.heading }}</h5>
              <p v-for="line in part.body" :key="line">{{ line }}</p>
              <pre v-if="part.code"><code>{{ part.code }}</code></pre>
            </article>
            <div class="help-tags">
              <span v-for="tag in selectedArticle.tags" :key="tag">{{ tag }}</span>
            </div>
          </template>
          <div v-else class="widget-empty">Choose an article to start.</div>
        </main>
      </div>
    </section>
  </Teleport>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { Search } from '@lucide/vue';

defineProps({
  open: { type: Boolean, default: false },
  articles: { type: Array, default: () => [] },
  categories: { type: Array, default: () => [] },
  selectedArticle: { type: Object, default: null },
  query: { type: String, default: '' },
  loading: { type: Boolean, default: false }
});

defineEmits(['close', 'search', 'select']);

const activeCategory = ref('');
const position = reactive({ x: 300, y: 88 });
const drag = reactive({ active: false, offsetX: 0, offsetY: 0 });

function startDrag(event) {
  if (event.target.closest('button')) return;
  drag.active = true;
  drag.offsetX = event.clientX - position.x;
  drag.offsetY = event.clientY - position.y;
  window.addEventListener('pointermove', moveDrag);
  window.addEventListener('pointerup', stopDrag, { once: true });
}

function moveDrag(event) {
  if (!drag.active) return;
  const width = Math.min(window.innerWidth - 24, 980);
  const height = Math.min(window.innerHeight - 24, 760);
  position.x = Math.max(12, Math.min(window.innerWidth - width - 12, event.clientX - drag.offsetX));
  position.y = Math.max(12, Math.min(window.innerHeight - height - 12, event.clientY - drag.offsetY));
}

function stopDrag() {
  drag.active = false;
  window.removeEventListener('pointermove', moveDrag);
}
</script>
