@extends('layouts.admin')
@section('title','Abandoned checkouts')
@section('content')
@php
  $columns = [
    'customer' => 'Customer',
    'cart' => 'Cart',
    'value' => 'Value',
    'step' => 'Drop-off',
    'stage' => 'Sequence',
    'channel' => 'Channel',
    'status' => 'Status',
    'activity' => 'Activity',
    'actions' => 'Actions',
  ];
  $label = fn (string $v) => ucwords(str_replace('_', ' ', $v));
  $statusTone = fn (string $s) => match ($s) {
      'open' => 'warning',
      'emailed' => 'info',
      'recovered' => 'success',
      'suppressed', 'expired' => 'muted',
      default => 'muted',
  };
  $stepLabel = fn (?string $s) => match ($s) {
      'contact' => 'Contact',
      'shipping' => 'Shipping',
      'payment' => 'Payment',
      default => 'Unknown',
  };
  $activeChips = collect([
      'status' => request('status'),
      'last_step' => request('last_step'),
      'country' => request('country'),
      'recovery_stage' => request('recovery_stage'),
      'from' => request('from'),
      'to' => request('to'),
      'sort' => request('sort') && request('sort') !== 'newest' ? request('sort') : null,
  ])->filter();
@endphp

<x-admin.page
    title="Abandoned checkouts"
    subtitle="Recovery command center — prioritize high-value drop-offs, run email sequences, and track win-back revenue."
