/**
 * DOM range helpers for applying bold, italic, underline, and alignment inside
 * the active contenteditable selection.
 */
import {
	getTextNodesInRange,
	isNodeBold,
	isNodeItalic,
	isNodeUnderlined,
} from '../../utils/inline-style-state.js';

function hasAncestorTag(textNode, tagNames, stopAt) {
    let element = textNode.parentElement;
    while (element && element !== stopAt) {
        if (tagNames.includes(element.tagName.toLowerCase())) return true;
        element = element.parentElement;
    }
    return false;
}

function isFullyWrapped(range, tagNames, editTarget) {
    if (range.collapsed) return false;
    const nodes = getTextNodesInRange(range);
    return nodes.length > 0 && nodes.every(node => hasAncestorTag(node, tagNames, editTarget));
}

/**
 * Wraps a range in an element, with optional inline styles.
 * @param {Range} range
 * @param {string} tagName
 * @param {object} [styleProperties]
 * @returns {HTMLElement}
 */
export function wrapRange(range, tagName, styleProperties) {
    const wrapper = document.createElement(tagName);
    if (styleProperties) Object.assign(wrapper.style, styleProperties);
    try {
        range.surroundContents(wrapper);
    } catch {
        wrapper.appendChild(range.extractContents());
        range.insertNode(wrapper);
    }
    if (!styleProperties) {
        wrapper.querySelectorAll(tagName).forEach(element => element.replaceWith(...element.childNodes));
        wrapper.normalize();
    }
    return wrapper;
}

function restoreSelectionOver(firstNode, lastNode) {
    if (!firstNode || !lastNode) return;
    try {
        const newRange = document.createRange();
        if (firstNode.nodeType === Node.TEXT_NODE) {
            newRange.setStart(firstNode, 0);
        } else {
            newRange.setStartBefore(firstNode);
        }
        if (lastNode.nodeType === Node.TEXT_NODE) {
            newRange.setEnd(lastNode, lastNode.length);
        } else {
            newRange.setEndAfter(lastNode);
        }
        const selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(newRange);
    } catch { /* ignore invalid range errors */ }
}

function ancestorDepthWithin(element, editTarget) {
    let depth = 0;
    let current = element;
    while (current && current !== editTarget) {
        depth += 1;
        current = current.parentElement;
    }
    return depth;
}

/**
 * Removes a single inline wrapper element over the portion covered by `range`,
 * keeping the parts outside the range wrapped and preserving every descendant
 * (e.g. a nested `<strong>`) of the in-range portion. Splitting the element when
 * the selection only partially covers it.
 * @param {HTMLElement} element
 * @param {Range} range
 */
function unwrapElementOverRange(element, range) {
    const elementContents = document.createRange();
    elementContents.selectNodeContents(element);

    const selectionStartsInside = range.compareBoundaryPoints(Range.START_TO_START, elementContents) > 0;
    const selectionEndsInside = range.compareBoundaryPoints(Range.END_TO_END, elementContents) < 0;

    if (selectionEndsInside) {
        const afterRange = document.createRange();
        afterRange.setStart(range.endContainer, range.endOffset);
        afterRange.setEnd(elementContents.endContainer, elementContents.endOffset);
        const afterContent = afterRange.extractContents();
        if (afterContent.textContent !== '') {
            const afterClone = element.cloneNode(false);
            afterClone.appendChild(afterContent);
            element.after(afterClone);
        }
    }

    if (selectionStartsInside) {
        const beforeRange = document.createRange();
        beforeRange.setStart(elementContents.startContainer, elementContents.startOffset);
        beforeRange.setEnd(range.startContainer, range.startOffset);
        const beforeContent = beforeRange.extractContents();
        if (beforeContent.textContent !== '') {
            const beforeClone = element.cloneNode(false);
            beforeClone.appendChild(beforeContent);
            element.before(beforeClone);
        }
    }

    element.replaceWith(...element.childNodes);
}

