@extends('layouts.admin')
@section('title','Customer insights')
@section('content')
@php
  $money = fn (int $cents) => 'AUD '.number_format($cents / 100, 2);
  $maxMonthly = max(1, (int) $monthly->max('total'));
@endphp

<x-admin.page
    title="Customer insights"
    subtitle="RFM-style health of the customer base — lifetime value, repeat rate, risk cohorts, and acquisition momentum."
>
    <x-slot:actions>
        <a href="{{ route('admin.customers.index') }}" class="admin-btn"><i data-lucide="users" class="h-3.5 w-3.5"></i> Customers</a>
        <a href="{{ route('admin.segments.index') }}" class="admin-btn"><i data-lucide="filter" class="h-3.5 w-3.5"></i> Segments</a>
        <a href="{{ route('admin.segments.create') }}" class="admin-btn admin-btn-primary"><i data-lucide="plus" class="h-3.5 w-3.5"></i> Build segment</a>
    </x-slot:actions>

    <div class="order-ops-stat-rail mb-5">
        <div class="order-ops-stat is-active">
            <span class="order-ops-stat-label">Customers</span>
            <span class="order-ops-stat-value">{{ number_format($totals['customers']) }}</span>
            <span class="order-ops-stat-meta">{{ number_format($totals['new_30d']) }} new in 30d</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Buyers</span>
            <span class="order-ops-stat-value">{{ number_format($totals['buyers']) }}</span>
            <span class="order-ops-stat-meta">{{ number_format($totals['never_ordered']) }} never ordered</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Repeat rate</span>
            <span class="order-ops-stat-value">{{ number_format($totals['repeat_rate'], 1) }}%</span>
            <span class="order-ops-stat-meta">{{ number_format($totals['repeat_buyers']) }} multi-order</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Avg LTV</span>
            <span class="order-ops-stat-value text-lg">{{ $money($totals['avg_ltv_cents']) }}</span>
            <span class="order-ops-stat-meta">Avg order {{ $money($totals['avg_order_cents']) }}</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Lifetime revenue</span>
            <span class="order-ops-stat-value text-lg">{{ $money($totals['lifetime_cents']) }}</span>
            <span class="order-ops-stat-meta">Linked to customers</span>
        </div>
    </div>

    <div class="grid gap-5 xl:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)]">
        <x-admin.section title="RFM cohorts" hint="Actionable buckets inspired by Shopify / WooCommerce customer analytics.">
            <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                @foreach($cohorts as $key => $cohort)
                    <div class="rounded-xl border border-[var(--color-admin-border)] bg-[#fafbfb] p-4">
                        <div class="flex items-center justify-between gap-2">
                            <span class="text-xs font-semibold uppercase tracking-wide text-[#8c9196]">{{ $cohort['label'] }}</span>
                            @if(in_array($key, ['at_risk', 'hibernating'], true))
                                <x-admin.badge tone="warning">Watch</x-admin.badge>
                            @elseif($key === 'champions')
                                <x-admin.badge tone="success">VIP</x-admin.badge>
                            @endif
                        </div>
                        <div class="mt-2 text-2xl font-semibold tabular-nums text-[#202223]">{{ number_format($cohort['count']) }}</div>
                        <p class="mt-1 text-xs text-[#6d7175]">{{ $cohort['description'] }}</p>
                    </div>
                @endforeach
            </div>
        </x-admin.section>

        <x-admin.section title="Signups (6 months)" hint="Acquisition momentum by month.">
            <div class="space-y-3">
                @foreach($monthly as $row)
                    <div>
                        <div class="mb-1 flex justify-between text-xs text-[#6d7175]">
                            <span>{{ $row->label }}</span>
                            <span class="tabular-nums font-medium text-[#202223]">{{ number_format($row->total) }}</span>
                        </div>
                        <div class="h-2 overflow-hidden rounded-full bg-[#e4e5e7]">
                            <div class="h-full rounded-full bg-[#202223]" style="width: {{ round(($row->total / $maxMonthly) * 100) }}%"></div>
                        </div>
                    </div>
                @endforeach
            </div>
        </x-admin.section>
    </div>

    <div class="mt-5 grid gap-5 xl:grid-cols-[minmax(0,1.4fr)_minmax(0,.9fr)]">
        <x-admin.section title="Top customers by lifetime value">
            <div class="overflow-x-auto rounded-xl border border-[var(--color-admin-border)]">
                <table class="w-full min-w-[640px] text-sm">
                    <thead class="bg-[#f6f6f7] text-left text-xs uppercase tracking-wide text-[#6d7175]">
                        <tr>
                            <th class="p-3">Customer</th>
                            <th>Orders</th>
                            <th>LTV</th>
                            <th>Avg order</th>
                            <th>Last order</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($top_customers as $row)
                            <tr class="border-t border-[var(--color-admin-border)]">
                                <td class="p-3">
                                    <div class="font-medium">{{ $row->customer?->name ?: '—' }}</div>
                                    <div class="text-xs text-[#6d7175]">{{ $row->customer?->email }}</div>
                                </td>
                                <td class="tabular-nums">{{ number_format($row->orders_count) }}</td>
                                <td class="tabular-nums font-medium">{{ $money($row->total_cents) }}</td>
                                <td class="tabular-nums text-[#6d7175]">{{ $money($row->avg_cents) }}</td>
                                <td class="text-xs text-[#6d7175]">{{ \Illuminate\Support\Carbon::parse($row->last_order_at)->diffForHumans() }}</td>
                                <td class="p-3 text-right">
                                    @if($row->customer)
                                        <a href="{{ route('admin.customers.show', $row->customer) }}" class="text-sm font-medium text-[#2c6ecb] hover:underline">Open</a>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="6" class="p-10 text-center text-[#6d7175]">No linked customer orders yet.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </x-admin.section>

        <x-admin.section title="Recent signups">
            <ul class="space-y-3">
                @forelse($recent_signups as $customer)
                    <li class="flex items-start justify-between gap-3 border-b border-[var(--color-admin-border)] pb-3 last:border-0">
                        <div>
                            <a href="{{ route('admin.customers.show', $customer) }}" class="font-medium text-[#202223] hover:underline">{{ $customer->name ?: $customer->email }}</a>
                            <div class="text-xs text-[#6d7175]">{{ $customer->email }}</div>
                        </div>
                        <span class="shrink-0 text-xs text-[#8c9196]">{{ $customer->created_at?->diffForHumans() }}</span>
                    </li>
                @empty
                    <li class="text-sm text-[#6d7175]">No customers yet.</li>
                @endforelse
            </ul>
        </x-admin.section>
    </div>
</x-admin.page>
@endsection