{{template "base" .}}
{{define "head"}}
<link rel="stylesheet" href="/static/css/editor.css">
<link rel="stylesheet" href="/static/css/markdown.css">
{{end}}

{{define "content"}}
{{with .Content}}
<div class="editor-page">
    <div class="editor-toolbar">
        <div class="breadcrumb">
            <a href="/">Documents</a>
            <span>/</span>
            <input type="text" id="doc-title" value="{{.Title}}" placeholder="Document title" class="title-input">
        </div>
        <div class="toolbar-actions">
            {{if .IsCollaborator}}
            <div id="presence-list" class="presence-list" title="Active collaborators"></div>
            {{end}}
            {{if .IsOwner}}
            <button class="btn btn-sm btn-outline" id="btn-share" onclick="generateInvite()">Share</button>
            {{end}}
            <button class="btn btn-sm btn-outline source-only active" id="btn-preview" onclick="togglePreview()">Preview</button>
            <button class="btn btn-sm btn-outline source-only" id="btn-wrap" onclick="toggleWrap()">Wrap</button>
            <button class="btn btn-sm btn-outline rich-only" id="btn-undo" onclick="richUndo()" title="Undo (⌘Z)">↩</button>
            <button class="btn btn-sm btn-outline rich-only" id="btn-redo" onclick="richRedo()" title="Redo (⌘⇧Z)">↪</button>
            {{if or .IsCollaborator .IsOwner}}<button class="btn btn-sm btn-outline active" id="btn-comments" onclick="toggleCommentSidebar()">Comments</button>{{end}}
            <button class="btn btn-sm btn-outline" id="btn-source" onclick="toggleSourceMode()">Source</button>
            <span id="save-status"></span>
            <button class="btn btn-sm" id="btn-save" onclick="saveDocument()">Save</button>
            <a href="/docs/{{.RKey}}" class="btn btn-sm btn-outline">View</a>
        </div>
    </div>

    <!-- Rich text editor (default) -->
    <div id="editor-rich" class="editor-rich"></div>

    <!-- Comment button (shown on paragraph hover/selection) -->
    <button id="comment-btn" class="comment-btn" style="display:none" onclick="openCommentForm()">Comment</button>

    <!-- Link editing tooltip -->
    <div id="link-tooltip" class="link-tooltip">
        <input type="url" id="link-tooltip-input" placeholder="https://" spellcheck="false">
        <button id="link-tooltip-confirm">Update</button>
        <button id="link-tooltip-remove">Remove</button>
        <button id="link-tooltip-cancel">✕</button>
    </div>

    <!-- Source editor (CodeMirror + preview split) -->
    <div id="editor-source" class="editor-split" style="display:none">
        <div class="editor-pane">
            <textarea id="editor-textarea" style="display:none">{{if .Content}}{{.Content.Text.RawMarkdown}}{{end}}</textarea>
            <div id="editor"></div>
        </div>
        <div class="preview-pane">
            <div id="preview" class="markdown-body"></div>
        </div>
    </div>
</div>

<!-- Invite modal -->
{{if .IsOwner}}
<div id="invite-modal" class="invite-modal" style="display:none">
    <div class="invite-modal-box">
        <div class="invite-modal-header">
            <span>Share document</span>
            <button class="invite-modal-close" onclick="closeInviteModal()">✕</button>
        </div>
        <div id="invite-modal-body" class="invite-modal-body">
            <p>Generating invite link...</p>
        </div>
    </div>
</div>
{{end}}

<!-- Comment form (floating, outside editor-page so z-index beats sidebar) -->
<div id="comment-form" class="comment-form" style="display:none">
    <textarea id="comment-text" placeholder="Add a comment..." rows="3"></textarea>
    <div class="comment-form-actions">
        <button class="btn btn-sm" onclick="submitComment()">Post</button>
        <button class="btn btn-sm btn-outline" onclick="closeCommentForm()">Cancel</button>
    </div>
</div>

<!-- Comment sidebar -->
{{if or .IsCollaborator .IsOwner}}
<div id="comment-sidebar" class="comment-sidebar">
    <div class="comment-sidebar-header">Comments</div>
    <div id="comment-threads" class="comment-threads"></div>
</div>
{{end}}
{{end}}
{{end}}