function unwrapTagsInRange(range, tagNames, editTarget) {
    const tagSet = tagNames.map(tag => tag.toLowerCase());
    const textNodes = getTextNodesInRange(range);
    const firstTextNode = textNodes[0] ?? null;
    const lastTextNode = textNodes[textNodes.length - 1] ?? null;

    const targetElements = [];
    for (const textNode of textNodes) {
        let element = textNode.parentElement;
        while (element && element !== editTarget) {
            if (tagSet.includes(element.tagName?.toLowerCase()) && !targetElements.includes(element)) {
                targetElements.push(element);
            }
            element = element.parentElement;
        }
    }

    // Unwrap the deepest wrappers first so re-parenting never shifts the
    // boundaries of a shallower wrapper still waiting to be processed.
    targetElements.sort((a, b) => ancestorDepthWithin(b, editTarget) - ancestorDepthWithin(a, editTarget));
    for (const element of targetElements) {
        unwrapElementOverRange(element, range);
    }

    restoreSelectionOver(firstTextNode, lastTextNode);
    editTarget.normalize();
}

/**
 * Returns the user's active text selection inside the edit target.
 * When the caret is collapsed (no highlighted text), the entire element's
 * contents are selected so that style actions apply to all text.
 * @param {HTMLElement} editTarget
 * @returns {Range|null} Selection range inside the edit target.
 */
export function getActiveRange(editTarget) {
    const selection = window.getSelection();
    if (!selection || selection.rangeCount === 0) return null;

    if (selection.isCollapsed) {
        if (!editTarget.contains(selection.anchorNode)) return null;
        const range = document.createRange();
        range.selectNodeContents(editTarget);
        selection.removeAllRanges();
        selection.addRange(range);
        return range;
    }

    const range = selection.getRangeAt(0);
    if (!editTarget.contains(range.commonAncestorContainer)) return null;
    return range;
}

/** Tailwind utility classes cleared when toggling bold off on an edit target. */
const TAILWIND_BOLD_CLASSES = ['font-bold', 'font-semibold', 'font-extrabold', 'font-black'];

/** Tailwind utility classes cleared when toggling italic off on an edit target. */
const TAILWIND_ITALIC_CLASSES = ['italic'];

function isFullyBold(range, editTarget) {
    if (range.collapsed) return false;
    const nodes = getTextNodesInRange(range);
    return nodes.length > 0 && nodes.every((node) => isNodeBold(node, editTarget));
}

function isFullyItalic(range, editTarget) {
    if (range.collapsed) return false;
    const nodes = getTextNodesInRange(range);
    return nodes.length > 0 && nodes.every((node) => isNodeItalic(node, editTarget));
}

/**
 * Toggles bold on the current selection within the edit target.
 * @param {HTMLElement} editTarget
 */
export function applyBold(editTarget) {
    const range = getActiveRange(editTarget);
    if (!range) return;
    if (isFullyBold(range, editTarget)) {
        unwrapTagsInRange(range, ['strong', 'b'], editTarget);
        TAILWIND_BOLD_CLASSES.forEach(className => editTarget.classList.remove(className));
        if (editTarget.style.fontWeight) editTarget.style.removeProperty('font-weight');
        const selection = window.getSelection();
        if (selection?.rangeCount > 0 && !selection.isCollapsed) {
            const selectionRange = selection.getRangeAt(0);
            if (isFullyBold(selectionRange, editTarget)) wrapRange(selectionRange, 'span', { fontWeight: 'normal' });
        }
    } else {
        wrapRange(range, 'strong');
    }
    editTarget.dispatchEvent(new Event('input', { bubbles: true }));
}

/**
 * Toggles italic on the current selection within the edit target.
 * @param {HTMLElement} editTarget
 */
