<script setup lang="ts">
import type { ToolbarMode } from "@enesis/editor"
import { Editor, EditorToolbar } from "@enesis/editor"
import { computed, ref } from "vue"

const isE2E = computed(
  () =>
    typeof window !== "undefined" &&
    new URLSearchParams(window.location.search).get("e2e") === "true",
)
const themeOverride = computed(() => {
  if (typeof window === "undefined") return undefined
  const t = new URLSearchParams(window.location.search).get("theme")
  if (t === "dark" || t === "orange") return t
  return undefined
})
const markerMode = computed(() => {
  if (typeof window === "undefined") return "always-visible"
  const m = new URLSearchParams(window.location.search).get("marker-mode")
  if (m === "live-preview" || m === "always-visible") return m
  return "always-visible"
})
const toolbarMode = ref<ToolbarMode | undefined>(undefined)

function setToolbarMode(m: ToolbarMode) {
  toolbarMode.value = toolbarMode.value === m ? undefined : m
}

const content = ref(`
* # Welcome to Enesis Editor

  Each **block** between blank lines is its own independent editor — click anywhere to start typing.

  * ## Text Formatting

    Try **bold**, *italic*, \`code\`, ~~strikethrough~~, ^^highlight^^, and $LaTeX$ math.

  * ## References

    [[Known Page]] resolves. [[Missing Page]] shows via dashed border.

    ((unknown-block-id))

    Use #tags for categorization.

  * ## Tasks

    * TODO Write the documentation
    * DOING Implement the parser
    * DONE Set up the build pipeline

  * ## Table

    | Feature | Status |
    | --- | --- |
    | Blocks | Done |
    | Tables | Done |


  * ## Code

    \`\`\`typescript
    function greet(name: string): string {
      return \`Hello, \${name}!\`
    }
    \`\`\`

  * ## Callout

    > [!NOTE] Useful info for the reader
    > Plus multi-line functionality

  * ## Properties

    author:: Enesis Editor
    version:: 0.1.0
`)

const resolvedRefs = new Set(["Known Page", "other-block-id"])

function onPageRefClick({ pageName }: { pageName: string }) {
  console.log("page-ref-clicked", pageName)
}

function onBlockRefClick({ blockId }: { blockId: string }) {
  console.log("block-ref-clicked", blockId)
}

function onTagClick({ tag }: { tag: string }) {
  console.log("tag-clicked", tag)
}
</script>

