@props([
    'name' => 'menus',
    'value' => null,
    'maxDepth' => 3,
])

@php
    use App\Core\Site\SiteSettingDefaults;
    use Illuminate\Support\Str;

    $initialValue = $value;
    if (is_string($initialValue)) {
        $initialValue = json_decode($initialValue, true);
    }

    if (! is_array($initialValue) || $initialValue === []) {
        $initialValue = SiteSettingDefaults::defaultMenus();
    }

    $initialValue = SiteSettingDefaults::normalizeMenus($initialValue);
    $builderId = 'menu-builder-' . Str::uuid()->toString();
@endphp

<div
    class="space-y-3"
    data-menu-builder
    data-menu-builder-id="{{ $builderId }}"
    data-menu-max-depth="{{ $maxDepth }}"
>
    <textarea name="{{ $name }}" class="hidden" data-menu-output>{{ json_encode($initialValue, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT) }}</textarea>

    <div class="flex flex-wrap justify-end gap-2">
        <button type="button" class="btn btn-sm btn-soft" data-menu-action="add-root">메뉴 추가</button>
        <button type="button" class="btn btn-sm btn-ghost" data-menu-action="reset">기본값</button>
    </div>

    <div class="space-y-3" data-menu-tree></div>
    <div class="hidden text-sm c-muted" data-menu-empty>
        메뉴를 추가해 주세요.
    </div>
</div>

