@php
    $tz = config('app.display_timezone');
    $today = now($tz)->startOfDay();
    $watchDays = \App\Services\Crm\Health\AccountHealth::CONTACT_WATCH_DAYS;
    $parts = \App\Services\Crm\Health\AccountHealth::PARTS;

    $initials = function (string $name): string {
        $words = array_values(array_filter(preg_split('/\s+/', trim($name)) ?: []));
        $letters = '';
        foreach (array_slice($words, 0, 2) as $word) {
            $letters .= mb_strtoupper(mb_substr($word, 0, 1));
        }

        return $letters !== '' ? $letters : '?';
    };

    $chips = ['bg-sky-100 text-sky-700', 'bg-violet-100 text-violet-700', 'bg-amber-100 text-amber-800', 'bg-emerald-100 text-emerald-700', 'bg-rose-100 text-rose-700', 'bg-indigo-100 text-indigo-700'];
    $chip = fn (string $name): string => $chips[abs(crc32($name)) % count($chips)];

    $cards = [
        'at_risk' => ['label' => __('At risk'), 'icon' => 'exclamation-triangle', 'hint' => __('Needs intervention'), 'wrap' => 'bg-rose-50 text-rose-600', 'border' => 'border-rose-300'],
        'watch' => ['label' => __('Watch'), 'icon' => 'eye', 'hint' => __('Monitor closely'), 'wrap' => 'bg-amber-50 text-amber-600', 'border' => 'border-amber-300'],
        'healthy' => ['label' => __('Healthy'), 'icon' => 'heart', 'hint' => __('Signals are positive'), 'wrap' => 'bg-emerald-50 text-emerald-600', 'border' => 'border-emerald-300'],
        'unknown' => ['label' => __('Insufficient history'), 'icon' => 'server-stack', 'hint' => __('More data needed'), 'wrap' => 'bg-slate-100 text-slate-500', 'border' => 'border-slate-300'],
    ];

    $pills = [
        '' => __('All accounts'),
        'at_risk' => __('At risk'),
        'watch' => __('Watch'),
        'healthy' => __('Healthy'),
        'unknown' => __('Insufficient history'),
    ];

    $contactOf = function ($account) use ($tz, $today, $watchDays): array {
        if (! $account->last_activity_at) {
            return ['tone' => 'bg-amber-400', 'label' => __('No contact logged'), 'date' => null];
        }

        $when = \Illuminate\Support\Carbon::parse($account->last_activity_at)->timezone($tz);
        $days = (int) $today->diffInDays($when->copy()->startOfDay(), true);
        $label = match (true) {
            $days === 0 => __('Today'),
            $days === 1 => __('Yesterday'),
            default => trans_choice('{1}:count day ago|[2,*]:count days ago', $days, ['count' => number_format($days)]),
        };

        return [
            'tone' => $days > $watchDays ? 'bg-amber-400' : 'bg-emerald-500',
            'label' => $label,
            'date' => $days > 1 ? $when->format('j M Y') : null,
        ];
    };
