<script setup lang="ts">
/**
 * Shared button groups for the formatting toolbar.
 * Used by EditorToolbar in both its inline (fixed) and teleported (bubble/floating) modes.
 * Renders undo/redo, block controls, inline formatting, insert, and reference buttons.
 */
import { computed } from "vue"
import type { FormattingHandlers } from "@/lib/formatting"

type PromptKind = "page" | "block" | "tag"

const props = defineProps<{
  /** Formatting handlers from the focused block, or null when no block is focused. */
  handlers: FormattingHandlers | null
  /** Bumped on every cursor move to force reactivity on isActive() checks. */
  selectionVersion?: number
  /** Whether undo is available. */
  canUndo?: boolean
  /** Whether redo is available. */
  canRedo?: boolean
  /** Undo the last operation. */
  undo?: () => void
  /** Redo the last undone operation. */
  redo?: () => void
}>()

const emit = defineEmits<{
  "open-prompt": [kind: PromptKind]
}>()

const active = computed(() => {
  if (!props.handlers) return {}
  void props.selectionVersion
  return {
    bold: props.handlers.isActive("bold"),
    italic: props.handlers.isActive("italic"),
    code: props.handlers.isActive("code"),
    strikethrough: props.handlers.isActive("strikethrough"),
    highlight: props.handlers.isActive("highlight"),
    inlineMath: props.handlers.isActive("inlineMath"),
  }
})

const currentHeading = computed(() => {
  if (!props.handlers) return null
  void props.selectionVersion
  return props.handlers.getActiveHeading()
})

const currentTask = computed(() => {
  if (!props.handlers) return null
  void props.selectionVersion
  return props.handlers.getActiveTask()
})

const headingLabel = computed(() => {
  const level = currentHeading.value
  return level === null ? "Paragraph" : `H${level}`
})

const headingIcon = computed(() => {
  const level = currentHeading.value
  if (level === null) return "i-lucide-text"
  return `i-lucide-heading-${level}` as const
})

const headingItems = computed(() => {
  const h = props.handlers
  if (!h) return []
  const current = currentHeading.value
  return [
    {
      label: "Paragraph",
      icon: "i-lucide-text",
      active: current === null,
      onSelect: () => h.setHeading(null),
    },
    { type: "separator" as const },
    {
      label: "Heading 1",
      icon: "i-lucide-heading-1",
      active: current === 1,
      onSelect: () => h.setHeading(1),
    },
    {
      label: "Heading 2",
      icon: "i-lucide-heading-2",
      active: current === 2,
      onSelect: () => h.setHeading(2),
    },
    {
      label: "Heading 3",
      icon: "i-lucide-heading-3",
      active: current === 3,
      onSelect: () => h.setHeading(3),
    },
    {
      label: "Heading 4",
      icon: "i-lucide-heading-4",
      active: current === 4,
      onSelect: () => h.setHeading(4),
    },
    {
      label: "Heading 5",
      icon: "i-lucide-heading-5",
      active: current === 5,
      onSelect: () => h.setHeading(5),
    },
    {
      label: "Heading 6",
      icon: "i-lucide-heading-6",
      active: current === 6,
      onSelect: () => h.setHeading(6),
    },
  ]
})
</script>

