@php
    $tz = config('app.display_timezone');
    $tabMeta = [
        'dormant' => ['label' => __('Due a dormant review'), 'icon' => 'arrow-trending-down', 'accent' => '#f59e0b', 'sub' => __('No order in :days days', ['days' => $dormantDays])],
        'reviews' => ['label' => __('Reviews due'), 'icon' => 'calendar-days', 'accent' => '#6366f1', 'sub' => __('Planned review date reached')],
        'strategic' => ['label' => __('Strategic accounts'), 'icon' => 'star', 'accent' => '#e11d48', 'sub' => __('Marked strategic')],
        'all' => ['label' => __('All customers'), 'icon' => 'building-office', 'accent' => '#0ea5e9', 'sub' => __('Active, dormant and partners')],
    ];
    $lifecycleColor = ['active' => 'emerald', 'dormant' => 'amber', 'partner' => 'violet'];
    $empty = [
        'dormant' => [__('Nobody has gone quiet'), __('Accounts with no order for :days days appear here for someone to review. Nothing changes on its own.', ['days' => $dormantDays])],
        'reviews' => [__('No reviews due'), __('When an account\'s next review date comes round, it appears here.')],
        'strategic' => [__('No strategic accounts yet'), __('Mark the accounts that matter most so they are reviewed on a plan.')],
        'all' => [__('No customers yet'), __('An organisation becomes a customer on its first invoice.')],
    ];
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">
        <x-page-header :title="__('Account Development')">
            @can('create', \App\Models\Opportunity::class)
                <a href="{{ route('crm.opportunities.create') }}" wire:navigate>
                    <x-secondary-button type="button">
                        <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                        {{ __('Repeat or cross-sell') }}
                    </x-secondary-button>
                </a>
            @endcan
        </x-page-header>

        {{-- At-risk accounts and reorders falling due (S18). Mounted once it is built. --}}
        @unless (\App\Livewire\Crm\Accounts\Signals::isComingSoon())
            <livewire:crm.accounts.signals />
        @endunless

        <section class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
            @foreach ($tabMeta as $key => $m)
                <button type="button" wire:click="switchTab('{{ $key }}')" class="text-left">
                    <x-card class="group relative flex h-full flex-col overflow-hidden p-5 ring-slate-200/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-300/40 {{ $tab === $key ? 'ring-2 ring-indigo-300' : '' }}">
                        <div class="flex items-start justify-between gap-2">
                            <p class="truncate text-[11px] font-semibold uppercase tracking-wider text-slate-400" title="{{ $m['label'] }}">{{ $m['label'] }}</p>
                            <span class="flex items-center justify-center rounded-xl text-white shadow-sm ring-1 ring-white/40" style="height: 2rem; width: 2rem; background: linear-gradient(135deg, {{ $m['accent'] }}, {{ $m['accent'] }}bb)">
                                <x-icon :name="$m['icon']" class="h-4 w-4" />
                            </span>
                        </div>
                        <p class="mt-3 font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 19px;">{{ number_format($counts[$key]) }}</p>
                        <span class="mt-2.5 inline-flex w-fit items-center gap-1 rounded-full bg-slate-100 px-2 py-1 text-[11px] font-semibold text-slate-500">{{ $m['sub'] }}</span>
                    </x-card>
                </button>
            @endforeach
            <a href="{{ route('crm.opportunities.index', ['view' => 'list']) }}" wire:navigate class="text-left">
                <x-card class="group relative flex h-full flex-col overflow-hidden p-5 ring-slate-200/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-300/40">
                    <div class="flex items-start justify-between gap-2">
                        <p class="truncate text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Growth in the pipeline') }}</p>
                        <span class="flex items-center justify-center rounded-xl text-white shadow-sm ring-1 ring-white/40" style="height: 2rem; width: 2rem; background: linear-gradient(135deg, #10b981, #10b981bb)">
                            <x-icon name="arrow-trending-up" class="h-4 w-4" />
                        </span>
                    </div>
                    <p class="mt-3 font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 19px;">{{ number_format($growth) }}</p>
                    <span class="mt-2.5 inline-flex w-fit items-center gap-1 rounded-full bg-slate-100 px-2 py-1 text-[11px] font-semibold text-slate-500">{{ __('Open repeat and cross-sell') }}</span>
                </x-card>
            </a>
        </section>

        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div class="flex flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium">
                @foreach ($tabMeta as $key => $meta)
                    <button type="button" wire:click="switchTab('{{ $key }}')"
                        class="flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition {{ $tab === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                        <x-icon :name="$meta['icon']" class="h-4 w-4" />
                        {{ $meta['label'] }}
                    </button>
                @endforeach
            </div>

            @if ($seesTeam)
                <div class="flex w-fit items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-xs font-medium">
                    <button type="button" wire:click="setScope('mine')" class="rounded-lg px-3 py-1.5 transition {{ $scope !== 'team' ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">{{ __('Mine') }}</button>
                    <button type="button" wire:click="setScope('team')" class="rounded-lg px-3 py-1.5 transition {{ $scope === 'team' ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">{{ __('Whole team') }}</button>
                </div>
            @endif
        </div>

        @if ($tab === 'dormant')
            <div class="flex items-start gap-3 rounded-2xl border border-amber-200 bg-amber-50/70 p-4 text-sm text-amber-900">
                <x-icon name="information-circle" class="mt-0.5 h-5 w-5 shrink-0 text-amber-600" />
                <p>{{ __('A prompt, not a status. These accounts have not ordered for :days days, so someone should look at them. Recording the review is what decides: still active, dormant, or a follow-up first. Until then nothing about the account changes.', ['days' => $dormantDays]) }}</p>
            </div>
        @endif

        <x-card class="overflow-hidden">
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5">
                <div>
                    <h2 class="text-base font-semibold text-slate-900">{{ $tabMeta[$tab]['label'] }}</h2>
                    <p class="text-xs text-slate-400">{{ $scope === 'team' ? __('Everyone\'s accounts') : __('Accounts you are the relationship owner of') }}</p>
                </div>
                <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
                    <div class="relative max-w-xs flex-1">
                        <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                            <x-icon name="magnifying-glass" class="h-5 w-5" />
                        </span>
                        <input type="text" wire:model.live.debounce.300ms="q" placeholder="{{ __('Search accounts…') }}"
                            class="block w-full rounded-xl border-slate-200 bg-slate-50 py-2.5 pl-10 pr-3 text-sm text-slate-900 shadow-sm transition placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:ring-indigo-500" />
                    </div>
                    <select wire:model.live="tier" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Any tier') }}</option>
                        @foreach (\App\Models\Customer::PRIORITY_TIERS as $value => $label)
                            <option value="{{ $value }}">{{ __($label) }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-100">
                    <thead>
                        <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Account') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Owner') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Last invoice') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Open opportunities') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Next review') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($accounts as $account)
                            @php
                                $lastOrder = $account->last_order_at ? \Illuminate\Support\Carbon::parse($account->last_order_at) : null;
                                $canEdit = \Illuminate\Support\Facades\Gate::allows('updateOrganisation', $account);
                            @endphp
                            <tr wire:key="account-{{ $account->id }}" class="transition hover:bg-slate-50/70">
                                <td class="px-3 lg:px-4 py-4 text-sm">
                                    <a href="{{ route('crm.organisations.show', $account) }}" wire:navigate class="font-medium text-slate-900 hover:text-indigo-600">{{ $account->name }}</a>
                                    <div class="mt-1 flex flex-wrap items-center gap-1">
                                        <x-badge :color="$lifecycleColor[$account->lifecycle] ?? 'slate'">{{ __(\App\Models\Customer::LIFECYCLES[$account->lifecycle] ?? $account->lifecycle) }}</x-badge>
                                        @if ($account->priority_tier)
                                            <x-badge color="slate">{{ __(\App\Models\Customer::PRIORITY_TIERS[$account->priority_tier] ?? '') }}</x-badge>
                                        @endif
                                        @if ($account->is_strategic)
                                            <x-badge color="rose">{{ __('Strategic') }}</x-badge>
                                        @endif
                                    </div>
                                </td>
                                <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">{{ $account->relationshipOwner?->name ?? __('Nobody yet') }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">
                                    @if ($lastOrder)
                                        {{ $lastOrder->copy()->timezone($tz)->format('j M Y') }}
                                        <span class="block text-xs {{ $lastOrder->diffInDays($today) >= $dormantDays ? 'font-medium text-amber-600' : 'text-slate-400' }}">{{ trans_choice('{0}today|{1}:count day ago|[2,*]:count days ago', (int) floor($lastOrder->diffInDays($today)), ['count' => (int) floor($lastOrder->diffInDays($today))]) }}</span>
                                    @else
                                        <span class="text-slate-400">{{ __('No invoice yet') }}</span>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm tabular-nums text-slate-700">{{ number_format((int) $account->open_opportunities_count) }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm {{ $account->next_review_on && $account->next_review_on->lte($today) ? 'font-semibold text-rose-600' : 'text-slate-500' }}">
                                    {{ $account->next_review_on?->format('j M Y') ?? __('Not planned') }}
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                    <div class="flex items-center justify-end gap-3">
                                        @if ($canEdit)
                                            <button type="button" wire:click="openReview({{ $account->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Record review') }}</button>
                                            <button type="button" wire:click="toggleStrategic({{ $account->id }})" class="text-slate-500 transition hover:text-slate-800">{{ $account->is_strategic ? __('Not strategic') : __('Mark strategic') }}</button>
                                        @else
                                            <a href="{{ route('crm.organisations.show', $account) }}" wire:navigate class="text-indigo-600 transition hover:text-indigo-800">{{ __('Open') }}</a>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-6 py-12">
                                    @if (trim($q) !== '' || $tier !== '')
                                        <x-empty-state icon="magnifying-glass" :title="__('No accounts match')" :message="__('Try another name, or any tier.')" class="border-0 bg-transparent py-0" />
                                    @else
                                        <x-empty-state :icon="$tabMeta[$tab]['icon']" :title="$empty[$tab][0]" :message="$empty[$tab][1]" class="border-0 bg-transparent py-0" />
                                    @endif
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if ($accounts->hasPages())
                <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                    {{ $accounts->links() }}
                </div>
            @endif
        </x-card>
    </div>

    <x-dialog-modal wire:model.live="showReview" maxWidth="2xl">
        <x-slot name="title">{{ $reviewing ? __('Review :name', ['name' => $reviewing->name]) : __('Account review') }}</x-slot>
        <x-slot name="content">
            @if ($reviewing)
                <div class="space-y-4">
                    @if ($reviewingIsDue)
                        <p class="rounded-xl bg-amber-50 px-3 py-2 text-xs text-amber-800">{{ __('No order in :days days. Look at the last conversations and open opportunities before deciding.', ['days' => $dormantDays]) }}</p>
                    @endif

                    <fieldset>
                        <legend class="text-sm font-medium text-slate-700">{{ __('What did you decide?') }}</legend>
                        <div class="mt-2 grid grid-cols-1 gap-2">
                            @foreach (\App\Services\Crm\Accounts\AccountReview::OUTCOMES as $value => $label)
                                <label class="flex cursor-pointer items-center gap-2 rounded-xl border border-slate-200 px-3 py-2 text-sm text-slate-700 has-[:checked]:border-indigo-400 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-700">
                                    <input type="radio" wire:model.live="review.outcome" value="{{ $value }}" class="border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                    {{ __($label) }}
                                </label>
                            @endforeach
                        </div>
                        <x-input-error for="review.outcome" class="mt-2" />
                    </fieldset>

                    <div>
                        <x-label for="review-note" value="{{ __('What you found') }}" />
                        <textarea id="review-note" rows="3" wire:model="review.note" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="{{ __('The last conversation, why they have not ordered, what we will do.') }}"></textarea>
                        <x-input-error for="review.note" class="mt-2" />
                    </div>

                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div>
                            <x-label for="review-next" value="{{ __('Review again on') }}" />
                            <x-input id="review-next" type="date" class="mt-1 block w-full" wire:model="review.next_review_on" />
                            <x-input-error for="review.next_review_on" class="mt-2" />
                        </div>
                    </div>

                    @if (($review['outcome'] ?? '') === 'follow_up')
                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <div>
                                <x-label for="review-action" value="{{ __('Follow-up') }}" />
                                <x-input id="review-action" type="text" class="mt-1 block w-full" wire:model="review.next_action" placeholder="{{ __('Call the buyer about next term\'s order') }}" />
                                <x-input-error for="review.next_action" class="mt-2" />
                            </div>
                            <div>
                                <x-label for="review-action-due" value="{{ __('Due') }}" />
                                <x-input id="review-action-due" type="date" class="mt-1 block w-full" wire:model="review.next_action_due" />
                                <x-input-error for="review.next_action_due" class="mt-2" />
                            </div>
                        </div>
                        <p class="text-xs text-slate-500">{{ __('The follow-up becomes a task for the relationship owner.') }}</p>
                    @endif

                    <p class="text-xs text-slate-400">{{ __('The review is logged on the organisation\'s activity. Choosing Dormant changes its lifecycle to Dormant; it stays a customer you can invoice.') }}</p>
                </div>
            @endif
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button type="button" wire:click="$set('showReview', false)">{{ __('Cancel') }}</x-secondary-button>
            <x-button type="button" wire:click="saveReview" wire:loading.attr="disabled" wire:target="saveReview">
                <span wire:loading.remove wire:target="saveReview">{{ __('Record review') }}</span>
                <span wire:loading wire:target="saveReview">{{ __('Saving…') }}</span>
            </x-button>
        </x-slot>
    </x-dialog-modal>
</div>