>
    <x-slot:actions>
        <a href="{{ route('admin.abandoned.index', ['status' => 'due']) }}" class="admin-btn admin-btn-primary">
            <i data-lucide="mail" class="h-3.5 w-3.5"></i>
            Due now ({{ number_format($stats['due_now']) }})
        </a>
        <form method="post" action="{{ route('admin.abandoned.run') }}">
            @csrf
            <button class="admin-btn" type="submit" title="Capture new abandoned checkouts and send every email that is due">
                <i data-lucide="play" class="h-3.5 w-3.5"></i>
                Run recovery now
            </button>
        </form>
        <a href="{{ route('admin.abandoned.export', request()->query()) }}" class="admin-btn">
            <i data-lucide="download" class="h-3.5 w-3.5"></i>
            Export CSV
        </a>
        <a href="{{ route('admin.abandonment.settings') }}" class="admin-btn">
            <i data-lucide="settings" class="h-3.5 w-3.5"></i>
            Settings &amp; emails
        </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
    @unless($autoEnabled)
        <div class="mb-4 flex flex-wrap items-center justify-between gap-2 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
            <span>Automatic recovery emails are turned off. Checkouts are still captured, and you can email customers manually.</span>
            <a href="{{ route('admin.abandonment.settings') }}" class="font-medium underline">Turn on</a>
        </div>
    @endunless

    <div class="order-ops-stat-rail mb-5">
        <a href="{{ route('admin.abandoned.index', ['status' => 'active']) }}" class="order-ops-stat {{ request('status') === 'active' ? 'is-active' : '' }}">
            <span class="order-ops-stat-label">Active pipeline</span>
            <span class="order-ops-stat-value">{{ number_format($stats['open']) }}</span>
            <span class="order-ops-stat-meta">Open + emailed</span>
        </a>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Recoverable value</span>
            <span class="order-ops-stat-value">AUD {{ number_format($stats['recoverable_value_cents'] / 100, 0) }}</span>
            <span class="order-ops-stat-meta">Still in sequence</span>
        </div>
        <a href="{{ route('admin.abandoned.index', ['status' => 'recovered']) }}" class="order-ops-stat {{ request('status') === 'recovered' ? 'is-active' : '' }}">
            <span class="order-ops-stat-label">Recovered</span>
            <span class="order-ops-stat-value">{{ number_format($stats['recovered']) }}</span>
            <span class="order-ops-stat-meta">AUD {{ number_format($stats['recovered_value_cents'] / 100, 0) }} won back</span>
        </a>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Recovery rate</span>
            <span class="order-ops-stat-value">{{ number_format($stats['recovery_rate'], 1) }}%</span>
            <span class="order-ops-stat-meta">{{ number_format($stats['emails_sent']) }} emails sent</span>
        </div>
        <a href="{{ route('admin.abandoned.index', ['status' => 'due']) }}" class="order-ops-stat {{ request('status') === 'due' ? 'is-active tone-warning' : 'tone-warning' }}">
            <span class="order-ops-stat-label">Due now</span>
            <span class="order-ops-stat-value">{{ number_format($stats['due_now']) }}</span>
            <span class="order-ops-stat-meta">Ready for next touch</span>
        </a>
        <a href="{{ route('admin.abandoned.index', ['status' => 'clicked']) }}" class="order-ops-stat {{ request('status') === 'clicked' ? 'is-active' : '' }}">
            <span class="order-ops-stat-label">Clicked email</span>
            <span class="order-ops-stat-value">{{ number_format($stats['clicked']) }}</span>
            <span class="order-ops-stat-meta">{{ number_format($stats['discount_recoveries']) }} recovered with a discount</span>
        </a>
    </div>

    <div class="order-ops-quick-filters mb-4">
        @foreach([
            ['label' => 'All', 'params' => []],
            ['label' => 'Active', 'params' => ['status' => 'active']],
            ['label' => 'Due now', 'params' => ['status' => 'due']],
            ['label' => 'Payment drop-off', 'params' => ['last_step' => 'payment', 'status' => 'active']],
            ['label' => 'Clicked email', 'params' => ['status' => 'clicked']],
            ['label' => 'Recovered', 'params' => ['status' => 'recovered']],
            ['label' => 'Suppressed', 'params' => ['status' => 'suppressed']],
        ] as $chip)
            @php
                $isActive = collect($chip['params'])->every(fn ($v, $k) => request($k) === $v)
                    && (empty($chip['params']) ? ! request()->hasAny(['status', 'last_step', 'country', 'recovery_stage']) : true);
            @endphp
            <a href="{{ route('admin.abandoned.index', $chip['params']) }}" class="order-ops-chip {{ $isActive ? 'is-active' : '' }}">{{ $chip['label'] }}</a>
        @endforeach
    </div>

    @if($activeChips->isNotEmpty())
        <div class="mb-4 flex flex-wrap items-center gap-2">
            <span class="text-xs font-semibold uppercase tracking-wide text-[#8c9196]">Active</span>
            @foreach($activeChips as $key => $value)
                <span class="order-ops-chip is-active">{{ $label($key) }}: {{ $label((string) $value) }}</span>
            @endforeach
            <a href="{{ route('admin.abandoned.index') }}" class="text-xs font-medium text-[#2c6ecb] hover:underline">Clear all</a>
        </div>
    @endif

    <x-admin.advanced-table
        id="abandoned"
        :search-url="route('admin.abandoned.index')"
        search-placeholder="Search name, email, phone, discount code, token…"
        :columns="$columns"
        :filters-open="$activeChips->isNotEmpty()"
    >
        <x-slot:filters>
            <div class="admin-select-field">
                <label class="admin-label" for="filter-status">Status</label>
                <div class="admin-select-wrap">
                    <select id="filter-status" name="status" form="abandoned-filter" class="admin-select" onchange="document.getElementById('abandoned-filter').submit()">
                        <option value="">Any</option>
                        @foreach(['active','due','clicked','open','emailed','recovered','suppressed','expired'] as $status)
                            <option value="{{ $status }}" @selected(request('status') === $status)>{{ $label($status) }}</option>
                        @endforeach
                    </select>
                    <i data-lucide="chevron-down" class="admin-select-chevron"></i>
                </div>
            </div>
            <div class="admin-select-field">
                <label class="admin-label" for="filter-step">Drop-off</label>
                <div class="admin-select-wrap">
                    <select id="filter-step" name="last_step" form="abandoned-filter" class="admin-select" onchange="document.getElementById('abandoned-filter').submit()">
                        <option value="">Any</option>
                        @foreach(['contact','shipping','payment'] as $step)
                            <option value="{{ $step }}" @selected(request('last_step') === $step)>{{ $stepLabel($step) }}</option>
                        @endforeach
                    </select>
                    <i data-lucide="chevron-down" class="admin-select-chevron"></i>
                </div>
            </div>
            <div class="admin-select-field">
                <label class="admin-label" for="filter-country">Country</label>
                <div class="admin-select-wrap">
                    <select id="filter-country" name="country" form="abandoned-filter" class="admin-select" onchange="document.getElementById('abandoned-filter').submit()">
                        <option value="">Any</option>
                        @foreach($countries as $country)
                            <option value="{{ $country }}" @selected(request('country') === $country)>{{ $country }}</option>
                        @endforeach
                    </select>
                    <i data-lucide="chevron-down" class="admin-select-chevron"></i>
                </div>
            </div>
            <div class="admin-select-field">
                <label class="admin-label" for="filter-sort">Sort</label>
                <div class="admin-select-wrap">
                    <select id="filter-sort" name="sort" form="abandoned-filter" class="admin-select" onchange="document.getElementById('abandoned-filter').submit()">
                        <option value="newest" @selected(request('sort', 'newest') === 'newest')>Newest activity</option>
                        <option value="value_desc" @selected(request('sort') === 'value_desc')>Highest value</option>
                        <option value="value_asc" @selected(request('sort') === 'value_asc')>Lowest value</option>
                        <option value="next_email" @selected(request('sort') === 'next_email')>Next email</option>
                        <option value="oldest" @selected(request('sort') === 'oldest')>Oldest first</option>
                    </select>
                    <i data-lucide="chevron-down" class="admin-select-chevron"></i>
                </div>
            </div>
            <div class="admin-select-field">
                <label class="admin-label" for="filter-from">From</label>
                <input id="filter-from" type="date" name="from" form="abandoned-filter" value="{{ request('from') }}" class="admin-select" onchange="document.getElementById('abandoned-filter').submit()">
            </div>
            <div class="admin-select-field">
                <label class="admin-label" for="filter-to">To</label>
                <input id="filter-to" type="date" name="to" form="abandoned-filter" value="{{ request('to') }}" class="admin-select" onchange="document.getElementById('abandoned-filter').submit()">
            </div>
            <div class="flex items-end">
                <a href="{{ route('admin.abandoned.index') }}" class="admin-btn w-full justify-center">
                    <i data-lucide="x" class="h-3.5 w-3.5"></i> Clear filters
                </a>
            </div>
        </x-slot:filters>

        <x-slot:bulk>
            <span class="text-xs text-[#6d7175]">Select checkouts, then send each one the next email in its sequence.</span>
            <button type="submit" form="abandoned-bulk-form" class="admin-btn admin-btn-primary">
                <i data-lucide="send" class="h-3.5 w-3.5"></i>
                Send recovery
            </button>
        </x-slot:bulk>

        <thead>
            <tr>
                <th class="w-10"><input type="checkbox" data-abandoned-check-all aria-label="Select all"></th>
                <th data-col="customer">Customer</th>
                <th data-col="cart">Cart</th>
                <th data-col="value">Value</th>
                <th data-col="step">Drop-off</th>
                <th data-col="stage">Sequence</th>
                <th data-col="channel">Channel</th>
                <th data-col="status">Status</th>
                <th data-col="activity">Activity</th>
                <th data-col="actions"></th>
            </tr>
        </thead>
        <tbody>
            @forelse($abandoned as $row)
                <tr>
                    <td>
                        @if($row->isRecoverable())
                            <input type="checkbox" name="ids[]" value="{{ $row->id }}" form="abandoned-bulk-form" data-abandoned-row>
                        @endif
                    </td>
                    <td data-col="customer">
                        <a href="{{ route('admin.abandoned.show', $row) }}" class="font-medium text-[#202223] hover:underline">{{ $row->customer_name ?: ($row->email ?: 'Guest (no email)') }}</a>
                        @if($row->customer_name && $row->email)
                            <div class="text-xs text-[#6d7175]">{{ $row->email }}</div>
                        @endif
                        <div class="mt-0.5 text-xs text-[#8c9196]">
                            {{ collect([$row->phone, $row->country])->filter()->implode(' · ') ?: '—' }}
                            @if($row->customer_id) · Customer #{{ $row->customer_id }} @endif
                        </div>
                    </td>
                    <td data-col="cart">
                        @php $preview = collect($row->line_preview ?? []); @endphp
                        <div class="text-sm font-medium text-[#202223]">
                            {{ $preview->first()['title'] ?? ($row->checkout?->lines[0]['title'] ?? 'Empty cart') }}
                        </div>
                        <div class="mt-0.5 text-xs text-[#8c9196]">
                            {{ $row->line_count }} {{ $row->line_count === 1 ? 'item' : 'items' }}
                            · Checkout #{{ $row->checkout_id }}
                        </div>
                    </td>
                    <td data-col="value" class="whitespace-nowrap font-semibold">{{ $row->labeledTotal() }}</td>
                    <td data-col="step">
                        <x-admin.badge :tone="match($row->last_step) { 'payment' => 'warning', 'shipping' => 'info', default => 'muted' }">
                            {{ $stepLabel($row->last_step) }}
                        </x-admin.badge>
                    </td>
                    <td data-col="stage">
                        <div class="abandoned-stage">
                            @foreach(array_keys($steps) as $stepNumber)
                                <span class="{{ $row->recovery_stage >= $stepNumber ? 'is-done' : '' }}" title="Email {{ $stepNumber }}">{{ $stepNumber }}</span>
                            @endforeach
                        </div>
                        <div class="mt-1 text-[11px] text-[#8c9196]">
                            @if(! $row->isActive())
                                {{ $row->recovery_emails_sent }} {{ \Illuminate\Support\Str::plural('email', $row->recovery_emails_sent) }} sent
                            @elseif($row->next_email_at)
                                Next {{ $row->next_email_at->isPast() ? 'due now' : $row->next_email_at->diffForHumans() }}
                            @else
                                Sequence complete
                            @endif
                        </div>
                        @if($row->discount_code)
                            <div class="mt-1 font-mono text-[11px] font-semibold text-[#202223]">{{ $row->discount_code }}</div>
                        @endif
                        @if($row->click_count)
                            <div class="mt-0.5 text-[11px] text-emerald-700">Clicked {{ $row->click_count }}×</div>
                        @endif
                    </td>
                    <td data-col="channel" class="text-xs text-[#6d7175]">
                        <div>{{ $row->utm_source ?: ($row->source ?: 'direct') }}</div>
                        @if($row->utm_campaign)
                            <div class="text-[#8c9196]">{{ $row->utm_campaign }}</div>
                        @endif
                    </td>
                    <td data-col="status">
                        <x-admin.badge :tone="$statusTone($row->status)">{{ $label($row->status) }}</x-admin.badge>
                    </td>
                    <td data-col="activity" class="text-xs text-[#6d7175]">
                        <div title="{{ $row->abandoned_at?->toDayDateTimeString() }}">Abandoned {{ ($row->abandoned_at ?? $row->created_at)?->diffForHumans() }}</div>
                        @if($row->last_emailed_at)
                            <div class="text-[#8c9196]">Emailed {{ $row->last_emailed_at->diffForHumans() }}</div>
                        @endif
                    </td>
                    <td data-col="actions" class="text-right">
                        <div class="inline-flex flex-wrap justify-end gap-2">
                            <a href="{{ route('admin.abandoned.show', $row) }}" class="text-xs font-medium text-[#2c6ecb] hover:underline">Open</a>
                            @if($row->isRecoverable())
                                <form method="post" action="{{ route('admin.abandoned.recover', $row) }}" class="inline">
                                    @csrf
                                    <button class="text-xs font-medium text-[#202223] underline">Email</button>
                                </form>
                            @endif
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="10" class="p-10 text-center text-sm text-[#8c9196]">
                        No abandoned checkouts match these filters.
                    </td>
                </tr>
            @endforelse
        </tbody>
    </x-admin.advanced-table>

    <form id="abandoned-filter" method="get" action="{{ route('admin.abandoned.index') }}" class="hidden">
        @if(request('q'))
            <input type="hidden" name="q" value="{{ request('q') }}">
        @endif
    </form>

    <form id="abandoned-bulk-form" method="post" action="{{ route('admin.abandoned.bulk-recover') }}" class="hidden">
        @csrf
    </form>

    <div class="mt-4">{{ $abandoned->links() }}</div>
</x-admin.page>

<script>
  (() => {
    const all = document.querySelector('[data-abandoned-check-all]');
    if (!all) return;
    all.addEventListener('change', () => {
      document.querySelectorAll('[data-abandoned-row]').forEach((el) => { el.checked = all.checked; });
    });
  })();
</script>
@endsection