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

const example = ref(`# Welcome to the Editor

![Preview](https://picsum.photos/seed/hero/600/200)

This is a **block-based markdown editor** built with Vue 3, TypeScript, and ProseMirror.

> [!NOTE] Every paragraph is its own Block component.
> Blocks are independent editors with their own state.

Try the examples under each component page.`)
</script>

<template>
  <UPage>
    <UPageHeader
      title="Editor"
      description="A block-based markdown editor with live preview, decorations, and extensible syntax."
    />

    <UPageBody>
      <div class="space-y-8">
        <section class="space-y-4">
          <div class="rounded-lg border border-default dark:bg-neutral-950/50 p-4 sm:p-8 rounded-t-md">
            <EditorBlock
              v-model:content="example"
              :focused="true"
              cursor-position="end"
              marker-mode="always-visible"
            />
          </div>
        </section>

        <section class="space-y-4">
          <h2 class="text-lg font-semibold text-highlighted">Components</h2>
          <p class="text-sm text-muted leading-relaxed">
            The editor is organised as four main components:
          </p>
          <div class="grid gap-4 sm:grid-cols-2">
            <div class="rounded-lg border border-default p-4 space-y-2">
              <div class="flex items-center gap-2">
                <span class="i-lucide-layers size-4 text-primary shrink-0" />
                <h3 class="text-sm font-medium text-highlighted">
                  <RouterLink to="/editor" class="hover:underline">Editor</RouterLink>
                </h3>
              </div>
              <p class="text-xs text-muted leading-relaxed">
                Multi-block shell with insertion zones, shared toolbar, drag-to-reorder, and unified undo/redo.
              </p>
            </div>
            <div class="rounded-lg border border-default p-4 space-y-2">
              <div class="flex items-center gap-2">
                <span class="i-lucide-file-text size-4 text-primary shrink-0" />
                <h3 class="text-sm font-medium text-highlighted">
                  <RouterLink to="/editor-block" class="hover:underline">EditorBlock</RouterLink>
                </h3>
              </div>
              <p class="text-xs text-muted leading-relaxed">
                Single-block ProseMirror editor with all markdown syntax — props, events, and exposed methods.
              </p>
            </div>
            <div class="rounded-lg border border-default p-4 space-y-2">
              <div class="flex items-center gap-2">
                <span class="i-lucide-rows-3 size-4 text-primary shrink-0" />
                <h3 class="text-sm font-medium text-highlighted">
                  <RouterLink to="/toolbar" class="hover:underline">EditorToolbar</RouterLink>
                </h3>
              </div>
              <p class="text-xs text-muted leading-relaxed">
                Formatting toolbar with active state tracking, undo/redo buttons, and handler integration.
              </p>
            </div>
            <div class="rounded-lg border border-default p-4 space-y-2">
              <div class="flex items-center gap-2">
                <span class="i-lucide-list-ordered size-4 text-primary shrink-0" />
                <h3 class="text-sm font-medium text-highlighted">
                  <RouterLink to="/suggestion-menu" class="hover:underline">Suggestion Menu</RouterLink>
                </h3>
              </div>
              <p class="text-xs text-muted leading-relaxed">
                Slash commands, page references, block references, and tag completions.
              </p>
            </div>
          </div>
        </section>

        <section class="space-y-4">
          <h2 class="text-lg font-semibold text-highlighted">Link</h2>
          <p class="text-sm text-muted leading-relaxed">
            <RouterLink to="/themes" class="text-primary hover:underline">Theme system</RouterLink> — CSS-variable presets and custom colour overrides.
          </p>
        </section>

        <section class="space-y-4">
          <h2 class="text-lg font-semibold text-highlighted">Built with</h2>
          <div class="flex flex-wrap gap-2">
            <span class="px-2.5 py-1 text-xs font-medium rounded-md bg-elevated border border-default">Vue 3</span>
            <span class="px-2.5 py-1 text-xs font-medium rounded-md bg-elevated border border-default">TypeScript</span>
            <span class="px-2.5 py-1 text-xs font-medium rounded-md bg-elevated border border-default">ProseMirror</span>
            <span class="px-2.5 py-1 text-xs font-medium rounded-md bg-elevated border border-default">@lezer/markdown</span>
            <span class="px-2.5 py-1 text-xs font-medium rounded-md bg-elevated border border-default">Nuxt UI</span>
            <span class="px-2.5 py-1 text-xs font-medium rounded-md bg-elevated border border-default">Tailwind CSS</span>
            <span class="px-2.5 py-1 text-xs font-medium rounded-md bg-elevated border border-default">CodeMirror 6</span>
            <span class="px-2.5 py-1 text-xs font-medium rounded-md bg-elevated border border-default">KaTeX</span>
            <span class="px-2.5 py-1 text-xs font-medium rounded-md bg-elevated border border-default">Vitest</span>
          </div>
        </section>
      </div>
    </UPageBody>
  </UPage>
</template>
