{{--
    The page wizard: describe the page, let the AI propose the modules, tick what you
    want and let it fill them. What comes back is rendered as the same block cards
    the builder uses, so the editor reviews and saves it like anything else.

    Include inside the page form; the script registers itself as pwInitPageWizard.
    The wrapper holds the trigger and the dialog, so the script never has to guess
    which button belongs to which wizard.
--}}
<div data-ai-wizard
     data-ai-plan-endpoint="{{ route('admin.pages.ai.plan') }}"
     data-ai-build-endpoint="{{ route('admin.pages.ai.build') }}">
    <button type="button" class="btn btn-primary btn-sm" data-ai-open>
        @include('admin.partials.icon', ['name' => 'sparkles', 'class' => 'h-3.5 w-3.5'])
        Pagina bouwen met AI
    </button>
    <p class="mt-2 hidden text-xs text-muted-foreground" data-ai-status></p>

<div class="modal-backdrop" aria-hidden="true">
    <div class="modal-panel max-w-2xl" role="dialog" aria-modal="true" aria-label="Pagina bouwen met AI">
        <div class="flex items-center justify-between border-b border-border px-5 py-3">
            <div>
                <p class="card-title flex items-center gap-2">
                    @include('admin.partials.icon', ['name' => 'sparkles', 'class' => 'h-4 w-4 text-primary'])
                    Pagina bouwen met AI
                </p>
                <p class="hint">Stap <span data-ai-step-label>1</span> van 2</p>
            </div>
            <button type="button" class="btn btn-outline btn-sm" data-ai-close>
                @include('admin.partials.icon', ['name' => 'x', 'class' => 'h-3.5 w-3.5'])
                Sluiten
            </button>
        </div>

        <div class="min-h-0 flex-1 space-y-4 overflow-y-auto p-5">
            <div class="space-y-3" data-ai-step="1">
                <label class="label" for="ai-brief">Wat voor pagina wil je?</label>
                <textarea id="ai-brief" rows="5" class="input" maxlength="2000"
                          placeholder="Bijvoorbeeld: een landingspagina voor onze peptidebundels, met uitleg over zuiverheid, een blok met de populairste categorieën en een paar vragen onderaan."></textarea>
                <p class="hint">
                    Vertel in gewone taal wat er op de pagina moet staan. De AI stelt daarna de
                    modules voor die erbij passen; jij kiest welke er echt in komen.
                </p>
            </div>

            <div class="hidden space-y-4" data-ai-step="2">
                <p class="text-sm text-muted-foreground" data-ai-summary></p>

                <div>
                    <label class="label" for="ai-page-title">Paginatitel</label>
                    <input id="ai-page-title" type="text" class="input" maxlength="140" data-ai-page-title>
                    <p class="hint">Wordt alleen ingevuld als het titelveld nog leeg is.</p>
                </div>

                <div>
                    <p class="label">Welke modules wil je implementeren?</p>
                    <p class="hint">De AI stelde deze voor; vink aan wat er op de pagina moet komen.</p>
                    <div class="mt-2 space-y-2" data-ai-modules></div>
                </div>
            </div>

            <p class="hidden text-sm text-destructive" data-ai-error></p>
            <p class="hidden text-sm text-muted-foreground" data-ai-busy>De AI schrijft de pagina…</p>
        </div>

        <div class="flex flex-wrap items-center justify-between gap-3 border-t border-border px-5 py-3">
            <button type="button" class="btn btn-ghost btn-sm hidden" data-ai-back>
                @include('admin.partials.icon', ['name' => 'arrow-left', 'class' => 'h-3.5 w-3.5'])
                Terug
            </button>
            <div class="ml-auto flex items-center gap-2">
                <button type="button" class="btn btn-primary btn-sm" data-ai-next>Volgende</button>
                <button type="button" class="btn btn-primary btn-sm hidden" data-ai-build>Bouwen</button>
            </div>
        </div>
    </div>
