@extends('layouts.admin')
@section('title', 'Abandonment settings')
@section('content')
@php
    $steps = old('steps') ? collect(old('steps'))->mapWithKeys(fn ($s, $i) => [$i + 1 => array_merge($settings['steps'][$i + 1], ['enabled' => false, 'show_products' => false, 'discount_enabled' => false], $s)])->all() : $settings['steps'];
    $value = fn (string $key) => old($key, $settings[$key]);
@endphp
<x-admin.page
    title="Abandonment settings"
    subtitle="Decide when a checkout counts as abandoned, and design the automatic reminder emails, follow-ups and discounts."
>
    <x-slot:actions>
        <a href="{{ route('admin.abandoned.index') }}" class="admin-btn">
            <i data-lucide="shopping-cart" class="h-3.5 w-3.5"></i>
            Abandoned checkouts
        </a>
    </x-slot:actions>

    @if(session('status'))
        <div class="mb-4 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900">{{ session('status') }}</div>
    @endif
    @if($errors->any())
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">{{ $errors->first() }}</div>
    @endif

    <form method="post" action="{{ route('admin.abandonment.settings.update') }}" id="abandonment-settings" class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_20rem]">
        @csrf @method('PUT')
        <div class="grid min-w-0 content-start gap-5">
            <x-admin.card>
                <div class="flex flex-wrap items-center justify-between gap-4">
                    <div>
                        <h2 class="text-base font-semibold text-[#202223]">Automatic recovery emails</h2>
                        <p class="mt-0.5 text-sm text-[#6d7175]">When on, reminder emails are sent on schedule without anyone clicking a button. Admins can still send any email manually.</p>
                    </div>
                    <label class="abandon-switch">
                        <input type="checkbox" name="enabled" value="1" @checked($value('enabled'))>
                        <span class="abandon-switch-track"><span></span></span>
                        <span class="text-sm font-medium">Send automatically</span>
                    </label>
                </div>
                <div class="mt-4 grid gap-3 sm:grid-cols-4">
                    @foreach([
                        ['Active checkouts', number_format($stats['open'])],
                        ['Emails sent', number_format($stats['emails_sent'])],
                        ['Recovered', number_format($stats['recovered'])],
                        ['Recovery rate', number_format($stats['recovery_rate'], 1).'%'],
                    ] as [$statLabel, $statValue])
                        <div class="rounded-xl border border-[var(--color-admin-border)] px-3 py-2.5">
                            <span class="block text-xs text-[#6d7175]">{{ $statLabel }}</span>
                            <span class="block text-lg font-semibold tabular-nums">{{ $statValue }}</span>
                        </div>
                    @endforeach
                </div>
            </x-admin.card>

            <x-admin.card>
                <h2 class="text-base font-semibold text-[#202223]">Abandonment rules</h2>
                <div class="mt-4 grid gap-4 md:grid-cols-3">
                    <label class="block text-sm">
                        <span class="admin-label">Mark as abandoned after (minutes)</span>
                        <input class="admin-input" type="number" name="capture_after_minutes" min="15" max="10080" value="{{ $value('capture_after_minutes') }}" required>
                        <span class="mt-1 block text-xs text-[#6d7175]">Minutes of inactivity after the customer entered their email.</span>
                    </label>
                    <label class="block text-sm">
                        <span class="admin-label">Only email carts worth at least</span>
                        <input class="admin-input" type="number" step="0.01" min="0" name="min_cart" value="{{ old('min_cart', number_format($settings['min_cart_cents'] / 100, 2, '.', '')) }}">
                        <span class="mt-1 block text-xs text-[#6d7175]">AUD. Use 0 to email every abandoned checkout.</span>
                    </label>
                    <label class="block text-sm">
                        <span class="admin-label">Stop the sequence after (days)</span>
                        <input class="admin-input" type="number" name="expire_after_days" min="1" max="365" value="{{ $value('expire_after_days') }}" required>
                        <span class="mt-1 block text-xs text-[#6d7175]">Older checkouts are marked expired.</span>
                    </label>
                </div>
                <label class="mt-4 inline-flex items-start gap-2 text-sm">
                    <input type="checkbox" class="mt-0.5" name="skip_if_ordered" value="1" @checked($value('skip_if_ordered'))>
                    <span>Stop reminders if the customer places any paid order with the same email<span class="block text-xs text-[#6d7175]">The checkout is marked recovered and linked to that order.</span></span>
                </label>
            </x-admin.card>

            <div>
                <div class="mb-3 flex flex-wrap items-end justify-between gap-2">
                    <div>
                        <h2 class="text-base font-semibold text-[#202223]">Email sequence</h2>
                        <p class="text-sm text-[#6d7175]">Up to {{ \App\Domain\CartCheckout\Services\AbandonmentSettingsService::MAX_STEPS }} emails. Each delay is counted from the moment the checkout was abandoned.</p>
                    </div>
                </div>
                <div class="grid gap-3">
                    @foreach($steps as $number => $step)
                        @php $index = $number - 1; @endphp
                        <details class="abandon-step {{ $step['enabled'] ? 'is-enabled' : '' }}" @if($step['enabled'] || $errors->any()) open @endif data-abandon-step>
                            <summary class="abandon-step-head">
                                <span class="abandon-step-num">{{ $number }}</span>
                                <span class="min-w-0 flex-1">
                                    <span class="block truncate font-semibold text-[#202223]">{{ $step['subject'] }}</span>
                                    <span class="block text-xs text-[#6d7175]">
                                        {{ $step['enabled'] ? 'Sends '.$service->delayLabel($step).' after abandonment' : 'Off' }}
                                        @if($step['discount_enabled']) · includes {{ app(\App\Domain\CartCheckout\Services\AbandonedCheckoutService::class)->discountSummary($step['discount_type'], (float) $step['discount_value']) }} code @endif
                                    </span>
                                </span>
                                <i data-lucide="chevron-down" class="abandon-step-chevron h-4 w-4 text-[#8c9196]"></i>
                            </summary>
                            <div class="abandon-step-body">
                                <div class="flex flex-wrap items-center justify-between gap-3">
                                    <label class="abandon-switch">
                                        <input type="checkbox" name="steps[{{ $index }}][enabled]" value="1" @checked($step['enabled']) data-step-toggle>
                                        <span class="abandon-switch-track"><span></span></span>
                                        <span class="text-sm font-medium">Send email {{ $number }}</span>
                                    </label>
                                    <div class="flex items-center gap-2 text-sm">
                                        <span class="text-[#6d7175]">Send</span>
                                        <input class="admin-input !w-20" type="number" min="1" max="1000" name="steps[{{ $index }}][delay_value]" value="{{ $step['delay_value'] }}" required>
                                        <select class="admin-input !w-28" name="steps[{{ $index }}][delay_unit]">
                                            @foreach(\App\Domain\CartCheckout\Services\AbandonmentSettingsService::DELAY_UNITS as $unit => $unitLabel)
                                                <option value="{{ $unit }}" @selected($step['delay_unit'] === $unit)>{{ $unitLabel }}</option>
                                            @endforeach
                                        </select>
                                        <span class="text-[#6d7175]">after abandonment</span>
                                    </div>
                                </div>

                                <div class="mt-4 grid gap-4 md:grid-cols-2">
                                    <label class="block text-sm md:col-span-2"><span class="admin-label">Subject line</span><input class="admin-input" name="steps[{{ $index }}][subject]" value="{{ $step['subject'] }}" maxlength="200" required></label>
                                    <label class="block text-sm"><span class="admin-label">Preview text (shown after the subject in the inbox)</span><input class="admin-input" name="steps[{{ $index }}][preheader]" value="{{ $step['preheader'] }}" maxlength="200"></label>
                                    <label class="block text-sm"><span class="admin-label">Heading</span><input class="admin-input" name="steps[{{ $index }}][heading]" value="{{ $step['heading'] }}" maxlength="200" required></label>
                                    <div class="md:col-span-2">
                                        <span class="admin-label">Email format</span>
                                        <div class="abandon-format" role="radiogroup" aria-label="Email {{ $number }} format">
                                            @foreach(\App\Domain\CartCheckout\Services\AbandonmentSettingsService::FORMATS as $format => $formatLabel)
                                                <label>
                                                    <input type="radio" name="steps[{{ $index }}][format]" value="{{ $format }}" @checked(($step['format'] ?? 'text') === $format) data-format-switch>
                                                    <i data-lucide="{{ ['text' => 'type', 'html' => 'code', 'layout' => 'layout-template'][$format] }}" class="h-3.5 w-3.5"></i> {{ $formatLabel }}
                                                </label>
                                            @endforeach
                                        </div>
                                    </div>
                                    <label class="block text-sm md:col-span-2" data-format-show="text html">
                                        <span class="admin-label">Message</span>
                                        <textarea class="admin-input min-h-[9rem]" name="steps[{{ $index }}][body]" maxlength="20000" data-body-input>{{ $step['body'] }}</textarea>
                                        <span class="mt-1 block text-xs text-[#6d7175]" data-format-show="text">Leave a blank line between paragraphs. Placeholders are listed on the right.</span>
                                        <span class="mt-1 block text-xs text-[#6d7175]" data-format-show="html">Write HTML, e.g. <code>&lt;p&gt;</code>, <code>&lt;strong&gt;</code>, <code>&lt;img&gt;</code>, links and inline styles. It sits inside the branded layout. Add <code>{button}</code>, <code>{discount_box}</code> or <code>{cart_items}</code> to place those blocks yourself.</span>
                                    </label>
                                    <div class="md:col-span-2" data-format-show="layout">
                                        <div class="mb-1 flex flex-wrap items-center justify-between gap-2">
                                            <span class="admin-label !mb-0">Full HTML email</span>
                                            <button type="button" class="admin-btn !py-1 text-xs" data-insert-starter><i data-lucide="wand-sparkles" class="h-3.5 w-3.5"></i> Insert starter layout</button>
                                        </div>
                                        <textarea class="admin-input abandon-code" name="steps[{{ $index }}][layout_html]" maxlength="100000" spellcheck="false" placeholder="<!DOCTYPE html>&#10;<html>…</html>" data-layout-input>{{ $step['layout_html'] ?? '' }}</textarea>
                                        <span class="mt-1 block text-xs text-[#6d7175]">Paste a complete email (tables and inline styles work best in every inbox). This replaces the built-in design entirely. Use the text and HTML block placeholders on the right; a stop-reminders link is added if you leave out <code>{unsubscribe_url}</code>. Scripts and forms are removed.</span>
                                    </div>
                                    <label class="block text-sm"><span class="admin-label">Button label</span><input class="admin-input" name="steps[{{ $index }}][button_label]" value="{{ $step['button_label'] }}" maxlength="60" required></label>
                                    <label class="mt-6 inline-flex items-center gap-2 text-sm" data-format-show="text html"><input type="checkbox" name="steps[{{ $index }}][show_products]" value="1" @checked($step['show_products'])> Show cart products with images and totals</label>
                                </div>

                                <div class="abandon-discount mt-4">
                                    <label class="inline-flex items-center gap-2 text-sm font-semibold">
                                        <input type="checkbox" name="steps[{{ $index }}][discount_enabled]" value="1" @checked($step['discount_enabled'])>
                                        <i data-lucide="ticket-percent" class="h-4 w-4"></i> Include a discount in this email
                                    </label>
                                    <p class="mt-1 text-xs text-[#6d7175]">Each customer gets their own single-use code, applied automatically when they click the button.</p>
                                    <div class="mt-3 grid gap-3 sm:grid-cols-4">
                                        <label class="block text-sm"><span class="admin-label">Type</span>
                                            <select class="admin-input" name="steps[{{ $index }}][discount_type]">
                                                @foreach(\App\Domain\CartCheckout\Services\AbandonmentSettingsService::DISCOUNT_TYPES as $type => $typeLabel)
                                                    <option value="{{ $type }}" @selected($step['discount_type'] === $type)>{{ $typeLabel }}</option>
                                                @endforeach
                                            </select>
                                        </label>
                                        <label class="block text-sm"><span class="admin-label">Value (% or AUD)</span><input class="admin-input" type="number" step="0.01" min="0" name="steps[{{ $index }}][discount_value]" value="{{ $step['discount_value'] }}"></label>
                                        <label class="block text-sm"><span class="admin-label">Expires after (days)</span><input class="admin-input" type="number" min="1" max="90" name="steps[{{ $index }}][discount_expiry_days]" value="{{ $step['discount_expiry_days'] }}" required></label>
                                        <label class="block text-sm"><span class="admin-label">Minimum order (AUD)</span><input class="admin-input" type="number" step="0.01" min="0" name="steps[{{ $index }}][discount_min_subtotal]" value="{{ $step['discount_min_subtotal'] }}"></label>
                                    </div>
                                </div>

                                <div class="mt-4 flex flex-wrap items-center gap-2 border-t border-[var(--color-admin-border)] pt-3">
                                    <button type="submit" formaction="{{ route('admin.abandonment.settings.preview-draft', $number) }}" formtarget="_blank" formnovalidate class="admin-btn"><i data-lucide="eye" class="h-3.5 w-3.5"></i> Preview changes</button>
                                    <button type="submit" form="abandon-test-{{ $number }}" class="admin-btn"><i data-lucide="send" class="h-3.5 w-3.5"></i> Send test to me</button>
                                    <span class="text-xs text-[#8c9196]">Preview shows your unsaved edits. Test emails use the saved version.</span>
                                </div>
                            </div>
                        </details>
                    @endforeach
                </div>
            </div>

            <x-admin.card>
                <h2 class="text-base font-semibold text-[#202223]">Email branding</h2>
                <div class="mt-4 grid gap-4 md:grid-cols-2">
                    <label class="block text-sm"><span class="admin-label">Brand colour</span>
                        <span class="flex items-center gap-2"><input type="color" class="h-9 w-12 cursor-pointer rounded border border-[var(--color-admin-border)]" value="{{ $value('brand_color') }}" oninput="this.nextElementSibling.value = this.value"><input class="admin-input font-mono" name="brand_color" value="{{ $value('brand_color') }}" pattern="#[0-9a-fA-F]{6}" required oninput="if (/^#[0-9a-f]{6}$/i.test(this.value)) this.previousElementSibling.value = this.value"></span>
                    </label>
                    <label class="block text-sm"><span class="admin-label">Logo URL</span><input class="admin-input" type="url" name="logo_url" value="{{ $value('logo_url') }}" placeholder="https://… (optional, shown in the header)"></label>
                    <label class="block text-sm"><span class="admin-label">Reply-to address</span><input class="admin-input" type="email" name="reply_to" value="{{ $value('reply_to') }}" placeholder="Defaults to the Abandoned checkout SMTP profile"></label>
                    <label class="block text-sm"><span class="admin-label">Footer note</span><input class="admin-input" name="footer_note" value="{{ $value('footer_note') }}" maxlength="500"></label>
                </div>
                <p class="mt-3 text-xs text-[#6d7175]">The sending address comes from the "Abandoned checkout" purpose under <a class="text-[#2c6ecb] hover:underline" href="{{ route('admin.settings.edit', ['section' => 'email']) }}">Settings → Email &amp; SMTP</a>.</p>
            </x-admin.card>

            <div class="flex justify-end">
                <button class="admin-btn admin-btn-primary" type="submit"><i data-lucide="save" class="h-3.5 w-3.5"></i> Save abandonment settings</button>
            </div>
        </div>

        <aside class="grid content-start gap-4 xl:sticky xl:top-4 xl:self-start">
            <x-admin.card>
                <h2 class="text-sm font-semibold text-[#202223]">Placeholders</h2>
                <p class="mt-1 text-xs text-[#6d7175]">Use these in subjects, headings and messages.</p>
                <dl class="mt-3 grid gap-2 text-xs">
                    @foreach(\App\Domain\CartCheckout\Services\AbandonmentSettingsService::PLACEHOLDERS as $tag => $description)
                        <div>
                            <dt><button type="button" class="font-mono font-semibold text-[#2c6ecb] hover:underline" onclick="navigator.clipboard.writeText(@js($tag))" title="Copy">{{ $tag }}</button></dt>
                            <dd class="text-[#6d7175]">{{ $description }}</dd>
                        </div>
                    @endforeach
                </dl>
                <h3 class="mt-4 border-t border-[var(--color-admin-border)] pt-3 text-sm font-semibold text-[#202223]">HTML blocks</h3>
                <p class="mt-1 text-xs text-[#6d7175]">For the HTML message and full HTML layout formats.</p>
                <dl class="mt-3 grid gap-2 text-xs">
                    @foreach(\App\Domain\CartCheckout\Services\AbandonmentSettingsService::BLOCK_PLACEHOLDERS as $tag => $description)
                        <div>
                            <dt><button type="button" class="font-mono font-semibold text-[#2c6ecb] hover:underline" onclick="navigator.clipboard.writeText(@js($tag))" title="Copy">{{ $tag }}</button></dt>
                            <dd class="text-[#6d7175]">{{ $description }}</dd>
                        </div>
                    @endforeach
                </dl>
            </x-admin.card>
            <x-admin.card>
                <h2 class="text-sm font-semibold text-[#202223]">How it works</h2>
                <ol class="mt-2 list-decimal space-y-1.5 pl-4 text-xs text-[#6d7175]">
                    <li>A shopper enters their email at checkout but does not pay.</li>
                    <li>After the inactivity time above, the checkout is listed under Abandoned checkouts.</li>
                    <li>Each enabled email is sent at its delay. A discount email creates a unique single-use code.</li>
                    <li>The email button reopens their saved checkout with the code applied.</li>
                    <li>The sequence stops as soon as they pay, unsubscribe, or the checkout expires.</li>
                </ol>
            </x-admin.card>
        </aside>
    </form>

    @foreach(array_keys($steps) as $number)
        <form method="post" action="{{ route('admin.abandonment.settings.test', $number) }}" id="abandon-test-{{ $number }}" class="hidden">@csrf</form>
    @endforeach
