@php
    $kindMeta = [
        'organisation' => ['label' => __('Organisations'), 'icon' => 'building-office'],
        'opportunity' => ['label' => __('Opportunities'), 'icon' => 'flag'],
    ];
    $kindNoun = $appliesTo === 'opportunity' ? __('open opportunities') : __('organisations');
    $metrics = [
        ['label' => __('Rules in use'), 'value' => number_format($stats['active']), 'icon' => 'star', 'accent' => '#6366f1',
            'sub' => $stats['off'] > 0 ? trans_choice(':n switched off|:n switched off', $stats['off'], ['n' => $stats['off']]) : __('All switched on')],
        ['label' => __('Scored'), 'value' => number_format($stats['scored']), 'icon' => 'check-circle', 'accent' => '#10b981',
            'sub' => __('of :n :what', ['n' => number_format($stats['records']), 'what' => $kindNoun])],
        ['label' => __('Highest score'), 'value' => $stats['highest'] === null ? __('Not scored') : number_format($stats['highest']), 'icon' => 'arrow-trending-up', 'accent' => '#0ea5e9',
            'sub' => __('Across :what', ['what' => $kindNoun])],
        ['label' => __('Lowest score'), 'value' => $stats['lowest'] === null ? __('Not scored') : number_format($stats['lowest']), 'icon' => 'arrow-trending-down', 'accent' => '#f59e0b',
            'sub' => __('Across :what', ['what' => $kindNoun])],
    ];
    $select = 'mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500';
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">
        @include('livewire.crm.settings.partials.nav', ['current' => 'crm.settings.scoring'])

        <x-page-header :title="__('Lead Scoring')">
            @if ($canManage)
                <x-secondary-button type="button" wire:click="recalculate" wire:loading.attr="disabled" wire:target="recalculate">
                    <x-icon name="arrow-path" class="mr-1.5 h-4 w-4" />
                    <span wire:loading.remove wire:target="recalculate">{{ __('Recalculate now') }}</span>
                    <span wire:loading wire:target="recalculate">{{ __('Recalculating…') }}</span>
                </x-secondary-button>
                <x-button type="button" wire:click="openCreate">
                    <x-icon name="plus" class="mr-1.5 h-4 w-4" /> {{ __('Add a rule') }}
                </x-button>
            @endif
        </x-page-header>

        <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 ($kindMeta as $key => $meta)
                <button type="button" wire:click="switchKind('{{ $key }}')"
                    class="flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition {{ $appliesTo === $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>

        <section class="grid grid-cols-2 gap-4 lg:grid-cols-4">
            @foreach ($metrics as $m)
                <x-card class="group relative flex 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" 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;">{{ $m['value'] }}</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>
            @endforeach
        </section>

        {{-- The rules --}}
        <x-card class="overflow-hidden">
            <div class="flex flex-col gap-1 border-b border-slate-100 p-4 sm:p-5">
                <h2 class="text-base font-semibold text-slate-900">{{ __('Rules for :what', ['what' => $kindMeta[$appliesTo]['label']]) }}</h2>
                <p class="text-xs text-slate-400">
                    @if ($appliesTo === 'opportunity')
                        {{ __('Only open opportunities are scored. A won, lost or deferred opportunity has no score.') }}
                    @else
                        {{ __('Every organisation is scored, whatever its lifecycle.') }}
                    @endif
                    {{ __('The reason is what appears in each record\'s breakdown, for example "+20 Tier 1 priority".') }}
                </p>
            </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">
                            @if ($canManage)
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Order') }}</th>
                            @endif
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Reason shown') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('When') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Points') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Status') }}</th>
                            @if ($canManage)
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($rules as $rule)
                            <tr wire:key="rule-{{ $rule->id }}" class="transition hover:bg-slate-50/70 {{ $rule->is_active ? '' : 'bg-slate-50/40' }}">
                                @if ($canManage)
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-sm text-slate-400">
                                        <div class="flex items-center gap-1">
                                            <button type="button" wire:click="move({{ $rule->id }}, -1)" @disabled($loop->first) class="rounded p-1 transition hover:bg-slate-100 hover:text-slate-700 disabled:opacity-30" title="{{ __('Move up') }}">
                                                <x-icon name="arrow-up" class="h-3.5 w-3.5" />
                                            </button>
                                            <button type="button" wire:click="move({{ $rule->id }}, 1)" @disabled($loop->last) class="rounded p-1 transition hover:bg-slate-100 hover:text-slate-700 disabled:opacity-30" title="{{ __('Move down') }}">
                                                <x-icon name="arrow-down" class="h-3.5 w-3.5" />
                                            </button>
                                        </div>
                                    </td>
                                @endif
                                <td class="px-3 lg:px-4 py-3 text-sm font-medium {{ $rule->is_active ? 'text-slate-900' : 'text-slate-400' }}">{{ $rule->label }}</td>
                                <td class="px-3 lg:px-4 py-3 text-sm text-slate-600">{{ $describe($rule) }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right text-sm font-semibold tabular-nums {{ $rule->points >= 0 ? 'text-emerald-700' : 'text-rose-700' }}">{{ $rule->points >= 0 ? '+' : '' }}{{ $rule->points }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-sm">
                                    @if ($rule->is_active)
                                        <x-badge color="emerald">{{ __('In use') }}</x-badge>
                                    @else
                                        <x-badge color="slate">{{ __('Switched off') }}</x-badge>
                                    @endif
                                </td>
                                @if ($canManage)
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right text-sm font-medium">
                                        <div class="flex items-center justify-end gap-3">
                                            <button type="button" wire:click="edit({{ $rule->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Edit') }}</button>
                                            <button type="button" wire:click="toggle({{ $rule->id }})" class="{{ $rule->is_active ? 'text-amber-600 hover:text-amber-800' : 'text-emerald-600 hover:text-emerald-800' }} transition">
                                                {{ $rule->is_active ? __('Switch off') : __('Switch on') }}
                                            </button>
                                            <button type="button" wire:click="remove({{ $rule->id }})" wire:confirm="{{ __('Remove this rule? Scores are recalculated without it.') }}" class="text-rose-600 transition hover:text-rose-800">{{ __('Remove') }}</button>
                                        </div>
                                    </td>
                                @endif
                            </tr>
                        @empty
                            <tr>
                                <td colspan="{{ $canManage ? 6 : 4 }}" class="px-6 py-10">
                                    <x-empty-state icon="star" :title="__('No rules yet')"
                                        :message="__('With no rules, :what are not scored at all. Nothing shows as zero.', ['what' => $kindNoun])" class="border-0 bg-transparent py-0" />
                                    @if ($canManage)
                                        <div class="mx-auto mt-6 max-w-2xl rounded-2xl border border-slate-200 bg-slate-50/60 p-4">
                                            <p class="text-sm font-semibold text-slate-800">{{ __('Start from suggested rules') }}</p>
                                            <p class="mt-0.5 text-xs text-slate-500">{{ __('A starting set you can change or remove afterwards. There is no sector rule: add the sectors that matter to you.') }}</p>
                                            <ul class="mt-3 grid grid-cols-1 gap-1 text-sm text-slate-600 sm:grid-cols-2">
                                                @foreach ($starter as $row)
                                                    <li class="flex items-center justify-between gap-3 rounded-lg bg-white px-3 py-1.5 ring-1 ring-slate-200/70">
                                                        <span>{{ __($row['label']) }}</span>
                                                        <span class="whitespace-nowrap font-semibold tabular-nums {{ $row['points'] >= 0 ? 'text-emerald-700' : 'text-rose-700' }}">{{ $row['points'] >= 0 ? '+' : '' }}{{ $row['points'] }}</span>
                                                    </li>
                                                @endforeach
                                            </ul>
                                            <div class="mt-4 flex justify-end">
                                                <x-button type="button" wire:click="addStarterRules" wire:loading.attr="disabled" wire:target="addStarterRules">
                                                    <span wire:loading.remove wire:target="addStarterRules">{{ __('Add these rules') }}</span>
                                                    <span wire:loading wire:target="addStarterRules">{{ __('Adding…') }}</span>
                                                </x-button>
                                            </div>
                                        </div>
                                    @endif
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </x-card>

        {{-- Any record's breakdown, rule by rule --}}
        <x-card class="overflow-hidden">
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-start sm:justify-between sm:p-5">
                <div>
                    <h2 class="text-base font-semibold text-slate-900">{{ __('See how a score is made') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('Pick a record to see every rule against it: what the rule asks, what the record holds, and the points it gets.') }}</p>
                </div>
                <div class="relative w-full sm:max-w-sm">
                    <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="previewSearch"
                        placeholder="{{ $appliesTo === 'opportunity' ? __('Find an open opportunity…') : __('Find an organisation…') }}"
                        aria-label="{{ __('Find a record') }}"
                        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" />
                    @if ($searchResults->isNotEmpty())
                        <ul class="absolute z-20 mt-1 max-h-72 w-full overflow-y-auto rounded-xl border border-slate-200 bg-white py-1 shadow-lg">
                            @foreach ($searchResults as $result)
                                <li wire:key="result-{{ $result['id'] }}">
                                    <button type="button" wire:click="preview({{ $result['id'] }})" class="flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm hover:bg-slate-50">
                                        <span>
                                            <span class="font-medium text-slate-900">{{ $result['name'] }}</span>
                                            @if ($result['sub'])
                                                <span class="block text-xs text-slate-400">{{ $result['sub'] }}</span>
                                            @endif
                                        </span>
                                        <span class="whitespace-nowrap text-xs tabular-nums text-slate-500">{{ $result['score'] === null ? __('Not scored') : __('Score :n', ['n' => $result['score']]) }}</span>
                                    </button>
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </div>
            </div>

            @if ($record && $explanation)
                <div class="flex flex-col gap-2 border-b border-slate-100 bg-slate-50/60 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-5">
                    <div>
                        <p class="text-sm font-semibold text-slate-900">{{ $record instanceof \App\Models\Opportunity ? $record->title : $record->name }}</p>
                        @if ($record instanceof \App\Models\Opportunity && $record->customer)
                            <p class="text-xs text-slate-500">{{ $record->customer->name }}</p>
                        @endif
                    </div>
                    <div class="flex items-center gap-3">
                        @if ($explanation['score'] === null)
                            <x-badge color="slate">{{ __('Not scored: no rules in use') }}</x-badge>
                        @else
                            <span class="text-sm text-slate-500">{{ __('Score') }}</span>
                            <span class="text-2xl font-bold tabular-nums text-indigo-700">{{ $explanation['score'] }}</span>
                        @endif
                        <button type="button" wire:click="clearPreview" class="text-xs font-medium text-slate-500 hover:text-slate-700">{{ __('Clear') }}</button>
                    </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">{{ __('Rule') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Asks') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('This record') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Met?') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Points given') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @foreach ($explanation['rules'] as $row)
                                <tr wire:key="explain-{{ $row['rule']->id }}" class="{{ $row['matched'] ? '' : 'text-slate-400' }}">
                                    <td class="px-3 lg:px-4 py-3 text-sm font-medium {{ $row['matched'] ? 'text-slate-900' : '' }}">{{ $row['rule']->label }}</td>
                                    <td class="px-3 lg:px-4 py-3 text-sm">{{ $row['condition'] }}</td>
                                    <td class="px-3 lg:px-4 py-3 text-sm">{{ $row['actual'] }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-sm">
                                        @if ($row['matched'])
                                            <x-badge color="emerald">{{ __('Yes') }}</x-badge>
                                        @else
                                            <x-badge color="slate">{{ __('No') }}</x-badge>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right text-sm font-semibold tabular-nums {{ ! $row['matched'] ? '' : ($row['points'] >= 0 ? 'text-emerald-700' : 'text-rose-700') }}">
                                        {{ $row['matched'] ? (($row['points'] >= 0 ? '+' : '').$row['points']) : '0' }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        @if ($explanation['score'] !== null)
                            <tfoot>
                                <tr class="bg-slate-50/80">
                                    <td colspan="4" class="px-3 lg:px-4 py-3 text-sm font-semibold text-slate-700">{{ __('Score: the sum of the points given') }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right text-sm font-bold tabular-nums text-indigo-700">{{ $explanation['score'] }}</td>
                                </tr>
                            </tfoot>
                        @endif
                    </table>
                </div>
            @else
                <div class="px-4 py-8 text-center text-sm text-slate-400 sm:px-5">{{ __('Search above to pick a record.') }}</div>
            @endif
        </x-card>

        {{-- What is and is not scored --}}
        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
            <x-card class="p-5">
                <h2 class="text-base font-semibold text-slate-900">{{ __('What a rule can look at') }}</h2>
                <dl class="mt-3 space-y-2 text-sm">
                    @foreach ($factors as $key => $factorLabel)
                        <div>
                            <dt class="font-medium text-slate-800">{{ __($factorLabel) }}</dt>
                            <dd class="text-slate-500">{{ __($factorHelp[$key] ?? '') }}</dd>
                        </div>
                    @endforeach
                </dl>
            </x-card>
            <x-card class="p-5">
                <h2 class="text-base font-semibold text-slate-900">{{ __('Not scored') }}</h2>
                <dl class="mt-3 space-y-3 text-sm">
                    <div>
                        <dt class="font-medium text-slate-800">{{ __('Organisation size') }}</dt>
                        <dd class="text-slate-500">{{ __('Not scored. No size is recorded on an organisation, so a rule could only guess at it. Sector, tier, lifecycle, engagement, budget and decision-maker are scored instead.') }}</dd>
                    </div>
                    <div>
                        <dt class="font-medium text-slate-800">{{ __('Email opens') }}</dt>
                        <dd class="text-slate-500">{{ __('Not scored. Opens are not tracked; replies and meetings are.') }}</dd>
                    </div>
                    <div>
                        <dt class="font-medium text-slate-800">{{ __('Hidden weighting or AI judgement') }}</dt>
                        <dd class="text-slate-500">{{ __('None. A score is only the sum of the rules above that the record meets, recalculated whenever the record changes and every night.') }}</dd>
                    </div>
                </dl>
            </x-card>
        </div>
    </div>

    @if ($canManage)
        <x-dialog-modal wire:model.live="showForm" maxWidth="2xl">
            <x-slot name="title">{{ $editingId ? __('Change a rule') : __('Add a rule for :what', ['what' => mb_strtolower($kindMeta[$appliesTo]['label'])]) }}</x-slot>
            <x-slot name="content">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div class="sm:col-span-2">
                        <x-label for="rule-label" value="{{ __('Reason shown in the breakdown') }}" />
                        <x-input id="rule-label" type="text" maxlength="120" class="mt-1 block w-full" wire:model="label" placeholder="{{ __('For example: priority sector') }}" />
                        <x-input-error for="label" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="rule-factor" value="{{ __('Looks at') }}" />
                        <select id="rule-factor" wire:model.live="factor" class="{{ $select }}">
                            <option value="">{{ __('Choose…') }}</option>
                            @foreach ($factors as $key => $factorLabel)
                                <option value="{{ $key }}">{{ __($factorLabel) }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="factor" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="rule-operator" value="{{ __('Compared as') }}" />
                        <select id="rule-operator" wire:model.live="operator" class="{{ $select }}" @disabled($factor === '')>
                            @foreach ($operators as $key => $operatorLabel)
                                <option value="{{ $key }}">{{ __($operatorLabel) }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="operator" class="mt-2" />
                    </div>

                    @if ($factor !== '')
                        <p class="text-xs text-slate-500 sm:col-span-2">{{ __($factorHelp[$factor] ?? '') }}</p>
                    @endif

                    @if (in_array($operator, ['in', 'not_in', 'equals'], true) && $choices !== null)
                        <div class="sm:col-span-2">
                            <x-label value="{{ $operator === 'equals' ? __('Value (choose one)') : __('Values') }}" />
                            <div class="mt-2 flex flex-wrap gap-2">
                                @foreach ($choices as $value => $choiceLabel)
                                    <label wire:key="choice-{{ $value }}" class="flex cursor-pointer items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-600 transition has-[:checked]:border-indigo-400 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-700">
                                        <input type="checkbox" value="{{ $value }}" wire:model="values" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                        {{ __($choiceLabel) }}
                                    </label>
                                @endforeach
                            </div>
                            <x-input-error for="values" class="mt-2" />
                        </div>
                    @elseif (in_array($operator, ['gte', 'lte', 'within_days', 'older_than_days'], true))
                        <div>
                            <x-label for="rule-number" value="{{ match (true) {
                                in_array($operator, ['within_days', 'older_than_days'], true) => __('Days'),
                                $factor === 'value' => __('Amount in the base currency'),
                                $factor === 'unanswered_emails' => __('Emails'),
                                default => __('Number'),
                            } }}" />
                            <x-input id="rule-number" type="number" min="0" step="{{ $factor === 'value' ? '0.01' : '1' }}" class="mt-1 block w-full tabular-nums" wire:model="number" />
                            <x-input-error for="number" class="mt-2" />
                        </div>
                    @endif

                    <div>
                        <x-label for="rule-points" value="{{ __('Points') }}" />
                        <x-input id="rule-points" type="number" min="-100" max="100" step="1" class="mt-1 block w-full tabular-nums" wire:model="points" placeholder="{{ __('20, or -10 to take away') }}" />
                        <x-input-error for="points" class="mt-2" />
                    </div>
                </div>
            </x-slot>
            <x-slot name="footer">
                <x-secondary-button wire:click="$set('showForm', false)" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
                <x-button class="ms-3" wire:click="save" wire:loading.attr="disabled" wire:target="save">
                    <span wire:loading.remove wire:target="save">{{ __('Save and rescore') }}</span>
                    <span wire:loading wire:target="save">{{ __('Saving…') }}</span>
                </x-button>
            </x-slot>
        </x-dialog-modal>
    @endif
</div>