task-editor.js

/**
 * The task add/edit modal, shared by every view.
 */

class TaskEditor {
    constructor(options = {}) {
        this.options = {
            // Defaults
            showAllFields: true,
            priorityFormat: 'letters', // 'letters' (H/M/L) ou 'words' (high/medium/low)
            language: 'en', // 'en' or 'fr'
            modalId: 'task-editor-modal',
            ...options
        };
        
        this.currentTask = null;
        this.template = null;
        this.onCancel = options.onCancel || (() => {});
        this.onSaveSuccess = options.onSaveSuccess || (() => {});
        this.onSaveError = options.onSaveError || (() => {});
        this.onLogSuccess = options.onLogSuccess || (() => {});
        
        this.init();
    }
    
    init() {
        this.createModal();
        this.bindEvents();
    }
    
    createModal() {
        // Remove an existing modal with this id
        const existingModal = document.getElementById(this.options.modalId);
        if (existingModal) {
            existingModal.remove();
        }
        
        const modal = document.createElement('div');
        modal.id = this.options.modalId;
        modal.className = 'modal task-editor-modal';
        
        document.body.appendChild(modal);
        this.modal = modal;
        
        // Load and apply the template
        this.loadTemplate().then(() => {
            if (this.template) {
                this.renderModal();
            }
        });
    }
    
    async loadTemplate() {
        try {
            const response = await fetch('task-editor-templates.html');
            const html = await response.text();
            
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = html;
            
            this.template = tempDiv.querySelector('#task-editor-modal');
            if (!this.template) {
                console.error('Template task-editor-modal non trouvé');
                return;
            }
            
            document.body.appendChild(this.template);
        } catch (error) {
            console.error('Erreur lors du chargement du template:', error);
        }
    }
    
    renderModal() {
        if (!this.template) return;
        
        const templateContent = this.template.content.cloneNode(true);
        this.modal.appendChild(templateContent);
        
        // Fill the template's text slots
        this.populateTemplate();
        
        // Re-bind events after rendering
        this.bindEvents();
    }
    
    populateTemplate() {
        const texts = this.getTexts();
        const priorityOptions = this.getPriorityOptions();
        
        // Text slots
        const slots = {
            'title': texts.addTask,
            'description-label': texts.description,
            'tags-label': texts.tags,
            'tags-placeholder': texts.tagsPlaceholder,
            'project-label': texts.project,
            'project-placeholder': texts.projectPlaceholder,
            'priority-label': texts.priority,
            'no-priority': texts.noPriority,
            'duration-label': texts.duration,
            'duration-placeholder': texts.durationPlaceholder,
            'due-label': texts.dueDate,
            'scheduled-label': texts.scheduled,
            'save-button': texts.save,
            'cancel-button': texts.cancel
        };
        
        // Fill the slots
        Object.entries(slots).forEach(([name, value]) => {
            const slot = this.modal.querySelector(`slot[name="${name}"]`);
            if (slot) {
                slot.textContent = value;
            }
        });
        
        // Priority is now a plain text input — no options to populate
        
        // Show or hide the extended fields
        this.toggleExtendedFields(this.options.showAllFields);
    }
    
    toggleExtendedFields(show) {
        const extendedFields = this.modal.querySelector('.extended-fields');
        const extendedDates = this.modal.querySelector('.extended-dates');
        
        if (extendedFields) extendedFields.style.display = show ? 'block' : 'none';
        if (extendedDates) extendedDates.style.display = show ? 'block' : 'none';
    }
    
    getTexts() {
        if (this.options.language === 'fr') {
            return {
                addTask: 'Ajouter une tâche',
                editTask: 'Modifier la tâche',
                description: 'Description',
                tags: 'Tags',
                tagsPlaceholder: 'Tags séparés par des virgules',
                project: 'Projet',
                projectPlaceholder: 'Nom du projet',
                priority: 'Priorité',
                noPriority: 'Aucune',
                duration: 'Durée',
                durationPlaceholder: 'ex: 30min, 1h30m, 2d',
                dueDate: 'Date d\'échéance',
                scheduled: 'Planifié',
                save: 'Sauvegarder',
                cancel: 'Annuler'
            };
        } else {
            return {
                addTask: 'Add Task',
                editTask: 'Edit Task',
                description: 'Description',
                tags: 'Tags',
                tagsPlaceholder: 'Comma-separated tags',
                project: 'Project',
                projectPlaceholder: 'Project name',
                priority: 'Priority',
                noPriority: 'None',
                duration: 'Duration',
                durationPlaceholder: 'e.g., 30min, 1h30m, 2d',
                dueDate: 'Due Date',
                scheduled: 'Scheduled',
                save: 'Save Changes',
                cancel: 'Cancel'
            };
        }
    }
    
    getPriorityOptions() {
        if (this.options.priorityFormat === 'letters') {
            return [
                { value: 'H', label: this.options.language === 'fr' ? 'Élevée' : 'High' },
                { value: 'M', label: this.options.language === 'fr' ? 'Moyenne' : 'Medium' },
                { value: 'L', label: this.options.language === 'fr' ? 'Faible' : 'Low' }
            ];
        } else {
            return [
                { value: 'high', label: this.options.language === 'fr' ? 'Élevée' : 'High' },
                { value: 'medium', label: this.options.language === 'fr' ? 'Moyenne' : 'Medium' },
                { value: 'low', label: this.options.language === 'fr' ? 'Faible' : 'Low' }
            ];
        }
    }
    
