{{--
    The page builder: the blocks in order, a library to add new ones, and the static
    templates the editor clones. Expects $blocks (stored, normalised), $mediaPreviews
    (media id => url) and, through BlockDefinitions, the library itself.
--}}
@php
    $definitions = \App\Services\Content\BlockDefinitions::all();
@endphp

<div class="card" data-blocks>
    <div class="card-header flex flex-wrap items-start justify-between gap-4">
        <div>
            <p class="card-title">Pagina-opbouw</p>
            <p class="hint">
                Zet blokken in de volgorde waarin ze op de site moeten staan. Elk blok is een sectie die
                de site al gebruikt, dus de pagina blijft in dezelfde stijl. Laat de lijst leeg om de
                tekst onderaan te gebruiken.
            </p>
        </div>
        @include('admin.pages.partials.ai-wizard')
    </div>

    <div class="card-body space-y-3">
        <div data-block-list class="space-y-3">
            @foreach ($blocks as $index => $block)
                @include('admin.pages.partials.block-card', [
                    'index' => $index,
                    'type' => $block['type'] ?? '',
                    'data' => $block['data'] ?? [],
                    'mediaPreviews' => $mediaPreviews,
                ])
            @endforeach
        </div>

        <p class="text-sm text-muted-foreground {{ $blocks === [] ? '' : 'hidden' }}" data-block-empty>
            Nog geen blokken. Deze pagina toont de tekst uit het veld hieronder.
        </p>

        <div class="flex flex-wrap gap-2 border-t border-border pt-4">
            @foreach ($definitions as $type => $definition)
                <button type="button" class="btn btn-outline btn-sm" data-block-add="{{ $type }}">
                    @include('admin.partials.icon', ['name' => $definition['icon'], 'class' => 'h-3.5 w-3.5'])
                    {{ $definition['label'] }}
                </button>
            @endforeach
        </div>
    </div>

    @foreach ($definitions as $type => $definition)
        <template data-block-template="{{ $type }}">
            @include('admin.pages.partials.block-card', [
                'index' => '__BLOCK__',
                'type' => $type,
                'data' => [],
                'mediaPreviews' => $mediaPreviews,
            ])
        </template>
    @endforeach
</div>

@once
    @push('scripts')
        <script>
            (function () {
                function initBlocks(root) {
                    if (root.dataset.blocksReady === '1') return;

                    root.dataset.blocksReady = '1';

                    var list = root.querySelector('[data-block-list]');
                    var empty = root.querySelector('[data-block-empty]');
                    var counter = Date.now();

                    function refreshEmptyState() {
                        if (empty) empty.classList.toggle('hidden', list.children.length > 0);
                    }

                    /** A new block brings its own editors, image fields and AI buttons. */
                    function boot(card) {
                        if (window.pwInitRepeaters) window.pwInitRepeaters(card);
                        if (window.pwInitMediaFields) window.pwInitMediaFields(card);
                        if (window.pwInitWysiwyg) window.pwInitWysiwyg(card);
                        if (window.pwDecorateAiFields) window.pwDecorateAiFields(card);
                    }

                    root.querySelectorAll('[data-block-add]').forEach(function (button) {
                        button.addEventListener('click', function () {
                            var template = root.querySelector('[data-block-template="' + button.getAttribute('data-block-add') + '"]');

                            if (!template) return;

                            list.insertAdjacentHTML('beforeend', template.innerHTML.split('__BLOCK__').join(String(counter++)));

                            var card = list.lastElementChild;

                            if (card) {
                                boot(card);
                                card.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
                            }

                            refreshEmptyState();
                        });
                    });

                    root.addEventListener('click', function (event) {
                        var card = event.target.closest('[data-block]');

                        if (!card || !root.contains(card)) return;

                        if (event.target.closest('[data-block-delete]')) {
                            card.remove();
                            refreshEmptyState();

                            return;
                        }

                        var move = event.target.closest('[data-block-move]');

                        if (!move) return;

                        if (move.getAttribute('data-block-move') === 'up' && card.previousElementSibling) {
                            list.insertBefore(card, card.previousElementSibling);
                        }

                        if (move.getAttribute('data-block-move') === 'down' && card.nextElementSibling) {
                            list.insertBefore(card.nextElementSibling, card);
                        }
                    });

                    refreshEmptyState();
                }

                window.pwInitBlockBuilder = function (scope) {
                    (scope || document).querySelectorAll('[data-blocks]').forEach(initBlocks);
                };

                // Used by the AI wizard after it inserts cards: the empty-state line
                // has to disappear. (Re-running initBlocks is a no-op, the root is
                // already set up.)
                window.pwRefreshBlockState = function (scope) {
                    (scope || document).querySelectorAll('[data-blocks]').forEach(function (root) {
                        var list = root.querySelector('[data-block-list]');
                        var empty = root.querySelector('[data-block-empty]');

                        if (list && empty) empty.classList.toggle('hidden', list.children.length > 0);
                    });
                };

                window.pwRegisterAdminInit('pwInitBlockBuilder');
            })();
        </script>
    @endpush
@endonce