<script setup lang="ts">
import { EditorBlock } from "@enesis/editor"
import { ref } from "vue"

const slashContent = ref(`Start typing / to see the slash command menu.

You can insert headings, formatting, blocks, and references through the menu.`)

const mentionContent =
  ref(`Type double square brackets to search for page references.

Type double parentheses to search for block references.

Type a hash sign to search for tags.`)
</script>

<template>
  <UPage>
    <UPageHeader
      title="Suggestion Menu"
      description="Slash commands, page references, block references, and tag completions."
    />

    <UPageBody>
      <div class="space-y-8">
        <section class="space-y-4">
          <p class="text-sm text-muted leading-relaxed">
            Each <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">EditorBlock</code> manages its own <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">EditorSuggestionMenu</code> instance.
            The menu appears automatically when trigger characters are typed.
          </p>

          <div class="rounded-lg border border-default dark:bg-neutral-950/50 p-4 sm:p-8 rounded-t-md">
            <div class="p-4 border-b border-default">
              <h3 class="text-sm font-semibold text-highlighted mb-1">Slash Commands</h3>
              <p class="text-xs text-muted">Type <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">/</code> to open headings, formatting, blocks, and insert options.</p>
            </div>
            <div class="p-4">
              <EditorBlock v-model:content="slashContent" :focused="true" cursor-position="end" marker-mode="always-visible" />
            </div>
          </div>

          <div class="rounded-lg border border-default dark:bg-neutral-950/50 p-4 sm:p-8 rounded-t-md">
            <div class="p-4 border-b border-default">
              <h3 class="text-sm font-semibold text-highlighted mb-1">References & Tags</h3>
              <p class="text-xs text-muted">
                <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">[[</code> page references,
                <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">((</code> block references,
                <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">#</code> tag suggestions.
              </p>
            </div>
            <div class="p-4">
              <EditorBlock v-model:content="mentionContent" :focused="true" cursor-position="end" marker-mode="always-visible" />
              </div>
          </div>
        </section>

        <section class="space-y-4">
          <h2 class="text-lg font-semibold text-highlighted">Built-in Triggers</h2>
          <div class="rounded-lg border border-default overflow-hidden">
            <table class="w-full border-separate border-spacing-0 rounded-md text-sm">
              <thead class="bg-muted">
                <tr>
                  <th class="py-3 px-4 font-semibold text-sm border-e border-b first:border-s border-t border-muted text-left">Trigger</th>
                  <th class="py-3 px-4 font-semibold text-sm border-e border-b first:border-s border-t border-muted text-left">Kind</th>
                  <th class="py-3 px-4 font-semibold text-sm border-e border-b first:border-s border-t border-muted text-left">Behaviour</th>
                </tr>
              </thead>
              <tbody>
                  <tr><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left"><code class="md-code">/</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left"><code class="md-code">command</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left text-muted">Slash command palette (headings, formatting, blocks, insert)</td></tr>
                  <tr><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left"><code class="md-code">[[</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left"><code class="md-code">reference</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left text-muted">Page reference completion → [[Page Name]]</td></tr>
                 <tr><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left"><code class="md-code">((</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left"><code class="md-code">embed</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left text-muted">Block reference completion → ((block-id))</td></tr>
                 <tr><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left"><code class="md-code">#</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left"><code class="md-code">tag</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left text-muted">Tag completion → #tagname</td></tr>
              </tbody>
            </table>
          </div>
        </section>

        <section class="space-y-4">
          <h2 class="text-lg font-semibold text-highlighted">Extending Triggers</h2>
          <p class="text-sm text-muted leading-relaxed">
            Additional triggers can be registered via the <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">extraPatterns</code> prop on <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">EditorBlock</code> or <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">Editor</code>:
          </p>
          <pre class="rounded-lg border border-default bg-muted p-4 text-xs font-mono overflow-x-auto">&lt;EditorBlock
  v-model:content="content"
  :extra-patterns="extraPatterns"
/&gt;

&lt;script setup lang="ts"&gt;
import type { PatternSpec } from "@enesis/editor"

const extraPatterns: PatternSpec[] = [
  { start: "@", kind: "command", termination: "boundary", priority: 2 },
]
&lt;/script&gt;</pre>
        </section>
      </div>
    </UPageBody>
  </UPage>
</template>