<script>
(function () {
    const root = document.querySelector('[data-menu-builder-id="{{ $builderId }}"]');
    if (!root || root.dataset.menuInitialized === '1') {
        return;
    }

    root.dataset.menuInitialized = '1';

    const maxDepth = Number(root.dataset.menuMaxDepth || 3);
    const output = root.querySelector('[data-menu-output]');
    const tree = root.querySelector('[data-menu-tree]');
    const emptyState = root.querySelector('[data-menu-empty]');
    const defaultValue = @json($initialValue, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);

    function safeParse(value) {
        if (!value) {
            return [];
        }

        try {
            const parsed = JSON.parse(value);
            return Array.isArray(parsed) ? parsed : [];
        } catch (error) {
            return [];
        }
    }

    function normalizeNode(node, depth) {
        const next = {
            label: String(node && node.label ? node.label : ''),
            href: String(node && node.href ? node.href : ''),
            children: [],
        };

        if (depth < maxDepth && Array.isArray(node && node.children)) {
            next.children = node.children
                .map((child) => normalizeNode(child, depth + 1))
                .filter((child) => child !== null);
        }

        return next;
    }

    function normalizeTree(items) {
        return (Array.isArray(items) ? items : [])
            .map((item) => normalizeNode(item, 1))
            .filter(Boolean);
    }

    function createNode(item, depth) {
        const li = document.createElement('div');
        li.dataset.menuItem = 'true';
        li.dataset.depth = String(depth);
        li.className = 'space-y-3 border-b border-muted pb-3 last:border-b-0 last:pb-0 md:border-b-0 md:pb-0';

        const childrenClass = depth < maxDepth
            ? 'space-y-3 border-l border-dashed border-muted pl-4'
            : 'space-y-3';

        li.innerHTML = `
            <div class="flex flex-col gap-3 lg:flex-row lg:items-center">
                <div class="grid min-w-0 flex-1 gap-3 md:grid-cols-2">
                    <input type="text" class="input input-md w-full" data-menu-label placeholder="메뉴명">
                    <input type="text" class="input input-md w-full" data-menu-href placeholder="/boards">
                </div>

                <div class="flex flex-wrap gap-1.5 lg:justify-end">
                    <button type="button" class="btn btn-xs btn-ghost" data-menu-action="up" aria-label="위로 이동" title="위로 이동">▲</button>
                    <button type="button" class="btn btn-xs btn-ghost" data-menu-action="down" aria-label="아래로 이동" title="아래로 이동">▼</button>
                    <button type="button" class="btn btn-xs btn-ghost" data-menu-action="indent" aria-label="들여쓰기" title="들여쓰기">↳</button>
                    <button type="button" class="btn btn-xs btn-ghost" data-menu-action="outdent" aria-label="내어쓰기" title="내어쓰기">↰</button>
                    <button type="button" class="btn btn-xs btn-soft" data-menu-action="add-child" aria-label="하위 메뉴 추가" title="하위 메뉴 추가">+ 하위</button>
                    <button type="button" class="btn btn-xs btn-danger" data-menu-action="remove" aria-label="삭제" title="삭제">삭제</button>
                </div>
            </div>

            <div class="${childrenClass}" data-menu-children ${depth >= maxDepth ? 'hidden' : ''}></div>
        `;

        li.querySelector('[data-menu-label]').value = item.label || '';
        li.querySelector('[data-menu-href]').value = item.href || '';

        const childrenContainer = li.querySelector('[data-menu-children]');
        if (depth < maxDepth && Array.isArray(item.children) && item.children.length > 0) {
            item.children.forEach((child) => {
                childrenContainer.appendChild(createNode(child, depth + 1));
            });
        }

        updateNodeState(li);
        return li;
    }

    function getItemList(container) {
        return Array.from(container.children).filter((child) => child.dataset && child.dataset.menuItem === 'true');
    }

    function getChildrenContainer(item) {
        return item.querySelector('[data-menu-children]');
    }

    function getDepth(item) {
        return Number(item.dataset.depth || 1);
    }

    function setDepth(item, depth) {
        item.dataset.depth = String(depth);
        item.querySelector('[data-menu-children]')?.toggleAttribute('hidden', depth >= maxDepth);

        const children = getItemList(getChildrenContainer(item));
        children.forEach((child) => setDepth(child, depth + 1));
    }

    function getSubtreeHeight(item) {
        const children = getItemList(getChildrenContainer(item));
        if (children.length === 0) {
            return 1;
        }

        return 1 + Math.max(...children.map((child) => getSubtreeHeight(child)));
    }

    function canIndent(item) {
        const depth = getDepth(item);
        const subtreeHeight = getSubtreeHeight(item);
        return depth > 1 && item.previousElementSibling && depth + subtreeHeight <= maxDepth;
    }

    function canAddChild(item) {
        return getDepth(item) < maxDepth;
    }

    function updateNodeState(item) {
        const depth = getDepth(item);
        const prev = item.previousElementSibling;
        const next = item.nextElementSibling;
        const childrenContainer = getChildrenContainer(item);
        const childCount = getItemList(childrenContainer).length;
        const hasPrev = !!prev;
        const hasNext = !!next;
        const indentAllowed = canIndent(item);
        const outdentAllowed = depth > 1;
        const childAllowed = canAddChild(item);

        item.querySelector('[data-menu-action="up"]').disabled = !hasPrev;
        item.querySelector('[data-menu-action="down"]').disabled = !hasNext;
        item.querySelector('[data-menu-action="indent"]').disabled = !indentAllowed;
        item.querySelector('[data-menu-action="outdent"]').disabled = !outdentAllowed;
        item.querySelector('[data-menu-action="add-child"]').disabled = !childAllowed;
        item.querySelector('[data-menu-action="remove"]').disabled = false;
        childrenContainer.hidden = depth >= maxDepth || childCount === 0;
    }

    function updateAllStates() {
        getItemList(tree).forEach((item) => {
            updateNodeState(item);
            getItemList(getChildrenContainer(item)).forEach((child) => updateAllNodeStates(child));
        });
    }

    function updateAllNodeStates(item) {
        updateNodeState(item);
        getItemList(getChildrenContainer(item)).forEach((child) => updateAllNodeStates(child));
    }

    function serializeList(container) {
        return getItemList(container).map((item) => {
            const label = item.querySelector('[data-menu-label]').value.trim();
            const href = item.querySelector('[data-menu-href]').value.trim();
            const children = serializeList(getChildrenContainer(item));
            const node = {
                label,
                href,
            };

            if (children.length > 0) {
                node.children = children;
            }

            return node;
        });
    }

    function sync() {
        const items = serializeList(tree);
        output.value = JSON.stringify(items, null, 2);
        emptyState.classList.toggle('hidden', items.length > 0);
        updateAllStates();
    }

    function render(items) {
        tree.innerHTML = '';

        const normalized = normalizeTree(items);
        normalized.forEach((item) => {
            tree.appendChild(createNode(item, 1));
        });

        sync();
    }

    function createRootItem() {
        return { label: '', href: '', children: [] };
    }

    function createChildItem() {
        return { label: '', href: '', children: [] };
    }

    root.addEventListener('click', (event) => {
        const button = event.target.closest('[data-menu-action]');
        if (!button || !root.contains(button)) {
            return;
        }

        const action = button.dataset.menuAction;
        const item = button.closest('[data-menu-item]');

        if (action === 'add-root') {
            tree.appendChild(createNode(createRootItem(), 1));
            sync();
            return;
        }

        if (action === 'reset') {
            render(defaultValue);
            return;
        }

        if (!item) {
            return;
        }

        const depth = getDepth(item);
        const parentContainer = item.parentElement;

        if (action === 'remove') {
            item.remove();
            sync();
            return;
        }

        if (action === 'up' && item.previousElementSibling) {
            parentContainer.insertBefore(item, item.previousElementSibling);
            sync();
            return;
        }

        if (action === 'down' && item.nextElementSibling) {
            parentContainer.insertBefore(item.nextElementSibling, item);
            sync();
            return;
        }

        if (action === 'add-child') {
            if (depth >= maxDepth) {
                return;
            }

            const childContainer = getChildrenContainer(item);
            const child = createNode(createChildItem(), depth + 1);
            childContainer.hidden = false;
            childContainer.appendChild(child);
            sync();
            return;
        }

        if (action === 'indent') {
            if (!canIndent(item)) {
                return;
            }

            const prev = item.previousElementSibling;
            const prevChildren = getChildrenContainer(prev);
            const newDepth = depth + 1;
            setDepth(item, newDepth);
            prevChildren.hidden = false;
            prevChildren.appendChild(item);
            sync();
            return;
        }

        if (action === 'outdent') {
            if (depth <= 1) {
                return;
            }

            const currentParent = item.parentElement;
            const parentItem = currentParent.closest('[data-menu-item]');
            const grandParent = parentItem ? parentItem.parentElement : tree;

            setDepth(item, depth - 1);
            grandParent.insertBefore(item, parentItem ? parentItem.nextElementSibling : null);
            sync();
        }
    });

    root.addEventListener('input', () => {
        sync();
    });

    const form = root.closest('form');
    form?.addEventListener('submit', () => {
        sync();
    });

    render(safeParse(output.value) || defaultValue);
})();
</script>