{% extends 'admin/_layout.html.twig' %}

{% block title %}{{ page.pageLabel }} — Admin{% endblock %}
{% block page_title %}{{ page.pageLabel }}{% endblock %}
{% block page_subtitle %}Page légale{% endblock %}

{% block stylesheets %}
{{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/tiptap.css') }}">
{% endblock %}

{% block admin_body %}
<nav class="adm-breadcrumb">
    <svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
    <a href="{{ path('app_admin') }}">Dashboard</a>
    <span class="adm-bc-sep">›</span>
    <a href="{{ path('app_admin_seo_index') }}">SEO</a>
    <span class="adm-bc-sep">›</span>
    <a href="{{ path('app_admin_legal_index') }}">Pages légales</a>
    <span class="adm-bc-sep">›</span>
    <span class="adm-bc-current">{{ page.pageLabel }}</span>
</nav>

<form id="legal-form" novalidate>
<div class="adm-card adm-form-card" style="max-width:900px">
    <div class="adm-form-fields">
        <div class="adm-field">
            <label>Titre (H1)</label>
            <input type="text" name="heading" value="{{ page.heading }}" placeholder="Titre affiché sur la page">
        </div>
        <div class="adm-field">
            <label>Contenu</label>
            <input type="hidden" name="body" id="legal-body-hidden">

            <div class="tiptap-wrap">
            {# Toolbar #}
            <div class="tiptap-toolbar" id="tiptap-toolbar">
                {# Text style #}
                <button type="button" data-action="toggleBold" title="Gras"><svg viewBox="0 0 24 24"><path d="M6 4h8a4 4 0 0 1 0 8H6z"/><path d="M6 12h9a4 4 0 0 1 0 8H6z"/></svg></button>
                <button type="button" data-action="toggleItalic" title="Italique"><svg viewBox="0 0 24 24"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg></button>
                <button type="button" data-action="toggleUnderline" title="Souligné"><svg viewBox="0 0 24 24"><path d="M6 3v7a6 6 0 0 0 12 0V3"/><line x1="4" y1="21" x2="20" y2="21"/></svg></button>
                <button type="button" data-action="toggleStrike" title="Barré"><svg viewBox="0 0 24 24"><path d="M16 4H9a3 3 0 0 0 0 6"/><path d="M8 20h7a3 3 0 0 0 0-6"/><line x1="4" y1="12" x2="20" y2="12"/></svg></button>
                <button type="button" data-action="toggleCode" title="Code inline"><svg viewBox="0 0 24 24"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg></button>
                <div class="sep"></div>

                {# Highlight & Color #}
                <button type="button" data-action="toggleHighlight" title="Surligner"><svg viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z"/><path d="M15 5l3 3"/></svg></button>
                <input type="color" class="color-input" id="text-color" value="#1a1a2e" title="Couleur du texte">
                <div class="sep"></div>

                {# Headings #}
                <button type="button" data-action="toggleHeading1" title="H1">H1</button>
                <button type="button" data-action="toggleHeading2" title="H2">H2</button>
                <button type="button" data-action="toggleHeading3" title="H3">H3</button>
                <button type="button" data-action="toggleHeading4" title="H4">H4</button>
                <div class="sep"></div>

                {# Lists #}
                <button type="button" data-action="toggleBulletList" title="Liste à puces"><svg viewBox="0 0 24 24"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><circle cx="4" cy="6" r="1" fill="currentColor" stroke="none"/><circle cx="4" cy="12" r="1" fill="currentColor" stroke="none"/><circle cx="4" cy="18" r="1" fill="currentColor" stroke="none"/></svg></button>
                <button type="button" data-action="toggleOrderedList" title="Liste numérotée"><svg viewBox="0 0 24 24"><line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><text x="2" y="8" font-size="7" fill="currentColor" stroke="none" font-family="sans-serif">1.</text><text x="2" y="14" font-size="7" fill="currentColor" stroke="none" font-family="sans-serif">2.</text><text x="2" y="20" font-size="7" fill="currentColor" stroke="none" font-family="sans-serif">3.</text></svg></button>
                <button type="button" data-action="toggleTaskList" title="Checklist"><svg viewBox="0 0 24 24"><rect x="3" y="5" width="6" height="6" rx="1"/><path d="M4.5 8l1.5 1.5 3-3"/><line x1="13" y1="8" x2="21" y2="8"/><rect x="3" y="14" width="6" height="6" rx="1"/><line x1="13" y1="17" x2="21" y2="17"/></svg></button>
                <div class="sep"></div>

                {# Alignment #}
                <button type="button" data-action="alignLeft" title="Aligner à gauche"><svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="15" y2="12"/><line x1="3" y1="18" x2="18" y2="18"/></svg></button>
                <button type="button" data-action="alignCenter" title="Centrer"><svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="6" y1="12" x2="18" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg></button>
                <button type="button" data-action="alignRight" title="Aligner à droite"><svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="9" y1="12" x2="21" y2="12"/><line x1="6" y1="18" x2="21" y2="18"/></svg></button>
                <button type="button" data-action="alignJustify" title="Justifier"><svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg></button>
                <div class="sep"></div>

                {# Blocks #}
                <button type="button" data-action="toggleBlockquote" title="Citation"><svg viewBox="0 0 24 24"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2z"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4z"/></svg></button>
                <button type="button" data-action="toggleCodeBlock" title="Bloc de code"><svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2"/><polyline points="10 9 7 12 10 15"/><polyline points="14 9 17 12 14 15"/></svg></button>
                <button type="button" data-action="setHorizontalRule" title="Séparateur"><svg viewBox="0 0 24 24"><line x1="2" y1="12" x2="22" y2="12"/></svg></button>
                <div class="sep"></div>

                {# Super/Subscript #}
                <button type="button" data-action="toggleSuperscript" title="Exposant"><svg viewBox="0 0 24 24"><text x="2" y="18" font-size="14" fill="currentColor" stroke="none" font-family="sans-serif">x</text><text x="14" y="10" font-size="9" fill="currentColor" stroke="none" font-family="sans-serif">²</text></svg></button>
                <button type="button" data-action="toggleSubscript" title="Indice"><svg viewBox="0 0 24 24"><text x="2" y="16" font-size="14" fill="currentColor" stroke="none" font-family="sans-serif">x</text><text x="14" y="20" font-size="9" fill="currentColor" stroke="none" font-family="sans-serif">₂</text></svg></button>
                <div class="sep"></div>

                {# Table #}
                <button type="button" data-action="insertTable" title="Insérer un tableau"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/></svg></button>
                <button type="button" data-action="addColumnAfter" title="Ajouter colonne"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="12" height="18" rx="1"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="19" y1="8" x2="19" y2="16"/><line x1="15" y1="12" x2="23" y2="12"/></svg></button>
                <button type="button" data-action="addRowAfter" title="Ajouter ligne"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="12" rx="1"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="8" y1="19" x2="16" y2="19"/><line x1="12" y1="15" x2="12" y2="23"/></svg></button>
                <button type="button" data-action="deleteTable" title="Supprimer tableau" style="color:var(--red)"><svg viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg></button>
                <div class="sep"></div>

                {# Image & Link #}
                <button type="button" data-action="addImage" title="Image"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg></button>
                <button type="button" data-action="setLink" title="Lien"><svg viewBox="0 0 24 24"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></button>
                <button type="button" data-action="unsetLink" title="Retirer le lien"><svg viewBox="0 0 24 24"><path d="M18.84 12.25l1.72-1.71a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M5.16 11.75l-1.72 1.71a5 5 0 0 0 7.07 7.07l1.72-1.71"/><line x1="2" y1="2" x2="22" y2="22"/></svg></button>
                <div class="sep"></div>

                {# Undo/Redo #}
                <button type="button" data-action="undo" title="Annuler"><svg viewBox="0 0 24 24"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg></button>
                <button type="button" data-action="redo" title="Rétablir"><svg viewBox="0 0 24 24"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.13-9.36L23 10"/></svg></button>
            </div>

            {# Editor #}
            <div class="tiptap-editor" id="tiptap-editor"></div>
            </div>{# /tiptap-wrap #}
        </div>
    </div>
    <div class="adm-form-actions">
        <button type="submit" class="adm-btn adm-btn-p" id="legal-submit">
            <svg class="btn-icon-save" viewBox="0 0 24 24" style="width:14px;height:14px;margin-right:4px"><polyline points="20 6 9 17 4 12"/></svg>
            <svg class="btn-icon-spin" viewBox="0 0 24 24" style="width:14px;height:14px;margin-right:4px;display:none"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="31.4 31.4" stroke-linecap="round"/></svg>
            Enregistrer
        </button>
        <a href="{{ path('app_admin_legal_index') }}" class="adm-btn adm-btn-g">Retour</a>
    </div>
</div>
</form>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script type="importmap">
{
    "imports": {
        "@tiptap/core": "https://esm.sh/@tiptap/core@2.11.5",
        "@tiptap/pm/": "https://esm.sh/@tiptap/pm@2.11.5/",
        "@tiptap/starter-kit": "https://esm.sh/@tiptap/starter-kit@2.11.5",
        "@tiptap/extension-underline": "https://esm.sh/@tiptap/extension-underline@2.11.5",
        "@tiptap/extension-link": "https://esm.sh/@tiptap/extension-link@2.11.5",
        "@tiptap/extension-color": "https://esm.sh/@tiptap/extension-color@2.11.5",
        "@tiptap/extension-text-style": "https://esm.sh/@tiptap/extension-text-style@2.11.5",
        "@tiptap/extension-highlight": "https://esm.sh/@tiptap/extension-highlight@2.11.5",
        "@tiptap/extension-text-align": "https://esm.sh/@tiptap/extension-text-align@2.11.5",
        "@tiptap/extension-subscript": "https://esm.sh/@tiptap/extension-subscript@2.11.5",
        "@tiptap/extension-superscript": "https://esm.sh/@tiptap/extension-superscript@2.11.5",
        "@tiptap/extension-image": "https://esm.sh/@tiptap/extension-image@2.11.5",
        "@tiptap/extension-table": "https://esm.sh/@tiptap/extension-table@2.11.5",
        "@tiptap/extension-table-row": "https://esm.sh/@tiptap/extension-table-row@2.11.5",
        "@tiptap/extension-table-cell": "https://esm.sh/@tiptap/extension-table-cell@2.11.5",
        "@tiptap/extension-table-header": "https://esm.sh/@tiptap/extension-table-header@2.11.5",
        "@tiptap/extension-task-list": "https://esm.sh/@tiptap/extension-task-list@2.11.5",
        "@tiptap/extension-task-item": "https://esm.sh/@tiptap/extension-task-item@2.11.5",
        "@tiptap/extension-placeholder": "https://esm.sh/@tiptap/extension-placeholder@2.11.5",
        "@tiptap/extension-character-count": "https://esm.sh/@tiptap/extension-character-count@2.11.5",
        "@tiptap/extension-typography": "https://esm.sh/@tiptap/extension-typography@2.11.5",
        "@tiptap/extension-code-block-lowlight": "https://esm.sh/@tiptap/extension-code-block-lowlight@2.11.5"
    }
}
</script>
<script type="module">
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import Underline from '@tiptap/extension-underline';
import Link from '@tiptap/extension-link';
import Color from '@tiptap/extension-color';
import TextStyle from '@tiptap/extension-text-style';
import Highlight from '@tiptap/extension-highlight';
import TextAlign from '@tiptap/extension-text-align';
import Subscript from '@tiptap/extension-subscript';
import Superscript from '@tiptap/extension-superscript';
import Image from '@tiptap/extension-image';
import Table from '@tiptap/extension-table';
import TableRow from '@tiptap/extension-table-row';
import TableCell from '@tiptap/extension-table-cell';
import TableHeader from '@tiptap/extension-table-header';
import TaskList from '@tiptap/extension-task-list';
import TaskItem from '@tiptap/extension-task-item';
import Placeholder from '@tiptap/extension-placeholder';
import CharacterCount from '@tiptap/extension-character-count';
import Typography from '@tiptap/extension-typography';

const hiddenInput = document.getElementById('legal-body-hidden');
const editorEl = document.getElementById('tiptap-editor');
const toolbar = document.getElementById('tiptap-toolbar');
const colorInput = document.getElementById('text-color');

const editor = new Editor({
    element: editorEl,
    extensions: [
        StarterKit.configure({ codeBlock: false }),
        Underline,
        Link.configure({ openOnClick: false }),
        TextStyle,
        Color,
        Highlight.configure({ multicolor: true }),
        TextAlign.configure({ types: ['heading', 'paragraph'] }),
        Subscript,
        Superscript,
        Image.configure({ inline: true }),
        Table.configure({ resizable: true }),
        TableRow,
        TableCell,
        TableHeader,
        TaskList,
        TaskItem.configure({ nested: true }),
        Placeholder.configure({ placeholder: 'Commencez à rédiger…' }),
        CharacterCount,
        Typography,
    ],
    content: {{ page.body|json_encode|raw }},
    onUpdate({ editor: ed }) {
        hiddenInput.value = ed.getHTML();
    },
});

hiddenInput.value = editor.getHTML();

// Color picker
colorInput.addEventListener('input', function () {
    editor.chain().focus().setColor(this.value).run();
});

// Toolbar actions
var actions = {
    toggleBold:        function () { editor.chain().focus().toggleBold().run(); },
    toggleItalic:      function () { editor.chain().focus().toggleItalic().run(); },
    toggleUnderline:   function () { editor.chain().focus().toggleUnderline().run(); },
    toggleStrike:      function () { editor.chain().focus().toggleStrike().run(); },
    toggleCode:        function () { editor.chain().focus().toggleCode().run(); },
    toggleHighlight:   function () { editor.chain().focus().toggleHighlight().run(); },
    toggleHeading1:    function () { editor.chain().focus().toggleHeading({ level: 1 }).run(); },
    toggleHeading2:    function () { editor.chain().focus().toggleHeading({ level: 2 }).run(); },
    toggleHeading3:    function () { editor.chain().focus().toggleHeading({ level: 3 }).run(); },
    toggleHeading4:    function () { editor.chain().focus().toggleHeading({ level: 4 }).run(); },
    toggleBulletList:  function () { editor.chain().focus().toggleBulletList().run(); },
    toggleOrderedList: function () { editor.chain().focus().toggleOrderedList().run(); },
    toggleTaskList:    function () { editor.chain().focus().toggleTaskList().run(); },
    alignLeft:         function () { editor.chain().focus().setTextAlign('left').run(); },
    alignCenter:       function () { editor.chain().focus().setTextAlign('center').run(); },
    alignRight:        function () { editor.chain().focus().setTextAlign('right').run(); },
    alignJustify:      function () { editor.chain().focus().setTextAlign('justify').run(); },
    toggleBlockquote:  function () { editor.chain().focus().toggleBlockquote().run(); },
    toggleCodeBlock:   function () { editor.chain().focus().toggleCodeBlock().run(); },
    setHorizontalRule: function () { editor.chain().focus().setHorizontalRule().run(); },
    toggleSuperscript: function () { editor.chain().focus().toggleSuperscript().run(); },
    toggleSubscript:   function () { editor.chain().focus().toggleSubscript().run(); },
    insertTable:       function () { editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(); },
    addColumnAfter:    function () { editor.chain().focus().addColumnAfter().run(); },
    addRowAfter:       function () { editor.chain().focus().addRowAfter().run(); },
    deleteTable:       function () { editor.chain().focus().deleteTable().run(); },
    addImage: function () {
        var url = prompt('URL de l\'image :');
        if (url) editor.chain().focus().setImage({ src: url }).run();
    },
    setLink: function () {
        var url = prompt('URL du lien :', editor.getAttributes('link').href || 'https://');
        if (url) editor.chain().focus().setLink({ href: url }).run();
    },
    unsetLink: function () { editor.chain().focus().unsetLink().run(); },
    undo: function () { editor.chain().focus().undo().run(); },
    redo: function () { editor.chain().focus().redo().run(); },
};

toolbar.querySelectorAll('button[data-action]').forEach(function (btn) {
    btn.addEventListener('click', function () {
        var action = actions[btn.dataset.action];
        if (action) action();
        updateToolbar();
    });
});

function updateToolbar() {
    toolbar.querySelectorAll('button[data-action]').forEach(function (btn) {
        var a = btn.dataset.action;
        var active = false;
        if (a === 'toggleBold') active = editor.isActive('bold');
        else if (a === 'toggleItalic') active = editor.isActive('italic');
        else if (a === 'toggleUnderline') active = editor.isActive('underline');
        else if (a === 'toggleStrike') active = editor.isActive('strike');
        else if (a === 'toggleCode') active = editor.isActive('code');
        else if (a === 'toggleHighlight') active = editor.isActive('highlight');
        else if (a === 'toggleHeading1') active = editor.isActive('heading', { level: 1 });
        else if (a === 'toggleHeading2') active = editor.isActive('heading', { level: 2 });
        else if (a === 'toggleHeading3') active = editor.isActive('heading', { level: 3 });
        else if (a === 'toggleHeading4') active = editor.isActive('heading', { level: 4 });
        else if (a === 'toggleBulletList') active = editor.isActive('bulletList');
        else if (a === 'toggleOrderedList') active = editor.isActive('orderedList');
        else if (a === 'toggleTaskList') active = editor.isActive('taskList');
        else if (a === 'alignLeft') active = editor.isActive({ textAlign: 'left' });
        else if (a === 'alignCenter') active = editor.isActive({ textAlign: 'center' });
        else if (a === 'alignRight') active = editor.isActive({ textAlign: 'right' });
        else if (a === 'alignJustify') active = editor.isActive({ textAlign: 'justify' });
        else if (a === 'toggleBlockquote') active = editor.isActive('blockquote');
        else if (a === 'toggleCodeBlock') active = editor.isActive('codeBlock');
        else if (a === 'toggleSuperscript') active = editor.isActive('superscript');
        else if (a === 'toggleSubscript') active = editor.isActive('subscript');
        else if (a === 'setLink') active = editor.isActive('link');
        btn.classList.toggle('is-active', active);
    });
}

editor.on('selectionUpdate', updateToolbar);
editor.on('update', updateToolbar);

// Guard button + form submit
var form = document.getElementById('legal-form');
var btn = document.getElementById('legal-submit');
var originalHeading = document.querySelector('input[name="heading"]').value;
var originalBody = editor.getHTML();

function legalHasChanged() {
    var headingChanged = document.querySelector('input[name="heading"]').value !== originalHeading;
    var bodyChanged = editor.getHTML() !== originalBody;
    return headingChanged || bodyChanged;
}

function refreshLegalBtn() {
    btn.classList.toggle('adm-btn--unchanged', !legalHasChanged());
}

document.querySelector('input[name="heading"]').addEventListener('input', refreshLegalBtn);
editor.on('update', function () { refreshLegalBtn(); });
refreshLegalBtn();

form.addEventListener('submit', function (e) {
    e.preventDefault();
    if (!legalHasChanged()) return;
    hiddenInput.value = editor.getHTML();
    FormAjax.setLoading(btn, true);

    fetch('{{ path('app_admin_legal_edit', {uuid: page.uuid}) }}', {
        method: 'POST',
        body: new FormData(form),
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
    })
    .then(function (r) { return r.json(); })
    .then(function (data) {
        FormAjax.setLoading(btn, false);
        if (data.redirect) { window.location.href = data.redirect; return; }
        showToast(data.success ? 'success' : 'error', { message: data.message });
    })
    .catch(function () {
        FormAjax.setLoading(btn, false);
        showToast('error', { message: 'Erreur réseau.' });
    });
});
</script>
{% endblock %}