<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Criado e desenvolvido por Leonardo Nohama
|
| Tecnologia aplicada à escuta.
| Estrutura para o cuidado.
|
| Arquivo: src/components/ui/JoditEmailEditor.vue
| Data: 2026
| Local: São Carlos/SP — Brasil
|--------------------------------------------------------------------------
| © 2026 — Todos os direitos reservados
|--------------------------------------------------------------------------
-->
<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import { Jodit } from 'jodit/esm/index.js';
import 'jodit/es2021/jodit.min.css';

const props = defineProps({
    modelValue: { type: String, default: '' },
    minHeight: { type: Number, default: 150 },
    // true → toolbar enxuta + botões ▣ de layout para header/footer
    layoutButtons: { type: Boolean, default: false },
    // URL da logo do tenant usada nos snippets de layout
    logoUrl: { type: String, default: null }
});

const emit = defineEmits(['update:modelValue']);
const container = ref(null);
let jodit = null;
let _ignoreChange = false;
let _themeObserver = null;

// ── Dark mode ─────────────────────────────────────────────────
function isDark() {
    return document.documentElement.classList.contains('app-dark');
}

// ── Snippets de layout ────────────────────────────────────────
function logoSnippet(url) {
    return url
        ? `<img src="${url}" width="72" height="72" style="display:block;object-fit:contain;border-radius:4px;" alt="Logo" />`
        : `<div style="width:72px;height:72px;background:#e5e7eb;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#9ca3af;">[logo]</div>`;
}

function snippetLogoLeft(logo) {
    return `<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
  <tr>
    <td width="88" valign="middle" style="padding-right:16px;">${logoSnippet(logo)}</td>
    <td valign="middle"><p style="margin:0;font-size:14px;color:#374151;">Seu texto aqui</p></td>
  </tr>
</table>`;
}

function snippetLogoRight(logo) {
    return `<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
  <tr>
    <td valign="middle" style="padding-right:16px;"><p style="margin:0;font-size:14px;color:#374151;">Seu texto aqui</p></td>
    <td width="88" valign="middle" style="text-align:right;">${logoSnippet(logo)}</td>
  </tr>
</table>`;
}

function snippetLogoCenter(logo) {
    return `<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
  <tr>
    <td align="center" style="padding-bottom:8px;">${logoSnippet(logo)}</td>
  </tr>
  <tr>
    <td align="center"><p style="margin:0;font-size:14px;color:#374151;">Seu texto aqui</p></td>
  </tr>
</table>`;
}

// ── Config Jodit ─────────────────────────────────────────────
function buildConfig() {
    // Botões customizados de layout (somente nos editores de header/footer)
    const layoutExtraButtons = props.layoutButtons
        ? [
              {
                  name: 'layout-logo-left',
                  tooltip: 'Logo à esquerda, texto à direita',
                  text: '▣ Logo Esq.',
                  exec(editor) {
                      editor.selection.insertHTML(snippetLogoLeft(props.logoUrl));
                  }
              },
              {
                  name: 'layout-logo-right',
                  tooltip: 'Logo à direita, texto à esquerda',
                  text: '▣ Logo Dir.',
                  exec(editor) {
                      editor.selection.insertHTML(snippetLogoRight(props.logoUrl));
                  }
              },
              {
                  name: 'layout-logo-center',
                  tooltip: 'Logo centralizada, texto abaixo',
                  text: '▣ Logo Centro',
                  exec(editor) {
                      editor.selection.insertHTML(snippetLogoCenter(props.logoUrl));
                  }
              }
          ]
        : [];

    // Toolbar enxuta para header/footer — sem hr, eraser, source
    const layoutButtons = [
        'bold', 'italic', 'underline', '|',
        'font', 'fontsize', 'brush', '|',
        'align', '|',
        'link', '|',
        'layout-logo-left', 'layout-logo-right', 'layout-logo-center'
    ];

    // Toolbar completa para o corpo do e-mail
    // Botões hr (linha horizontal), eraser (apagar formatação) e source (HTML)
    // foram removidos — não funcionavam de forma esperada.
    const bodyButtons = [
        'bold', 'italic', 'underline', 'strikethrough', '|',
        'ul', 'ol', '|',
        'font', 'fontsize', 'brush', 'paragraph', '|',
        'align', '|',
        'link', 'table'
    ];

    return {
        height: props.minHeight,
        language: 'pt_br',
        theme: isDark() ? 'dark' : 'default',
        toolbarAdaptive: false,
        toolbarSticky: false,
        showCharsCounter: false,
        showWordsCounter: false,
        showXPathInStatusbar: false,
        disablePlugins: ['about', 'stat'],
        buttons: props.layoutButtons ? layoutButtons : bodyButtons,
        extraButtons: layoutExtraButtons,
        uploader: { insertImageAsBase64URI: false },
        filebrowser: { ajax: { url: '' } }
    };
}

// ── Init / destroy ────────────────────────────────────────────
function initJodit() {
    if (jodit) {
        jodit.destruct();
        jodit = null;
    }
    jodit = Jodit.make(container.value, buildConfig());
    if (props.modelValue) jodit.value = props.modelValue;
    jodit.events.on('change', (content) => {
        if (!_ignoreChange) emit('update:modelValue', content);
    });
}

// ── Lifecycle ─────────────────────────────────────────────────
onMounted(() => {
    initJodit();

    // Recria o editor se o tema mudar enquanto o componente estiver montado
    _themeObserver = new MutationObserver(() => {
        const current = isDark() ? 'dark' : 'default';
        if (jodit && jodit.o?.theme !== current) {
            const saved = jodit.value;
            initJodit();
            if (saved) jodit.value = saved;
        }
    });
    _themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
});

onBeforeUnmount(() => {
    _themeObserver?.disconnect();
    _themeObserver = null;
    jodit?.destruct();
    jodit = null;
});

watch(
    () => props.modelValue,
    (val) => {
        if (!jodit) return;
        if (jodit.value !== (val ?? '')) {
            _ignoreChange = true;
            jodit.value = val ?? '';
            _ignoreChange = false;
        }
    }
);

// ── API exposta ───────────────────────────────────────────────
defineExpose({
    insertHTML: (html) => jodit?.selection.insertHTML(html),
    // Salva markers da seleção atual antes do foco sair do editor
    // (ex: usuário abre drawer e perde o cursor). Retorna o array de
    // markers que pode ser passado pra restoreSelection depois.
    saveSelection: () => {
        if (!jodit) return null;
        try { return jodit.selection.save(); }
        catch { return null; }
    },
    // Restaura selection a partir dos markers salvos. Re-foca o editor.
    restoreSelection: (markers) => {
        if (!jodit) return;
        try {
            jodit.focus();
            if (markers) jodit.selection.restore(markers);
        } catch { /* silencioso */ }
    },
    focus: () => jodit?.focus()
});
</script>

<template>
    <div ref="container" />
</template>
