@extends('layouts.admin')
@section('title', 'Abandoned checkout #'.$row->id)
@section('content')
@php
  $label = fn (?string $v) => ucwords(str_replace('_', ' ', (string) $v));
  $statusTone = match ($row->status) {
      'open' => 'warning',
      'emailed' => 'info',
      'recovered' => 'success',
      default => 'muted',
  };
  $checkout = $row->checkout;
  $address = $checkout?->shipping_address ?? [];
  $money = fn (?int $cents) => ($row->currency ?: 'AUD').' '.number_format(((int) $cents) / 100, 2);
  $abandonedAt = $row->abandoned_at ?? $row->created_at;
  $sentSteps = $row->emails->where('status', 'sent')->groupBy('step');
  $enabledSteps = collect($steps)->filter(fn ($s) => $s['enabled']);
  $dateTime = fn ($date) => $date?->timezone(config('app.timezone'))->format('j M Y, g:ia');
  $funnel = ['contact' => 'Contact details', 'shipping' => 'Shipping address', 'payment' => 'Payment'];
  $funnelReached = array_search($row->last_step, array_keys($funnel), true);
@endphp

<x-admin.page
    title="{{ $row->customer_name ?: ($row->email ?: 'Abandoned checkout') }}"
    subtitle="Abandoned checkout #{{ $row->id }} · {{ $row->labeledTotal() }} · {{ $dateTime($abandonedAt) }}"