</div>
</div>

@once
    @push('scripts')
        <script>
            (function () {
                var TOKEN = (document.querySelector('meta[name="csrf-token"]') || {}).content || '';

                function post(endpoint, body) {
                    return window.fetch(endpoint, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': TOKEN
                        },
                        credentials: 'same-origin',
                        body: JSON.stringify(body)
                    }).then(function (response) {
                        return response.json().catch(function () {
                            return { ok: false, error: 'Onverwacht antwoord van de server.' };
                        }).then(function (data) {
                            if (!response.ok || !data.ok) throw new Error(data.error || ('Fout ' + response.status));

                            return data;
                        });
                    });
                }

                function initWizard(wizard) {
                    if (wizard.dataset.wizardReady === '1') return;

                    wizard.dataset.wizardReady = '1';

                    var status = wizard.querySelector('[data-ai-status]');
                    var backdrop = wizard.querySelector('.modal-backdrop');
                    var brief = wizard.querySelector('#ai-brief');
                    var titleInput = wizard.querySelector('[data-ai-page-title]');
                    var summary = wizard.querySelector('[data-ai-summary]');
                    var modules = wizard.querySelector('[data-ai-modules]');
                    var error = wizard.querySelector('[data-ai-error]');
                    var busy = wizard.querySelector('[data-ai-busy]');
                    var stepLabel = wizard.querySelector('[data-ai-step-label]');
                    var stepOne = wizard.querySelector('[data-ai-step="1"]');
                    var stepTwo = wizard.querySelector('[data-ai-step="2"]');
                    var nextButton = wizard.querySelector('[data-ai-next]');
                    var buildButton = wizard.querySelector('[data-ai-build]');
                    var backButton = wizard.querySelector('[data-ai-back]');
                    var plan = null;

                    function open() {
                        backdrop.classList.add('is-open');
                        backdrop.setAttribute('aria-hidden', 'false');
                        document.body.style.overflow = 'hidden';
                        if (brief) brief.focus();
                    }

                    function close() {
                        backdrop.classList.remove('is-open');
                        backdrop.setAttribute('aria-hidden', 'true');
                        document.body.style.overflow = '';
                    }

                    /** The AI's words go into the DOM, so escape them. */
                    function escape(value) {
                        return String(value == null ? '' : value)
                            .replace(/&/g, '&amp;')
                            .replace(/</g, '&lt;')
                            .replace(/>/g, '&gt;')
                            .replace(/"/g, '&quot;');
                    }

                    function say(text, kind) {
                        if (status) {
                            status.textContent = text || '';
                            status.classList.toggle('hidden', !text);
                        }

                        if (error && kind !== 'ok') {
                            error.textContent = text || '';
                            error.classList.toggle('hidden', !text);
                        }
                    }

                    function working(on) {
                        busy.classList.toggle('hidden', !on);
                        nextButton.disabled = on;
                        buildButton.disabled = on;
                    }

                    function step(number) {
                        stepOne.classList.toggle('hidden', number !== 1);
                        stepTwo.classList.toggle('hidden', number !== 2);
                        nextButton.classList.toggle('hidden', number !== 1);
                        buildButton.classList.toggle('hidden', number !== 2);
                        backButton.classList.toggle('hidden', number !== 2);
                        stepLabel.textContent = String(number);
                    }

                    /** The proposed modules first (ticked), then the rest of the library. */
                    function paintModules(data) {
                        var proposed = data.modules || [];
                        var proposedTypes = proposed.map(function (module) { return module.type; });
                        var rows = proposed.map(function (module) {
                            return { type: module.type, label: module.label, hint: module.reason || module.hint, checked: true };
                        });

                        (data.available || []).forEach(function (module) {
                            if (proposedTypes.indexOf(module.type) !== -1) return;

                            rows.push({ type: module.type, label: module.label, hint: module.hint, checked: false });
                        });

                        modules.innerHTML = rows.map(function (row, index) {
                            return '<label class="flex items-start gap-3 rounded-md border border-border bg-muted/20 px-3 py-2.5">'
                                + '<input type="checkbox" class="mt-0.5 rounded border-input" data-ai-module value="' + escape(row.type) + '"'
                                + (row.checked ? ' checked' : '') + '>'
                                + '<span class="min-w-0"><span class="block text-sm font-medium">' + escape(row.label) + '</span>'
                                + '<span class="block text-xs text-muted-foreground">' + escape(row.hint) + '</span></span>'
                                + '</label>';
                        }).join('');
                    }

                    wizard.querySelector('[data-ai-open]').addEventListener('click', open);

                    wizard.addEventListener('click', function (event) {
                        if (event.target === backdrop || event.target.closest('[data-ai-close]')) close();
                    });

                    backButton.addEventListener('click', function () {
                        say('');
                        step(1);
                    });

                    nextButton.addEventListener('click', function () {
                        var text = (brief ? brief.value : '').trim();

                        if (text.length < 10) {
                            say('Beschrijf de pagina in een paar woorden meer.');

                            return;
                        }

                        say('');
                        working(true);

                        post(wizard.dataset.aiPlanEndpoint, { brief: text }).then(function (data) {
                            plan = data;
                            summary.textContent = data.summary || '';
                            titleInput.value = data.title || '';
                            paintModules(data);
                            step(2);
                        }).catch(function (exception) {
                            say(exception && exception.message ? exception.message : 'Het voorstel mislukte.');
                        }).then(function () {
                            working(false);
                        });
                    });

                    buildButton.addEventListener('click', function () {
                        var chosen = Array.prototype.slice.call(wizard.querySelectorAll('[data-ai-module]:checked'))
                            .map(function (box) { return box.value; });

                        if (chosen.length === 0) {
                            say('Vink minstens één module aan.');

                            return;
                        }

                        say('');
                        working(true);

                        post(wizard.dataset.aiBuildEndpoint, {
                            brief: (brief ? brief.value : '').trim(),
                            title: titleInput.value.trim(),
                            types: chosen
                        }).then(function (data) {
                            var list = document.querySelector('[data-block-list]');
                            var counter = Date.now();

                            (data.cards || []).forEach(function (html) {
                                list.insertAdjacentHTML('beforeend', html.split('__BLOCK__').join(String(counter++)));
                            });

                            var cards = Array.prototype.slice.call(list.querySelectorAll('[data-block]')).slice(-1 * (data.cards || []).length);

                            cards.forEach(function (card) {
                                ['pwInitRepeaters', 'pwInitMediaFields', 'pwInitWysiwyg', 'pwDecorateAiFields'].forEach(function (name) {
                                    if (typeof window[name] === 'function') window[name](card);
                                });
                            });

                            if (typeof window.pwRefreshBlockState === 'function') window.pwRefreshBlockState(document);

                            var pageTitle = document.getElementById('title');

                            if (pageTitle && pageTitle.value.trim() === '' && data.title) pageTitle.value = data.title;

                            var first = cards[0];

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

                            var dropped = Number(data.dropped || 0);

                            if (status) {
                                status.textContent = (data.cards || []).length + ' module(s) toegevoegd'
                                    + (dropped > 0 ? ' (' + dropped + ' overgeslagen omdat er iets miste)' : '')
                                    + '. Controleer de tekst en sla de pagina op.';
                                status.classList.remove('hidden');
                            }

                            close();
                        }).catch(function (exception) {
                            say(exception && exception.message ? exception.message : 'Het bouwen mislukte.');
                        }).then(function () {
                            working(false);
                        });
                    });

                    document.addEventListener('keydown', function (event) {
                        if (event.key === 'Escape' && backdrop.classList.contains('is-open')) close();
                    });
                }

                window.pwInitPageWizard = function (scope) {
                    (scope || document).querySelectorAll('[data-ai-wizard]').forEach(initWizard);
                };

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