<script>
/** Module scope: `defineProps` is hoisted and cannot reference `<script setup>` locals. */
const TOOLBARS = ["compact", "document", "full"];
</script>

<script setup>
import { computed, ref } from "vue";
import Editor from "primevue/editor";

const props = defineProps({
  modelValue: { type: String, default: "" },
  label: { type: String, default: "" },
  disabled: { type: Boolean, default: false },
  placeholder: { type: String, default: "" },
  invalid: { type: Boolean, default: false },
  editorStyle: { type: String, default: "min-height: 200px" },
  /**
   * Toolbar layout: `full` = PrimeVue default (fonts, colors, image, …),
   * `document` = headings, inline styles, lists, link, quote (good for offers/long copy),
   * `compact` = bold/italic, lists, clear only.
   * When `toolbar` is omitted, `minimal` still maps: true → compact, false → full.
   */
  toolbar: {
    type: String,
    default: null,
    validator: (v) => v == null || TOOLBARS.includes(v),
  },
  /** @deprecated Prefer `toolbar="compact"` */
  minimal: { type: Boolean, default: false },
});

const emit = defineEmits(["update:modelValue"]);

const shellRef = ref(null);

const effectiveToolbar = computed(() => {
  if (props.toolbar != null) return props.toolbar;
  return props.minimal ? "compact" : "full";
});

const useCustomToolbar = computed(() =>
  effectiveToolbar.value === "compact" || effectiveToolbar.value === "document",
);

function focusEditor(event) {
  if (props.disabled) return;
  if (!shellRef.value) return;
  const target = event?.target;
  if (target instanceof Element) {
    if (target.closest(".ql-toolbar")) return;
    if (target.closest(".ql-editor")) return;
  }
  const editable = shellRef.value.querySelector(".ql-editor");
  if (editable && typeof editable.focus === "function") {
    editable.focus();
  }
}
</script>

<template>
  <div class="flex flex-col gap-2 w-full">
    <label
      v-if="label"
      class="text-sm font-medium text-surface-700 dark:text-surface-200"
      @click="focusEditor"
      >{{ label }}</label
    >
    <div
      ref="shellRef"
      class="base-editor-shell base-editor border dark:border-surface-700 rounded-lg overflow-hidden focus-within:border-primary"
      style="border-width: 0.25px"
      :class="{
        'is-disabled': disabled,
        'is-invalid': invalid,
      }"
      @click="focusEditor($event)"
    >
      <Editor
        :model-value="modelValue"
        :readonly="disabled"
        :placeholder="placeholder"
        :class="{ 'opacity-60 pointer-events-none': disabled }"
        :editor-style="editorStyle"
        @update:model-value="emit('update:modelValue', $event)"
      >
        <template v-if="useCustomToolbar" #toolbar>
          <!-- compact -->
          <template v-if="effectiveToolbar === 'compact'">
            <span class="ql-formats">
              <button class="ql-bold" type="button" title="Bold" />
              <button class="ql-italic" type="button" title="Italic" />
            </span>
            <span class="ql-formats">
              <button class="ql-list" value="ordered" type="button" title="Numbered list" />
              <button class="ql-list" value="bullet" type="button" title="Bullet list" />
            </span>
            <span class="ql-formats">
              <button class="ql-clean" type="button" title="Clear formatting" />
            </span>
          </template>

          <!-- document: headings + common blocks (no image / code block to keep offers tidy) -->
          <template v-else-if="effectiveToolbar === 'document'">
            <span class="ql-formats">
              <select class="ql-header" aria-label="Paragraph or heading" title="Style">
                <option value="1">Heading 1</option>
                <option value="2">Heading 2</option>
                <option value="3">Heading 3</option>
                <option selected>Normal</option>
              </select>
            </span>
            <span class="ql-formats">
              <button class="ql-bold" type="button" title="Bold" />
              <button class="ql-italic" type="button" title="Italic" />
              <button class="ql-underline" type="button" title="Underline" />
              <button class="ql-strike" type="button" title="Strikethrough" />
            </span>
            <span class="ql-formats">
              <button class="ql-list" value="ordered" type="button" title="Numbered list" />
              <button class="ql-list" value="bullet" type="button" title="Bullet list" />
            </span>
            <span class="ql-formats">
              <button class="ql-link" type="button" title="Link" />
              <button class="ql-blockquote" type="button" title="Quote" />
            </span>
            <span class="ql-formats">
              <select class="ql-align" aria-label="Alignment" title="Align">
                <option value="" selected />
                <option value="center" />
                <option value="right" />
                <option value="justify" />
              </select>
            </span>
            <span class="ql-formats">
              <button class="ql-clean" type="button" title="Clear formatting" />
            </span>
          </template>
        </template>
      </Editor>
    </div>
  </div>
</template>

<style scoped>
.base-editor :deep(.ql-toolbar) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid
    color-mix(in srgb, var(--p-surface-300, #d4d4d8) 80%, transparent);
  background: color-mix(
    in srgb,
    var(--p-surface-50, #fafafa) 90%,
    transparent
  );
}
:global(.app-dark) .base-editor :deep(.ql-toolbar) {
  border-bottom-color: color-mix(
    in srgb,
    var(--p-surface-600, #52525b) 80%,
    transparent
  );
  background: color-mix(
    in srgb,
    var(--p-surface-900, #18181b) 60%,
    transparent
  );
}
.base-editor :deep(.ql-toolbar .ql-formats) {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
  margin-right: 0.25rem;
}
.base-editor :deep(.ql-header),
.base-editor :deep(.ql-align) {
  min-height: 1.75rem;
  font-size: 0.8rem;
  border-radius: 0.35rem;
  padding: 0.1rem 0.35rem;
  max-width: 9.5rem;
}
</style>
