@extends('admin.layout')

@section('title', 'Instellingen')
@section('heading', 'Instellingen')
@section('subheading', 'Alles wat de backend en de front-end runtime nodig hebben. Geheimen worden versleuteld opgeslagen.')

@section('actions')
    <form method="POST" action="{{ route('admin.settings.test-wordpress') }}">
        @csrf
        <button type="submit" class="btn btn-outline btn-sm">
            @include('admin.partials.icon', ['name' => 'globe', 'class' => 'h-3.5 w-3.5'])
            Test WordPress-verbinding
        </button>
    </form>
    <form method="POST" action="{{ route('admin.settings.test-woocommerce') }}">
        @csrf
        <button type="submit" class="btn btn-outline btn-sm">
            @include('admin.partials.icon', ['name' => 'activity', 'class' => 'h-3.5 w-3.5'])
            Test WooCommerce-verbinding
        </button>
    </form>
@endsection

@section('content')
    @php
        // One icon per subject, so the tab bar reads at a glance.
        $groupIcons = [
            'wordpress' => 'globe',
            'woocommerce' => 'shopping-bag',
            'slicewp' => 'users',
            'payments' => 'credit-card',
            'routing' => 'activity',
            'runtime' => 'server',
            'ai' => 'sparkles',
            'account' => 'key-round',
        ];

        $groupKeys = array_keys($groups);
        $activeGroup = $groupKeys[0] ?? null;
        $missingPerGroup = [];

        foreach ($groups as $group => $entries) {
            $missingPerGroup[$group] = count(array_filter(
                $entries,
                static fn (array $entry): bool => ! $entry['is_set'],
            ));
        }
    @endphp

    <div data-tabs-scope>
    <div class="card">
        <div class="tab-bar" role="tablist" aria-label="Instellingengroepen" data-tabs>
            @foreach ($groups as $group => $entries)
                <button type="button" role="tab" class="tab"
                        id="tab-{{ $group }}"
                        data-tab="{{ $group }}"
                        aria-controls="{{ $group }}"
                        aria-selected="{{ $group === $activeGroup ? 'true' : 'false' }}">
                    @include('admin.partials.icon', [
                        'name' => $groupIcons[$group] ?? 'settings',
                        'class' => 'h-4 w-4 shrink-0',
                    ])
                    {{ $groupLabels[$group] ?? ucfirst($group) }}
                    @if ($missingPerGroup[$group] > 0)
                        <span class="badge badge-warn">{{ $missingPerGroup[$group] }}</span>
                    @endif
                </button>
            @endforeach
        </div>
    </div>

    @foreach ($groups as $group => $entries)
        <div id="{{ $group }}" class="scroll-mt-6" role="tabpanel" aria-labelledby="tab-{{ $group }}"
             data-panel="{{ $group }}" @if ($group !== $activeGroup) hidden @endif>
            <div class="card">
                @if (! empty($groupHints[$group]) || $missingPerGroup[$group] > 0)
                    <div class="card-header space-y-1.5">
                        @if (! empty($groupHints[$group]))
                            <p class="hint">{{ $groupHints[$group] }}</p>
                        @endif
                        @if ($missingPerGroup[$group] > 0)
                            <p class="flex items-center gap-1.5 text-xs text-warning">
                                @include('admin.partials.icon', ['name' => 'circle-alert', 'class' => 'h-3.5 w-3.5'])
                                {{ $missingPerGroup[$group] }} van deze {{ count($entries) }} instellingen
                                {{ $missingPerGroup[$group] === 1 ? 'is' : 'zijn' }} nog niet ingevuld.
                            </p>
                        @endif
                    </div>
                @endif

                <form method="POST" action="{{ route('admin.settings.update') }}">
                    @csrf
                    <div class="divide-y divide-border/70">
                        @foreach ($entries as $key => $entry)
                            <div class="grid gap-3 px-5 py-4 md:grid-cols-[18rem_1fr]">
                                <div>
                                    <label class="label" for="setting-{{ $key }}">
                                        {{ $entry['label'] }}
                                        @if ($entry['secret'])<span class="badge badge-muted ml-1">geheim</span>@endif
                                    </label>
                                    <p class="font-mono text-[11px] text-muted-foreground">{{ $key }}</p>
                                    <p class="mt-1.5">
                                        <span class="badge {{ $entry['source'] === 'database' ? 'badge-ok' : ($entry['source'] === 'environment' ? 'badge-muted' : 'badge-warn') }}">
                                            {{ $entry['source'] }}
                                        </span>
                                    </p>
                                </div>

                                <div>
                                    @php $control = $entry['type'] ?? 'text'; @endphp

                                    @if ($control === 'select')
                                        <select id="setting-{{ $key }}" name="settings[{{ $key }}]" class="input">
                                            @foreach ($entry['options'] ?? [] as $optionValue => $optionLabel)
                                                <option value="{{ $optionValue }}"
                                                        @selected(old('settings.'.$key, $entry['value']) === $optionValue)>{{ $optionLabel }}</option>
                                            @endforeach
                                        </select>
                                    @elseif ($control === 'checkboxes')
                                        @php
                                            $selected = array_values(array_filter(array_map(
                                                'trim',
                                                explode(',', (string) old(
                                                    'settings.'.$key,
                                                    is_array($entry['value']) ? implode(',', $entry['value']) : $entry['value'],
                                                )),
                                            )));
                                        @endphp
                                        <div class="flex flex-wrap gap-4" data-choice-group>
                                            @foreach ($entry['options'] ?? [] as $optionValue => $optionLabel)
                                                <label class="flex items-center gap-2 text-sm">
                                                    <input type="checkbox" class="rounded border-input"
                                                           value="{{ $optionValue }}" data-choice-option
                                                           @checked(in_array($optionValue, $selected, true))>
                                                    {{ $optionLabel }}
                                                </label>
                                            @endforeach
                                        </div>
                                        {{-- The setting itself stays a comma list; the boxes write it. --}}
                                        <input type="hidden" id="setting-{{ $key }}" name="settings[{{ $key }}]"
                                               value="{{ old('settings.'.$key, is_array($entry['value']) ? implode(',', $entry['value']) : $entry['value']) }}"
                                               data-choice-input>
                                    @elseif ($control === 'rules')
                                        @include('admin.partials.routing-rules', [
                                            'key' => $key,
                                            'entry' => $entry,
                                            'methods' => $paymentMethods,
                                        ])
                                    @else
                                        <div class="{{ $entry['secret'] ? 'relative' : '' }}">
                                            <input id="setting-{{ $key }}" name="settings[{{ $key }}]" type="text"
                                                   class="input {{ $entry['secret'] ? 'input-mono pr-11' : '' }}"
                                                   autocomplete="off"
                                                   value="{{ $entry['value'] }}"
                                                   placeholder="{{ $entry['is_set'] ? ($entry['preview'] ?? 'ingesteld') : 'nog niet ingesteld' }}">

                                            {{-- The value of a secret is never printed into the page: the
                                                 eye asks for it (admin.settings.reveal) and fills the field. --}}
                                            @if ($entry['secret'])
                                                <button type="button"
                                                        class="secret-toggle"
                                                        data-secret-reveal="{{ route('admin.settings.reveal') }}"
                                                        data-secret-key="{{ $key }}"
                                                        data-secret-set="{{ $entry['is_set'] ? '1' : '0' }}"
                                                        aria-pressed="false"
                                                        aria-label="Toon de waarde van {{ $entry['label'] }}"
                                                        title="Toon de waarde">
                                                    <span data-secret-icon="show">
                                                        @include('admin.partials.icon', ['name' => 'eye', 'class' => 'h-4 w-4'])
                                                    </span>
                                                    <span data-secret-icon="hide" class="hidden">
                                                        @include('admin.partials.icon', ['name' => 'eye-off', 'class' => 'h-4 w-4'])
                                                    </span>
                                                </button>
                                            @endif
                                        </div>
                                        @if ($entry['secret'])
                                            <p class="mt-1.5 hidden text-xs text-destructive" data-secret-message></p>
                                        @endif
                                    @endif

                                    @if (! empty($entry['hint']))
                                        <p class="hint">{{ $entry['hint'] }}</p>
                                    @endif

                                    <div class="mt-2 flex items-center justify-between gap-3">
                                        <p class="text-xs text-muted-foreground">
                                            @if ($entry['is_set'])
                                                Huidige waarde: <span class="font-mono">{{ $entry['preview'] }}</span>
                                            @else
                                                Nog geen waarde.
                                            @endif
                                        </p>
                                        @if ($entry['source'] === 'database')
                                            <label class="flex items-center gap-1.5 text-xs text-muted-foreground">
                                                <input type="checkbox" name="forget[]" value="{{ $key }}" class="rounded border-input">
                                                wissen (terug naar .env)
                                            </label>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="flex items-center gap-3 border-t border-border px-5 py-4">
                        <button type="submit" class="btn btn-primary btn-sm">
                            @include('admin.partials.icon', ['name' => 'save', 'class' => 'h-3.5 w-3.5'])
                            Opslaan
                        </button>
                        <span class="text-xs text-muted-foreground">
                            Lege tekstvelden laten de bestaande waarde staan; bij een keuzelijst of
                            checkboxgroep is niets kiezen een echte keuze.
                        </span>
                    </div>
                </form>
            </div>
        </div>
    @endforeach
    </div>

    @include('admin.partials.tabs')

    @push('scripts')
        <script>
            // The eye inside a secret field. The value is not in the page: this asks
            // the backend for that one setting (POST admin.settings.reveal) and fills
            // the field, so it can be read and partially copied without ever being
            // printed into the HTML.
            (function () {
                var TOKEN = (document.querySelector('meta[name="csrf-token"]') || {}).content || '';

                function message(button, text) {
                    var box = button.parentElement.parentElement.querySelector('[data-secret-message]');

                    if (!box) return;

                    box.textContent = text || '';
                    box.classList.toggle('hidden', ! text);
                }

                function paint(button, shown) {
                    button.setAttribute('aria-pressed', shown ? 'true' : 'false');
                    button.title = shown ? 'Verberg de waarde' : 'Toon de waarde';
                    button.querySelector('[data-secret-icon="show"]').classList.toggle('hidden', shown);
                    button.querySelector('[data-secret-icon="hide"]').classList.toggle('hidden', ! shown);
                }

                function initSecretToggles(scope) {
                    (scope || document).querySelectorAll('[data-secret-reveal]').forEach(function (button) {
                        if (button.dataset.secretReady === '1') return;

                        button.dataset.secretReady = '1';

                        var input = document.getElementById('setting-' + button.dataset.secretKey);

                        if (!input) return;

                        button.addEventListener('click', function () {
                            // Hiding clears the field again, and an empty field means
                            // "leave the stored value alone" when the form is saved.
                            if (button.getAttribute('aria-pressed') === 'true') {
                                input.value = '';
                                paint(button, false);
                                message(button, '');

                                return;
                            }

                            if (button.dataset.secretSet !== '1') {
                                message(button, 'Er staat nog geen waarde in deze instelling.');

                                return;
                            }

                            button.disabled = true;
                            message(button, '');

                            window.fetch(button.dataset.secretReveal, {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'Accept': 'application/json',
                                    'X-CSRF-TOKEN': TOKEN
                                },
                                credentials: 'same-origin',
                                body: JSON.stringify({ key: button.dataset.secretKey })
                            }).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;
                                });
                            }).then(function (data) {
                                input.value = data.value;
                                paint(button, true);
                                message(button, data.value === '' ? 'Deze instelling is leeg.' : '');
                            }).catch(function (error) {
                                message(button, error && error.message ? error.message : 'Kon de waarde niet ophalen.');
                            }).then(function () {
                                button.disabled = false;
                            });
                        });
                    });
                }

                window.pwInitSecretToggles = initSecretToggles;
                window.pwRegisterAdminInit('pwInitSecretToggles');
            })();

            // A checkbox group (the fallback gateways) writes the comma list the
            // setting stores; nothing ticked is a real answer and clears the list.
            (function () {
                function initChoiceGroups(scope) {
                    (scope || document).querySelectorAll('[data-choice-group]').forEach(function (group) {
                        if (group.dataset.choiceReady === '1') return;

                        group.dataset.choiceReady = '1';

                        var input = group.parentElement.querySelector('[data-choice-input]');
                        if (!input) return;

                        var options = Array.prototype.slice.call(group.querySelectorAll('[data-choice-option]'));

                        var sync = function () {
                            input.value = options
                                .filter(function (option) { return option.checked; })
                                .map(function (option) { return option.value; })
                                .join(',');
                        };

                        options.forEach(function (option) {
                            option.addEventListener('change', sync);
                        });

                        sync();
                    });
                }

                window.pwInitChoiceGroups = initChoiceGroups;
                window.pwRegisterAdminInit('pwInitChoiceGroups');
            })();
        </script>
    @endpush
@endsection