@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 Health')" :subtitle="__('Understand every client relationship. Know where to act next.')">
            <span class="inline-flex items-center gap-1.5 text-xs text-slate-500">
                <span class="h-2 w-2 rounded-full {{ $lastChecked ? 'bg-emerald-500' : 'bg-slate-300' }}"></span>
                @if ($lastChecked)
                    {{ __('Checked :when', ['when' => \Illuminate\Support\Carbon::parse($lastChecked, 'UTC')->timezone($tz)->format('j M Y, H:i')]) }}
                    <span class="text-slate-300" aria-hidden="true">&middot;</span>
                    {{ __('Updated daily') }}
                @else
                    {{ __('Not checked yet') }}
                @endif
            </span>
            <x-secondary-button type="button" wire:click="showRules">
                <x-icon name="information-circle" class="h-4 w-4" />
                {{ __('How health works') }}
            </x-secondary-button>
            @if ($canRefresh)
                <x-button type="button" wire:click="refreshChecks" wire:loading.attr="disabled" wire:target="refreshChecks">
                    <x-icon name="arrow-path" class="h-4 w-4" />
                    <span wire:loading.remove wire:target="refreshChecks">{{ __('Refresh checks') }}</span>
                    <span wire:loading wire:target="refreshChecks">{{ __('Checking…') }}</span>
                </x-button>
            @endif
        </x-page-header>

        <section class="grid grid-cols-2 gap-4 lg:grid-cols-4">
            @foreach ($cards as $key => $m)
                <button type="button" wire:click="filterLabel('{{ $label === $key ? '' : $key }}')" class="text-left">
                    <x-card class="flex h-full items-start gap-3 p-4 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-300/40 sm:p-5 {{ $label === $key ? 'border-2 '.$m['border'] : '' }}">
                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full {{ $m['wrap'] }}">
                            <x-icon :name="$m['icon']" class="h-5 w-5" />
                        </span>
                        <span class="min-w-0">
                            <span class="block truncate text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ $m['label'] }}</span>
                            <span class="mt-1 block font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 19px;">{{ number_format($counts[$key]) }}</span>
                            <span class="mt-1.5 block text-xs text-slate-500">{{ $m['hint'] }}</span>
                        </span>
                    </x-card>
                </button>
            @endforeach
        </section>

        @if ($counts['unknown'] > 0)
            <div class="flex flex-col gap-3 rounded-2xl border border-sky-100 bg-sky-50/80 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-5">
                <div class="flex items-start gap-3">
                    <span class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white text-sky-600 ring-1 ring-sky-100">
                        <x-icon name="information-circle" class="h-4 w-4" />
                    </span>
                    <div>
                        <p class="text-sm font-semibold text-slate-900">{{ trans_choice('{1}:count account needs more history|[2,*]:count accounts need more history', $counts['unknown'], ['count' => number_format($counts['unknown'])]) }}</p>
                        <p class="text-xs text-slate-500">{{ __('At least two measurable signals are needed before a health label is assigned.') }}</p>
                    </div>
                </div>
                <button type="button" wire:click="showRules" class="inline-flex shrink-0 items-center gap-1 text-sm font-semibold text-indigo-600 hover:text-indigo-800">
                    {{ __('View criteria') }}
                    <x-icon name="arrow-right" class="h-4 w-4" />
                </button>
            </div>
        @endif

        <x-card class="overflow-hidden">
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:p-5">
                <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                    <div>
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Accounts') }}</h2>
                        <p class="text-xs text-slate-400">{{ trans_choice('{0}:count organisations|{1}:count organisation|[2,*]:count organisations', $total, ['count' => number_format($total)]) }}</p>
                    </div>
                    <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
                        @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">
                                @foreach (['mine' => __('My accounts'), 'team' => __('Whole team')] as $key => $text)
                                    <button type="button" wire:click="setScope('{{ $key }}')"
                                        class="rounded-lg px-3 py-1.5 transition {{ $scope === $key ? 'bg-indigo-600 text-white shadow-sm' : 'text-slate-500 hover:text-slate-700' }}">{{ $text }}</button>
                                @endforeach
                            </div>
                        @endif
                        <div class="relative min-w-[12rem] 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-4 w-4" />
                            </span>
                            <input type="text" wire:model.live.debounce.300ms="q" placeholder="{{ __('Search organisations…') }}"
                                class="block w-full rounded-xl border-slate-200 bg-slate-50 py-2 pl-9 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>
                        @if ($seesTeam && $scope === 'team')
                            <select wire:model.live="owner" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <option value="" @selected($owner === '')>{{ __('All owners') }}</option>
                                @foreach ($owners as $person)
                                    <option value="{{ $person->id }}" @selected((string) $person->id === $owner)>{{ $person->name }}</option>
                                @endforeach
                            </select>
                        @endif
                    </div>
                </div>

                <div class="flex flex-wrap items-center gap-1.5">
                    @foreach ($pills as $key => $text)
                        @php $count = $key === '' ? $total : $counts[$key]; @endphp
                        <button type="button" wire:click="filterLabel('{{ $key }}')"
                            class="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold transition {{ $label === $key ? 'bg-indigo-600 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200' }}">
                            {{ $text }}
                            <span class="rounded-full px-1.5 py-0.5 text-[10px] tabular-nums {{ $label === $key ? 'bg-white/20 text-white' : 'bg-white text-slate-500' }}">{{ number_format($count) }}</span>
                        </button>
                    @endforeach
                </div>
            </div>

            <div class="divide-y divide-slate-100 md:hidden">
                @forelse ($accounts as $account)
                    @php
                        $contact = $contactOf($account);
                        $why = collect($account->health_signals ?? [])->reject(fn ($s) => ($s['status'] ?? '') === 'unknown')->pluck('label')->filter()->values();
                        $missing = $contact['label'] === __('No contact logged');
                    @endphp
                    <article wire:key="health-card-{{ $account->id }}" class="space-y-3 p-4">
                        <div class="flex items-start justify-between gap-3">
                            <a href="{{ route('crm.organisations.show', ['customer' => $account->id, 'tab' => 'health']) }}" wire:navigate class="flex min-w-0 items-center gap-3">
                                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-xs font-bold {{ $chip($account->name) }}">{{ $initials($account->name) }}</span>
                                <span class="min-w-0">
                                    <span class="block truncate text-sm font-semibold text-slate-900">{{ $account->name }}</span>
                                    <span class="block truncate text-xs text-slate-400">{{ $account->relationshipOwner?->name ?? __('No owner') }}@if ($account->is_strategic) &middot; {{ __('Strategic') }}@endif</span>
                                </span>
                            </a>
                            @if ($account->health_label)
                                <x-crm.signal kind="health" :value="$account->health_label" :reasons="$account->health_signals" />
                            @else
                                <span class="inline-flex items-center gap-1 rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-medium text-slate-600 ring-1 ring-inset ring-slate-200">
                                    <x-icon name="server-stack" class="h-3 w-3" />
                                    {{ $account->health_checked_at ? __('Insufficient history') : __('Not checked yet') }}
                                </span>
                            @endif
                        </div>
                        @if ($why->isNotEmpty())
                            <p class="text-xs leading-5 text-slate-500">{{ $why->first() }}</p>
                        @endif
                        <div class="flex items-center justify-between gap-3">
                            <span class="inline-flex items-center gap-2 text-xs text-slate-600">
                                <span class="h-2 w-2 rounded-full {{ $contact['tone'] }}"></span>
                                {{ $contact['label'] }}
                            </span>
                            @if ($missing && $canLog)
                                <button type="button" wire:click="$dispatch('crm-log-activity', { organisationId: {{ $account->id }} })" class="rounded-lg border border-sky-200 bg-sky-50 px-3 py-1.5 text-xs font-semibold text-sky-700">{{ __('Log contact') }}</button>
                            @else
                                <a href="{{ route('crm.organisations.show', ['customer' => $account->id, 'tab' => 'health']) }}" wire:navigate class="rounded-lg border border-slate-200 px-3 py-1.5 text-xs font-semibold text-slate-700">{{ __('View account') }}</a>
                            @endif
                        </div>
                    </article>
                @empty
                    <div class="px-6 py-12">
                        <x-empty-state icon="heart" :title="__('No accounts here')" :message="__('Clients appear once they have traded with us. The check runs every morning.')" class="border-0 bg-transparent py-0" />
                    </div>
                @endforelse
            </div>

            <div class="hidden overflow-x-auto md:block">
                <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 py-3.5 lg:px-4">{{ __('Organisation') }}</th>
                            <th class="px-3 py-3.5 lg:px-4">{{ __('Owner') }}</th>
                            <th class="px-3 py-3.5 lg:px-4">{{ __('Health') }}</th>
                            <th class="px-3 py-3.5 lg:px-4">{{ __('Latest contact') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Next action') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($accounts as $account)
                            @php
                                $contact = $contactOf($account);
                                $why = collect($account->health_signals ?? [])->reject(fn ($s) => ($s['status'] ?? '') === 'unknown')->pluck('label')->filter()->values();
                                $missing = $contact['label'] === __('No contact logged');
                                $ownerUser = $account->relationshipOwner;
                            @endphp
                            <tr wire:key="health-{{ $account->id }}" class="align-top transition hover:bg-slate-50/70">
                                <td class="px-3 py-4 text-sm lg:px-4">
                                    <a href="{{ route('crm.organisations.show', ['customer' => $account->id, 'tab' => 'health']) }}" wire:navigate class="flex items-center gap-3">
                                        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-xs font-bold {{ $chip($account->name) }}">{{ $initials($account->name) }}</span>
                                        <span class="min-w-0">
                                            <span class="block font-medium text-slate-900 hover:text-indigo-600">{{ $account->name }}</span>
                                            @if ($account->is_strategic)
                                                <span class="text-xs text-slate-400">{{ __('Strategic') }}</span>
                                            @endif
                                        </span>
                                    </a>
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm lg:px-4">
                                    @if ($ownerUser)
                                        <span class="inline-flex items-center gap-2 text-slate-700">
                                            <img src="{{ $ownerUser->profile_photo_url }}" alt="" class="h-7 w-7 rounded-full object-cover ring-1 ring-slate-200" />
                                            {{ $ownerUser->name }}
                                        </span>
                                    @else
                                        <span class="text-slate-400">{{ __('No owner') }}</span>
                                    @endif
                                </td>
                                <td class="px-3 py-4 text-sm lg:px-4">
                                    @if ($account->health_label)
                                        <x-crm.signal kind="health" :value="$account->health_label" :reasons="$account->health_signals" />
                                        @if ($why->isNotEmpty())
                                            <p class="mt-1 max-w-xs text-xs leading-5 text-slate-500">{{ $why->first() }}</p>
                                        @endif
                                    @else
                                        <span class="inline-flex items-center gap-1.5 rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-600 ring-1 ring-inset ring-slate-200">
                                            <x-icon name="server-stack" class="h-3.5 w-3.5 text-slate-400" />
                                            {{ $account->health_checked_at ? __('Insufficient history') : __('Not checked yet') }}
                                        </span>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm lg:px-4">
                                    <span class="inline-flex items-start gap-2 text-slate-700">
                                        <span class="mt-1.5 h-2 w-2 shrink-0 rounded-full {{ $contact['tone'] }}"></span>
                                        <span>
                                            <span class="block">{{ $contact['label'] }}</span>
                                            @if ($contact['date'])
                                                <span class="block text-xs text-slate-400">{{ $contact['date'] }}</span>
                                            @endif
                                        </span>
                                    </span>
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-right text-sm lg:px-4">
                                    <span class="inline-flex items-center justify-end gap-2">
                                        @if ($missing && $canLog)
                                            <button type="button" wire:click="$dispatch('crm-log-activity', { organisationId: {{ $account->id }} })" class="rounded-lg border border-sky-200 bg-sky-50 px-3 py-1.5 text-xs font-semibold text-sky-700 transition hover:bg-sky-100">{{ __('Log contact') }}</button>
                                        @else
                                            <a href="{{ route('crm.organisations.show', ['customer' => $account->id, 'tab' => 'health']) }}" wire:navigate class="rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700 transition hover:bg-slate-50">{{ __('View account') }}</a>
                                        @endif
                                        <a href="{{ route('crm.organisations.show', ['customer' => $account->id, 'tab' => 'health']) }}" wire:navigate class="text-slate-300 hover:text-slate-500" aria-label="{{ __('Open :name', ['name' => $account->name]) }}">
                                            <x-icon name="chevron-right" class="h-4 w-4" />
                                        </a>
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-6 py-12">
                                    <x-empty-state icon="heart" :title="__('No accounts here')" :message="__('Clients appear once they have traded with us. The check runs every morning.')" class="border-0 bg-transparent py-0" />
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="flex flex-col gap-2 border-t border-slate-100 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-6">
                <p class="text-xs text-slate-400">
                    @if ($accounts->total() === 0)
                        {{ __('Showing 0 accounts') }}
                    @else
                        {{ __('Showing :from–:to of :total', ['from' => number_format($accounts->firstItem()), 'to' => number_format($accounts->lastItem()), 'total' => number_format($accounts->total())]) }}
                    @endif
                </p>
                <p class="inline-flex items-center gap-3 text-[11px] text-slate-400">
                    <span class="inline-flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-amber-400"></span>{{ __('Contact missing') }}</span>
                    <span class="inline-flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-emerald-500"></span>{{ __('Contact recorded') }}</span>
                </p>
            </div>
            @if ($accounts->hasPages())
                <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                    {{ $accounts->links() }}
                </div>
            @endif
        </x-card>

        <section class="grid grid-cols-1 gap-4 lg:grid-cols-2">
            <x-card class="p-5">
                <h2 class="text-sm font-semibold text-slate-900">{{ __('Build a clearer picture') }}</h2>
                <div class="mt-4 space-y-3">
                    @if ($noContact > 0)
                        <div class="flex items-start justify-between gap-3 rounded-xl border border-slate-100 bg-slate-50/60 p-3">
                            <div class="flex items-start gap-3">
                                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-amber-50 text-amber-600">
                                    <x-icon name="user-group" class="h-4 w-4" />
                                </span>
                                <div>
                                    <p class="text-sm font-medium text-slate-800">{{ trans_choice('{1}:count account has no logged contact|[2,*]:count accounts have no logged contact', $noContact, ['count' => number_format($noContact)]) }}</p>
                                    <p class="text-xs text-slate-500">{{ __('Recent contact helps us identify changes in activity early.') }}</p>
                                </div>
                            </div>
                            @if ($canLog)
                                <button type="button" wire:click="$dispatch('crm-log-activity')" class="shrink-0 text-xs font-semibold text-indigo-600 hover:text-indigo-800">{{ __('Log an interaction') }}</button>
                            @endif
                        </div>
                    @endif
                    @if ($counts['unknown'] > 0)
                        <div class="flex items-start justify-between gap-3 rounded-xl border border-slate-100 bg-slate-50/60 p-3">
                            <div class="flex items-start gap-3">
                                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-slate-100 text-slate-500">
                                    <x-icon name="server-stack" class="h-4 w-4" />
                                </span>
                                <div>
                                    <p class="text-sm font-medium text-slate-800">{{ trans_choice('{1}:count account needs more measurable history|[2,*]:count accounts need more measurable history', $counts['unknown'], ['count' => number_format($counts['unknown'])]) }}</p>
                                    <p class="text-xs text-slate-500">{{ __('At least two measurable signals are needed before a health label is assigned.') }}</p>
                                </div>
                            </div>
                            <button type="button" wire:click="filterLabel('unknown')" class="shrink-0 text-xs font-semibold text-indigo-600 hover:text-indigo-800">{{ __('Review records') }}</button>
                        </div>
                    @endif
                    @if ($noContact === 0 && $counts['unknown'] === 0)
                        <p class="text-sm text-slate-500">{{ __('Every account in this view has a contact on file and enough history for a label.') }}</p>
                    @endif
                </div>
            </x-card>

            <x-card class="p-5" id="how-health">
                <h2 class="text-sm font-semibold text-slate-900">{{ __('Health signals') }}</h2>
                <div class="mt-4 grid grid-cols-3 gap-3 sm:grid-cols-6">
                    @foreach ($parts as $part)
                        <div class="flex flex-col items-center gap-1.5 text-center">
                            <span class="flex h-10 w-10 items-center justify-center rounded-full bg-slate-50 text-slate-500 ring-1 ring-slate-100">
                                <x-icon :name="$part['icon']" class="h-4 w-4" />
                            </span>
                            <span class="text-[11px] font-medium text-slate-600">{{ __($part['label']) }}</span>
                        </div>
                    @endforeach
                </div>
                <p class="mt-4 text-xs text-slate-500">{{ __('Each signal includes a reason. Missing data is left out.') }}</p>

                <details class="mt-3 border-t border-slate-100 pt-3" @if($explain) open @endif>
                    <summary class="cursor-pointer text-sm font-medium text-slate-700">{{ __('How the label is decided') }}</summary>
                    <ul class="mt-3 grid gap-1.5 text-xs text-slate-600 sm:grid-cols-2">
                        @foreach (\App\Services\Crm\Health\AccountHealth::RULES as $rule)
                            <li class="rounded-lg bg-slate-50 px-3 py-2">{{ __($rule) }}</li>
                        @endforeach
                    </ul>
                    <p class="mt-2 text-xs text-slate-400">
                        {{ __('Ordering is late past their usual gap and at risk past 1.5 times it. Paying is at risk with anything overdue by more than :days days. Feedback is at risk at 2.5 out of 5 or less. Spend is at risk when down by half on the year before. Contact alone never makes an account at risk. A part with nothing to go on is left out.', ['days' => \App\Services\Crm\Health\AccountHealth::LONG_OVERDUE_DAYS]) }}
                    </p>
                </details>
            </x-card>
        </section>

        @if ($rulesTick > 0)
            <div wire:key="rules-scroll-{{ $rulesTick }}" x-data x-init="$nextTick(() => document.getElementById('how-health')?.scrollIntoView({ behavior: 'smooth', block: 'start' }))"></div>
        @endif
    </div>

    @if ($canLog)
        <livewire:crm.communications.log-activity />
    @endif
</div>