export function applyItalic(editTarget) {
    const range = getActiveRange(editTarget);
    if (!range) return;
    if (isFullyItalic(range, editTarget)) {
        unwrapTagsInRange(range, ['em', 'i'], editTarget);
        TAILWIND_ITALIC_CLASSES.forEach(className => editTarget.classList.remove(className));
        if (editTarget.style.fontStyle) editTarget.style.removeProperty('font-style');
        const selection = window.getSelection();
        if (selection?.rangeCount > 0 && !selection.isCollapsed) {
            const selectionRange = selection.getRangeAt(0);
            if (isFullyItalic(selectionRange, editTarget)) wrapRange(selectionRange, 'span', { fontStyle: 'normal' });
        }
    } else {
        wrapRange(range, 'em');
    }
    editTarget.dispatchEvent(new Event('input', { bubbles: true }));
}

/** Tailwind utility classes cleared when toggling underline off on an edit target. */
const TAILWIND_UNDERLINE_CLASSES = ['underline'];

function isRangeFullyUnderlined(range, editTarget) {
    if (range.collapsed) return false;
    const nodes = getTextNodesInRange(range);
    return nodes.length > 0 && nodes.every((node) => isNodeUnderlined(node, editTarget));
}

function removeExplicitUnderlineInRange(range, editTarget) {
    getTextNodesInRange(range).forEach(node => {
        let element = node.parentElement;
        while (element && element !== editTarget) {
            if (element.style?.textDecoration?.includes('underline') || element.style?.textDecorationLine?.includes('underline')) {
                element.style.removeProperty('text-decoration');
                element.style.removeProperty('text-decoration-line');
            }
            element = element.parentElement;
        }
    });
}

function getContextualDecorationStyle(range) {
    // When text sits between CSS-class underline siblings (after a split), inherit
    // their full decoration style so re-applied underline visually matches.
    const node = range.startContainer;
    if (node.nodeType !== Node.TEXT_NODE) return null;

    for (const sibling of [node.previousSibling, node.nextSibling]) {
        if (!sibling || sibling.nodeType !== Node.ELEMENT_NODE) continue;
        const computedStyle = getComputedStyle(sibling);
        const textDecorationLine = computedStyle.textDecorationLine || computedStyle.textDecoration || '';
        if (!textDecorationLine.includes('underline')) continue;

        const style = {};
        if (computedStyle.textDecorationColor) {
            style.textDecorationColor = computedStyle.textDecorationColor;
        }
        if (computedStyle.textDecorationThickness && computedStyle.textDecorationThickness !== 'auto') {
            style.textDecorationThickness = computedStyle.textDecorationThickness;
        }
        if (computedStyle.textDecorationStyle && computedStyle.textDecorationStyle !== 'solid') {
            style.textDecorationStyle = computedStyle.textDecorationStyle;
        }
        return Object.keys(style).length > 0 ? style : null;
    }
    return null;
}

function getEffectiveTextColor(range, editTarget) {
    const nodes = getTextNodesInRange(range);
    if (nodes.length === 0 && range.startContainer.nodeType === Node.TEXT_NODE) {
        nodes.push(range.startContainer);
    }
    if (nodes.length === 0) return null;

    const containerColor = getComputedStyle(editTarget).color;
    for (const textNode of nodes) {
        let element = textNode.parentElement;
        while (element && element !== editTarget) {
            const inlineColor = element.style?.color;
            if (inlineColor && inlineColor !== 'transparent') return inlineColor;
            element = element.parentElement;
        }
        const parent = textNode.parentElement;
        if (!parent) continue;
        const computed = getComputedStyle(parent).color;
        if (computed && computed !== containerColor && computed !== 'rgba(0, 0, 0, 0)') {
            return computed;
        }
    }
    return null;
}

function buildUnderlineWrapStyle(range, editTarget) {
    const style = getContextualDecorationStyle(range) ?? {};
    const textColor = getEffectiveTextColor(range, editTarget);
    if (textColor) {
        style.textDecorationColor = textColor;
    }
    return Object.keys(style).length > 0 ? style : null;
}

