@php
    $fmt = app(\App\Services\Formatter::class);
    $money = fn ($value) => $fmt->money($value);
@endphp

<div>
    <x-ui.page-header
        title="Dashboard"
        subtitle="Everything waiting on a decision, then the money."
    />

    {{-- ------------------------------------------------------------- tiles --}}
    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <x-ui.stat
            label="Awaiting verification"
            :value="$stats['pending']"
            :sub="$stats['pending'] > 0 ? $fmt->money($stats['pending_amount']).' claimed' : 'Queue is clear'"
            icon="inbox"
            :color="$stats['pending'] > 0 ? 'amber' : 'green'"
        />

        <x-ui.stat
            label="Monthly recurring revenue"
            :value="$fmt->money($stats['mrr'])"
            sub="Annual plans counted per month"
            icon="trending"
            color="brand"
        />

        <x-ui.stat
            label="Verified this month"
            :value="$fmt->money($stats['revenue_month'])"
            :sub="now()->format('F Y')"
            icon="banknote"
            color="green"
        />

        <x-ui.stat
            label="Shops"
            :value="number_format($stats['tenants'])"
            :sub="$stats['active'].' active · '.$stats['trials'].' on trial · '.$stats['new_this_month'].' new this month'"
            icon="building"
        />
    </div>

    {{-- ------------------------------------------------------------- queue --}}
    @if ($queue->isNotEmpty())
        <x-ui.card class="mt-6" title="Waiting for you" subtitle="Oldest first — a shop that has paid cannot trade until this is done.">
            <x-slot:actions>
                <x-ui.button href="{{ route('payments.queue') }}" variant="primary" size="sm">
                    Open queue
                </x-ui.button>
            </x-slot:actions>

            <x-ui.table>
                <x-slot:head>
                    <tr>
                        <th>Shop</th>
                        <th>Reference</th>
                        <th>Method</th>
                        <th class="num">Amount</th>
                        <th>Waiting</th>
                    </tr>
                </x-slot:head>

                @foreach ($queue as $payment)
                    <tr>
                        <td>
                            <a href="{{ route('tenants.show', $payment->tenant_id) }}" wire:navigate
                               class="font-medium text-brand hover:underline">
                                {{ $payment->tenant?->business_name ?? '—' }}
                            </a>
                            <p class="text-xs text-slate-500">{{ $payment->subscription?->plan?->name }}</p>
                        </td>
                        <td class="tabular text-xs">{{ $payment->reference }}</td>
                        <td><x-ui.badge :color="$payment->gateway->color()">{{ $payment->gateway->label() }}</x-ui.badge></td>
                        <td class="num">{{ $fmt->money($payment->amount) }}</td>
                        <td class="text-xs text-slate-500">{{ $payment->created_at->diffForHumans() }}</td>
                    </tr>
                @endforeach
            </x-ui.table>
        </x-ui.card>
    @endif

    {{-- ------------------------------------------------------------ charts --}}
    <div class="mt-6 grid gap-4 lg:grid-cols-3">
        <x-ui.card class="lg:col-span-2" title="Verified revenue"
                   :subtitle="'Last '.$months.' months · '.$rangeStart->format('M Y').' to '.now()->format('M Y')">
            <x-chart.bars :series="$revenue" :formatter="$money" label="Verified revenue" :slot="1" />

            {{-- The same numbers, readable. A chart alone is not an answer. --}}
            <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">Verified</th></tr>
                    </x-slot:head>

                    @foreach ($revenue as $row)
                        <tr>
                            <td>{{ $row['label'] }}</td>
                            <td class="num">{{ $fmt->money($row['value']) }}</td>
                        </tr>
                    @endforeach
                </x-ui.table>
            </details>
        </x-ui.card>

        <x-ui.card title="How they pay" subtitle="Verified, last 6 months">
            <x-chart.donut
                :series="$gateways"
                :formatter="$money"
                center-label="Total"
                :center-value="$fmt->compact(collect($gateways)->sum('value'))"
            />
        </x-ui.card>
    </div>

    {{-- ------------------------------------------------ renewals + products --}}
    <div class="mt-6 grid gap-4 lg:grid-cols-2">
        <x-ui.card title="Expiring within 14 days" subtitle="The renewal call list.">
            @if ($expiring->isEmpty())
                <x-ui.empty icon="calendar" title="Nothing lapsing soon"
                            message="No active subscription ends in the next two weeks." />
            @else
                <x-ui.table>
                    <x-slot:head>
                        <tr><th>Shop</th><th>Plan</th><th>Ends</th><th class="num">Days</th></tr>
                    </x-slot:head>

                    @foreach ($expiring as $subscription)
                        <tr>
                            <td>
                                <a href="{{ route('tenants.show', $subscription->tenant_id) }}" wire:navigate
                                   class="font-medium text-brand hover:underline">
                                    {{ $subscription->tenant?->business_name ?? '—' }}
                                </a>
                            </td>
                            <td class="text-xs">
                                {{ $subscription->plan?->name }}
                                @if ($subscription->is_trial)
                                    <x-ui.badge color="blue">Trial</x-ui.badge>
                                @endif
                            </td>
                            <td class="text-xs">{{ $fmt->date($subscription->ends_at) }}</td>
                            <td class="num">
                                <span @class(['font-semibold', 'text-red-600' => $subscription->daysRemaining() <= 3])>
                                    {{ $subscription->daysRemaining() }}
                                </span>
                            </td>
                        </tr>
                    @endforeach
                </x-ui.table>
            @endif
        </x-ui.card>

        <x-ui.card title="Products" subtitle="Shops per Thinkrax application.">
            @if ($products->isEmpty())
                <x-ui.empty icon="box" title="No products yet"
                            message="Add a product before you can create plans for it." />
            @else
                <x-ui.table>
                    <x-slot:head>
                        <tr><th>Product</th><th class="num">Shops</th><th class="num">Active</th><th></th></tr>
                    </x-slot:head>

                    @foreach ($products as $product)
                        <tr>
                            <td>
                                <span class="font-medium">{{ $product->name }}</span>
                                <p class="text-xs text-slate-500">{{ $product->tagline }}</p>
                            </td>
                            <td class="num">{{ number_format($product->tenants_count) }}</td>
                            <td class="num">{{ number_format($product->active_tenants_count) }}</td>
                            <td class="text-right">
                                @if (! $product->is_active)
                                    <x-ui.badge color="gray">Inactive</x-ui.badge>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </x-ui.table>
            @endif
        </x-ui.card>
    </div>

    {{-- ---------------------------------------------------------- activity --}}
    <x-ui.card class="mt-6" title="Recent activity" subtitle="Who decided what.">
        <x-slot:actions>
            <x-ui.button href="{{ route('activity.index') }}" size="sm">View all</x-ui.button>
        </x-slot:actions>

        @if ($activity->isEmpty())
            <x-ui.empty icon="clock" title="Nothing logged yet" />
        @else
            <ul class="divide-y divide-slate-100 dark:divide-slate-800">
                @foreach ($activity as $entry)
                    <li class="flex items-start gap-3 py-2.5">
                        <span class="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-brand"></span>

                        <div class="min-w-0 flex-1">
                            <p class="text-sm text-slate-700 dark:text-slate-200">{{ $entry->description }}</p>
                            <p class="text-xs text-slate-400">
                                {{ $entry->event }} · {{ $entry->created_at->diffForHumans() }}
                            </p>
                        </div>
                    </li>
                @endforeach
            </ul>
        @endif
    </x-ui.card>
</div>