{{define "scripts"}}
<script type="module">
    import {EditorView, basicSetup, markdown, oneDark, Compartment, Annotation} from '/static/vendor/editor.js';
    import {
        Editor, rootCtx, defaultValueCtx, editorViewCtx, editorViewOptionsCtx, serializerCtx, prosePluginsCtx,
        commonmark,
        listener, listenerCtx,
        history, undoCommand, redoCommand, callCommand,
        collab, sendableSteps, receiveTransaction, getVersion, Step,
        $markSchema, $markAttr,
    } from '/static/vendor/milkdown.js';
    import { CollabClient } from '/static/collab-client.js';

    // ── Comment mark schema ───────────────────────────────────────────────────
    // Defines a ProseMirror mark that wraps commented text with a threadId attr.
    // Marks move with the text automatically (undo, collab, paste all work).

    const commentAttr = $markAttr('comment');

    const commentSchema = $markSchema('comment', (ctx) => ({
        attrs: {
            threadId: { default: null },
        },
        inclusive: false, // typing at the boundary does NOT extend the mark
        parseDOM: [{
            tag: 'span[data-thread]',
            getAttrs: (dom) => ({ threadId: dom.getAttribute('data-thread') }),
        }],
        toDOM: (mark) => ['span', {
            'data-thread': mark.attrs.threadId,
            class: 'comment-highlight',
        }, 0],
        parseMarkdown: {
            // Comment marks are not in the markdown source; re-anchored on load via quotedText.
            match: () => false,
            runner: () => {},
        },
        toMarkdown: {
            // Strip comment marks when serializing to markdown (stored as clean MD).
            match: (mark) => mark.type.name === 'comment',
            runner: (_state, _mark, _node) => {},
        },
    }));

    const textarea = document.getElementById('editor-textarea');
    const previewEl = document.getElementById('preview');
    const saveStatus = document.getElementById('save-status');
    const titleInput = document.getElementById('doc-title');
    const rkey = '{{.Content.RKey}}';
    const accessToken = '{{.Content.AccessToken}}';
    const isCollaborator = {{if .Content.IsCollaborator}}true{{else}}false{{end}};
    const ownerDID = '{{.Content.OwnerDID}}'; // empty string when current user is owner

    // Fetch the authoritative step version for this document.
    let serverVersion = 0;
    try {
        const vResp = await fetch(`/api/docs/${rkey}/steps?since=0`);
        if (vResp.ok) {
            const vData = await vResp.json();
            serverVersion = vData.version || 0;
        }
    } catch(e) { /* start at 0 */ }

    const myClientID = accessToken || Math.random().toString(36).slice(2);

    const STORAGE_KEY = 'editor-mode';
    let currentMode = localStorage.getItem(STORAGE_KEY) || 'rich'; // 'rich' | 'source'

    let autoSaveTimer = null;

    // Annotation to tag dispatches that originate from remote edits,
    // so the update listener can skip re-broadcasting them.
    const remoteEditAnnotation = Annotation.define();

    // ── Shared helpers ────────────────────────────────────────────────────────

    function isDark() {
        const stored = localStorage.getItem('theme');
        if (stored) return stored === 'dark';
        return window.matchMedia('(prefers-color-scheme: dark)').matches;
    }

    function scheduleAutoSave(content) {
        clearTimeout(autoSaveTimer);
        saveStatus.textContent = 'Unsaved changes';
        saveStatus.className = 'status-unsaved';
        autoSaveTimer = setTimeout(async () => {
            try {
                await fetch(`/api/docs/${rkey}/autosave`, {
                    method: 'PUT',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({content, title: titleInput.value, ownerDID}),
                });
                saveStatus.textContent = 'Auto-saved';
                saveStatus.className = 'status-saved';
            } catch (e) {
                saveStatus.textContent = 'Save failed';
                saveStatus.className = 'status-error';
            }
        }, 2000);
    }

    function getMarkdown() {
        if (currentMode === 'source') {
            return cmView.state.doc.toString();
        } else {
            return milkdownEditor.action((ctx) => {
                const editorView = ctx.get(editorViewCtx);
                const serializer = ctx.get(serializerCtx);
                return serializer(editorView.state.doc);
            });
        }
    }

    // ── CodeMirror (source mode) ──────────────────────────────────────────────

    const baseTheme = EditorView.theme({
        '&': {height: '100%', fontSize: '14px'},
        '.cm-scroller': {overflow: 'auto'},
        '.cm-content': {fontFamily: '"JetBrains Mono", "Fira Code", monospace'},
    });

    const darkCompartment = new Compartment();
    const wrapCompartment = new Compartment();

    const cmView = new EditorView({
        doc: textarea.value,
        extensions: [
            basicSetup,
            markdown(),
            baseTheme,
            darkCompartment.of(isDark() ? oneDark : []),
            wrapCompartment.of([]),
            EditorView.updateListener.of((update) => {
                if (update.docChanged && currentMode === 'source') {
                    const content = update.state.doc.toString();
                    updatePreview(content);
                    if (!update.transactions.some(tr => tr.annotation(remoteEditAnnotation))) {
                        scheduleAutoSave(content);
                        // Extract granular deltas from the ChangeSet.
                        // fromA/toA are positions in the OLD document (pre-change),
                        // which is what the server's OT engine needs.
                        const deltas = [];
                        update.changes.iterChanges((fromA, toA, _fromB, _toB, inserted) => {
                            deltas.push({ from: fromA, to: toA, insert: inserted.toString() });
                        });
                        if (deltas.length > 0) {
                            const pmSteps = deltas.map(d => ({type: 'text-patch', from: d.from, to: d.to, insert: d.insert}));
                            collabClient.sendSteps(pmSteps);
                        }
                    }
                }
            }),
        ],
        parent: document.getElementById('editor'),
    });

    // ── CollabClient (step-authority protocol) ────────────────────────────────

    // Guard against applying a remote edit while we're already applying one
    // (prevents echo loops). Moved here from the WebSocket section so collabClient
    // can reference it during initialization.
    let applyingRemote = false;

    const collabClient = new CollabClient(rkey, serverVersion, (remoteSteps) => {
        if (currentMode === 'source' && cmView) {
            // Apply text-patch steps to CM without triggering our own send.
            const changes = [];
            let offset = 0;
            for (const step of remoteSteps) {
                if (step.type !== 'text-patch') continue;
                const from = step.from + offset;
                const to   = step.to   + offset;
                const insert = step.insert || '';
                changes.push({ from, to, insert });
                offset += insert.length - (step.to - step.from);
            }
            if (changes.length === 0) return;
            applyingRemote = true;
            try {
                cmView.dispatch({
                    changes,
                    annotations: [remoteEditAnnotation.of(true)],
                });
            } finally {
                applyingRemote = false;
            }
        } else if (currentMode === 'rich' && milkdownEditor) {
            // Apply PM steps to the Milkdown/ProseMirror editor without re-creating it.
            const pmView = milkdownEditor.action(c => c.get(editorViewCtx));
            const schema = pmView.state.schema;
            const pmSteps = [];
            const clientIDs = [];
            for (const step of remoteSteps) {
                if (step.type !== 'pm-step') continue;
                try {
                    pmSteps.push(Step.fromJSON(schema, JSON.parse(step.json)));
                    clientIDs.push('remote');
                } catch(e) {
                    console.warn('CollabClient: failed to parse PM step', e);
                }
            }
            if (pmSteps.length === 0) return;
            applyingRemote = true;
            try {
                const tr = receiveTransaction(pmView.state, pmSteps, clientIDs);
                pmView.dispatch(tr);
            } finally {
                applyingRemote = false;
            }
        }
    });
    collabClient.setClientID(myClientID);

    async function updatePreview(content) {
        try {
            const resp = await fetch('/api/render', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({content}),
            });
            const data = await resp.json();
            previewEl.innerHTML = data.html;
        } catch (e) {
            console.error('Preview error:', e);
        }
    }

    let wrapEnabled = false;
    window.toggleWrap = function() {
        wrapEnabled = !wrapEnabled;
        cmView.dispatch({ effects: wrapCompartment.reconfigure(wrapEnabled ? EditorView.lineWrapping : []) });
        document.getElementById('btn-wrap').classList.toggle('active', wrapEnabled);
    };

    let previewVisible = true;
    window.togglePreview = function() {
        previewVisible = !previewVisible;
        document.querySelector('.preview-pane').style.display = previewVisible ? '' : 'none';
        document.getElementById('btn-preview').classList.toggle('active', previewVisible);
    };

    window.__cmSetTheme = function(theme) {
        cmView.dispatch({
            effects: darkCompartment.reconfigure(theme === 'dark' ? oneDark : []),
        });
    };

    // ── Milkdown (rich text mode) ─────────────────────────────────────────────

    let milkdownEditor = null;

    async function createMilkdownEditor(initialMarkdown) {
        const container = document.getElementById('editor-rich');
        container.innerHTML = '';

        milkdownEditor = await Editor.make()
            .config((ctx) => {
                ctx.set(rootCtx, container);
                ctx.set(defaultValueCtx, initialMarkdown);
                // Register the prosemirror-collab plugin into EditorState (not EditorView)
                // so sendableSteps/receiveTransaction have a state slot to read from.
                ctx.update(prosePluginsCtx, (plugins) => [
                    ...plugins,
                    collab({ version: collabClient.version, clientID: myClientID }),
                ]);
                // Override dispatchTransaction to notify CollabClient after every
                // local transaction. CollabClient calls sendableSteps itself at
                // flush time, so it always sends exactly the current unconfirmed
                // set — never duplicates across keystrokes.
                ctx.update(editorViewOptionsCtx, (prev) => ({
                    ...prev,
                    dispatchTransaction: function(tr) {
                        const newState = this.state.apply(tr);
                        this.updateState(newState);
                        if (!applyingRemote) {
                            collabClient.notifyPMChange();
                            if (tr.docChanged) {
                                try {
                                    const serializer = milkdownEditor.action(c => c.get(serializerCtx));
                                    scheduleAutoSave(serializer(newState.doc));
                                } catch(_) {}
                            }
                        }
                    },
                }));
            })
            .use(commonmark)
            .use(commentAttr)
            .use(commentSchema)
            .use(history)
            .use(listener)
            .config((ctx) => {
                ctx.get(listenerCtx).markdownUpdated((_ctx, markdown, prevMarkdown) => {
                    // Solo-mode auto-save fallback (no collab session).
                    if (markdown === prevMarkdown || applyingRemote || accessToken) return;
                    scheduleAutoSave(markdown);
                });
            })
            .create();

        // Register PM handlers so CollabClient reads sendableSteps and confirms
        // its own steps via receiveTransaction (advancing the collab plugin version).
        collabClient.setPMHandlers(
            () => {
                const pmView = milkdownEditor.action(c => c.get(editorViewCtx));
                return sendableSteps(pmView.state);
            },
            (steps, clientIDs) => {
                const pmView = milkdownEditor.action(c => c.get(editorViewCtx));
                applyingRemote = true;
                try {
                    const tr = receiveTransaction(pmView.state, steps, clientIDs);
                    pmView.dispatch(tr);
                } finally {
                    applyingRemote = false;
                }
            },
            () => {
                const pmView = milkdownEditor.action(c => c.get(editorViewCtx));
                return getVersion(pmView.state);
            }
        );

        return milkdownEditor;
    }

    // ── Undo / Redo ───────────────────────────────────────────────────────────

    window.richUndo = function() {
        if (milkdownEditor) milkdownEditor.action(callCommand(undoCommand.key));
    };
    window.richRedo = function() {
        if (milkdownEditor) milkdownEditor.action(callCommand(redoCommand.key));
    };

    // ── Mode switching ────────────────────────────────────────────────────────

    function applyMode(mode, animate) {
        const richEl = document.getElementById('editor-rich');
        const sourceEl = document.getElementById('editor-source');
        const sourceOnlyBtns = document.querySelectorAll('.source-only');
        const richOnlyBtns = document.querySelectorAll('.rich-only');
        const sourceBtn = document.getElementById('btn-source');

        if (mode === 'source') {
            richEl.style.display = 'none';
            sourceEl.style.display = '';
            sourceOnlyBtns.forEach(b => b.style.display = 'inline-block');
            richOnlyBtns.forEach(b => b.style.display = 'none');
            sourceBtn.classList.add('active');
        } else {
            richEl.style.display = '';
            sourceEl.style.display = 'none';
            sourceOnlyBtns.forEach(b => b.style.display = 'none');
            richOnlyBtns.forEach(b => b.style.display = '');
            sourceBtn.classList.remove('active');
        }
    }

    window.toggleCommentSidebar = function() {
        const sidebar = document.getElementById('comment-sidebar');
        const btn = document.getElementById('btn-comments');
        if (!sidebar) return;
        const isHidden = sidebar.style.display === 'none';
        sidebar.style.display = isHidden ? '' : 'none';
        // CSS :has(~ .comment-sidebar) still matches when sidebar is display:none,
        // so override editor-page right manually.
        const editorPage = document.querySelector('.editor-page');
        if (editorPage) editorPage.style.right = isHidden ? '' : '0';
        if (btn) btn.classList.toggle('active', isHidden);
    };

    window.toggleSourceMode = async function() {
        const nextMode = currentMode === 'rich' ? 'source' : 'rich';

        if (nextMode === 'source') {
            // rich → source: extract markdown from Milkdown, load into CodeMirror
            const md = getMarkdown();
            const doc = cmView.state.doc;
            cmView.dispatch({ changes: { from: 0, to: doc.length, insert: md } });
            updatePreview(md);
            collabClient.setPMHandlers(null, null);  // detach from stale Milkdown instance
        } else {
            // source → rich: extract markdown from CodeMirror, recreate Milkdown
            const md = cmView.state.doc.toString();
            await createMilkdownEditor(md);    // setPMHandlers called inside
        }

        currentMode = nextMode;
        localStorage.setItem(STORAGE_KEY, currentMode);
        applyMode(currentMode);
    };

    // ── Save ──────────────────────────────────────────────────────────────────

    titleInput.addEventListener('input', () => {
        scheduleAutoSave(getMarkdown());
    });

    window.saveDocument = async function() {
        const content = getMarkdown();
        try {
            const resp = await fetch(`/api/docs/${rkey}/save`, {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({content, title: titleInput.value, ownerDID}),
            });
            if (resp.ok) {
                saveStatus.textContent = 'Saved!';
                saveStatus.className = 'status-saved';
            }
        } catch (e) {
            saveStatus.textContent = 'Save failed';
            saveStatus.className = 'status-error';
        }
    };

    // ── Link tooltip ──────────────────────────────────────────────────────────

    const linkTooltipEl = document.getElementById('link-tooltip');
    const linkInput = document.getElementById('link-tooltip-input');
    const linkConfirmBtn = document.getElementById('link-tooltip-confirm');
    const linkRemoveBtn = document.getElementById('link-tooltip-remove');
    const linkCancelBtn = document.getElementById('link-tooltip-cancel');

    let linkTooltipState = null; // { pmView, pos }

    function findMarkExtent(state, searchPos, markType) {
        try {
            const $pos = state.doc.resolve(Math.min(searchPos, state.doc.content.size - 1));
            const parent = $pos.parent;
            const parentStart = $pos.start();
            let currentHref = null;
            parent.forEach((node, offset) => {
                const nodeStart = parentStart + offset;
                const nodeEnd = nodeStart + node.nodeSize;
                const lm = markType.isInSet(node.marks);
                if (lm && nodeStart <= searchPos && searchPos <= nodeEnd) currentHref = lm.attrs.href;
            });
            if (!currentHref) return { from: -1, to: -1 };
            let linkFrom = -1, linkTo = -1;
            parent.forEach((node, offset) => {
                const lm = markType.isInSet(node.marks);
                if (lm && lm.attrs.href === currentHref) {
                    const nodeStart = parentStart + offset;
                    if (linkFrom === -1) linkFrom = nodeStart;
                    linkTo = nodeStart + node.nodeSize;
                }
            });
            return { from: linkFrom, to: linkTo };
        } catch(e) { return { from: -1, to: -1 }; }
    }

    function showLinkTooltip(pmView, mark, pos) {
        linkTooltipState = { pmView, pos };
        linkInput.value = mark.attrs.href || '';
        const coords = pmView.coordsAtPos(pos);
        linkTooltipEl.style.left = Math.max(8, coords.left) + 'px';
        linkTooltipEl.style.top = (coords.bottom + 8) + 'px';
        linkTooltipEl.classList.add('visible');
    }

    function hideLinkTooltip() {
        linkTooltipEl.classList.remove('visible');
        linkTooltipState = null;
    }

    // Prevent buttons from stealing editor focus
    [linkConfirmBtn, linkRemoveBtn, linkCancelBtn].forEach(btn => {
        btn.addEventListener('mousedown', e => e.preventDefault());
    });

    linkCancelBtn.addEventListener('click', () => hideLinkTooltip());

    linkConfirmBtn.addEventListener('click', () => {
        if (!linkTooltipState) return;
        const { pmView, pos } = linkTooltipState;
        const newHref = linkInput.value.trim();
        if (!newHref) return;
        const { state, dispatch } = pmView;
        const linkType = state.schema.marks.link;
        const { from, to } = findMarkExtent(state, pos, linkType);
        if (from === -1) return;
        dispatch(state.tr.addMark(from, to, linkType.create({ href: newHref })));
        hideLinkTooltip();
        pmView.focus();
    });

    linkRemoveBtn.addEventListener('click', () => {
        if (!linkTooltipState) return;
        const { pmView, pos } = linkTooltipState;
        const { state, dispatch } = pmView;
        const linkType = state.schema.marks.link;
        const { from, to } = findMarkExtent(state, pos, linkType);
        if (from === -1) return;
        dispatch(state.tr.removeMark(from, to, linkType));
        hideLinkTooltip();
        pmView.focus();
    });

    linkInput.addEventListener('keydown', e => {
        if (e.key === 'Enter') linkConfirmBtn.click();
        if (e.key === 'Escape') hideLinkTooltip();
    });

    function checkForLinkTooltip() {
        if (currentMode !== 'rich' || !milkdownEditor) return;
        try {
            const pmView = milkdownEditor.action(ctx => ctx.get(editorViewCtx));
            const { selection, schema, doc } = pmView.state;
            const linkType = schema.marks.link;
            const pos = Math.min(selection.from, doc.content.size - 1);
            const marks = doc.resolve(pos).marks();
            const linkMark = marks.find(m => m.type === linkType);
            if (linkMark) showLinkTooltip(pmView, linkMark, pos);
            else hideLinkTooltip();
        } catch(e) { hideLinkTooltip(); }
    }

    document.getElementById('editor-rich').addEventListener('click', () => setTimeout(checkForLinkTooltip, 0));
    document.getElementById('editor-rich').addEventListener('keyup', checkForLinkTooltip);

    document.addEventListener('click', e => {
        if (!linkTooltipEl.contains(e.target) && !document.getElementById('editor-rich').contains(e.target)) {
            hideLinkTooltip();
        }
    });

    // ── Invite ────────────────────────────────────────────────────────────────

    window.generateInvite = async function generateInvite() {
        const modal = document.getElementById('invite-modal');
        const body = document.getElementById('invite-modal-body');
        if (!modal) return;
        body.innerHTML = '<p>Generating invite link...</p>';
        modal.style.display = 'flex';

        try {
            const resp = await fetch(`/api/docs/${rkey}/invite`, { method: 'POST' });
            const data = await resp.json();
            if (!resp.ok) throw new Error(data.error || resp.statusText);
            const link = data.invite_url || data.inviteLink || data.url || '';
            body.innerHTML = `
                <p style="margin:0 0 0.5rem;font-size:0.85rem;color:var(--text-muted)">
                    Share this link. It expires in 7 days and can be used once.
                </p>
                <div style="display:flex;gap:0.5rem;align-items:center">
                    <input id="invite-link-input" type="text" value="${escHtml(link)}" readonly
                        style="flex:1;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
                               padding:0.4rem 0.5rem;font-size:0.85rem;color:var(--text);outline:none">
                    <button class="btn btn-sm" onclick="copyInviteLink()">Copy</button>
                </div>
                <p id="invite-copy-msg" style="margin:0.4rem 0 0;font-size:0.8rem;color:var(--primary);display:none">Copied!</p>
            `;
        } catch (e) {
            body.innerHTML = `<p style="color:var(--danger)">Failed to generate invite: ${escHtml(e.message)}</p>`;
        }
    }

    window.copyInviteLink = function copyInviteLink() {
        const input = document.getElementById('invite-link-input');
        if (!input) return;
        navigator.clipboard.writeText(input.value).then(() => {
            const msg = document.getElementById('invite-copy-msg');
            if (msg) { msg.style.display = 'block'; setTimeout(() => msg.style.display = 'none', 2000); }
        });
    }

    window.closeInviteModal = function closeInviteModal() {
        const modal = document.getElementById('invite-modal');
        if (modal) modal.style.display = 'none';
    }

    // Close invite modal on backdrop click
    document.getElementById('invite-modal')?.addEventListener('click', e => {
        if (e.target === document.getElementById('invite-modal')) closeInviteModal();
    });

    // ── WebSocket / Collaboration ─────────────────────────────────────────────

    let ws = null;
    let wsReconnectDelay = 1000;
    let wsReconnectTimer = null;
    let wsPingTimer = null;
    let wsMissedPings = 0;

    function connectWebSocket() {
        if (!accessToken) return;

        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
        const ownerParam = ownerDID ? `&owner_did=${encodeURIComponent(ownerDID)}` : '';
        const wsUrl = `${protocol}//${window.location.host}/ws/docs/${rkey}?access_token=${encodeURIComponent(accessToken)}&dpop_proof=placeholder${ownerParam}`;

        ws = new WebSocket(wsUrl);

        ws.onopen = () => {
            wsReconnectDelay = 1000;
            wsMissedPings = 0;
            startHeartbeat();
            // Fetch any steps missed while the WS was disconnected.
            catchUpSteps();
        };

        ws.onmessage = (event) => {
            try {
                const msg = JSON.parse(event.data);
                handleWSMessage(msg);
            } catch (e) {
                console.error('WS parse error:', e);
            }
        };

        ws.onclose = () => {
            stopHeartbeat();
            ws = null;
            updatePresence([]);
            scheduleReconnect();
        };

        ws.onerror = () => {
            closeWS();
        };
    }

    function scheduleReconnect() {
        clearTimeout(wsReconnectTimer);
        wsReconnectTimer = setTimeout(() => {
            connectWebSocket();
            wsReconnectDelay = Math.min(wsReconnectDelay * 2, 30000);
        }, wsReconnectDelay);
    }

    function startHeartbeat() {
        stopHeartbeat();
        wsPingTimer = setInterval(() => {
            if (ws && ws.readyState === WebSocket.OPEN) {
                ws.send(JSON.stringify({ type: 'ping' }));
                wsMissedPings++;
                if (wsMissedPings >= 3) {
                    closeWS();
                }
            }
        }, 30000);
    }

    function stopHeartbeat() {
        clearInterval(wsPingTimer);
    }

    function handleWSMessage(msg) {
        switch (msg.type) {
            case 'presence':
                updatePresence(msg.users || []);
                break;
            case 'pong':
                wsMissedPings = 0;
                break;
            case 'steps':
                collabClient.handleWSMessage(msg, myClientID);
                break;
            case 'edit':
                applyRemoteEdit(msg);   // legacy full-replace path
                break;
            case 'comments_updated':
                loadComments();
                break;
            case 'sync':
                applyRemoteEdit(msg.content);  // sync is always full-content string
                break;
        }
    }

    function applyRemoteEdit(msg) {
        // Legacy sync fallback — only used for 'sync' and legacy 'edit' message types.
        // Remote edits via the new step protocol go through CollabClient instead.
        if (applyingRemote) return;
        const content = typeof msg === 'string' ? msg : msg.content;
        if (!content) return;

        if (currentMode === 'source' && cmView) {
            if (cmView.state.doc.toString() !== content) {
                applyingRemote = true;
                try {
                    cmView.dispatch({
                        changes: { from: 0, to: cmView.state.doc.length, insert: content },
                        annotations: [remoteEditAnnotation.of(true)],
                    });
                } finally {
                    applyingRemote = false;
                }
                updatePreview(content);
            }
        }
        // Rich mode no longer falls back to full recreate here;
        // remote steps are applied via CollabClient in Task 8.
    }

    function closeWS() {
        if (!ws) return;
        ws.close();
        ws = null;
        stopHeartbeat();
    }

    // Fetch steps missed during a WS disconnect and apply them to the PM state.
    async function catchUpSteps() {
        if (currentMode !== 'rich' || !milkdownEditor) return;
        try {
            const pmView = milkdownEditor.action(c => c.get(editorViewCtx));
            const since = getVersion(pmView.state);
            const resp = await fetch(`/api/docs/${rkey}/steps?since=${since}`);
            if (!resp.ok) return;
            const {steps: stepsJSON} = await resp.json();
            if (!stepsJSON || stepsJSON.length === 0) return;
            const missed = stepsJSON.map(s => JSON.parse(s));
            collabClient.applyRemoteSteps(missed);
        } catch(e) {
            console.warn('catchUpSteps:', e);
        }
    }

    // ── Presence ──────────────────────────────────────────────────────────────

    function updatePresence(users) {
        const list = document.getElementById('presence-list');
        if (!list) return;
        list.innerHTML = users.map(u => {
            const label = escHtml(u.handle || u.name || u.did);
            if (u.avatar) {
                return `<img class="presence-avatar" src="${escHtml(u.avatar)}" title="${label}" alt="${label}">`;
            }
            return `<span class="presence-avatar" style="background:${u.color}" title="${label}"></span>`;
        }).join('');
    }

    function escHtml(str) {
        return String(str).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
    }

    // ── Comments (mark-based anchoring) ───────────────────────────────────────

    // pending selection captured when user clicks "Comment"
    let pendingCommentRange = null; // { from, to, quotedText }

    const commentBtn = document.getElementById('comment-btn');
    const commentForm = document.getElementById('comment-form');
    const commentTextEl = document.getElementById('comment-text');

    // Show "Comment" button when user has a non-empty selection in the rich editor
    function setupSelectionCommentTrigger() {
        const editorEl = document.getElementById('editor-rich');
        if (!editorEl || !commentBtn) return;
        function onSelectionChange() {
            if (currentMode !== 'rich' || !milkdownEditor) {
                commentBtn.style.display = 'none';
                return;
            }
            try {
                const pmView = milkdownEditor.action(ctx => ctx.get(editorViewCtx));
                const { selection } = pmView.state;
                if (selection.empty) { commentBtn.style.display = 'none'; return; }
                const coords = pmView.coordsAtPos(selection.to);
                commentBtn.style.top = (coords.bottom + window.scrollY + 6) + 'px';
                commentBtn.style.left = Math.max(8, coords.left + window.scrollX) + 'px';
                commentBtn.style.display = 'block';
            } catch(e) { commentBtn.style.display = 'none'; }
        }
        editorEl.addEventListener('mouseup', onSelectionChange);
        editorEl.addEventListener('keyup', onSelectionChange);
    }

    let pendingReplyTo = null;   // set when replying to a comment
    let pendingThreadId = null;  // threadId to inherit when replying

    window.openCommentForm = function openCommentForm() {
        if (!commentBtn || !commentForm || !milkdownEditor) return;
        try {
            const pmView = milkdownEditor.action(ctx => ctx.get(editorViewCtx));
            const { selection, doc } = pmView.state;
            if (selection.empty) return;
            pendingCommentRange = { from: selection.from, to: selection.to,
                quotedText: doc.textBetween(selection.from, selection.to, ' ') };
            pendingReplyTo = null;
            commentTextEl.placeholder = 'Add a comment...';
            const rect = commentBtn.getBoundingClientRect();
            commentForm.style.top = (rect.bottom + window.scrollY + 4) + 'px';
            commentForm.style.left = Math.max(8, rect.left + window.scrollX) + 'px';
            commentForm.style.display = 'block';
            commentTextEl.value = '';
            commentTextEl.focus();
        } catch(e) { console.error('openCommentForm:', e); }
    }

    window.closeCommentForm = function closeCommentForm() {
        if (commentForm) commentForm.style.display = 'none';
        if (commentBtn) commentBtn.style.display = 'none';
        pendingCommentRange = null;
        pendingReplyTo = null;
        pendingThreadId = null;
        if (commentTextEl) commentTextEl.placeholder = 'Add a comment...';
    }

    window.submitComment = async function submitComment() {
        if (!pendingCommentRange) return;
        const text = commentTextEl.value.trim();
        if (!text) return;
        const { from, to, quotedText } = pendingCommentRange;
        try {
            const body = { quotedText, text };
            if (pendingReplyTo) body.replyTo = pendingReplyTo;
            if (pendingThreadId) body.threadId = pendingThreadId;
            if (ownerDID) body.ownerDID = ownerDID;
            const resp = await fetch(`/api/docs/${rkey}/comments`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(body),
            });
            if (!resp.ok) throw new Error(await resp.text());
            const comment = await resp.json();
            const threadId = comment.threadId;
            if (threadId && milkdownEditor) {
                const pmView = milkdownEditor.action(ctx => ctx.get(editorViewCtx));
                const markType = pmView.state.schema.marks.comment;
                if (markType) {
                    pmView.dispatch(pmView.state.tr.addMark(from, to, markType.create({ threadId })));
                }
            }
            closeCommentForm();
            pendingReplyTo = null;
            pendingThreadId = null;
            loadComments();
        } catch (e) { console.error('Comment post failed:', e); }
    }

    commentTextEl && commentTextEl.addEventListener('keydown', e => {
        if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) submitComment();
        if (e.key === 'Escape') closeCommentForm();
    });

    // Close comment form on outside click
    document.addEventListener('click', e => {
        if (commentForm && commentForm.style.display !== 'none') {
            if (!commentForm.contains(e.target) && e.target !== commentBtn) {
                closeCommentForm();
            }
        }
    });

    // Click on comment highlight in editor → highlight sidebar thread
    document.getElementById('editor-rich').addEventListener('click', e => {
        const span = e.target.closest('.comment-highlight');
        if (!span) return;
        const threadId = span.getAttribute('data-thread');
        if (!threadId) return;
        const threadEl = document.querySelector(`.comment-thread[data-thread="${CSS.escape(threadId)}"]`);
        if (threadEl) {
            threadEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            threadEl.animate(
                [{ boxShadow: '0 0 0 2px rgba(234,179,8,0.9)' },
                 { boxShadow: '0 0 0 2px rgba(234,179,8,0)' }],
                { duration: 1000, easing: 'ease-out' }
            );
        }
    });

    // Click on sidebar thread → scroll to mark in editor
    (function attachThreadClickHandler() {
        const container = document.getElementById('comment-threads');
        if (!container) return;
        container.addEventListener('click', e => {
            const thread = e.target.closest('.comment-thread');
            if (!thread) return;
            if (thread.dataset.thread) jumpToCommentMark(thread.dataset.thread);
        });
    })();

    function jumpToCommentMark(threadId) {
        if (!milkdownEditor) return;
        try {
            const pmView = milkdownEditor.action(ctx => ctx.get(editorViewCtx));
            const { doc, schema } = pmView.state;
            const markType = schema.marks.comment;
            if (!markType) return;
            let markPos = -1;
            doc.descendants((node, pos) => {
                if (markPos !== -1) return false;
                if (node.marks.some(mk => mk.type === markType && mk.attrs.threadId === threadId)) {
                    markPos = pos;
                }
            });
            if (markPos === -1) return;
            const coords = pmView.coordsAtPos(markPos);
            const editorRich = document.getElementById('editor-rich');
            const containerTop = editorRich.getBoundingClientRect().top;
            editorRich.scrollTo({ top: coords.top - containerTop - 120, behavior: 'smooth' });
            const span = pmView.dom.querySelector(`span[data-thread="${CSS.escape(threadId)}"]`);
            if (span) {
                span.animate(
                    [{ backgroundColor: 'rgba(234,179,8,0.6)' },
                     { backgroundColor: 'rgba(234,179,8,0.2)' }],
                    { duration: 900, easing: 'ease-out' }
                );
            }
        } catch(e) { console.error('jumpToCommentMark:', e); }
    }

    // Returns true if a comment mark with this threadId exists in the PM doc
    function findCommentMark(threadId) {
        if (!milkdownEditor) return false;
        try {
            const pmView = milkdownEditor.action(ctx => ctx.get(editorViewCtx));
            const { doc, schema } = pmView.state;
            const markType = schema.marks.comment;
            if (!markType) return false;
            let found = false;
            doc.descendants((node) => {
                if (found) return false;
                if (node.marks.some(m => m.type === markType && m.attrs.threadId === threadId)) found = true;
            });
            return found;
        } catch(e) { return false; }
    }

    function findCommentMarkPos(threadId) {
        if (!milkdownEditor) return Infinity;
        try {
            const pmView = milkdownEditor.action(ctx => ctx.get(editorViewCtx));
            const { doc, schema } = pmView.state;
            const markType = schema.marks.comment;
            if (!markType) return Infinity;
            let pos = Infinity;
            doc.descendants((node, nodePos) => {
                if (pos !== Infinity) return false;
                if (node.marks.some(m => m.type === markType && m.attrs.threadId === threadId)) pos = nodePos;
            });
            return pos;
        } catch(e) { return Infinity; }
    }

    function formatTime(ts) {
        if (!ts) return '';
        try { return new Date(ts).toLocaleString(); } catch { return ts; }
    }

    async function replyToComment(comment) {
        if (!commentForm || !commentTextEl) return;
        pendingCommentRange = { from: 0, to: 0, quotedText: '' };
        pendingReplyTo = `at://${comment.docOwnerDid}/com.diffdown.comment/${comment.id}`;
        pendingThreadId = comment.threadId;
        commentTextEl.placeholder = `Replying to ${comment.authorHandle || comment.author}...`;
        commentTextEl.value = '';
        // comment-form is position:fixed; anchor to right edge of viewport near sidebar
        commentForm.style.right = '8px';
        commentForm.style.left = 'auto';
        commentForm.style.top = '80px';
        commentForm.style.display = 'block';
        commentTextEl.focus();
    }

    async function toggleResolve(threadId, resolved) {
        try {
            const body = { resolved };
            if (ownerDID) body.ownerDID = ownerDID;
            await fetch(`/api/docs/${rkey}/comments/${threadId}`, {
                method: 'PATCH',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(body),
            });
            loadComments();
        } catch (e) {
            console.error('Toggle resolve failed:', e);
        }
    }

    function renderCommentThreads(comments) {
        const container = document.getElementById('comment-threads');
        if (!container) return;

        if (!comments || comments.length === 0) {
            container.textContent = '';
            const empty = document.createElement('p');
            empty.className = 'comment-empty';
            empty.textContent = 'No comments yet.';
            container.appendChild(empty);
            return;
        }

        const roots = [];
        const replies = new Map();
        for (const c of comments) {
            if (c.replyTo) {
                // replyTo is a full AT URI (at://did/collection/rkey); key by rkey only
                const parentId = c.replyTo.split('/').pop();
                if (!replies.has(parentId)) replies.set(parentId, []);
                replies.get(parentId).push(c);
            } else {
                roots.push(c);
            }
        }

        roots.sort((a, b) => findCommentMarkPos(a.threadId || a.id) - findCommentMarkPos(b.threadId || b.id));

        container.textContent = '';
        for (const root of roots) {
            const threadId = root.threadId || root.id;
            const threadReplies = replies.get(root.id) || [];
            const threadEl = createCommentThreadElement(threadId, root, threadReplies);
            container.appendChild(threadEl);
        }
    }

    function createCommentThreadElement(threadId, rootComment, replies) {
        const isDetached = !findCommentMark(threadId);
        const threadDiv = document.createElement('div');
        threadDiv.className = 'comment-thread' + (isDetached ? ' comment-thread-detached' : '');
        threadDiv.dataset.thread = threadId;

        const headerDiv = document.createElement('div');
        headerDiv.className = 'comment-thread-header';

        const labelDiv = document.createElement('div');
        labelDiv.className = 'comment-thread-label';
        const labelText = rootComment.quotedText
            ? '\u201c' + (rootComment.quotedText.length > 40 ? rootComment.quotedText.slice(0, 40) + '\u2026' : rootComment.quotedText) + '\u201d'
            : '(no anchor)';
        labelDiv.textContent = labelText;
        if (isDetached) {
            const warn = document.createElement('span');
            warn.title = 'Text was deleted';
            warn.textContent = ' \u26a0';
            labelDiv.appendChild(warn);
        }
        headerDiv.appendChild(labelDiv);

        const resolveBtn = document.createElement('button');
        resolveBtn.className = 'btn btn-sm ' + (rootComment.resolved ? 'btn-active' : 'btn-outline');
        resolveBtn.textContent = rootComment.resolved ? 'Reopen' : 'Resolve';
        resolveBtn.onclick = () => toggleResolve(rootComment.id, !rootComment.resolved);
        headerDiv.appendChild(resolveBtn);

        threadDiv.appendChild(headerDiv);

        threadDiv.appendChild(createCommentItem(rootComment, true));

        for (const reply of replies) {
            threadDiv.appendChild(createCommentItem(reply, false));
        }

        return threadDiv;
    }

    function createCommentItem(comment, isRoot) {
        const item = document.createElement('div');
        item.className = 'comment-item' + (isRoot ? '' : ' comment-item-reply');

        const author = document.createElement('div');
        author.className = 'comment-author';
        author.textContent = comment.authorHandle || comment.author;

        const body = document.createElement('div');
        body.className = 'comment-text';
        body.textContent = comment.text;

        const time = document.createElement('div');
        time.className = 'comment-time';
        time.textContent = formatTime(comment.createdAt);

        if (isRoot) {
            const replyBtn = document.createElement('button');
            replyBtn.className = 'btn btn-sm btn-link';
            replyBtn.textContent = 'Reply';
            replyBtn.addEventListener('click', e => { e.stopPropagation(); replyToComment(comment); });
            item.appendChild(replyBtn);
        }

        item.appendChild(author);
        item.appendChild(body);
        item.appendChild(time);
        return item;
    }

    async function loadComments() {
        if (!accessToken) return;
        try {
            const qs = ownerDID ? '?ownerDID=' + encodeURIComponent(ownerDID) : '';
            const resp = await fetch(`/api/docs/${rkey}/comments${qs}`);
            if (!resp.ok) return;
            const comments = await resp.json();
            reanchorCommentMarks(comments);
            renderCommentThreads(comments);
        } catch (e) {
            console.error('Load comments failed:', e);
        }
    }

    // Re-anchor comment marks after load by searching for quotedText in the doc
    function reanchorCommentMarks(comments) {
        if (!milkdownEditor) return;
        try {
            const pmView = milkdownEditor.action(ctx => ctx.get(editorViewCtx));
            const { doc, schema } = pmView.state;
            const markType = schema.marks.comment;
            if (!markType) return;
            // Clear all comment marks first, then re-add only for unresolved comments.
            // This ensures resolving a comment removes its highlight on the next load.
            let tr = pmView.state.tr.removeMark(0, doc.content.size, markType);
            for (const c of comments || []) {
                if (c.resolved) continue;
                const threadId = c.threadId || c.id;
                if (!c.quotedText) continue;
                const pos = findTextInDoc(doc, c.quotedText);
                if (pos === -1) continue;
                tr = tr.addMark(pos, pos + c.quotedText.length, markType.create({ threadId }));
            }
            pmView.dispatch(tr);
        } catch(e) { console.error('reanchorCommentMarks:', e); }
    }

    // Find start doc-position of a text string in the ProseMirror doc
    function findTextInDoc(doc, searchText) {
        const fullText = doc.textContent;
        const idx = fullText.indexOf(searchText);
        if (idx === -1) return -1;
        let textOffset = 0;
        let found = -1;
        doc.descendants((node, pos) => {
            if (found !== -1) return false;
            if (node.isText) {
                const end = textOffset + node.text.length;
                if (textOffset <= idx && idx < end) found = pos + (idx - textOffset);
                textOffset += node.text.length;
            }
        });
        return found;
    }

    setupSelectionCommentTrigger();

    // ── Init ──────────────────────────────────────────────────────────────────

    const initialMarkdown = textarea.value;

    // Always create Milkdown (needed even if starting in source mode for first switch)
    await createMilkdownEditor(initialMarkdown);

    // If starting in source mode, do initial preview render
    if (currentMode === 'source') {
        updatePreview(initialMarkdown);
    }

    applyMode(currentMode);

    // Start collaboration features (both owner and collaborators join the WS room)
    if (accessToken) {
        connectWebSocket();
        loadComments();
    }

    window.addEventListener('beforeunload', () => {
        closeWS();
    });
</script>
{{end}}