@props([
    'name' => 'footer[info]',
    'value' => null,
])

@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::defaultFooter()['info'];
    }

    $builderId = 'footer-info-builder-' . Str::uuid()->toString();
@endphp

<div
    class="space-y-3"
    data-footer-info-builder
    data-footer-info-builder-id="{{ $builderId }}"
>
    <textarea name="{{ $name }}" class="hidden" data-footer-info-output>{{ json_encode(SiteSettingDefaults::normalizeFooter(['info' => $initialValue])['info'], 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-footer-info-action="add-root">항목 추가</button>
        <button type="button" class="btn btn-sm btn-ghost" data-footer-info-action="reset">기본값</button>
    </div>

    <div class="space-y-3" data-footer-info-tree></div>
    <div class="hidden text-sm c-muted" data-footer-info-empty>
        푸터 정보를 추가해 주세요.
    </div>
</div>

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

    root.dataset.footerInfoInitialized = '1';

    const output = root.querySelector('[data-footer-info-output]');
    const tree = root.querySelector('[data-footer-info-tree]');
    const emptyState = root.querySelector('[data-footer-info-empty]');
    const defaultValue = @json(SiteSettingDefaults::defaultFooter()['info'], 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) {
        return {
            label: String(node && node.label ? node.label : ''),
            value: String(node && node.value ? node.value : ''),
        };
    }

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

    function createNode(item) {
        const li = document.createElement('div');
        li.dataset.footerInfoItem = 'true';
        li.className = '';

        li.innerHTML = `
            <div class="flex flex-col gap-2 lg:flex-row lg:items-center">
                <div class="grid min-w-0 flex-1 gap-2 md:grid-cols-2">
                    <input type="text" class="input input-md w-full" data-footer-info-label placeholder="항목명">
                    <input type="text" class="input input-md w-full" data-footer-info-value placeholder="내용">
                </div>

                <div class="flex flex-wrap gap-1 lg:justify-end">
                    <button type="button" class="btn btn-xs btn-ghost" data-footer-info-action="up" aria-label="위로 이동" title="위로 이동">▲</button>
                    <button type="button" class="btn btn-xs btn-ghost" data-footer-info-action="down" aria-label="아래로 이동" title="아래로 이동">▼</button>
                    <button type="button" class="btn btn-xs btn-danger" data-footer-info-action="remove" aria-label="삭제" title="삭제">삭제</button>
                </div>
            </div>
        `;

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

        updateNodeState(li);
        return li;
    }

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

    function updateNodeState(item) {
        const prev = item.previousElementSibling;
        const next = item.nextElementSibling;

        item.querySelector('[data-footer-info-action="up"]').disabled = !prev;
        item.querySelector('[data-footer-info-action="down"]').disabled = !next;
        item.querySelector('[data-footer-info-action="remove"]').disabled = false;
    }

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

    function serializeList(container) {
        return getItemList(container).map((item) => ({
            label: item.querySelector('[data-footer-info-label]').value.trim(),
            value: item.querySelector('[data-footer-info-value]').value.trim(),
        }));
    }

    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 = '';

        normalizeTree(items).forEach((item) => {
            tree.appendChild(createNode(item));
        });

        sync();
    }

    function createRootItem() {
        return { label: '', value: '' };
    }

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

        const action = button.dataset.footerInfoAction;
        const item = button.closest('[data-footer-info-item]');

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

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

        if (!item) {
            return;
        }

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

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

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

    root.addEventListener('input', (event) => {
        if (!event.target.closest('[data-footer-info-item]')) {
            return;
        }

        sync();
    });

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