<template>
  <UPage>
    <UPageHeader
      title="Editor"
      description="Multi-block editor shell with insertion zones, toolbar, drag-to-reorder, and unified undo/redo."
    />

    <UPageBody>
      <div class="space-y-8">
        <section class="space-y-4">
          <p class="text-sm text-muted leading-relaxed">
            The <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">Editor</code> component manages a list of blocks with insertion zones between them.
            Each block is a <code class="text-xs font-mono px-1 py-0.5 rounded bg-elevated border border-default">*</code> list item in the unified markdown string.
            Drag the <span class="i-lucide-grip-vertical size-4 inline-block align-middle text-muted" /> handle to reorder blocks.
          </p>

          <div class="flex items-center gap-2 mb-4">
            <span class="text-sm text-muted">Toolbar:</span>
            <UButton
              v-for="m in (['fixed', 'bubble', 'floating'] as const)"
              :key="m"
              size="xs"
              :variant="toolbarMode === m || (m === 'fixed' && !toolbarMode) ? 'solid' : 'outline'"
              :color="toolbarMode === m || (m === 'fixed' && !toolbarMode) ? 'primary' : 'neutral'"
              @click="setToolbarMode(m)"
            >
              {{ m }}
            </UButton>
          </div>

          <div class="rounded-lg border border-default dark:bg-neutral-950/50 p-4 sm:p-8 rounded-t-md overflow-hidden flex flex-col min-h-0">
            <Editor
              v-model:content="content"
              :focused="true"
              :marker-mode="markerMode"
              :theme="themeOverride"
              :resolved-refs="resolvedRefs"
              :resolved-refs-version="resolvedRefs.size"
              :test-mode="isE2E"
              @page-ref-clicked="onPageRefClick"
              @block-ref-clicked="onBlockRefClick"
              @tag-clicked="onTagClick"
            >
              <template #toolbar="{ handlers, selectionVersion, canUndo, canRedo, undo, redo }">
                <EditorToolbar
                  :mode="toolbarMode"
                  :handlers="handlers"
                  :selection-version="selectionVersion"
                  :can-undo="canUndo"
                  :can-redo="canRedo"
                  :undo="undo"
                  :redo="redo"
                />
              </template>
            </Editor>
          </div>
        </section>

        <section class="space-y-4">
          <h2 class="text-lg font-semibold text-highlighted">Props</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">Prop</th>
                  <th class="py-3 px-4 font-semibold text-sm border-e border-b first:border-s border-t border-muted text-left">Type</th>
                  <th class="py-3 px-4 font-semibold text-sm border-e border-b first:border-s border-t border-muted text-left">Default</th>
                  <th class="py-3 px-4 font-semibold text-sm border-e border-b first:border-s border-t border-muted text-left">Description</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">content</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">string</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left">—</td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left text-muted">Full document markdown (v-model)</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">focused</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">EditorFocusTarget</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left">—</td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left text-muted">Focus target on mount: <code>true</code> (first block), <code>"first-block"</code>, <code>"last-block"</code>, <code>"first-zone"</code>, <code>"last-zone"</code>, or <code>{ kind: "block"; id }</code> / <code>{ kind: "zone"; index }</code></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">markerMode</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">'live-preview' \| 'always-visible'</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">'live-preview'</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">Decorator visibility mode</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">debug</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">string</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left">—</td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left text-muted">Debug namespace filter</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">theme</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">ThemeInput</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left">—</td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left text-muted">CSS-variable theme preset</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">keyBinding</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">KeyBinding</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">default</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">Swappable keyboard handler</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">extraPatterns</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">PatternSpec[]</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left">—</td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left text-muted">Custom suggestion triggers</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">resolvedRefs</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">Set&lt;string&gt;</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left">—</td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left text-muted">Known refs — missing entries render dashed</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">resolvedRefsVersion</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">number</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left">—</td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left text-muted">Bump to re-check refs across blocks</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">resolveAsset</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">(file) => Promise&lt;string&gt;</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left">—</td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left text-muted">Upload handler — drops/pastes insert as ![]()</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">testMode</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">boolean</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">false</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">Expose window.__testUtils__ for Playwright E2E tests</td></tr>
              </tbody>
            </table>
          </div>
        </section>

        <section class="space-y-4">
          <h2 class="text-lg font-semibold text-highlighted">Slot: #toolbar</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">Binding</th>
                  <th class="py-3 px-4 font-semibold text-sm border-e border-b first:border-s border-t border-muted text-left">Type</th>
                  <th class="py-3 px-4 font-semibold text-sm border-e border-b first:border-s border-t border-muted text-left">Description</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">handlers</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">FormattingHandlers</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">Toggle/wrap/insert helpers</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">selectionVersion</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">number</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">Bumped on cursor move</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">canUndo / canRedo</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">boolean</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">Undo/redo availability</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">undo / redo</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">() => void</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">Undo/redo functions</td></tr>
              </tbody>
            </table>
          </div>
        </section>

        <section class="space-y-4">
          <h2 class="text-lg font-semibold text-highlighted">Events</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">Event</th>
                  <th class="py-3 px-4 font-semibold text-sm border-e border-b first:border-s border-t border-muted text-left">Payload</th>
                  <th class="py-3 px-4 font-semibold text-sm border-e border-b first:border-s border-t border-muted text-left">Description</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">focus</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">{ view, handlers }</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 gained focus</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">blur</code></td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left">—</td><td class="py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted text-left text-muted">All blocks lost focus</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">selection-change</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">{ from, to, empty }</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">Selection changed</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">error</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">{ code, message?, blockId? }</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">Mount failure or KaTeX error</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">page-ref-clicked</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">{ pageName, alias? }</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">Clicked [[page]] chip</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">block-ref-clicked</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">{ blockId }</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">Clicked ((block)) chip</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">tag-clicked</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">Clicked #tag chip</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">asset-dropped</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">{ file, pos }</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">File dropped/pasted, no resolveAsset</td></tr>
              </tbody>
            </table>
          </div>
        </section>

        <section class="space-y-4">
          <h2 class="text-lg font-semibold text-highlighted">Exposed Methods</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">Method</th>
                  <th class="py-3 px-4 font-semibold text-sm border-e border-b first:border-s border-t border-muted text-left">Signature</th>
                  <th class="py-3 px-4 font-semibold text-sm border-e border-b first:border-s border-t border-muted text-left">Description</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">undo</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">() => void</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">Undo last operation</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">redo</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">() => void</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">Redo last undone operation</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">canUndo / canRedo</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">Ref&lt;boolean&gt;</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">Undo/redo availability</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">getHistoryState</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">() => { canUndo, canRedo }</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">Inspect undo/redo state</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">applyHistory</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">(op) => void</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">Push operation to history stack</td></tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </UPageBody>
  </UPage>
</template>