    bindEvents() {
        // Bind only the elements that exist
        const closeBtn = this.modal.querySelector('.task-editor-close');
        const cancelBtn = this.modal.querySelector('#task-editor-cancel');
        const form = this.modal.querySelector('#task-editor-form');
        
        if (closeBtn) {
            closeBtn.addEventListener('click', () => {
                this.hide();
            });
        }
        
        // Close on a click outside
        this.modal.addEventListener('click', (e) => {
            if (e.target === this.modal) {
                this.hide();
            }
        });
        
        if (cancelBtn) {
            cancelBtn.addEventListener('click', () => {
                this.hide();
                this.onCancel();
            });
        }

        const logBtn = this.modal.querySelector('#task-editor-log');
        if (logBtn) {
            logBtn.addEventListener('click', () => this.handleLog());
        }
        
        // Auto-uppercase h→H, m→M, l→L in priority field (leaves numeric values untouched)
        const priField = this.modal.querySelector('#task-editor-priority');
        if (priField) {
            priField.addEventListener('input', () => {
                const v = priField.value;
                const up = v.replace(/[hml]/g, c => c.toUpperCase());
                if (up !== v) { priField.value = up; }
            });
        }

        // Datetime-local: dim the format-hint text when the field is empty
        const syncDtColor = (inp) => inp.classList.toggle('te-dt-empty', !inp.value);
        this.modal.querySelectorAll('input[type="datetime-local"], input[type="date"]').forEach(inp => {
            inp.addEventListener('change', () => syncDtColor(inp));
            syncDtColor(inp);
        });

        // Date field clear buttons — type-switch trick: WebKit ignores .value='' on
        // datetime-local but respects it when type is temporarily 'text'.
        this.modal.querySelectorAll('.te-clr').forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.preventDefault();
                const target = this.modal.querySelector('#' + btn.dataset.clears);
                if (!target) return;
                const type   = target.type;
                target.type  = 'text';
                target.value = '';
                target.type  = type;
                target.dispatchEvent(new Event('change', { bubbles: true }));
            });
        });

        // Populate state dropdown from kanban columns
        this._loadStateOptions();

        // State select: dim when placeholder selected
        const stateSel = this.modal.querySelector('#task-editor-state');
        if (stateSel) stateSel.addEventListener('change', () => {
            stateSel.classList.toggle('te-state-empty', !stateSel.value);
            stateSel.dataset.current = stateSel.value;
        });

        // Recur line: hints as the rule, type and dates change (the hook decides, on save)
        ['#task-editor-r', '#task-editor-due', '#task-editor-scheduled', '#task-editor-until'].forEach(sel => {
            const el = this.modal.querySelector(sel);
            if (el) ['input', 'change'].forEach(ev => el.addEventListener(ev, () => this._recurHints()));
        });
        this.modal.querySelectorAll('input[name="te-rtype"]').forEach(r =>
            r.addEventListener('change', () => this._recurHints()));

        // Save button — pulse animation + feedback
        const saveBtn = this.modal.querySelector('#task-editor-save');
        if (saveBtn) saveBtn.addEventListener('click', () => {
            this._pulseBtn(saveBtn);
            this.handleSave();
        });

        // Keep form submit as fallback for Enter key — pulse save button
        if (form) {
            form.addEventListener('submit', (e) => {
                e.preventDefault();
                const sb = this.modal.querySelector('#task-editor-save');
                if (sb) this._pulseBtn(sb);
                this.handleSave();
            });
        }
        
        // Escape closes
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && this.modal.style.display === 'block') {
                this.hide();
            }
        });
    }
    
    async show(task = null) {
        // Edit from the server's copy, not the one the card was drawn from: it may be older,
        // and the save below sends only what differs from what the form showed (bug 2).
        if (task?.uuid) {
            try {
                const fresh = await TW.api.get(`api/task/${task.uuid}`);
                if (fresh?.uuid === task.uuid) task = fresh;
            } catch {}
        }
        this.currentTask = task;

        // Make sure the modal and its template are loaded
        if (!this.modal || !this.template) {
            this.createModal();
            return;
        }

        const title = this.modal.querySelector('#task-editor-title');
        const texts = this.getTexts();

        if (task) {
            if (title) title.textContent = texts.editTask;
            this.populateForm(task);
        } else {
            if (title) title.textContent = texts.addTask;
            this.clearForm();
            this._applyFilterDefaults();
        }
        this._loadProjectSuggestions();

        // Log button only makes sense for new tasks
        const logBtn = this.modal.querySelector('#task-editor-log');
        if (logBtn) logBtn.style.display = task ? 'none' : '';

        this.modal.style.display = 'block';

        setTimeout(() => {
            const descField = this.modal.querySelector('#task-editor-description');
            if (descField) descField.focus();
        }, 80);
    }
    
    showForTask(task) {
        this.show(task);
    }
    
    hide() {
        this.modal.style.display = 'none';
        this.currentTask = null;
    }
    
    _pulseBtn(btn) {
        btn.classList.remove('te-btn-clicked');
        void btn.offsetWidth; // reflow to restart animation
        btn.classList.add('te-btn-clicked');
        btn.addEventListener('animationend', () => btn.classList.remove('te-btn-clicked'), { once: true });
    }

    async _loadStateOptions() {
        const sel = this.modal.querySelector('#task-editor-state');
        if (!sel) return;
        try {
            if (!TaskEditor._stateColumns) {
                const d = await fetch('api/kanban/columns').then(r => r.json());
                TaskEditor._stateColumns = d.columns || [];
            }
            const current = sel.dataset.current || '';
            sel.innerHTML = `<option value="">state</option>` +
                TaskEditor._stateColumns.map(c =>
                    `<option value="${c}">${c}</option>`
                ).join('');
            sel.value = current || '';
            sel.classList.toggle('te-state-empty', !sel.value);
        } catch {}
    }

    populateForm(task) {
        const form = this.modal.querySelector('#task-editor-form');
        if (!form) return;
        
        // Champs de base
        const descField = form.querySelector('#task-editor-description');
        const priorityField = form.querySelector('#task-editor-priority');
        const durationField = form.querySelector('#task-editor-duration');
        
        if (descField) descField.value = task.description || '';
        if (priorityField) {
            // Priority select takes the raw value
            const priorityValue = task.priority ?  task.priority : '';
            priorityField.value = priorityValue;
        }
        const dueDurField = form.querySelector('#task-editor-due-duration');
        if (durationField) durationField.value = '';   // legacy field — unused
        if (dueDurField) dueDurField.value = task.due_duration || '';
        
        // Extended fields, if present
        if (this.options.showAllFields) {
            const tagsField = form.querySelector('#task-editor-tags');
            const projectField = form.querySelector('#task-editor-project');
            const dueField = form.querySelector('#task-editor-due');
            const scheduledField = form.querySelector('#task-editor-scheduled');
            
            if (tagsField) tagsField.value = Array.isArray(task.tags) ? task.tags.join(', ') : (task.tags || '');
            if (projectField) projectField.value = task.project || '';
            if (dueField) dueField.value = this.formatDateForInput(task.due);
            if (scheduledField) scheduledField.value = this.formatDateForInput(task.scheduled);

            const schedDurField = form.querySelector('#task-editor-sched-duration');
            if (schedDurField) schedDurField.value = task.sched_duration || '';

            const stateField = form.querySelector('#task-editor-state');
            if (stateField) {
                stateField.dataset.current = task.state || '';
                this._loadStateOptions(); // rebuild options with correct selection
            }

            const depsField = form.querySelector('#task-editor-deps');
            if (depsField) {
                const uuids = task.depends
                    ? (Array.isArray(task.depends) ? task.depends : String(task.depends).split(',')).map(d => d.trim()).filter(Boolean)
                    : [];
                const allLookup = new Map((window._twAllTasks || []).map(t => [t.uuid, t]));
                const depLabels = uuids.map(uuid => {
                    const t = allLookup.get(uuid);
                    if (!t) return uuid.slice(0, 8);           // unknown: uuid:8
                    return t.id ? String(t.id) : uuid.slice(0, 8); // pending: ID, else uuid:8
                });
                depsField.value = depLabels.join(', ');
            }

            const waitField  = form.querySelector('#task-editor-wait');
            const untilField = form.querySelector('#task-editor-until');
            if (waitField)  waitField.value  = this.formatDateForInput(task.wait);
            if (untilField) untilField.value = this.formatDateForInput(task.until);
            if (TW.recur.kind(task) === 'template') this._fillTemplateDates(task);
        }
        this._fillRecur(task);

        // Sync datetime-local empty-state styling after programmatic fill
        this.modal.querySelectorAll('input[type="datetime-local"], input[type="date"]').forEach(inp =>
            inp.classList.toggle('te-dt-empty', !inp.value)
        );

        // What the form shows now; an edit sends only the fields that differ from this
        this._shown = this._formValues();

        // Show existing annotations with edit/delete controls
        this._renderAnnotations(Array.isArray(task.annotations) ? task.annotations : []);

        this._setupRevertBtn(task);
    }

    // The edit form's values as the inputs hold them (minute precision for dates). Comparing
    // two snapshots says which fields the user actually changed.
    _formValues() {
        const f = this.modal.querySelector('#task-editor-form');
        const v = id => f?.querySelector('#task-editor-' + id)?.value ?? '';
        return {
            description: v('description'), priority: v('priority'), tags: v('tags'),
            project: v('project'), due: v('due'), due_duration: v('due-duration'),
            scheduled: v('scheduled'), sched_duration: v('sched-duration'),
            state: f?.querySelector('#task-editor-state')?.dataset.current ?? '',
            deps: v('deps'), wait: v('wait'), until: v('until'),
            r: v('r').trim(), rtype: this._rtype(), rend: v('rend'),
        };
    }

    // Which taskData keys each form field produces (handleSave)
    static get FIELD_KEYS() {
        return {
            description: ['description'], priority: ['priority'], tags: ['tags_add', 'tags_remove'],
            project: ['project'], due: ['due'], due_duration: ['due_duration'],
            scheduled: ['scheduled'], sched_duration: ['sched_duration'], state: ['state'],
            deps: ['depends', 'parent_id'], wait: ['wait'], until: ['until'],
            r: ['r'], rtype: ['type'], rend: ['rend'],
        };
    }

    _setupRevertBtn(task) {
        const banner    = this.modal.querySelector('#te-status-banner');
        const statusTxt = this.modal.querySelector('#te-status-text');
        const revertBtn = this.modal.querySelector('#te-revert-btn');
        if (!banner) return;

        // Read-only for completed and deleted only: a recurrence template (status recurring) is
        // edited like any other task (a template "reverted to pending" would stop being one)
        const status = task?.status;
        const isNonPending = status === 'completed' || status === 'deleted';
        const logBtn  = this.modal.querySelector('#task-editor-log');
        const saveBtn = this.modal.querySelector('#task-editor-save');
        if (logBtn)  logBtn.style.display  = isNonPending ? 'none' : '';
        if (saveBtn) saveBtn.style.display = isNonPending ? 'none' : '';
        if (isNonPending) {
            if (statusTxt) statusTxt.textContent = `Status: ${status}`;
            banner.style.display = '';
            if (revertBtn) {
                revertBtn.onclick = async () => {
                    try {
                        const d = await TW.api.write('POST', `api/task/${task.uuid}/revert`);
                        if (d.success) {
                            this.onSaveSuccess(d.task, true);
                            this.hide();
                        } else {
                            this.onSaveError(d.message || 'Failed to revert task');
                        }
                    } catch (e) {
                        this.onSaveError(TW.api.networkError(e));
                    }
                };
            }
        } else {
            banner.style.display = 'none';
        }
    }
    
    clearForm() {
        this._shown = null;
        this._annWritten = false;   // an annotation added, edited or deleted while this was open
        const form = this.modal.querySelector('#task-editor-form');
        if (form) form.reset();
        // Clear any leftover annotation state from a previous edit
        const annList = this.modal.querySelector('#te-existing-annotations');
        if (annList) annList.innerHTML = '';
        this._hideAnnEditor();
        // Hide status banner; restore Log/Save for new tasks
        const banner = this.modal.querySelector('#te-status-banner');
        if (banner) banner.style.display = 'none';
        const logBtn2  = this.modal.querySelector('#task-editor-log');
        const saveBtn2 = this.modal.querySelector('#task-editor-save');
        if (logBtn2)  logBtn2.style.display  = '';
        if (saveBtn2) saveBtn2.style.display = '';
        // Re-sync datetime styling
        this.modal.querySelectorAll('input[type="datetime-local"], input[type="date"]').forEach(inp =>
            inp.classList.toggle('te-dt-empty', !inp.value)
        );
        // Reset state select to placeholder
        const sel = this.modal.querySelector('#task-editor-state');
        if (sel) { sel.dataset.current = ''; this._loadStateOptions(); }
        this._fillRecur(null);
    }
    
    handleSave() {
        const form = this.modal.querySelector('#task-editor-form');
        if (!form) return;
        
        const taskData = {
            description: form.querySelector('#task-editor-description').value,
            priority:    form.querySelector('#task-editor-priority').value,
        };

        const tagsField     = form.querySelector('#task-editor-tags');
        const projectField  = form.querySelector('#task-editor-project');
        const dueField      = form.querySelector('#task-editor-due');
        const dueDurField   = form.querySelector('#task-editor-due-duration');
        const schedField    = form.querySelector('#task-editor-scheduled');
        const schedDurField = form.querySelector('#task-editor-sched-duration');
        const stateField    = form.querySelector('#task-editor-state');
        const depsField     = form.querySelector('#task-editor-deps');
        const waitField     = form.querySelector('#task-editor-wait');
        const untilField    = form.querySelector('#task-editor-until');

        if (tagsField) {
            const newTags = tagsField.value.split(',').map(t => t.trim()).filter(Boolean);
            if (this.currentTask) {
                // Edit: send diff so backend can do targeted +/- without -TAGS
                const existing = Array.isArray(this.currentTask.tags) ? this.currentTask.tags : [];
                taskData.tags_remove = existing.filter(t => !newTags.includes(t));
                taskData.tags_add    = newTags.filter(t => !existing.includes(t));
            } else {
                taskData.tags = newTags;
            }
        }
        if (projectField)  taskData.project        = projectField.value;
        if (dueField)      taskData.due            = dueField.value;
        if (dueDurField)   taskData.due_duration   = dueDurField.value;
        if (schedField)    taskData.scheduled      = schedField.value;
        if (schedDurField) taskData.sched_duration = schedDurField.value;
        if (stateField)    taskData.state          = stateField.value;
        if (depsField) {
            const tokens = depsField.value.split(',').map(s => s.trim()).filter(Boolean);
            const parents = tokens.filter(s => s.startsWith('-'));
            const normal  = tokens.filter(s => !s.startsWith('-'));

            if (parents.length > 1) {
                this.onSaveError('Only one parent (−ID) allowed in deps');
                return;
            }
            if (parents.length === 1) {
                const pid = parseInt(parents[0].slice(1), 10);
                if (!pid || pid < 1) { this.onSaveError('Invalid parent ID: ' + parents[0]); return; }
                // Only meaningful when adding — silently ignore on edits
                if (!this.currentTask) taskData.parent_id = pid;
            }
            taskData.depends = normal.join(',');
        }
        if (waitField)     taskData.wait           = waitField.value;
        if (untilField)    taskData.until          = untilField.value;

        // Recur line (not on an instance: its rule is the template's). Type and end go with a rule;
        // a template's emptied rule goes too, for the hook to answer.
        const rField = form.querySelector('#task-editor-r');
        if (rField && !this._recurInstance &&
                (rField.value.trim() || TW.recur.kind(this.currentTask) === 'template')) {
            taskData.r    = rField.value.trim();
            taskData.type = this._rtype();
            taskData.rend = form.querySelector('#task-editor-rend')?.value || '';
        }

        if (this.currentTask) {
            if (this._shown) {
                const now = this._formValues();
                for (const [field, keys] of Object.entries(TaskEditor.FIELD_KEYS))
                    if (now[field] === this._shown[field]) keys.forEach(k => delete taskData[k]);
            }
            if (Object.keys(taskData).length === 0) {
                // Annotations are written as they're added (their own "Save note"), so a Save
                // with no changed field still saved something: follow up as any save does
                // (the List redraws; an embedding nb-web hears tw-task-saved). Bug 17.
                if (this._annWritten) {
                    this.onSaveSuccess(this.currentTask, true);
                    this.hide();
                    return;
                }
                this.hide();
                document.dispatchEvent(new CustomEvent('tw-show-notification',
                    { detail: { message: 'No changes', type: 'info' } }));
                return;
            }
            if (TW.recur.kind(this.currentTask) === 'template') this._relativeDates(taskData);
            taskData.id = this.currentTask.id;
            taskData.uuid = this.currentTask.uuid;
        }

        this.saveTask(taskData, this.currentTask !== null);
    }
    
    async saveTask(taskData, isEdit) {
        try {
            const taskDataForAPI = this.prepareTaskDataForAPI(taskData, isEdit);
            const endpoint = isEdit ? `api/task/${taskData.uuid}/modify` : 'api/task/add';
            const method = isEdit ? 'PUT' : 'POST';
            
            const data = await TW.api.write(method, endpoint, taskDataForAPI);
            
            if (TW.api.handleWriteResult(data)) { this.hide(); return; }
            if (data.success) {
                this.onSaveSuccess(data.task, isEdit);
                this.hide();
                this._showNotes(data.warnings);
            } else {
                this.onSaveError(data.error || data.message || (isEdit ? 'Failed to update task' : 'Failed to add task'));
            }
        } catch (error) {
            this.onSaveError(TW.api.networkError(error));
        }
    }

    handleLog() {
        const form = this.modal.querySelector('#task-editor-form');
        if (!form) return;

        const description = form.querySelector('#task-editor-description')?.value || '';
        if (!description) return;

        const taskData = { description, priority: form.querySelector('#task-editor-priority')?.value || '' };

        const tagsField     = form.querySelector('#task-editor-tags');
        const projectField  = form.querySelector('#task-editor-project');
        const dueField      = form.querySelector('#task-editor-due');
        const dueDurField   = form.querySelector('#task-editor-due-duration');
        const schedField    = form.querySelector('#task-editor-scheduled');
        const schedDurField = form.querySelector('#task-editor-sched-duration');

        if (tagsField)     taskData.tags          = tagsField.value.split(',').map(t => t.trim()).filter(Boolean);
        if (projectField)  taskData.project        = projectField.value;
        if (dueField)      taskData.due            = dueField.value;
        if (dueDurField)   taskData.due_duration   = dueDurField.value;
        if (schedField)    taskData.scheduled      = schedField.value;
        if (schedDurField) taskData.sched_duration = schedDurField.value;

        this.logTask(taskData);
    }

    async logTask(taskData) {
        try {
            const prepared = this.prepareTaskDataForAPI(taskData, false);
            const data = await TW.api.write('POST', 'api/task/log', prepared);
            if (TW.api.handleWriteResult(data)) { this.hide(); return; }
            if (data.success) {
                this.hide();
                this.onLogSuccess(data.task || null);
            } else {
                this.onSaveError(data.error || 'Failed to log task');
            }
        } catch (error) {
            this.onSaveError(TW.api.networkError(error));
        }
    }

    prepareTaskDataForAPI(taskData, isEdit) {
        // Add and log send every field; an edit sends only those the user changed
        const preparedData = {};
        if (taskData.description !== undefined) preparedData.description = taskData.description;
        if (taskData.project     !== undefined) preparedData.project     = taskData.project  || null;
        if (taskData.priority    !== undefined) preparedData.priority    = taskData.priority || null;

        // Edit mode sends a diff; add mode sends the full tag list
        if (taskData.tags_add !== undefined || taskData.tags_remove !== undefined) {
            preparedData.tags_add    = taskData.tags_add    || [];
            preparedData.tags_remove = taskData.tags_remove || [];
        } else if (taskData.tags !== undefined) {
            preparedData.tags = taskData.tags;
        }
        
        // Always send date fields — empty string signals "clear this date" to the backend
        if (taskData.due !== undefined)
            preparedData.due = taskData.due ? this.formatDateForTask(taskData.due) : '';
        if (taskData.scheduled !== undefined)
            preparedData.scheduled = taskData.scheduled ? this.formatDateForTask(taskData.scheduled) : '';
        
        if (taskData.due_duration)   preparedData.due_duration   = taskData.due_duration;
        if (taskData.sched_duration) preparedData.sched_duration = taskData.sched_duration;

        if (taskData.state    !== undefined) preparedData.state     = taskData.state    || '';
        if (taskData.depends  !== undefined) preparedData.depends   = taskData.depends  || '';
        if (taskData.parent_id !== undefined) preparedData.parent_id = taskData.parent_id;
        if (taskData.wait  !== undefined)
            preparedData.wait  = taskData.wait  ? this.formatDateForTask(taskData.wait)  : '';
        if (taskData.until !== undefined)
            preparedData.until = taskData.until ? this.formatDateForTask(taskData.until) : '';

        // Recurrence: the rule, its type and end (a date), a template's offsets (rwait:due-604800s)
        for (const k of ['r', 'type', 'rend', 'rwait', 'runtil', 'rscheduled'])
            if (taskData[k] !== undefined) preparedData[k] = taskData[k];

        return preparedData;
    }
    
    formatDateForTask(dateString) {
        // datetime-local value → a Taskwarrior date
        if (!dateString) return '';
        
        // Add seconds if missing
        return dateString.length === 16 ? `${dateString}:00` : dateString;
    }

    formatDateForInput(dateString) {
        // Convert TaskWarrior date format to HTML datetime-local format (local time).
        // MUST use local-time methods — toISOString() returns UTC and would show the
        // wrong time for users not in UTC (e.g. UTC-4 sees a 4-hour offset).
        if (!dateString) return '';

        let date;
        if (/^\d{8}T\d{6}Z$/.test(dateString)) {
            // Compact TW UTC format: 20250131T055530Z → parse as UTC
            const y = dateString.slice(0,4), mo = dateString.slice(4,6), d = dateString.slice(6,8);
            const h = dateString.slice(9,11), mi = dateString.slice(11,13);
            date = new Date(`${y}-${mo}-${d}T${h}:${mi}:00Z`);
        } else {
            date = new Date(dateString);
        }
        if (isNaN(date.getTime())) return '';

        const pad = n => String(n).padStart(2, '0');
        return `${date.getFullYear()}-${pad(date.getMonth()+1)}-${pad(date.getDate())}` +
               `T${pad(date.getHours())}:${pad(date.getMinutes())}`;
    }

    
    
    // ── Recur line (recurrence-overhaul) ─────────────────────────────────────
    // The hook owns the rules: these only fill the line, hint, and turn a template's picked dates
    // into the offsets it stores.

    _rtype() {
        return this.modal?.querySelector('input[name="te-rtype"]:checked')?.value || 'period';
    }

    // Fill the line for task (null: a new task). A template shows its rule; an instance shows its
    // template's rule instead, with a link to edit that (an edit here changes this instance only).
    _fillRecur(task) {
        const f = this.modal;
        const row = f?.querySelector('#te-recur-row');
        if (!row) return;
        const kind = TW.recur.kind(task);
        this._recurInstance = kind === 'instance' ? task : null;
        row.style.display = kind === 'instance' ? 'none' : '';
        f.querySelector('#task-editor-r').value = kind === 'template' ? (task.r || '') : '';
        const type = kind === 'template' && task.type === 'chain' ? 'chain' : 'period';
        f.querySelectorAll('input[name="te-rtype"]').forEach(r => { r.checked = r.value === type; });
        const rend = f.querySelector('#task-editor-rend');
        rend.value = kind === 'template' ? this.formatDateForInput(task.rend).slice(0, 10) : '';
        rend.classList.toggle('te-dt-empty', !rend.value);
        if (kind === 'instance') this._showTemplateNote(task);
        else this._recurHints();
    }

    // Hints, never blocks: a rule needs a due or scheduled date, a chain takes no until
    _recurHints() {
        const f = this.modal;
        const note = f?.querySelector('#te-recur-note');
        if (!note || this._recurInstance) return;
        const val = id => f.querySelector('#task-editor-' + id)?.value || '';
        const r = val('r').trim(), chain = r && this._rtype() === 'chain';
        const until = f.querySelector('#task-editor-until')?.closest('.te-date-field');
        if (until) {
            until.classList.toggle('te-recur-unused', !!chain);
            until.title = chain ? 'A chain takes no until: End stops it' : '';
        }
        const hint = r && !val('due') && !val('scheduled') ? 'A recurring task needs a due or scheduled date.'
                   : chain && val('until') ? 'A chain takes no until: End stops it.' : '';
        note.className = 'te-recur-note te-recur-hint';
        note.textContent = hint;
        note.style.display = hint ? '' : 'none';
    }

    async _showTemplateNote(inst) {
        const note = this.modal.querySelector('#te-recur-note');
        const head = '↻ instance' + (inst.rindex ? ' #' + inst.rindex : '');
        note.className = 'te-recur-note';
        note.textContent = head;
        note.style.display = '';
        const until = this.modal.querySelector('#task-editor-until')?.closest('.te-date-field');
        if (until) { until.classList.remove('te-recur-unused'); until.title = ''; }
        let tpl = null;
        try { tpl = await TW.api.get(`api/task/${inst.rtemplate || inst.parent}`); } catch {}
        if (this._recurInstance !== inst || !tpl?.uuid) return;   // the form moved on, or no template
        const rule = tpl.r || tpl.recur || '';
        note.textContent = `${head} · ${tpl.type === 'chain' ? 'chain' : 'period'} ${rule} · `;
        const link = document.createElement('a');
        link.textContent = 'edit template';
        link.addEventListener('click', () => this.show(tpl));
        note.appendChild(link);
    }

    // A template stores wait, until and the other date as offsets from its anchor: show them as dates
    _fillTemplateDates(task) {
        const name = TW.recur.anchorName(task);
        const anchor = this._twDate(name === 'sched' ? task.scheduled : task.due);
        if (!anchor) return;
        const set = (id, expr) => {
            const el = this.modal.querySelector('#task-editor-' + id);
            const d = expr && TW.recur.offsetDate(anchor, expr);
            if (el && d) el.value = this._localInput(d);
        };
        set('wait', task.rwait);
        set('until', task.runtil);
        if (name === 'due') set('scheduled', task.rscheduled);
    }

    // …and save the ones changed as offsets from the anchor the form now holds (quietly: the
    // hook keeps an existing rwait over a new absolute wait, so dates can't go as dates)
    _relativeDates(taskData) {
        const name = TW.recur.anchorName(this.currentTask);
        const anchorVal = this.modal.querySelector(name === 'sched' ? '#task-editor-scheduled' : '#task-editor-due')?.value;
        const anchor = anchorVal ? new Date(anchorVal) : null;
        const fields = { wait: 'rwait', until: 'runtil' };
        if (name === 'due') fields.scheduled = 'rscheduled';
        for (const [abs, rel] of Object.entries(fields)) {
            if (!(abs in taskData)) continue;
            const v = taskData[abs];
            delete taskData[abs];
            taskData[rel] = v && anchor ? TW.recur.offsetExpr(name, anchor, new Date(v)) : '';
        }
    }

    _showNotes(lines) {
        if (lines && lines.length)
            document.dispatchEvent(new CustomEvent('tw-show-notification',
                { detail: { message: lines.join('\n'), type: 'info' } }));
    }

    // A Taskwarrior date (20250131T055530Z or ISO) as a Date, or null
    _twDate(s) {
        if (!s) return null;
        const m = /^(\d{4})(\d{2})(\d{2})T(\d{2})(\d{2})(\d{2})Z$/.exec(s);
        const d = m ? new Date(Date.UTC(+m[1], m[2] - 1, +m[3], +m[4], +m[5], +m[6])) : new Date(s);
        return isNaN(d.getTime()) ? null : d;
    }

    // A Date as a datetime-local value, in local time
    _localInput(d) {
        const pad = n => String(n).padStart(2, '0');
        return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
    }

    // Remove the modal
    destroy() {
        if (this.modal) this.modal.remove();
    }
    
    // A new task starts from the nav filter's project, priority and tags (TW.filter.addDefaults)
    _applyFilterDefaults() {
        if (!window.twNav) return;
        const d = TW.filter.addDefaults(window.twNav.getState());
        const set = (sel, v) => { const el = this.modal.querySelector(sel); if (el && v) el.value = v; };
        set('#task-editor-project', d.project);
        set('#task-editor-priority', d.priority);
        set('#task-editor-tags', d.tags && d.tags.join(', '));
    }

    // The project field suggests what the Projects sidebar lists (its active/all mode)
    async _loadProjectSuggestions() {
        const all = localStorage.getItem('tw-proj-mode') === 'all';
        const d = await TW.api.get('api/projects' + (all ? '' : '?active=1'));
        if (d.success) this.updateProjectSuggestions((d.projects || []).map(p => p.name));
    }

    // Fill the project field's autocomplete list
    updateProjectSuggestions(projects = []) {
        if (!this.options.showAllFields) return;
        
        const datalist = this.modal?.querySelector('#task-editor-project-options');
        if (!datalist) return;
        
        // Clear existing options
        datalist.innerHTML = '';
        
        // Add the projects
        projects.forEach(project => {
            if (project) {
                const option = document.createElement('option');
                option.value = project;
                datalist.appendChild(option);
            }
        });
    }

    // ── Annotation management ──────────────────────────────────────────────

    _renderAnnotations(annotations) {
        const annList = this.modal.querySelector('#te-existing-annotations');
        if (!annList) return;
        annList.innerHTML = '';
        annotations.forEach(ann => {
            const text = ann.description || ann;
            const row  = document.createElement('div');
            row.className = 'te-ann-row';
            row.dataset.annText = text;

            const textEl = document.createElement('span');
            textEl.className = 'te-ann-text';
            textEl.innerHTML = typeof linkifyAnnotation === 'function' ? linkifyAnnotation(text) : text;

            const editBtn = document.createElement('button');
            editBtn.type = 'button';
            editBtn.className = 'te-ann-btn te-ann-edit';
            editBtn.textContent = 'Edit';
            editBtn.addEventListener('click', () => this._openAnnEditor(text, row));

            const delBtn = document.createElement('button');
            delBtn.type = 'button';
            delBtn.className = 'te-ann-btn te-ann-del';
            delBtn.textContent = 'Del';
            delBtn.addEventListener('click', () => this._deleteAnnotation(text, row));

            row.appendChild(textEl);
            row.appendChild(editBtn);
            row.appendChild(delBtn);
            annList.appendChild(row);
        });

        // Wire up the add button (use onclick to avoid stacking listeners on re-render)
        const addBtn = this.modal.querySelector('#te-ann-add-btn');
        if (addBtn) addBtn.onclick = () => this._openAnnEditor(null, null);
    }

    _cmInstance() { return this._annCm || null; }

    _openAnnEditor(existingText, anchorRow) {
        const wrap    = this.modal.querySelector('#te-ann-editor-wrap');
        const host    = this.modal.querySelector('#te-ann-cm-host');
        const saveBtn = this.modal.querySelector('#te-ann-save-btn');
        const addBtn  = this.modal.querySelector('#te-ann-add-btn');
        if (!wrap || !host) return;

        // Hide the main form actions so only one Save is visible at a time
        const actions = this.modal.querySelector('.te-actions');
        if (actions) actions.style.display = 'none';

        // Destroy any previous CM instance
        if (this._annCm) { this._annCm.destroy(); this._annCm = null; }
        host.innerHTML = '';

        const CM = window.CM;
        if (CM) {
            this._annCm = new CM.EditorView({
                state: CM.EditorState.create({
                    doc: existingText || '',
                    extensions: [
                        CM.basicSetup,
                        CM.EditorView.lineWrapping,
                        CM.keymap.of([...CM.defaultKeymap, ...CM.historyKeymap]),
                        CM.placeholder(existingText ? 'Edit annotation…' : 'New annotation…'),
                    ],
                }),
                parent: host,
            });
            // Focus and move cursor to end
            this._annCm.focus();
            this._annCm.dispatch({ selection: { anchor: (existingText || '').length } });
        } else {
            // Fallback plain textarea if CM bundle not loaded
            const ta = document.createElement('textarea');
            ta.className = 'te-ann-textarea-fallback';
            ta.value = existingText || '';
            ta.placeholder = existingText ? 'Edit annotation…' : 'New annotation…';
            host.appendChild(ta);
            ta.focus();
        }

        wrap.style.display = '';
        if (addBtn) addBtn.style.display = 'none';
        // Highlight the row being edited
        this.modal.querySelectorAll('.te-ann-row').forEach(r => r.classList.remove('te-ann-editing'));
        if (anchorRow) anchorRow.classList.add('te-ann-editing');

        const getEditorText = () => {
            if (this._annCm) return this._annCm.state.doc.toString().trim();
            const ta = host.querySelector('textarea');
            return ta ? ta.value.trim() : '';
        };

        saveBtn.onclick = async () => {
            const newText = getEditorText();
            if (!newText) return;
            const uuid = this.currentTask?.uuid;
            if (!uuid) return;

            const r = existingText
                ? await this._callAPI('PUT', `api/task/${uuid}/annotation`, {
                      old_annotation: existingText,
                      new_annotation: newText,
                  })
                : await this._callAPI('POST', `api/task/${uuid}/annotate`, { annotation: newText });
            if (r?.success !== false) this._annWritten = true;
            await this._reloadAnnotations(uuid);
            this._hideAnnEditor();
        };

        // Escape dismisses the annotation editor
        wrap._escHandler = (e) => { if (e.key === 'Escape') { e.stopPropagation(); this._hideAnnEditor(); } };
        wrap.addEventListener('keydown', wrap._escHandler);
    }

    _hideAnnEditor() {
        const wrap    = this.modal.querySelector('#te-ann-editor-wrap');
        const addBtn  = this.modal.querySelector('#te-ann-add-btn');
        const actions = this.modal.querySelector('.te-actions');
        if (wrap) {
            if (wrap._escHandler) { wrap.removeEventListener('keydown', wrap._escHandler); delete wrap._escHandler; }
            wrap.style.display = 'none';
        }
        if (addBtn)  addBtn.style.display  = '';
        if (actions) actions.style.display = '';
        this.modal.querySelectorAll('.te-ann-row').forEach(r => r.classList.remove('te-ann-editing'));
        if (this._annCm) { this._annCm.destroy(); this._annCm = null; }
        const host = this.modal.querySelector('#te-ann-cm-host');
        if (host) host.innerHTML = '';
    }

    async _deleteAnnotation(text, row) {
        const uuid = this.currentTask?.uuid;
        if (!uuid) return;
        const r = await this._callAPI('DELETE', `api/task/${uuid}/annotation`, { annotation: text });
        if (r?.success !== false) {
            this._annWritten = true;
            row.remove();
            this._hideAnnEditor();
        }
    }

    async _reloadAnnotations(uuid) {
        try {
            const r = await fetch(`api/task/${uuid}`);
            const d = await r.json();
            const anns = Array.isArray(d.annotations) ? d.annotations : [];
            this._renderAnnotations(anns);
            // Update currentTask so subsequent edits reference fresh data
            if (this.currentTask) this.currentTask.annotations = anns;
        } catch (_) {}
    }

    // Annotation writes: act on hook signals (console, deferred offer, timeout) like the save does
    async _callAPI(method, url, body) {
        const data = await TW.api.write(method, url, body);
        TW.api.handleWriteResult(data);
        return data;
    }
}

// CommonJS export, for Node
if (typeof module !== 'undefined' && module.exports) {
    module.exports = TaskEditor;
}