</x-admin.page>

<script>
  document.querySelectorAll('[data-step-toggle]').forEach((toggle) => {
    toggle.addEventListener('change', () => toggle.closest('[data-abandon-step]').classList.toggle('is-enabled', toggle.checked));
  });

  const starterLayout = @js($service->starterLayout());
  document.querySelectorAll('[data-abandon-step]').forEach((card) => {
    const applyFormat = () => {
      const format = card.querySelector('[data-format-switch]:checked')?.value || 'text';
      card.querySelectorAll('[data-format-show]').forEach((el) => {
        el.hidden = ! el.dataset.formatShow.split(' ').includes(format);
      });
      card.querySelector('[data-body-input]').required = format !== 'layout';
      card.querySelector('[data-layout-input]').required = format === 'layout';
      const layout = card.querySelector('[data-layout-input]');
      if (format === 'layout' && layout.value.trim() === '') {
        layout.value = starterLayout;
      }
    };
    card.querySelectorAll('[data-format-switch]').forEach((radio) => radio.addEventListener('change', applyFormat));
    card.querySelector('[data-insert-starter]').addEventListener('click', () => {
      const layout = card.querySelector('[data-layout-input]');
      if (layout.value.trim() === '' || confirm('Replace the current HTML with the starter layout?')) {
        layout.value = starterLayout;
      }
    });
    applyFormat();
  });
</script>
@endsection