/** Keeps `<u>` decoration color in sync when nested text color changes. */
export function syncUnderlineColorFromElement(element, editTarget) {
    if (!element || !editTarget) return;
    const inlineColor = element.style?.color;
    const containerColor = getComputedStyle(editTarget).color;
    const decorationColor = inlineColor
        || (() => {
            const computed = getComputedStyle(element).color;
            return computed !== containerColor && computed !== 'rgba(0, 0, 0, 0)' ? computed : null;
        })();
    if (!decorationColor) return;

    let node = element.parentElement;
    while (node && node !== editTarget) {
        if (node.tagName?.toLowerCase() === 'u') {
            node.style.textDecorationColor = decorationColor;
        }
        node = node.parentElement;
    }
}

function findCssUnderlineAncestor(node, editTarget) {
    // Find the closest ancestor that sources underline via a CSS class, not a <u> tag
    // or inline style — those are handled by other steps.
    let element = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
    while (element && element !== editTarget) {
        if (element.tagName?.toLowerCase() === 'u') { element = element.parentElement; continue; }
        const hasInline = element.style?.textDecoration?.includes('underline') || element.style?.textDecorationLine?.includes('underline');
        if (hasInline) { element = element.parentElement; continue; }
        const textDecorationLine = getComputedStyle(element).textDecorationLine || getComputedStyle(element).textDecoration || '';
        if (textDecorationLine.includes('underline')) return element;
        element = element.parentElement;
    }
    return null;
}

function splitElementAroundRange(range, ancestor, editTarget) {
    const fragment = range.extractContents();
    const selectionFirst = fragment.firstChild;
    const selectionLast  = fragment.lastChild;

    const parent  = ancestor.parentNode;
    const nextSibling = ancestor.nextSibling;

    const afterRange = document.createRange();
    afterRange.setStart(range.startContainer, range.startOffset);
    if (ancestor.lastChild) afterRange.setEndAfter(ancestor.lastChild);
    else afterRange.collapse(true);
    const afterContent = ancestor.lastChild ? afterRange.extractContents() : null;

    parent.insertBefore(fragment, nextSibling);

    if (afterContent?.textContent) {
        const afterClone = ancestor.cloneNode(false);
        afterClone.appendChild(afterContent);
        parent.insertBefore(afterClone, nextSibling);
    }

    if (!ancestor.textContent) ancestor.remove();

    restoreSelectionOver(selectionFirst, selectionLast);
    editTarget.normalize();
}

/**
 * Toggles underline on the current selection within the edit target.
 * @param {HTMLElement} editTarget
 */
export function applyUnderline(editTarget) {
    const range = getActiveRange(editTarget);
    if (!range) return;

    if (isRangeFullyUnderlined(range, editTarget)) {
        if (getTextNodesInRange(range).some(node => hasAncestorTag(node, ['u'], editTarget))) {
            unwrapTagsInRange(range, ['u'], editTarget);
        }
        let selection = window.getSelection();
        if (selection?.rangeCount > 0) removeExplicitUnderlineInRange(selection.getRangeAt(0), editTarget);
        // Strip Tailwind underline classes from the editTarget itself
        TAILWIND_UNDERLINE_CLASSES.forEach(className => editTarget.classList.remove(className));
        selection = window.getSelection();
        if (selection?.rangeCount > 0 && !selection.isCollapsed) {
            const selectionRange = selection.getRangeAt(0);
            if (isRangeFullyUnderlined(selectionRange, editTarget)) {
                const textNodes = getTextNodesInRange(selectionRange);
                const cssAncestor = textNodes.length > 0 ? findCssUnderlineAncestor(textNodes[0], editTarget) : null;
                if (cssAncestor) splitElementAroundRange(selectionRange, cssAncestor, editTarget);
                else wrapRange(selectionRange, 'span', { textDecoration: 'none' });
            }
        }
    } else {
        const decorationStyle = buildUnderlineWrapStyle(range, editTarget);
        wrapRange(range, 'u', decorationStyle ?? undefined);
    }

    editTarget.dispatchEvent(new Event('input', { bubbles: true }));
}