<template>
  <!-- Undo / Redo -->
  <div role="group" aria-label="History" class="flex items-center gap-0.5">
    <UTooltip text="Undo (⌘Z)" :ui="{ content: 'pointer-events-none' }">
      <UButton
        icon="i-lucide-undo-2"
        color="neutral"
        variant="ghost"
        size="sm"
        :disabled="!canUndo"
        data-toolbar-action="undo"
        @click="undo?.()"
      />
    </UTooltip>
    <UTooltip text="Redo (⌘⇧Z)" :ui="{ content: 'pointer-events-none' }">
      <UButton
        icon="i-lucide-redo-2"
        color="neutral"
        variant="ghost"
        size="sm"
        :disabled="!canRedo"
        data-toolbar-action="redo"
        @click="redo?.()"
      />
    </UTooltip>
  </div>

  <div class="w-px self-stretch bg-border" role="separator" aria-orientation="vertical"></div>

  <!-- Block -->
  <div role="group" aria-label="Block" class="flex items-center gap-0.5">
    <UDropdownMenu :items="headingItems" :disabled="!handlers">
      <UButton
        :icon="headingIcon"
        :label="headingLabel"
        color="neutral"
        variant="ghost"
        size="sm"
        :disabled="!handlers"
        data-toolbar-action="heading"
      />
    </UDropdownMenu>
    <UButton
      icon="i-lucide-list-todo"
      color="neutral"
      active-color="primary"
      variant="ghost"
      active-variant="soft"
      size="sm"
      :active="currentTask !== null"
      :disabled="!handlers"
      :aria-pressed="currentTask !== null ? 'true' : 'false'"
      data-toolbar-action="task"
      @click="handlers?.toggleTask()"
    />
  </div>

  <div class="w-px self-stretch bg-border" role="separator" aria-orientation="vertical"></div>

  <!-- Inline -->
  <div role="group" aria-label="Inline" class="flex items-center gap-0.5">
    <UTooltip text="Bold (⌘B)" :disabled="!handlers" :ui="{ content: 'pointer-events-none' }">
      <UButton
        icon="i-lucide-bold"
        color="neutral"
        active-color="primary"
        variant="ghost"
        active-variant="soft"
        size="sm"
        :active="active.bold"
        :disabled="!handlers"
        :aria-pressed="active.bold ? 'true' : 'false'"
        data-toolbar-action="bold"
        @click="handlers?.toggleBold()"
      />
    </UTooltip>
    <UTooltip text="Italic (⌘I)" :disabled="!handlers" :ui="{ content: 'pointer-events-none' }">
      <UButton
        icon="i-lucide-italic"
        color="neutral"
        active-color="primary"
        variant="ghost"
        active-variant="soft"
        size="sm"
        :active="active.italic"
        :disabled="!handlers"
        :aria-pressed="active.italic ? 'true' : 'false'"
        data-toolbar-action="italic"
        @click="handlers?.toggleItalic()"
      />
    </UTooltip>
    <UTooltip text="Code (⌘`)" :disabled="!handlers" :ui="{ content: 'pointer-events-none' }">
      <UButton
        icon="i-lucide-code"
        color="neutral"
        active-color="primary"
        variant="ghost"
        active-variant="soft"
        size="sm"
        :active="active.code"
        :disabled="!handlers"
        :aria-pressed="active.code ? 'true' : 'false'"
        data-toolbar-action="code"
        @click="handlers?.toggleCode()"
      />
    </UTooltip>
    <UTooltip text="Strikethrough (⌘⇧S)" :disabled="!handlers" :ui="{ content: 'pointer-events-none' }">
      <UButton
        icon="i-lucide-strikethrough"
        color="neutral"
        active-color="primary"
        variant="ghost"
        active-variant="soft"
        size="sm"
        :active="active.strikethrough"
        :disabled="!handlers"
        :aria-pressed="active.strikethrough ? 'true' : 'false'"
        data-toolbar-action="strikethrough"
        @click="handlers?.toggleStrikethrough()"
      />
    </UTooltip>
    <UTooltip text="Highlight (⌘⇧H)" :disabled="!handlers" :ui="{ content: 'pointer-events-none' }">
      <UButton
        icon="i-lucide-highlighter"
        color="neutral"
        active-color="primary"
        variant="ghost"
        active-variant="soft"
        size="sm"
        :active="active.highlight"
        :disabled="!handlers"
        :aria-pressed="active.highlight ? 'true' : 'false'"
        data-toolbar-action="highlight"
        @click="handlers?.toggleHighlight()"
      />
    </UTooltip>
    <UTooltip text="Inline math (⌘M)" :disabled="!handlers" :ui="{ content: 'pointer-events-none' }">
      <UButton
        icon="i-lucide-sigma"
        color="neutral"
        active-color="primary"
        variant="ghost"
        active-variant="soft"
        size="sm"
        :active="active.inlineMath"
        :disabled="!handlers"
        :aria-pressed="active.inlineMath ? 'true' : 'false'"
        data-toolbar-action="inline-math"
        @click="handlers?.insertInlineMath()"
      />
    </UTooltip>
  </div>

  <div class="w-px self-stretch bg-border" role="separator" aria-orientation="vertical"></div>

  <!-- Insert -->
  <div role="group" aria-label="Insert" class="flex items-center gap-0.5">
    <UTooltip text="Link (⌘K)" :disabled="!handlers" :ui="{ content: 'pointer-events-none' }">
      <UButton
        icon="i-lucide-link"
        color="neutral"
        variant="ghost"
        size="sm"
        :disabled="!handlers"
        data-toolbar-action="link"
        @click="handlers?.insertLink()"
      />
    </UTooltip>
    <UTooltip text="Block math" :disabled="!handlers" :ui="{ content: 'pointer-events-none' }">
      <UButton
        icon="i-lucide-square-radical"
        color="neutral"
        variant="ghost"
        size="sm"
        :disabled="!handlers"
        data-toolbar-action="block-math"
        @click="handlers?.insertBlockMath()"
      />
    </UTooltip>
  </div>

  <div class="w-px self-stretch bg-border" role="separator" aria-orientation="vertical"></div>

  <!-- References -->
  <div role="group" aria-label="References" class="flex items-center gap-0.5">
    <UTooltip text="Page reference" :disabled="!handlers" :ui="{ content: 'pointer-events-none' }">
      <UButton
        icon="i-lucide-book-marked"
        color="neutral"
        variant="ghost"
        size="sm"
        :disabled="!handlers"
        data-toolbar-action="page-ref"
        @click="emit('open-prompt', 'page')"
      />
    </UTooltip>
    <UTooltip text="Block reference" :disabled="!handlers" :ui="{ content: 'pointer-events-none' }">
      <UButton
        icon="i-lucide-arrow-up-from-dot"
        color="neutral"
        variant="ghost"
        size="sm"
        :disabled="!handlers"
        data-toolbar-action="block-ref"
        @click="emit('open-prompt', 'block')"
      />
    </UTooltip>
    <UTooltip text="Tag" :disabled="!handlers" :ui="{ content: 'pointer-events-none' }">
      <UButton
        icon="i-lucide-hash"
        color="neutral"
        variant="ghost"
        size="sm"
        :disabled="!handlers"
        data-toolbar-action="tag"
        @click="emit('open-prompt', 'tag')"
      />
    </UTooltip>
  </div>
</template>
