@php
    $fmt = app(\App\Services\Formatter::class);
    $count = fn ($value) => number_format((float) $value);
@endphp

<div>
    <x-ui.page-header
        title="Growth &amp; churn"
        :subtitle="$this->rangeLabel()"
    />

    <div class="mb-4 flex flex-wrap items-end gap-2">
        <x-ui.date-range />

        <select wire:model.live="productId" class="field-input w-auto py-1.5 text-xs">
            <option value="">All products</option>
            @foreach ($products as $id => $name)
                <option value="{{ $id }}">{{ $name }}</option>
            @endforeach
        </select>
    </div>

    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <x-ui.stat label="Signups in range" :value="number_format($totalSignups)" icon="users" color="brand" />

        <x-ui.stat
            label="Trial conversion"
            :value="$fmt->percent($conversion['rate'])"
            :sub="$conversion['converted'].' of '.$conversion['settled'].' finished trials'"
            icon="trending"
            :color="$conversion['rate'] >= 20 ? 'green' : 'amber'"
        />

        <x-ui.stat label="Trials running now" :value="number_format($conversion['open'])"
                   sub="Not yet counted either way" icon="clock" />

        <x-ui.stat label="Lapsed accounts" :value="number_format($lapsed->count())"
                   sub="Term ended, nothing bought since" icon="alert"
                   :color="$lapsed->isNotEmpty() ? 'red' : 'slate'" />
    </div>

    <div class="mt-4 grid gap-4 lg:grid-cols-3">
        <x-ui.card class="lg:col-span-2" title="New shops per month">
            <x-chart.bars :series="$signups" :formatter="$count" label="Signups" :slot="3" :height="240" />

            <details class="mt-3">
                <summary class="cursor-pointer text-xs font-medium text-slate-500 hover:text-brand">Show as table</summary>

                <x-ui.table class="mt-2">
                    <x-slot:head>
                        <tr><th>Month</th><th class="num">Signups</th></tr>
                    </x-slot:head>

                    @forelse ($signups as $row)
                        <tr><td>{{ $row['label'] }}</td><td class="num">{{ number_format($row['value']) }}</td></tr>
                    @empty
                        <tr><td colspan="2" class="text-center text-sm text-slate-400">No signups in this range.</td></tr>
                    @endforelse
                </x-ui.table>
            </details>
        </x-ui.card>

        <x-ui.card title="Where accounts stand" subtitle="Today, not in the range.">
            <x-chart.donut :series="$statusMix" :formatter="$count"
                           center-label="Shops" :center-value="number_format(collect($statusMix)->sum('value'))" />
        </x-ui.card>
    </div>

    <x-ui.card class="mt-4" title="Win-back list"
               subtitle="Paid once, term has ended, nothing bought since. Worth a phone call.">
        @if ($lapsed->isEmpty())
            <x-ui.empty icon="check" title="Nobody has lapsed" message="Every shop that ever paid still has a live term." />
        @else
            <x-ui.table>
                <x-slot:head>
                    <tr>
                        <th>Shop</th><th>Owner</th><th>Last plan</th>
                        <th class="num">Was paying</th><th>Lapsed</th><th class="num">Days ago</th>
                    </tr>
                </x-slot:head>

                @foreach ($lapsed as $row)
                    <tr>
                        <td>
                            <a href="{{ route('tenants.show', $row->tenant_id) }}" wire:navigate
                               class="font-medium text-brand hover:underline">{{ $row->tenant?->business_name ?? '—' }}</a>
                        </td>
                        <td class="tabular text-xs">{{ $row->tenant?->owner_phone ?: $row->tenant?->owner_email }}</td>
                        <td class="text-xs">{{ $row->plan?->name ?? '—' }}</td>
                        <td class="num">{{ $fmt->money($row->amount) }}</td>
                        <td class="text-xs">{{ $fmt->date($row->ends_at) }}</td>
                        <td class="num">{{ (int) $row->ends_at->diffInDays(now()) }}</td>
                    </tr>
                @endforeach
            </x-ui.table>
        @endif
    </x-ui.card>
</div>