>
    <x-slot:actions>
        <a href="{{ route('admin.abandoned.index') }}" class="admin-btn">
            <i data-lucide="arrow-left" class="h-3.5 w-3.5"></i>
            All abandoned
        </a>
        @if($checkout?->token)
            <a href="{{ url('/checkout/'.$checkout->token) }}" class="admin-btn" target="_blank" rel="noopener">
                <i data-lucide="external-link" class="h-3.5 w-3.5"></i>
                View checkout
            </a>
        @endif
        @if($row->isRecoverable() && $nextStep)
            <form method="post" action="{{ route('admin.abandoned.recover', $row) }}">
                @csrf
                <button class="admin-btn admin-btn-primary">
                    <i data-lucide="send" class="h-3.5 w-3.5"></i>
                    Send email {{ $nextStep }} now
                </button>
            </form>
        @endif
    </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

    <div class="order-ops-stat-rail mb-5">
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Status</span>
            <span class="order-ops-stat-value text-base"><x-admin.badge :tone="$statusTone">{{ $label($row->status) }}</x-admin.badge></span>
            <span class="order-ops-stat-meta">
                @if($row->status === 'recovered') {{ $dateTime($row->recovered_at) }}
                @elseif($row->status === 'suppressed') {{ $row->suppress_reason }}
                @elseif($row->next_email_at) Next email {{ $row->next_email_at->isPast() ? 'due now' : $row->next_email_at->diffForHumans() }}
                @else No more emails scheduled
                @endif
            </span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Cart value</span>
            <span class="order-ops-stat-value">{{ $row->labeledTotal() }}</span>
            <span class="order-ops-stat-meta">{{ $row->line_count }} {{ \Illuminate\Support\Str::plural('item', $row->line_count) }}</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Emails sent</span>
            <span class="order-ops-stat-value">{{ $row->recovery_emails_sent }}</span>
            <span class="order-ops-stat-meta">{{ $row->last_emailed_at ? 'Last '.$row->last_emailed_at->diffForHumans() : 'None yet' }}</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Link clicks</span>
            <span class="order-ops-stat-value">{{ $row->click_count }}</span>
            <span class="order-ops-stat-meta">{{ $row->last_clicked_at ? 'Last '.$row->last_clicked_at->diffForHumans() : 'Not clicked yet' }}</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Discount</span>
            <span class="order-ops-stat-value font-mono text-base">{{ $row->discount_code ?: '—' }}</span>
            <span class="order-ops-stat-meta">
                @if($row->discount)
                    {{ $row->discount->usage_count > 0 ? 'Used' : 'Unused' }} · expires {{ $row->discount->ends_at?->format('j M Y') ?? 'never' }}
                @else
                    No code issued
                @endif
            </span>
        </div>
    </div>

    <div class="grid gap-4 lg:grid-cols-[minmax(0,1.45fr)_minmax(19rem,.85fr)]">
        <div class="grid content-start gap-4">
            <x-admin.card>
                <div class="mb-3 flex flex-wrap items-center justify-between gap-3">
                    <h2 class="text-base font-semibold text-[#202223]">Cart</h2>
                    <span class="text-xs text-[#8c9196]">Checkout #{{ $row->checkout_id }}</span>
                </div>
                <ul class="divide-y divide-[var(--color-admin-border)]">
                    @forelse($items as $item)
                        <li class="flex items-center gap-3 py-3 text-sm">
                            @if($item['image'])
                                <img src="{{ $item['image'] }}" alt="" class="h-14 w-14 shrink-0 rounded-lg border border-[var(--color-admin-border)] object-cover">
                            @else
                                <span class="flex h-14 w-14 shrink-0 items-center justify-center rounded-lg bg-[#f1f2f3]"><i data-lucide="package" class="h-5 w-5 text-[#8c9196]"></i></span>
                            @endif
                            <div class="min-w-0 flex-1">
                                @if($item['product_url'])
                                    <a href="{{ $item['product_url'] }}" target="_blank" rel="noopener" class="font-medium hover:underline">{{ $item['title'] }}</a>
                                @else
                                    <div class="font-medium">{{ $item['title'] }}</div>
                                @endif
                                <div class="mt-0.5 text-xs text-[#8c9196]">
                                    {{ $item['sku'] ? 'SKU '.$item['sku'].' · ' : '' }}{{ $item['quantity'] }} × {{ $money($item['unit_cents']) }}
                                </div>
                            </div>
                            <div class="whitespace-nowrap font-semibold">{{ $money($item['total_cents']) }}</div>
                        </li>
                    @empty
                        <li class="py-6 text-sm text-[#8c9196]">No line items stored on this checkout.</li>
                    @endforelse
                </ul>
                <dl class="mt-3 grid gap-1.5 border-t border-[var(--color-admin-border)] pt-3 text-sm">
                    <div class="flex justify-between gap-3"><dt class="text-[#6d7175]">Subtotal</dt><dd>{{ $money($checkout?->subtotal_cents ?? $row->subtotal_cents) }}</dd></div>
                    @if((int) $checkout?->discount_cents > 0)
                        <div class="flex justify-between gap-3"><dt class="text-[#6d7175]">Discount {{ $checkout->discount_code ? '('.$checkout->discount_code.')' : '' }}</dt><dd>−{{ $money($checkout->discount_cents) }}</dd></div>
                    @endif
                    @if($checkout?->shipping_rate_id)
                        <div class="flex justify-between gap-3"><dt class="text-[#6d7175]">Shipping · {{ $checkout->shippingRate?->name }}</dt><dd>{{ $money($checkout->shipping_cents) }}</dd></div>
                    @endif
                    @if((int) $checkout?->tax_cents > 0)
                        <div class="flex justify-between gap-3"><dt class="text-[#6d7175]">Tax</dt><dd>{{ $money($checkout->tax_cents) }}</dd></div>
                    @endif
                    <div class="flex justify-between gap-3 text-base font-semibold"><dt>Total</dt><dd>{{ $row->labeledTotal() }}</dd></div>
                </dl>
            </x-admin.card>

            <x-admin.card>
                <h2 class="mb-3 text-base font-semibold text-[#202223]">Where they stopped</h2>
                <ol class="grid gap-2 sm:grid-cols-4">
                    @foreach($funnel as $key => $funnelLabel)
                        @php $reached = $funnelReached !== false && array_search($key, array_keys($funnel), true) <= $funnelReached; @endphp
                        <li class="rounded-xl border px-3 py-2 text-sm {{ $reached ? 'border-[#0b0b0b] bg-[#0b0b0b] text-white' : 'border-[var(--color-admin-border)] text-[#8c9196]' }}">
                            <i data-lucide="{{ $reached ? 'check-circle-2' : 'circle' }}" class="mb-1 h-4 w-4"></i>
                            {{ $funnelLabel }}
                        </li>
                    @endforeach
                    <li class="rounded-xl border px-3 py-2 text-sm {{ $row->status === 'recovered' ? 'border-emerald-600 bg-emerald-600 text-white' : 'border-dashed border-[var(--color-admin-border)] text-[#8c9196]' }}">
                        <i data-lucide="{{ $row->status === 'recovered' ? 'badge-check' : 'credit-card' }}" class="mb-1 h-4 w-4"></i>
                        {{ $row->status === 'recovered' ? 'Paid' : 'Not paid' }}
                    </li>
                </ol>
            </x-admin.card>

            <x-admin.card>
                <h2 class="mb-4 text-base font-semibold text-[#202223]">Recovery timeline</h2>
                <ol class="abandoned-timeline">
                    <li class="is-done">
                        <strong>Checkout abandoned</strong>
                        <span>{{ $dateTime($abandonedAt) }} · stopped at {{ $funnel[$row->last_step] ?? 'unknown step' }}</span>
                    </li>
                    @foreach($enabledSteps as $number => $step)
                        @php $sent = $sentSteps->get($number)?->first(); @endphp
                        <li class="{{ $sent ? 'is-done' : '' }}">
                            <strong>Email {{ $number }} · {{ $step['subject'] }}</strong>
                            <span>
                                @if($sent)
                                    Sent {{ $dateTime($sent->created_at) }}{{ $sent->discount_code ? ' with '.$sent->discount_code : '' }}{{ $sent->clicked_at ? ' · clicked '.$sent->clicked_at->diffForHumans() : '' }}
                                @elseif($row->isActive() && $nextStep === $number && $row->next_email_at)
                                    Scheduled for {{ $dateTime($row->next_email_at) }}
                                @elseif($row->isActive())
                                    Planned {{ $service->delayLabel($step) }} after abandonment
                                @else
                                    Not sent
                                @endif
                            </span>
                        </li>
                    @endforeach
                    <li class="{{ $row->status === 'recovered' ? 'is-done' : '' }}">
                        <strong>Recovered</strong>
                        <span>
                            @if($row->recovered_at)
                                {{ $dateTime($row->recovered_at) }}
                                @if($row->recoveredOrder)
                                    · <a href="{{ route('admin.orders.show', $row->recoveredOrder) }}" class="text-[#2c6ecb] hover:underline">Order {{ $row->recoveredOrder->number }}</a>
                                @endif
                            @else
                                Not yet
                            @endif
                        </span>
                    </li>
                </ol>
            </x-admin.card>

            <x-admin.card>
                <h2 class="mb-3 text-base font-semibold text-[#202223]">Email history</h2>
                @if($row->emails->isEmpty())
                    <p class="text-sm text-[#8c9196]">No recovery emails have been sent yet.</p>
                @else
                    <div class="overflow-x-auto">
                        <table class="w-full text-left text-sm">
                            <thead class="text-xs uppercase tracking-wide text-[#8c9196]">
                                <tr><th class="py-2 pr-3">Sent</th><th class="py-2 pr-3">Email</th><th class="py-2 pr-3">Discount</th><th class="py-2 pr-3">Result</th><th class="py-2">By</th></tr>
                            </thead>
                            <tbody class="divide-y divide-[var(--color-admin-border)]">
                                @foreach($row->emails as $email)
                                    <tr class="align-top">
                                        <td class="whitespace-nowrap py-2 pr-3 text-xs text-[#6d7175]">{{ $dateTime($email->created_at) }}</td>
                                        <td class="py-2 pr-3"><div class="font-medium">#{{ $email->step }} · {{ $email->subject }}</div><div class="text-xs text-[#8c9196]">to {{ $email->to_email }}</div></td>
                                        <td class="py-2 pr-3 font-mono text-xs">{{ $email->discount_code ? $email->discount_code.' ('.$email->discount_summary.')' : '—' }}</td>
                                        <td class="py-2 pr-3">
                                            <x-admin.badge :tone="match($email->status) { 'sent' => 'success', 'failed' => 'danger', default => 'muted' }">{{ $label($email->status) }}</x-admin.badge>
                                            @if($email->clicked_at)<div class="mt-1 text-xs text-emerald-700">Clicked {{ $email->clicked_at->diffForHumans() }}</div>@endif
                                            @if($email->error)<div class="mt-1 max-w-[16rem] text-xs text-red-700">{{ $email->error }}</div>@endif
                                        </td>
                                        <td class="py-2 text-xs text-[#6d7175]">{{ $email->trigger === 'auto' ? 'Automatic' : ($email->sender?->name ?? 'Admin') }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </x-admin.card>
        </div>

        <div class="grid content-start gap-4">
            <x-admin.card>
                <h2 class="mb-3 text-base font-semibold text-[#202223]">Customer</h2>
                <dl class="grid gap-3 text-sm">
                    <div><dt class="text-xs uppercase tracking-wide text-[#8c9196]">Name</dt><dd class="mt-0.5 font-medium">{{ $row->customer_name ?: ($address['name'] ?? '—') }}</dd></div>
                    <div><dt class="text-xs uppercase tracking-wide text-[#8c9196]">Email</dt>
                        <dd class="mt-0.5 break-all">@if($row->email)<a href="mailto:{{ $row->email }}" class="text-[#2c6ecb] hover:underline">{{ $row->email }}</a>@else — @endif</dd></div>
                    <div><dt class="text-xs uppercase tracking-wide text-[#8c9196]">Phone</dt>
                        <dd class="mt-0.5">@if($row->phone ?: ($address['phone'] ?? null))<a href="tel:{{ $row->phone ?: $address['phone'] }}" class="text-[#2c6ecb] hover:underline">{{ $row->phone ?: $address['phone'] }}</a>@else — @endif</dd></div>
                    <div><dt class="text-xs uppercase tracking-wide text-[#8c9196]">Shipping address</dt>
                        <dd class="mt-0.5 leading-relaxed">
                            @if($address)
                                {{ collect([$address['line1'] ?? null, $address['line2'] ?? null])->filter()->implode(', ') }}<br>
                                {{ collect([$address['city'] ?? null, $address['region'] ?? null, $address['postal_code'] ?? null])->filter()->implode(' ') }}<br>
                                {{ $address['country'] ?? $row->country }}
                            @else
                                Not entered · {{ $row->country ?: 'unknown country' }}
                            @endif
                        </dd></div>
                    <div><dt class="text-xs uppercase tracking-wide text-[#8c9196]">Account</dt>
                        <dd class="mt-0.5">
                            @if($row->customer)
                                <a href="{{ route('admin.customers.show', $row->customer) }}" class="text-[#2c6ecb] hover:underline">Customer #{{ $row->customer_id }}</a>
                            @else
                                Guest checkout
                            @endif
                        </dd></div>
                    @if($checkout?->notes)
                        <div><dt class="text-xs uppercase tracking-wide text-[#8c9196]">Checkout note</dt><dd class="mt-0.5">{{ $checkout->notes }}</dd></div>
                    @endif
                    <div><dt class="text-xs uppercase tracking-wide text-[#8c9196]">Source</dt>
                        <dd class="mt-0.5">{{ collect([$row->utm_source ?: $row->source, $row->utm_medium, $row->utm_campaign])->filter()->implode(' / ') ?: 'web' }}</dd></div>
                </dl>
            </x-admin.card>

            @if($previousOrders->isNotEmpty() || $otherAbandoned->isNotEmpty())
                <x-admin.card>
                    <h2 class="mb-3 text-base font-semibold text-[#202223]">History with this email</h2>
                    @if($previousOrders->isNotEmpty())
                        <div class="text-xs font-semibold uppercase tracking-wide text-[#8c9196]">Orders</div>
                        <ul class="mb-3 mt-1 divide-y divide-[var(--color-admin-border)] text-sm">
                            @foreach($previousOrders as $order)
                                <li class="flex justify-between gap-2 py-1.5">
                                    <a href="{{ route('admin.orders.show', $order) }}" class="text-[#2c6ecb] hover:underline">{{ $order->number }}</a>
                                    <span class="text-xs text-[#6d7175]">{{ $order->created_at->format('j M Y') }} · {{ $label($order->payment_status) }} · {{ $order->currency }} {{ number_format($order->total_cents / 100, 2) }}</span>
                                </li>
                            @endforeach
                        </ul>
                    @endif
                    @if($otherAbandoned->isNotEmpty())
                        <div class="text-xs font-semibold uppercase tracking-wide text-[#8c9196]">Other abandoned checkouts</div>
                        <ul class="mt-1 divide-y divide-[var(--color-admin-border)] text-sm">
                            @foreach($otherAbandoned as $other)
                                <li class="flex justify-between gap-2 py-1.5">
                                    <a href="{{ route('admin.abandoned.show', $other) }}" class="text-[#2c6ecb] hover:underline">#{{ $other->id }}</a>
                                    <span class="text-xs text-[#6d7175]">{{ ($other->abandoned_at ?? $other->created_at)?->format('j M Y') }} · {{ $label($other->status) }} · {{ $other->labeledTotal() }}</span>
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </x-admin.card>
            @endif

            @if($row->isActive())
                <x-admin.card>
                    <h2 class="text-base font-semibold text-[#202223]">Send an email</h2>
                    <p class="mt-0.5 text-xs text-[#6d7175]">Send any template now, with its own discount, no discount, or a custom one for this customer.</p>
                    <form method="post" action="{{ route('admin.abandoned.send', $row) }}" class="mt-3 grid gap-3" data-abandon-send>
                        @csrf
                        <label class="block text-sm"><span class="admin-label">Template</span>
                            <select class="admin-input" name="step">
                                @foreach($steps as $number => $step)
                                    <option value="{{ $number }}" @selected(($nextStep ?? 1) === $number)>Email {{ $number }}: {{ \Illuminate\Support\Str::limit($step['subject'], 40) }}{{ $step['enabled'] ? '' : ' (off)' }}</option>
                                @endforeach
                            </select>
                        </label>
                        <label class="block text-sm"><span class="admin-label">Discount</span>
                            <select class="admin-input" name="discount_mode" data-discount-mode>
                                <option value="template">Use the template's discount setting</option>
                                <option value="none">No discount</option>
                                <option value="custom">Custom discount for this customer</option>
                            </select>
                        </label>
                        <div class="hidden grid-cols-3 gap-2" data-custom-discount>
                            <label class="block text-xs"><span class="admin-label">Type</span>
                                <select class="admin-input" name="discount_type">
                                    @foreach(\App\Domain\CartCheckout\Services\AbandonmentSettingsService::DISCOUNT_TYPES as $type => $typeLabel)
                                        <option value="{{ $type }}">{{ $typeLabel }}</option>
                                    @endforeach
                                </select>
                            </label>
                            <label class="block text-xs"><span class="admin-label">Value</span><input class="admin-input" type="number" step="0.01" min="0" name="discount_value" value="10"></label>
                            <label class="block text-xs"><span class="admin-label">Days valid</span><input class="admin-input" type="number" min="1" max="90" name="discount_expiry_days" value="3"></label>
                        </div>
                        <div class="flex gap-2">
                            <button class="admin-btn admin-btn-primary flex-1 justify-center" type="submit"><i data-lucide="send" class="h-3.5 w-3.5"></i> Send email</button>
                            <a href="#" class="admin-btn" target="_blank" rel="noopener" data-preview-link title="Preview the selected template for this customer"><i data-lucide="eye" class="h-3.5 w-3.5"></i></a>
                        </div>
                    </form>
                </x-admin.card>
            @endif

            <x-admin.card>
                <h2 class="mb-3 text-base font-semibold text-[#202223]">Manage</h2>
                <div class="grid gap-2">
                    @if($row->isActive())
                        <form method="post" action="{{ route('admin.abandoned.recovered', $row) }}">
                            @csrf
                            <button class="admin-btn w-full justify-center"><i data-lucide="badge-check" class="h-3.5 w-3.5"></i> Mark recovered</button>
                        </form>
                        <form method="post" action="{{ route('admin.abandoned.suppress', $row) }}" class="grid gap-2">
                            @csrf
                            <input type="text" name="reason" class="admin-input" placeholder="Reason (optional)">
                            <button class="admin-btn w-full justify-center"><i data-lucide="bell-off" class="h-3.5 w-3.5"></i> Stop all emails</button>
                        </form>
                    @else
                        <p class="text-sm text-[#6d7175]">This checkout is {{ $label($row->status) }} and is no longer in the recovery sequence.</p>
                    @endif
                    <form method="post" action="{{ route('admin.abandoned.notes', $row) }}" class="mt-2 grid gap-2 border-t border-[var(--color-admin-border)] pt-3">
                        @csrf @method('PUT')
                        <label class="block text-sm"><span class="admin-label">Internal notes</span><textarea class="admin-input min-h-[5rem]" name="notes" maxlength="5000">{{ old('notes', $row->notes) }}</textarea></label>
                        <button class="admin-btn justify-center" type="submit">Save notes</button>
                    </form>
                </div>
            </x-admin.card>
        </div>
    </div>
</x-admin.page>

<script>
  (() => {
    const form = document.querySelector('[data-abandon-send]');
    if (!form) return;
    const mode = form.querySelector('[data-discount-mode]');
    const custom = form.querySelector('[data-custom-discount]');
    const step = form.querySelector('[name="step"]');
    const preview = form.querySelector('[data-preview-link]');
    const previewBase = @json(route('admin.abandoned.preview', [$row, '__STEP__']));
    const sync = () => {
      custom.classList.toggle('hidden', mode.value !== 'custom');
      custom.classList.toggle('grid', mode.value === 'custom');
      preview.href = previewBase.replace('__STEP__', step.value);
    };
    mode.addEventListener('change', sync);
    step.addEventListener('change', sync);
    sync();
  })();
</script>
@endsection