@php
    $lifecycleColours = ['prospect' => 'indigo', 'active' => 'emerald', 'dormant' => 'amber', 'partner' => 'cyan', 'do_not_contact' => 'rose'];
    $activeCard = match (true) {
        $lifecycle === 'prospect' => 'prospects',
        $lifecycle === 'customers' => 'customers',
        $strategic => 'strategic',
        $owner === 'unowned' => 'unowned',
        ! $filtersActive => 'all',
        default => null,
    };
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">
        @if ($showLegacyTabs)
            <x-crm-tabs />
        @endif

        <x-page-header :title="__('Organisations')">
            @if (\App\Support\CrmPilot::allows(Auth::user()))
                <a href="{{ route('crm.contacts.index') }}" wire:navigate>
                    <x-secondary-button type="button"><x-icon name="users" class="mr-1.5 h-4 w-4" /> {{ __('Contacts') }}</x-secondary-button>
                </a>
            @endif
            @if ($canCreate)
                <a href="{{ route('crm.organisations.create') }}" wire:navigate>
                    <x-button type="button"><x-icon name="plus" class="mr-1.5 h-4 w-4" /> {{ __('New organisation') }}</x-button>
                </a>
            @endif
        </x-page-header>

        <section class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
            @foreach ($kpis as $m)
                <button type="button" wire:click="showOnly('{{ $m['key'] }}')" class="text-left">
                    <x-card class="group relative flex h-full flex-col overflow-hidden p-5 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-300/40 {{ $activeCard === $m['key'] ? 'ring-2 ring-indigo-300' : 'ring-slate-200/70' }}">
                        <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($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>
                </button>
            @endforeach
        </section>

        <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">{{ __('All organisations') }}</h2>
                        <p class="text-xs text-slate-400">{{ trans_choice('{0}No matches|{1}:count organisation|[2,*]:count organisations', $organisations->total(), ['count' => number_format($organisations->total())]) }}</p>
                    </div>
                    <div class="relative w-full lg:max-w-xs">
                        <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="search"
                               placeholder="{{ __('Name, email, phone, website or contact…') }}"
                               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>
                </div>
                <div class="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-6">
                    <select wire:model.live="lifecycle" aria-label="{{ __('Lifecycle') }}" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Every lifecycle') }}</option>
                        <option value="customers">{{ __('Customers (not prospects)') }}</option>
                        @foreach (\App\Models\Customer::LIFECYCLES as $key => $label)
                            <option value="{{ $key }}">{{ __($label) }}</option>
                        @endforeach
                    </select>
                    <select wire:model.live="sector" aria-label="{{ __('Sector') }}" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Every sector') }}</option>
                        @foreach ($sectors as $key => $label)
                            <option value="{{ $key }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    <select wire:model.live="tier" aria-label="{{ __('Tier') }}" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Every tier') }}</option>
                        @foreach (\App\Models\Customer::PRIORITY_TIERS as $key => $label)
                            <option value="{{ $key }}">{{ __($label) }}</option>
                        @endforeach
                    </select>
                    <select wire:model.live="owner" aria-label="{{ __('Owner') }}" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Any owner') }}</option>
                        <option value="mine">{{ __('Mine') }}</option>
                        <option value="unowned">{{ __('No owner') }}</option>
                        @foreach ($members as $id => $name)
                            <option value="{{ $id }}">{{ $name }}</option>
                        @endforeach
                    </select>
                    <select wire:model.live="sort" aria-label="{{ __('Sort') }}" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="name">{{ __('Name A to Z') }}</option>
                        <option value="activity">{{ __('Latest activity') }}</option>
                        <option value="recent">{{ __('Newest first') }}</option>
                        <option value="tier">{{ __('Tier 1 first') }}</option>
                        <option value="score">{{ __('Lead score, highest first') }}</option>
                    </select>
                    @if ($filtersActive)
                        <x-secondary-button type="button" wire:click="clearFilters" class="justify-center">{{ __('Clear filters') }}</x-secondary-button>
                    @endif
                </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 py-3.5 lg:px-4">{{ __('Organisation') }}</th>
                            <th class="px-3 py-3.5 lg:px-4">{{ __('Lifecycle') }}</th>
                            <th class="px-3 py-3.5 lg:px-4">{{ __('Owner') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Contacts') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Open opportunities') }}</th>
                            <th class="px-3 py-3.5 lg:px-4">{{ __('Last activity') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($organisations as $organisation)
                            <tr wire:key="organisation-{{ $organisation->id }}" class="transition hover:bg-slate-50/70">
                                <td class="px-3 py-4 text-sm lg:px-4">
                                    <a href="{{ route('crm.organisations.show', $organisation) }}" wire:navigate class="font-medium text-slate-900 hover:text-indigo-600">{{ $organisation->name }}</a>
                                    @if ($organisation->is_strategic)
                                        <x-icon name="star" class="ml-1 h-3.5 w-3.5 text-amber-500" title="{{ __('Strategic account') }}" />
                                    @endif
                                    <p class="text-xs text-slate-400">
                                        {{ collect([
                                            $organisation->sector ? ($sectors[$organisation->sector] ?? $organisation->sector) : null,
                                            $organisation->priority_tier ? __(\App\Models\Customer::PRIORITY_TIERS[$organisation->priority_tier] ?? '') : null,
                                            $organisation->website,
                                        ])->filter()->implode(' · ') }}
                                    </p>
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm lg:px-4">
                                    <x-badge :color="$lifecycleColours[$organisation->lifecycle] ?? 'slate'">{{ __(\App\Models\Customer::LIFECYCLES[$organisation->lifecycle] ?? $organisation->lifecycle) }}</x-badge>
                                    {{-- Wave 4 signals: nothing shows until scored or checked. --}}
                                    @if ($organisation->health_label !== null || $organisation->lead_score !== null)
                                        <div class="mt-1 flex flex-wrap gap-1">
                                            <x-crm.signal kind="health" :value="$organisation->health_label" :reasons="$organisation->health_signals" />
                                            <x-crm.signal kind="score" :value="$organisation->lead_score" :reasons="$organisation->lead_score_breakdown" />
                                        </div>
                                    @endif
                                </td>
                                <td class="px-3 py-4 text-sm lg:px-4">
                                    @if ($organisation->relationshipOwner)
                                        <span class="text-slate-700">{{ $organisation->relationshipOwner->name }}</span>
                                    @else
                                        <span class="font-medium text-amber-700">{{ __('No owner') }}</span>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-right text-sm tabular-nums text-slate-700 lg:px-4">{{ number_format($organisation->contacts_count) }}</td>
                                <td class="whitespace-nowrap px-3 py-4 text-right text-sm tabular-nums text-slate-700 lg:px-4">{{ number_format((int) $organisation->open_opportunities_count) }}</td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm text-slate-500 lg:px-4">
                                    {{ $organisation->last_activity_at ? \Illuminate\Support\Carbon::parse($organisation->last_activity_at)->timezone(config('app.display_timezone'))->format('j M Y') : __('None logged') }}
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-medium lg:px-4">
                                    <div class="flex items-center justify-end gap-3">
                                        <a href="{{ route('crm.organisations.show', $organisation) }}" wire:navigate class="text-indigo-600 transition hover:text-indigo-800">{{ __('Open') }}</a>
                                        @can('updateOrganisation', $organisation)
                                            <a href="{{ route('crm.organisations.edit', $organisation) }}" wire:navigate class="text-slate-500 transition hover:text-slate-800">{{ __('Edit') }}</a>
                                        @endcan
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-6 py-12">
                                    @if ($filtersActive)
                                        <x-empty-state icon="magnifying-glass" :title="__('No organisation matches')"
                                            :message="__('Try fewer filters, or clear them to see every organisation.')"
                                            class="border-0 bg-transparent py-0" />
                                    @else
                                        <x-empty-state icon="building-office" :title="__('No organisations yet')"
                                            :message="__('Add the organisations you sell to or hope to, and say who owns each relationship.')"
                                            class="border-0 bg-transparent py-0" />
                                    @endif
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="flex flex-col gap-3 border-t border-slate-100 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-6">
                <div class="flex flex-wrap items-center gap-2 text-sm text-slate-500">
                    <span>{{ __('Rows per page') }}</span>
                    <select wire:model.live="perPage" aria-label="{{ __('Rows per page') }}" class="rounded-lg border-slate-300 py-1 pl-2 pr-7 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                    @unless ($organisations->hasPages())
                        <span class="text-xs text-slate-400">{{ trans_choice('{0}Nothing to show|{1}Showing the only organisation|[2,*]Showing all :count organisations', $organisations->total(), ['count' => number_format($organisations->total())]) }}</span>
                    @endunless
                </div>
                <div>
                    {{ $organisations->onEachSide(1)->links() }}
                </div>
            </div>
        </x-card>
    </div>
</div>