@php
    $stageTone = [
        'prospect' => ['bar' => 'border-t-sky-400', 'badge' => 'sky'],
        'contacted' => ['bar' => 'border-t-cyan-400', 'badge' => 'cyan'],
        'meeting' => ['bar' => 'border-t-indigo-400', 'badge' => 'indigo'],
        'requirement' => ['bar' => 'border-t-violet-400', 'badge' => 'violet'],
        'qualified' => ['bar' => 'border-t-fuchsia-400', 'badge' => 'fuchsia'],
        'proposal' => ['bar' => 'border-t-amber-400', 'badge' => 'amber'],
        'negotiation' => ['bar' => 'border-t-orange-400', 'badge' => 'orange'],
        'won' => ['bar' => 'border-t-emerald-400', 'badge' => 'emerald'],
        'lost' => ['bar' => 'border-t-rose-400', 'badge' => 'rose'],
        'deferred' => ['bar' => 'border-t-slate-400', 'badge' => 'slate'],
    ];

    $viewMeta = [
        'board' => ['label' => __('Board'), 'icon' => 'squares-2x2'],
        'list' => ['label' => __('List'), 'icon' => 'queue-list'],
    ];

    $money = fn (array $totals): string => $totals['by_currency'] === [] && $totals['not_estimated'] > 0
        ? __('Not estimated')
        : $baseCode.' '.number_format($totals['base'], 2);

    $select = '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-[100rem] space-y-6">

        <x-page-header :title="__('Opportunities')">
            <div class="flex items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium">
                @foreach ($viewMeta as $key => $meta)
                    <button type="button" wire:click="switchView('{{ $key }}')"
                        class="flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition {{ $view === $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 ($canCreate)
                <a href="{{ route('crm.opportunities.create') }}" wire:navigate>
                    <x-button type="button">
                        <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                        {{ __('New opportunity') }}
                    </x-button>
                </a>
            @endif
        </x-page-header>

        {{-- KPI cards: each opens the matching list. --}}
        <section class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
            @foreach ($cards as $key => $m)
                <button type="button" wire:click="applyCard('{{ $m['card'] }}')" class="text-left" wire:key="card-{{ $key }}">
                    <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" 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>
                </button>
            @endforeach
        </section>

        @include('livewire.crm.opportunities.partials.filters')

        @if ($view === 'board')
            {{-- Board --}}
            <div class="overflow-x-auto pb-4" x-data="{ dragId: null, over: null }">
                <div class="flex gap-4" style="min-width: max-content;">
                    @foreach ($columns as $key => $column)
                        <div wire:key="col-{{ $key }}" class="flex w-72 shrink-0 flex-col rounded-2xl bg-slate-100/70 p-2 transition"
                            :class="over === '{{ $key }}' && dragId ? 'ring-2 ring-indigo-400 ring-inset bg-indigo-50/60' : ''"
                            @dragover.prevent="over = '{{ $key }}'"
                            @dragleave="if (over === '{{ $key }}') over = null"
                            @drop.prevent="if (dragId) { $wire.requestStage(dragId, '{{ $key }}'); dragId = null } over = null">
                            <div class="rounded-xl border-t-4 {{ $stageTone[$key]['bar'] }} bg-white px-3 py-2.5 shadow-sm ring-1 ring-slate-100">
                                <div class="flex items-center justify-between gap-2">
                                    <span class="text-sm font-semibold text-slate-800">{{ $column['label'] }}</span>
                                    <span class="rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-bold text-slate-500">{{ $column['count'] }}</span>
                                </div>
                                <p class="mt-0.5 text-[11px] tabular-nums text-slate-500">{{ $money($column['totals']) }}</p>
                                @if (count($column['totals']['by_currency']) > 1)
                                    <p class="text-[11px] tabular-nums text-slate-400">
                                        {{ collect($column['totals']['by_currency'])->map(fn ($v, $c) => $c.' '.number_format($v, 2))->implode(' · ') }}
                                    </p>
                                @endif
                                @if ($column['totals']['not_estimated'] > 0 && $column['totals']['by_currency'] !== [])
                                    <p class="text-[11px] text-slate-400">{{ trans_choice(':n not estimated|:n not estimated', $column['totals']['not_estimated'], ['n' => $column['totals']['not_estimated']]) }}</p>
                                @endif
                            </div>

                            <div class="mt-2 space-y-2">
                                @forelse ($column['items'] as $opp)
                                    @php
                                        $editable = $canEdit($opp);
                                        $overdue = $opp->next_action_due && $opp->next_action_due->lt($today) && $opp->isOpen();
                                    @endphp
                                    <div wire:key="opp-{{ $opp->id }}"
                                        @if ($editable) draggable="true" @dragstart="dragId = {{ $opp->id }}" @dragend="dragId = null" @endif
                                        class="rounded-xl border border-slate-200 bg-white p-3 shadow-sm transition hover:border-indigo-200 hover:shadow-md {{ $editable ? 'cursor-grab active:cursor-grabbing' : '' }}"
                                        :class="dragId === {{ $opp->id }} ? 'opacity-50 rotate-1' : ''">
                                        <a href="{{ route('crm.opportunities.show', $opp->id) }}" wire:navigate class="block text-sm font-semibold text-slate-900 hover:text-indigo-600">{{ $opp->title }}</a>
                                        <p class="mt-0.5 truncate text-xs text-slate-500">
                                            {{ $opp->customer?->name ?? __('No organisation') }}
                                            @if ($opp->customer?->lifecycle === 'prospect')
                                                <span class="text-sky-600">· {{ __('Prospect') }}</span>
                                            @endif
                                        </p>
                                        @if ($opp->isOpen() && $opp->accepted_at !== null)
                                            <p class="mt-1.5"><x-badge color="amber">{{ __('Accepted, awaiting confirmation') }}</x-badge></p>
                                        @endif
                                        <div class="mt-2 flex items-center justify-between gap-2">
                                            <span class="text-sm font-semibold tabular-nums text-slate-800">
                                                @if ($opp->estimated_value === null)
                                                    <span class="text-xs font-medium text-slate-400">{{ __('Not estimated') }}</span>
                                                @else
                                                    {{ $opp->currency_code }} {{ number_format((float) $opp->estimated_value, 2) }}
                                                @endif
                                            </span>
                                            <span class="truncate text-[11px] font-medium text-slate-500">{{ $opp->owner?->name ?? __('No owner') }}</span>
                                        </div>
                                        @if ($opp->isOpen())
                                            <p class="mt-2 text-[11px] {{ $overdue ? 'font-semibold text-rose-600' : 'text-slate-500' }}">
                                                <x-icon name="clock" class="me-0.5 inline h-3 w-3" />
                                                {{ $opp->next_action ?: __('No next action') }}
                                                @if ($opp->next_action_due)
                                                    · {{ $opp->next_action_due->format('j M') }}
                                                @endif
                                            </p>
                                        @elseif ($opp->reason)
                                            <p class="mt-2 text-[11px] italic text-slate-500">{{ \Illuminate\Support\Str::limit($opp->reason_note ?: str_replace('_', ' ', $opp->reason), 60) }}</p>
                                        @endif
                                        @if ($editable)
                                            {{-- Keyed on the stage and the dialog, so a cancelled move redraws the old stage. --}}
                                            <select wire:key="pick-board-{{ $opp->id }}-{{ $opp->stage }}-{{ $showStageDialog ? 'open' : 'shut' }}"
                                                class="mt-2 block w-full rounded-lg border-slate-200 bg-slate-50 py-1 text-xs text-slate-700 focus:border-indigo-500 focus:ring-indigo-500"
                                                aria-label="{{ __('Change stage') }}"
                                                wire:change="requestStage({{ $opp->id }}, $event.target.value)">
                                                @foreach (\App\Models\Opportunity::STAGES as $sKey => $sLabel)
                                                    @continue($sKey === 'won' && $opp->stage !== 'won')
                                                    <option value="{{ $sKey }}" @selected($opp->stage === $sKey)>{{ $sLabel }}</option>
                                                @endforeach
                                            </select>
                                        @endif
                                    </div>
                                @empty
                                    <div class="rounded-xl border border-dashed border-slate-200 px-3 py-6 text-center text-xs text-slate-400">
                                        {{ __('Nothing at this stage') }}
                                    </div>
                                @endforelse
                                @if ($column['count'] > $column['items']->count())
                                    <a href="{{ route('crm.opportunities.index', ['view' => 'list', 'stage' => $key]) }}" wire:navigate class="block px-1 text-xs font-semibold text-indigo-600 hover:text-indigo-800">
                                        {{ __('And :n more in the list', ['n' => $column['count'] - $column['items']->count()]) }}
                                    </a>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @else
            {{-- List --}}
            <x-card class="overflow-hidden">
                <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">{{ __('Opportunity') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Stage') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Owner') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Estimated value') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Next action') }}</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">
                            @php $lastGroup = null; @endphp
                            @forelse ($rows as $opp)
                                @php
                                    $groupKey = match ($group) {
                                        'stage' => \App\Models\Opportunity::STAGES[$opp->stage] ?? $opp->stage,
                                        'owner' => $opp->owner?->name ?? __('No owner'),
                                        'organisation' => $opp->customer?->name ?? __('No organisation'),
                                        default => null,
                                    };
                                    $editable = $canEdit($opp);
                                    $overdue = $opp->next_action_due && $opp->next_action_due->lt($today) && $opp->isOpen();
                                @endphp
                                @if ($groupKey !== null && $groupKey !== $lastGroup)
                                    <tr wire:key="group-{{ md5($groupKey) }}-{{ $opp->id }}" class="bg-slate-50/60">
                                        <td colspan="6" class="px-3 lg:px-4 py-2 text-xs font-semibold uppercase tracking-wider text-slate-500">{{ $groupKey }}</td>
                                    </tr>
                                    @php $lastGroup = $groupKey; @endphp
                                @endif
                                <tr wire:key="row-{{ $opp->id }}" class="transition hover:bg-slate-50/70">
                                    <td class="px-3 lg:px-4 py-4 text-sm">
                                        <a href="{{ route('crm.opportunities.show', $opp->id) }}" wire:navigate class="font-medium text-slate-900 hover:text-indigo-600">{{ $opp->title }}</a>
                                        <p class="text-xs text-slate-500">
                                            {{ $opp->customer?->name ?? __('No organisation') }}
                                            · {{ $types[$opp->type] ?? $opp->type }}
                                        </p>
                                        @if ($opp->isOpen() && $opp->accepted_at !== null)
                                            <p class="mt-1"><x-badge color="amber">{{ __('Accepted, awaiting confirmation') }}</x-badge></p>
                                        @endif
                                        {{-- Wave 4 lead score: nothing shows until scored. --}}
                                        @if ($opp->lead_score !== null)
                                            <p class="mt-1"><x-crm.signal kind="score" :value="$opp->lead_score" :reasons="$opp->lead_score_breakdown" /></p>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                        <x-badge :color="$stageTone[$opp->stage]['badge'] ?? 'slate'">{{ \App\Models\Opportunity::STAGES[$opp->stage] ?? $opp->stage }}</x-badge>
                                        @if ($opp->stage_entered_at)
                                            <p class="mt-1 text-[11px] text-slate-400">{{ __(':n days in stage', ['n' => (int) $opp->stage_entered_at->diffInDays(now())]) }}</p>
                                        @endif
                                    </td>
                                    <td class="px-3 lg:px-4 py-4 text-sm text-slate-700">
                                        {{ $opp->owner?->name ?? __('No owner') }}
                                        @if ($opp->originator && $opp->originator_id !== $opp->owner_id)
                                            <p class="text-[11px] text-slate-400">{{ __('Brought in by :name', ['name' => $opp->originator->name]) }}</p>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm tabular-nums font-semibold text-slate-900">
                                        @if ($opp->estimated_value === null)
                                            <span class="font-medium text-slate-400">{{ __('Not estimated') }}</span>
                                        @else
                                            {{ $opp->currency_code }} {{ number_format((float) $opp->estimated_value, 2) }}
                                        @endif
                                    </td>
                                    <td class="px-3 lg:px-4 py-4 text-sm {{ $overdue ? 'text-rose-600' : 'text-slate-600' }}">
                                        @if ($opp->isOpen())
                                            {{ $opp->next_action ?: __('No next action') }}
                                            @if ($opp->next_action_due)
                                                <span class="whitespace-nowrap text-xs {{ $overdue ? 'font-semibold' : 'text-slate-400' }}">· {{ $opp->next_action_due->format('j M Y') }}</span>
                                            @endif
                                        @elseif ($opp->stage === 'deferred' && $opp->review_on)
                                            <span class="text-slate-500">{{ __('Review on :date', ['date' => $opp->review_on->format('j M Y')]) }}</span>
                                        @else
                                            <span class="text-slate-400">{{ $opp->outcome_at?->format('j M Y') ?? __('Not available') }}</span>
                                        @endif
                                    </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 ($editable)
                                                <select wire:key="pick-list-{{ $opp->id }}-{{ $opp->stage }}-{{ $showStageDialog ? 'open' : 'shut' }}"
                                                    class="rounded-lg border-slate-200 bg-slate-50 py-1 text-xs text-slate-700 focus:border-indigo-500 focus:ring-indigo-500"
                                                    aria-label="{{ __('Change stage') }}"
                                                    wire:change="requestStage({{ $opp->id }}, $event.target.value)">
                                                    @foreach (\App\Models\Opportunity::STAGES as $sKey => $sLabel)
                                                        @continue($sKey === 'won' && $opp->stage !== 'won')
                                                        <option value="{{ $sKey }}" @selected($opp->stage === $sKey)>{{ $sLabel }}</option>
                                                    @endforeach
                                                </select>
                                            @endif
                                            <a href="{{ route('crm.opportunities.show', $opp->id) }}" wire:navigate class="text-indigo-600 transition hover:text-indigo-800">{{ __('Open') }}</a>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-6 py-12">
                                        @if ($filtersOn)
                                            <x-empty-state icon="funnel" :title="__('No opportunities match')"
                                                :message="__('Try a different search or clear the filters.')" class="border-0 bg-transparent py-0" />
                                        @else
                                            <x-empty-state icon="flag" :title="__('No opportunities yet')"
                                                :message="__('Open one for an organisation with a dated next action, and it starts at Prospect.')" class="border-0 bg-transparent py-0" />
                                        @endif
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @if ($rows->hasPages())
                    <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                        {{ $rows->links() }}
                    </div>
                @endif
            </x-card>
        @endif
    </div>

    @include('livewire.crm.opportunities.partials.stage-dialog')
</div>