/**
 * Finds the nearest ancestor `<span>` that already carries `styleProperty` and whose
 * text content exactly matches the selection. Reusing it (instead of nesting a
 * new inner span) keeps in-between elements like `<u>` at the same font-size as
 * the text, so e.g. underline thickness stays proportional.
 * @param {Range} range
 * @param {HTMLElement} editTarget
 * @param {string} styleProperty
 * @returns {HTMLElement|null}
 */
function findStyledAncestorWrappingRange(range, editTarget, styleProperty) {
    let element = range.commonAncestorContainer;
    if (element.nodeType === Node.TEXT_NODE) element = element.parentElement;
    const selectionText = range.toString();
    if (!selectionText) return null;
    let match = null;
    while (element && element !== editTarget) {
        if (element.nodeType === Node.ELEMENT_NODE && element.tagName === 'SPAN' && element.style[styleProperty]) {
            const elementRange = document.createRange();
            elementRange.selectNodeContents(element);
            if (elementRange.toString() === selectionText) match = element;
        }
        element = element.parentElement;
    }
    return match;
}

/**
 * Wraps the active selection in a span carrying one inline style prop,
 * stripping the same prop from descendants (and a redundant single-child
 * parent span) so values never nest.
 * @param {HTMLElement} editTarget
 * @param {string} styleProperty - camelCase property (e.g. 'fontSize').
 * @param {string} cssProperty - kebab-case property (e.g. 'font-size').
 * @param {string} value
 */
export function wrapSelectionWithStyle(editTarget, styleProperty, cssProperty, value) {
    const range = getActiveRange(editTarget);
    if (!range) return;
    const reuse = findStyledAncestorWrappingRange(range, editTarget, styleProperty);
    if (reuse) {
        reuse.style[styleProperty] = value;
        if (styleProperty === 'fontSize') reuse.style.lineHeight = 'normal';
        reuse.querySelectorAll('*').forEach(element => {
            if (element.style[styleProperty]) {
                element.style.removeProperty(cssProperty);
                if (!element.style.cssText.trim()) element.replaceWith(...element.childNodes);
            }
        });
        reuse.normalize();
        editTarget.dispatchEvent(new Event('input', { bubbles: true }));
        return;
    }

    const wrapperStyle = { [styleProperty]: value };
    if (styleProperty === 'fontSize') wrapperStyle.lineHeight = 'normal';
    const wrapper = wrapRange(range, 'span', wrapperStyle);
    if (wrapper) {
        wrapper.querySelectorAll('*').forEach(element => {
            if (element.style[styleProperty]) {
                element.style.removeProperty(cssProperty);
                if (!element.style.cssText.trim()) element.replaceWith(...element.childNodes);
            }
        });
        const parentElement = wrapper.parentElement;
        if (parentElement && parentElement !== editTarget && parentElement.tagName === 'SPAN' && parentElement.style[styleProperty] && parentElement.childNodes.length === 1) {
            parentElement.style.removeProperty(cssProperty);
            if (!parentElement.style.cssText.trim()) parentElement.replaceWith(...parentElement.childNodes);
        }
        wrapper.normalize();
    }
    editTarget.dispatchEvent(new Event('input', { bubbles: true }));
}

/**
 * Sets text-align on the edit target element.
 * @param {HTMLElement} editTarget
 * @param {'left'|'center'|'right'} alignment
 */
export function applyAlign(editTarget, alignment) {
    const current = getComputedStyle(editTarget).textAlign;
    if (current === alignment || (alignment === 'left' && (current === 'start' || current === 'left'))) return;
    editTarget.style.textAlign = alignment;
    editTarget.dispatchEvent(new Event('input', { bubbles: true }));
}