@php
    use App\Enums\TenantStatus;

    $fmt = app(\App\Services\Formatter::class);
    $canManage = auth()->user()?->canManageTenants();
@endphp

<div>
    <x-ui.page-header
        :title="$tenant->business_name"
        :subtitle="($tenant->product?->name ?? 'Unknown product').' · joined '.$fmt->date($tenant->created_at)"
        :back="route('tenants.index')"
    >
        <x-slot:actions>
            <x-ui.badge :color="$tenant->status->color()">{{ $tenant->status->label() }}</x-ui.badge>

            @if ($canManage)
                <div x-data="{ open: false }" class="relative">
                    <button type="button" @click="open = !open" class="btn btn-secondary btn-sm">
                        <x-ui.icon name="sliders" class="h-4 w-4" /> Actions
                        <x-ui.icon name="chevron-down" class="h-3.5 w-3.5" />
                    </button>

                    <div x-show="open" x-cloak @click.outside="open = false"
                         class="card absolute right-0 z-20 mt-2 w-60 p-1 shadow-lg">
                        @php
                            $menu = [
                                ['extend', 'calendar', 'Extend / shorten term'],
                                ['change-plan', 'layers', 'Change plan'],
                                ['grant', 'sparkles', 'Grant a paid term'],
                                ['note', 'doc', 'Add a note'],
                            ];
                        @endphp

                        @foreach ($menu as [$key, $icon, $label])
                            <button type="button" wire:click="openAction('{{ $key }}')" @click="open = false"
                                    class="flex w-full items-center gap-2 rounded px-3 py-2 text-left text-sm hover:bg-slate-100 dark:hover:bg-slate-800">
                                <x-ui.icon :name="$icon" class="h-4 w-4" /> {{ $label }}
                            </button>
                        @endforeach

                        <hr class="my-1 border-slate-100 dark:border-slate-800">

                        @if ($tenant->status === TenantStatus::Pending)
                            <button type="button" wire:click="openAction('approve')" @click="open = false"
                                    class="flex w-full items-center gap-2 rounded px-3 py-2 text-left text-sm text-emerald-600 hover:bg-emerald-50 dark:hover:bg-emerald-950">
                                <x-ui.icon name="check" class="h-4 w-4" /> Approve signup
                            </button>
                        @endif

                        @if ($tenant->isSuspended())
                            <button type="button" wire:click="openAction('reinstate')" @click="open = false"
                                    class="flex w-full items-center gap-2 rounded px-3 py-2 text-left text-sm text-emerald-600 hover:bg-emerald-50 dark:hover:bg-emerald-950">
                                <x-ui.icon name="refresh" class="h-4 w-4" /> Reinstate
                            </button>
                        @else
                            <button type="button" wire:click="openAction('suspend')" @click="open = false"
                                    class="flex w-full items-center gap-2 rounded px-3 py-2 text-left text-sm text-red-600 hover:bg-red-50 dark:hover:bg-red-950">
                                <x-ui.icon name="alert" class="h-4 w-4" /> Suspend shop
                            </button>
                        @endif

                        @if ($subscription)
                            <button type="button" wire:click="openAction('cancel')" @click="open = false"
                                    class="flex w-full items-center gap-2 rounded px-3 py-2 text-left text-sm text-red-600 hover:bg-red-50 dark:hover:bg-red-950">
                                <x-ui.icon name="x" class="h-4 w-4" /> Cancel subscription
                            </button>
                        @endif
                    </div>
                </div>
            @endif
        </x-slot:actions>
    </x-ui.page-header>

    @if ($tenant->isSuspended())
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-800 dark:border-red-900 dark:bg-red-950 dark:text-red-200">
            <p class="font-semibold">Suspended {{ $fmt->dateTime($tenant->suspended_at) }}</p>
            <p class="mt-0.5">{{ $tenant->suspension_reason }}</p>
        </div>
    @endif

    {{-- ------------------------------------------------------------- tiles --}}
    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <x-ui.stat
            label="Current plan"
            :value="$subscription?->plan?->name ?? 'None'"
            :sub="$subscription ? $subscription->billing_cycle->label().' · '.$fmt->money($subscription->amount) : 'No subscription'"
            icon="layers"
            color="brand"
        />

        <x-ui.stat
            label="Access"
            :value="ucfirst(str_replace('_', ' ', $subscription?->accessState() ?? 'locked'))"
            :sub="$subscription?->effectiveStatus()->label() ?? '—'"
            icon="shield"
            :color="match ($subscription?->accessState()) { 'full' => 'green', 'read_only' => 'amber', default => 'red' }"
        />

        <x-ui.stat
            label="Term ends"
            :value="$subscription?->ends_at ? $fmt->date($subscription->ends_at) : '—'"
            :sub="$subscription?->ends_at ? $subscription->daysRemaining().' day(s) remaining' : 'Nothing scheduled'"
            icon="calendar"
        />

        <x-ui.stat
            label="Lifetime paid"
            :value="$fmt->money($payments->where('status', \App\Enums\ProofStatus::Verified)->sum('amount'))"
            :sub="$payments->count().' payment(s) submitted'"
            icon="banknote"
            color="green"
        />
    </div>

    <x-ui.tabs
        class="mt-6"
        :tabs="['overview' => 'Overview', 'subscriptions' => 'Subscriptions', 'invoices' => 'Invoices', 'payments' => 'Payments', 'activity' => 'Activity']"
        :current="$tab"
        model="tab"
    />

    {{-- ---------------------------------------------------------- overview --}}
    @if ($tab === 'overview')
        <div class="grid gap-4 lg:grid-cols-2">
            <x-ui.card title="Business">
                <dl class="space-y-2 text-sm">
                    @foreach ([
                        'Business name' => $tenant->business_name,
                        'Type' => $tenant->business_type ? ucfirst($tenant->business_type) : '—',
                        'Slug' => $tenant->slug,
                        'City' => $tenant->city ?: '—',
                        'Address' => $tenant->address ?: '—',
                        'Referred by' => $tenant->referral_source ?: '—',
                    ] as $label => $value)
                        <div class="flex justify-between gap-4">
                            <dt class="text-slate-500">{{ $label }}</dt>
                            <dd class="text-right font-medium">{{ $value }}</dd>
                        </div>
                    @endforeach
                </dl>
            </x-ui.card>

            <x-ui.card title="Owner">
                <dl class="space-y-2 text-sm">
                    @foreach ([
                        'Name' => $tenant->owner_name,
                        'Email' => $tenant->owner_email,
                        'Phone' => $tenant->owner_phone ?: '—',
                        'CNIC' => $tenant->owner_cnic ?: '—',
                        'Last seen' => $fmt->ago($tenant->last_activity_at),
                        'Approved' => $tenant->approved_at ? $fmt->date($tenant->approved_at) : 'Not yet',
                    ] as $label => $value)
                        <div class="flex justify-between gap-4">
                            <dt class="text-slate-500">{{ $label }}</dt>
                            <dd class="tabular text-right font-medium">{{ $value }}</dd>
                        </div>
                    @endforeach
                </dl>
            </x-ui.card>

            @if ($subscription)
                <x-ui.card title="What this plan allows" subtitle="Snapshot taken when the term was bought.">
                    @php
                        $catalogue = config('thinkrax.products.'.($tenant->product?->slug ?? ''), []);
                        $featureLabels = $catalogue['features'] ?? [];
                        $limitLabels = $catalogue['limits'] ?? [];
                    @endphp

                    <div class="grid gap-4 sm:grid-cols-2">
                        <div>
                            <p class="field-label">Features</p>
                            <ul class="space-y-1 text-xs">
                                @forelse ($subscription->features() as $feature)
                                    <li class="flex items-start gap-1.5">
                                        <x-ui.icon name="check" class="mt-0.5 h-3 w-3 shrink-0 text-emerald-500" />
                                        {{ $featureLabels[$feature] ?? $feature }}
                                    </li>
                                @empty
                                    <li class="text-slate-400">No gated features.</li>
                                @endforelse
                            </ul>
                        </div>

                        <div>
                            <p class="field-label">Limits</p>
                            <ul class="space-y-1 text-xs">
                                @forelse ($subscription->limits() as $key => $value)
                                    <li class="flex justify-between gap-2">
                                        <span>{{ $limitLabels[$key] ?? $key }}</span>
                                        <span class="tabular font-medium">{{ (int) $value < 0 ? 'Unlimited' : number_format((int) $value) }}</span>
                                    </li>
                                @empty
                                    <li class="text-slate-400">No caps.</li>
                                @endforelse
                            </ul>
                        </div>
                    </div>
                </x-ui.card>
            @endif

            <x-ui.card title="Internal notes" subtitle="Only staff see this.">
                @if ($tenant->admin_notes)
                    <p class="whitespace-pre-line text-sm text-slate-600 dark:text-slate-300">{{ $tenant->admin_notes }}</p>
                @else
                    <x-ui.empty icon="doc" title="No notes yet" message="Anything the team should remember about this account goes here." />
                @endif

                @if ($canManage)
                    <x-ui.button class="mt-3" size="sm" icon="plus" wire:click="openAction('note')">Add a note</x-ui.button>
                @endif
            </x-ui.card>
        </div>
    @endif

    {{-- ----------------------------------------------------- subscriptions --}}
    @if ($tab === 'subscriptions')
        <x-ui.card :padded="false">
            @if ($subscriptions->isEmpty())
                <x-ui.empty icon="sparkles" title="No subscriptions" />
            @else
                <x-ui.table>
                    <x-slot:head>
                        <tr>
                            <th>Plan</th><th>Cycle</th><th class="num">Amount</th>
                            <th>Status</th><th>Starts</th><th>Ends</th>
                        </tr>
                    </x-slot:head>

                    @foreach ($subscriptions as $row)
                        <tr>
                            <td>
                                {{ $row->plan?->name ?? '—' }}
                                @if ($row->is_trial) <x-ui.badge color="blue">Trial</x-ui.badge> @endif
                            </td>
                            <td class="text-xs">{{ $row->billing_cycle->label() }}</td>
                            <td class="num">{{ $fmt->money($row->amount) }}</td>
                            <td><x-ui.badge :color="$row->effectiveStatus()->color()">{{ $row->effectiveStatus()->label() }}</x-ui.badge></td>
                            <td class="text-xs">{{ $fmt->date($row->starts_at) }}</td>
                            <td class="text-xs">{{ $fmt->date($row->ends_at) }}</td>
                        </tr>
                    @endforeach
                </x-ui.table>
            @endif
        </x-ui.card>
    @endif

    {{-- --------------------------------------------------------- invoices --}}
    @if ($tab === 'invoices')
        <x-ui.card :padded="false">
            @if ($invoices->isEmpty())
                <x-ui.empty icon="receipt" title="No invoices" />
            @else
                <x-ui.table>
                    <x-slot:head>
                        <tr>
                            <th>Number</th><th>Period</th><th class="num">Total</th>
                            <th class="num">Paid</th><th>Status</th><th>Due</th><th></th>
                        </tr>
                    </x-slot:head>

                    @foreach ($invoices as $invoice)
                        <tr>
                            <td class="tabular text-xs font-medium">{{ $invoice->invoice_number }}</td>
                            <td class="text-xs">{{ $fmt->date($invoice->period_start) }} → {{ $fmt->date($invoice->period_end) }}</td>
                            <td class="num">{{ $fmt->money($invoice->total) }}</td>
                            <td class="num">{{ $fmt->money($invoice->paid_amount) }}</td>
                            <td><x-ui.badge :color="$invoice->status->color()">{{ $invoice->status->label() }}</x-ui.badge></td>
                            <td class="text-xs">
                                {{ $fmt->date($invoice->due_on) }}
                                @if ($invoice->isOverdue()) <x-ui.badge color="red">Overdue</x-ui.badge> @endif
                            </td>
                            <td class="text-right">
                                <a href="{{ route('invoices.pdf', $invoice) }}" target="_blank"
                                   class="rounded p-1.5 text-slate-400 hover:bg-slate-100 hover:text-brand dark:hover:bg-slate-800"
                                   title="Download PDF">
                                    <x-ui.icon name="download" class="h-4 w-4" />
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </x-ui.table>
            @endif
        </x-ui.card>
    @endif

    {{-- --------------------------------------------------------- payments --}}
    @if ($tab === 'payments')
        <x-ui.card :padded="false">
            @if ($payments->isEmpty())
                <x-ui.empty icon="exchange" title="No payments submitted" />
            @else
                <x-ui.table>
                    <x-slot:head>
                        <tr>
                            <th>Reference</th><th>Method</th><th class="num">Amount</th>
                            <th>Transaction ID</th><th>Status</th><th>Submitted</th>
                        </tr>
                    </x-slot:head>

                    @foreach ($payments as $payment)
                        <tr>
                            <td class="tabular text-xs">
                                <a href="{{ route('payments.queue', ['selectedId' => $payment->id, 'status' => 'all']) }}"
                                   class="font-medium text-brand hover:underline">{{ $payment->reference }}</a>
                            </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="tabular text-xs">{{ $payment->transaction_id ?: '—' }}</td>
                            <td><x-ui.badge :color="$payment->status->color()">{{ $payment->status->label() }}</x-ui.badge></td>
                            <td class="text-xs">{{ $fmt->dateTime($payment->created_at) }}</td>
                        </tr>
                    @endforeach
                </x-ui.table>
            @endif
        </x-ui.card>
    @endif

    {{-- --------------------------------------------------------- activity --}}
    @if ($tab === 'activity')
        <x-ui.card>
            @if ($activity->isEmpty())
                <x-ui.empty icon="clock" title="Nothing logged for this shop 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">{{ $entry->description }}</p>
                                <p class="text-xs text-slate-400">
                                    {{ $entry->event }} · {{ $fmt->dateTime($entry->created_at) }}
                                    @if ($entry->ip_address) · {{ $entry->ip_address }} @endif
                                </p>
                            </div>
                        </li>
                    @endforeach
                </ul>
            @endif
        </x-ui.card>
    @endif

    {{-- ------------------------------------------------------------ modals --}}
    @include('livewire.tenants.partials.actions')
</div>