@php
    $config = $page->mailwizzConfig;
    $page->loadMissing('weeztixConfig');
    $hasWeeztixForCouponMap = $page->weeztixConfig !== null && $page->weeztixConfig->is_connected;
    $mailwizzStatus = $page->mailwizzIntegrationStatus();
    $existing = $config !== null
        ? [
            'list_uid' => $config->list_uid,
            'list_name' => $config->list_name,
            'field_email' => $config->field_email,
            'field_first_name' => $config->field_first_name,
            'field_last_name' => $config->field_last_name,
            'field_phone' => $config->field_phone,
            'field_coupon_code' => $config->field_coupon_code,
            'tag_field' => $config->tag_field,
            'tag_value' => $config->tag_value,
        ]
        : null;
@endphp

@extends('layouts.admin')

@section('title', __('Mailwizz') . ' — ' . $page->title)

@section('mobile_title', __('Mailwizz'))

@section('content')
    <div class="mx-auto max-w-3xl">
        <div class="mb-8">
            <a href="{{ route('admin.pages.edit', $page) }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">← {{ __('Back to page') }}</a>
            <h1 class="mt-4 text-2xl font-semibold text-slate-900">{{ __('Mailwizz') }}</h1>
            <p class="mt-2 text-sm text-slate-600">{{ __('Page:') }} <span class="font-medium text-slate-800">{{ $page->title }}</span></p>
        </div>

        @include('admin.pages._save_flash')

        @if ($errors->any())
            <div class="mb-6 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-900" role="alert">
                <p class="font-medium">{{ __('Please fix the following:') }}</p>
                <ul class="mt-2 list-disc space-y-1 pl-5">
                    @foreach ($errors->all() as $message)
                        <li>{{ $message }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if (! $showWizard && $config !== null)
            @if ($mailwizzStatus !== 'ready')
                <div class="mb-6 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-950">
                    <p class="font-medium">{{ __('Setup incomplete') }}</p>
                    <p class="mt-1 text-amber-900">{{ __('Run the wizard again to finish Mailwizz (API key, list, and field mapping).') }}</p>
                </div>
            @endif

            <div class="mb-6 flex flex-wrap items-center gap-3">
                <a
                    href="{{ route('admin.pages.mailwizz.edit', ['page' => $page, 'wizard' => 1, 'step' => 1]) }}"
                    class="inline-flex rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500"
                >
                    {{ __('Change settings (wizard)') }}
                </a>
                <form action="{{ route('admin.pages.mailwizz.destroy', $page) }}" method="post" class="inline"
                    onsubmit="return confirm(@js(__('Remove Mailwizz integration for this page? Subscribers will stay in the database but will no longer sync.')));">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="rounded-lg border border-red-200 bg-white px-4 py-2.5 text-sm font-semibold text-red-700 shadow-sm hover:bg-red-50">
                        {{ __('Disconnect Mailwizz') }}
                    </button>
                </form>
            </div>

            <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm sm:p-8">
                <h2 class="text-lg font-semibold text-slate-900">{{ __('Current configuration') }}</h2>
                <p class="mt-1 text-sm text-slate-600">{{ __('The API key is stored encrypted and is not shown here.') }}</p>

                <dl class="mt-6 space-y-4 border-t border-slate-100 pt-6 text-sm">
                    <div class="flex flex-col gap-1 sm:flex-row sm:justify-between">
                        <dt class="font-medium text-slate-700">{{ __('Connection') }}</dt>
                        <dd>
                            @if ($mailwizzStatus === 'ready')
                                <span class="inline-flex rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-800">{{ __('Ready to sync') }}</span>
                            @else
                                <span class="inline-flex rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-medium text-amber-900">{{ __('Incomplete') }}</span>
                            @endif
                        </dd>
                    </div>
                    <div class="flex flex-col gap-1 sm:flex-row sm:justify-between">
                        <dt class="font-medium text-slate-700">{{ __('Mailing list') }}</dt>
                        <dd class="text-slate-800">{{ $config->list_name ?: '—' }}</dd>
                    </div>
                    <div class="flex flex-col gap-1 sm:flex-row sm:justify-between">
                        <dt class="font-medium text-slate-700">{{ __('List UID') }}</dt>
                        <dd class="break-all font-mono text-xs text-slate-600">{{ $config->list_uid ?: '—' }}</dd>
                    </div>
                </dl>

                <h3 class="mt-8 border-t border-slate-100 pt-6 text-sm font-semibold text-slate-900">{{ __('Field mapping') }}</h3>
                <p class="mt-1 text-xs text-slate-500">{{ __('Mailwizz custom fields are matched by tag.') }}</p>
                <dl class="mt-4 space-y-4 text-sm">
                    <div class="flex flex-col gap-1 sm:flex-row sm:justify-between">
                        <dt class="font-medium text-slate-700">{{ __('Email') }}</dt>
                        <dd class="font-mono text-xs text-slate-800">{{ $config->field_email ?: '—' }}</dd>
                    </div>
                    <div class="flex flex-col gap-1 sm:flex-row sm:justify-between">
                        <dt class="font-medium text-slate-700">{{ __('First name') }}</dt>
                        <dd class="font-mono text-xs text-slate-800">{{ $config->field_first_name ?: '—' }}</dd>
                    </div>
                    <div class="flex flex-col gap-1 sm:flex-row sm:justify-between">
                        <dt class="font-medium text-slate-700">{{ __('Last name') }}</dt>
                        <dd class="font-mono text-xs text-slate-800">{{ $config->field_last_name ?: '—' }}</dd>
                    </div>
                    @if ($page->isPhoneFieldEnabledForSubscribers())
                        <div class="flex flex-col gap-1 sm:flex-row sm:justify-between">
                            <dt class="font-medium text-slate-700">{{ __('Phone') }}</dt>
                            <dd class="font-mono text-xs text-slate-800">{{ filled($config->field_phone) ? $config->field_phone : '—' }}</dd>
                        </div>
                    @endif
                    @if ($hasWeeztixForCouponMap)
                        <div class="flex flex-col gap-1 sm:flex-row sm:justify-between">
                            <dt class="font-medium text-slate-700">{{ __('Kortingscode (Weeztix)') }}</dt>
                            <dd class="font-mono text-xs text-slate-800">{{ filled($config->field_coupon_code) ? $config->field_coupon_code : '—' }}</dd>
                        </div>
                    @endif
                    <div class="flex flex-col gap-1 sm:flex-row sm:justify-between">
                        <dt class="font-medium text-slate-700">{{ __('Tag / source (checkbox list)') }}</dt>
                        <dd class="font-mono text-xs text-slate-800">{{ filled($config->tag_field) ? $config->tag_field : '—' }}</dd>
                    </div>
                    <div class="flex flex-col gap-1 sm:flex-row sm:justify-between">
                        <dt class="font-medium text-slate-700">{{ __('Source tag option') }}</dt>
                        <dd class="font-mono text-xs text-slate-800">{{ filled($config->tag_value) ? $config->tag_value : '—' }}</dd>
                    </div>
                </dl>
            </div>
        @else
            <div
                x-data="mailwizzWizard(@js([
                    'listsUrl' => route('admin.mailwizz.lists'),
                    'fieldsUrl' => route('admin.mailwizz.fields'),
                    'csrf' => csrf_token(),
                    'phoneEnabled' => $page->isPhoneFieldEnabledForSubscribers(),
                    'hasExistingConfig' => $config !== null,
                    'hasWeeztixIntegration' => $hasWeeztixForCouponMap,
                    'existing' => $existing,
                    'strings' => [
                        'apiKeyRequired' => __('Enter your Mailwizz API key to continue.'),
                        'genericError' => __('Something went wrong. Please try again.'),
                        'noListsError' => __('No mailing lists were returned. Check your API key or create a list in Mailwizz.'),
                        'selectListError' => __('Select a mailing list.'),
                        'mapFieldsError' => __('Map email, first name, and last name to Mailwizz fields.'),
                        'tagFieldError' => __('Select a checkbox list field for source / tag tracking.'),
                        'tagValueError' => __('Select the tag option that identifies this pre-registration.'),
                    ],
                ]))"
            >
                @if ($config !== null)
                    <div class="mb-6 flex flex-wrap items-center gap-3">
                        <a href="{{ route('admin.pages.mailwizz.edit', $page) }}" class="text-sm font-medium text-slate-600 hover:text-slate-900">
                            {{ __('Cancel and return to overview') }}
                        </a>
                    </div>
                @endif

                <div class="mb-8 flex flex-wrap items-center gap-2" aria-label="{{ __('Wizard steps') }}">
                    <span
                        class="inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium"
                        :class="step === 1 ? 'border-indigo-500 bg-indigo-50 text-indigo-900' : (step > 1 ? 'border-emerald-200 bg-emerald-50 text-emerald-900' : 'border-slate-200 bg-slate-50 text-slate-500')"
                    >
                        <span class="tabular-nums">1</span>
                        {{ __('API key') }}
                    </span>
                    <span class="text-slate-300" aria-hidden="true">→</span>
                    <span
                        class="inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium"
                        :class="step === 2 ? 'border-indigo-500 bg-indigo-50 text-indigo-900' : (step > 2 ? 'border-emerald-200 bg-emerald-50 text-emerald-900' : 'border-slate-200 bg-slate-50 text-slate-500')"
                    >
                        <span class="tabular-nums">2</span>
                        {{ __('List') }}
                    </span>
                    <span class="text-slate-300" aria-hidden="true">→</span>
                    <span
                        class="inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium"
                        :class="step === 3 ? 'border-indigo-500 bg-indigo-50 text-indigo-900' : (step > 3 ? 'border-emerald-200 bg-emerald-50 text-emerald-900' : 'border-slate-200 bg-slate-50 text-slate-500')"
                    >
                        <span class="tabular-nums">3</span>
                        {{ __('Field mapping') }}
                    </span>
                    <span class="text-slate-300" aria-hidden="true">→</span>
                    <span
                        class="inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium"
                        :class="step === 4 ? 'border-indigo-500 bg-indigo-50 text-indigo-900' : 'border-slate-200 bg-slate-50 text-slate-500'"
                    >
                        <span class="tabular-nums">4</span>
                        {{ __('Tag / source') }}
                    </span>
                </div>

                <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm sm:p-8">
                    <div x-show="errorMessage !== ''" x-cloak class="mb-6 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800" x-text="errorMessage"></div>

                    {{-- Step 1 --}}
                    <div x-show="step === 1" x-cloak class="space-y-4">
                        <h2 class="text-lg font-semibold text-slate-900">{{ __('Step 1: API key') }}</h2>
                        <p class="text-sm leading-relaxed text-slate-600">
                            {{ __('First, create a mailing list in Mailwizz with the required custom fields. Add a custom field of type Checkbox List with an option value you will use to track this pre-registration source.') }}
                        </p>
                        @if ($config !== null)
                            <p class="text-sm text-amber-800">
                                {{ __('Enter your API key and connect to load Mailwizz data (the same key as before is fine). If you clear the key field before saving, the previously stored key is kept.') }}
                            </p>
                        @endif
                        <div>
                            <label for="mailwizz_api_key" class="block text-sm font-medium text-slate-700">{{ __('Mailwizz API key') }}</label>
                            <input
                                id="mailwizz_api_key"
                                type="password"
                                autocomplete="off"
                                x-model="apiKey"
                                class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 text-slate-900 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
                                placeholder="{{ __('Paste API key') }}"
                            >
                        </div>
                        <button
                            type="button"
                            class="rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 disabled:opacity-50"
                            :disabled="loading"
                            @click="connectLists()"
                        >
                            <span x-show="!loading">{{ __('Connect & load lists') }}</span>
                            <span x-show="loading" x-cloak>{{ __('Connecting…') }}</span>
                        </button>
                    </div>

                    {{-- Step 2 --}}
                    <div x-show="step === 2" x-cloak class="space-y-4">
                        <h2 class="text-lg font-semibold text-slate-900">{{ __('Step 2: Mailing list') }}</h2>
                        <div>
                            <label for="mailwizz_list" class="block text-sm font-medium text-slate-700">{{ __('Mailing list') }}</label>
                            <select
                                id="mailwizz_list"
                                x-model="selectedListUid"
                                @change="syncListNameFromSelection()"
                                class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 text-slate-900 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
                            >
                                <option value="">{{ __('Select a list…') }}</option>
                                <template x-for="list in lists" :key="list.list_uid">
                                    <option :value="list.list_uid" x-text="list.name"></option>
                                </template>
                            </select>
                        </div>
                        <div class="flex flex-wrap gap-3">
                            <button type="button" class="rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 hover:bg-slate-50" @click="step = 1">
                                {{ __('Back') }}
                            </button>
                            <button
                                type="button"
                                class="rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 disabled:opacity-50"
                                :disabled="loading"
                                @click="loadFieldsAndGoStep3()"
                            >
                                <span x-show="!loading">{{ __('Load fields') }}</span>
                                <span x-show="loading" x-cloak>{{ __('Loading…') }}</span>
                            </button>
                        </div>
                    </div>

                    {{-- Step 3 --}}
                    <div x-show="step === 3" x-cloak class="space-y-5">
                        <h2 class="text-lg font-semibold text-slate-900">{{ __('Step 3: Field mapping') }}</h2>
                        <p class="text-sm text-slate-600">{{ __('Map each local field to the matching Mailwizz custom field (by tag).') }}</p>

                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Email') }}</label>
                            <select x-model="fieldEmail" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
                                <option value="">{{ __('Select field…') }}</option>
                                <template x-for="f in emailFieldChoices()" :key="f.tag">
                                    <option :value="f.tag" x-text="f.label + ' (' + f.tag + ')'"></option>
                                </template>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('First name') }}</label>
                            <select x-model="fieldFirstName" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
                                <option value="">{{ __('Select field…') }}</option>
                                <template x-for="f in textFields()" :key="'fn-' + f.tag">
                                    <option :value="f.tag" x-text="f.label + ' (' + f.tag + ')'"></option>
                                </template>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Last name') }}</label>
                            <select x-model="fieldLastName" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
                                <option value="">{{ __('Select field…') }}</option>
                                <template x-for="f in textFields()" :key="'ln-' + f.tag">
                                    <option :value="f.tag" x-text="f.label + ' (' + f.tag + ')'"></option>
                                </template>
                            </select>
                        </div>
                        <div x-show="phoneEnabled">
                            <label class="block text-sm font-medium text-slate-700">{{ __('Phone') }} <span class="font-normal text-slate-500">({{ __('optional') }})</span></label>
                            <select x-model="fieldPhone" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
                                <option value="">{{ __('Select field…') }}</option>
                                <template x-for="f in phoneFields()" :key="'ph-' + f.tag">
                                    <option :value="f.tag" x-text="f.label + ' (' + f.tag + ')'"></option>
                                </template>
                            </select>
                        </div>
                        <div x-show="hasWeeztixIntegration">
                            <label class="block text-sm font-medium text-slate-700">{{ __('Kortingscode (Weeztix)') }} <span class="font-normal text-slate-500">({{ __('optional') }})</span></label>
                            <p class="mt-1 text-xs text-slate-500">{{ __('Koppel aan een tekstveld in Mailwizz om de persoonlijke code in e-mails te tonen.') }}</p>
                            <select x-model="fieldCouponCode" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
                                <option value="">{{ __('Select field…') }}</option>
                                <template x-for="f in textFields()" :key="'cp-' + f.tag">
                                    <option :value="f.tag" x-text="f.label + ' (' + f.tag + ')'"></option>
                                </template>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700">{{ __('Tag / source (checkbox list)') }}</label>
                            <select
                                x-model="tagField"
                                @change="tagValue = ''"
                                class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
                            >
                                <option value="">{{ __('Select checkbox list field…') }}</option>
                                <template x-for="f in checkboxFields()" :key="'cb-' + f.tag">
                                    <option :value="f.tag" x-text="f.label + ' (' + f.tag + ')'"></option>
                                </template>
                            </select>
                        </div>
                        <p x-show="checkboxFields().length === 0" class="text-sm text-amber-800">
                            {{ __('No checkbox list fields were returned for this list. Add one in Mailwizz, then run “Load fields” again from step 2.') }}
                        </p>

                        <div class="flex flex-wrap gap-3">
                            <button type="button" class="rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 hover:bg-slate-50" @click="step = 2">
                                {{ __('Back') }}
                            </button>
                            <button type="button" class="rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500" @click="goStep4()">
                                {{ __('Continue') }}
                            </button>
                        </div>
                    </div>

                    {{-- Step 4 --}}
                    <div x-show="step === 4" x-cloak class="space-y-5">
                        <h2 class="text-lg font-semibold text-slate-900">{{ __('Step 4: Tag / source') }}</h2>
                        <p class="text-sm text-slate-600">{{ __('Choose the checkbox option that marks subscribers from this pre-registration page.') }}</p>

                        <fieldset class="space-y-2">
                            <legend class="sr-only">{{ __('Tag value') }}</legend>
                            <template x-for="opt in tagOptionsList()" :key="opt.key">
                                <label class="flex cursor-pointer items-start gap-3 rounded-lg border border-slate-200 p-3 hover:bg-slate-50">
                                    <input type="radio" name="tag_value_choice" class="mt-1 text-indigo-600" :value="opt.key" x-model="tagValue">
                                    <span class="text-sm text-slate-800" x-text="opt.label"></span>
                                </label>
                            </template>
                        </fieldset>
                        <p x-show="tagField && tagOptionsList().length === 0" class="text-sm text-amber-800">
                            {{ __('This field has no options defined in Mailwizz. Add options to the checkbox list field, then reload fields.') }}
                        </p>

                        <form x-ref="saveForm" method="post" action="{{ route('admin.pages.mailwizz.update', $page) }}" class="space-y-4">
                            @csrf
                            @method('PUT')
                            <input type="hidden" name="api_key" x-bind:value="apiKey">
                            <input type="hidden" name="list_uid" x-bind:value="selectedListUid">
                            <input type="hidden" name="list_name" x-bind:value="selectedListName">
                            <input type="hidden" name="field_email" x-bind:value="fieldEmail">
                            <input type="hidden" name="field_first_name" x-bind:value="fieldFirstName">
                            <input type="hidden" name="field_last_name" x-bind:value="fieldLastName">
                            <input type="hidden" name="field_phone" x-bind:value="phoneEnabled ? fieldPhone : ''">
                            <input type="hidden" name="field_coupon_code" x-bind:value="hasWeeztixIntegration ? fieldCouponCode : ''">
                            <input type="hidden" name="tag_field" x-bind:value="tagField">
                            <input type="hidden" name="tag_value" x-bind:value="tagValue">

                            <div class="flex flex-wrap gap-3">
                                <button type="button" class="rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 hover:bg-slate-50" @click="step = 3">
                                    {{ __('Back') }}
                                </button>
                                <button type="button" class="rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500" @click="submitSave()">
                                    {{ __('Save configuration') }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection