@php
    $tz = config('app.display_timezone');
    $periodLabel = __(\App\Livewire\Crm\Dashboard\My::PERIODS[$period]);
    $pipeline = $figures['pipeline'];
    $outcomes = $figures['outcomes'];

    $workCards = [
        ['label' => __('Overdue tasks'), 'value' => number_format($figures['overdue']), 'icon' => 'exclamation-triangle', 'accent' => '#e11d48',
            'sub' => $figures['overdue'] > 0 ? __('Do or reschedule') : __('All on time'), 'href' => route('crm.tasks.index', ['view' => 'overdue'])],
        ['label' => __('Due today'), 'value' => number_format($figures['today']), 'icon' => 'clock', 'accent' => '#f59e0b',
            'sub' => __('Still to do today'), 'href' => route('crm.tasks.index', ['view' => 'today'])],
        ['label' => __('Due this week'), 'value' => number_format($figures['week']), 'icon' => 'calendar-days', 'accent' => '#6366f1',
            'sub' => __('From now to Sunday'), 'href' => route('crm.tasks.index', ['view' => 'week'])],
        ['label' => __('Logged this week'), 'value' => number_format($figures['logged']), 'icon' => 'chat-bubble-left-right', 'accent' => '#0ea5e9',
            'sub' => __('Calls, emails, meetings'), 'href' => route('crm.communications.index', ['period' => 'week', 'scope' => 'mine'])],
        ['label' => __('Next action overdue'), 'value' => number_format($figures['next_overdue']), 'icon' => 'flag', 'accent' => '#f97316',
            'sub' => __('Or none recorded'), 'focus' => 'next_overdue'],
    ];

    $pipelineCards = [
        ['label' => __('Active pipeline'), 'value' => number_format($pipeline['count']), 'icon' => 'funnel', 'accent' => '#4f46e5',
            'sub' => $pipeline['value_base'] !== null
                ? trim($baseCode.' '.number_format($pipeline['value_base'], 2)).($pipeline['not_estimated'] > 0 ? ' · '.__(':n not estimated', ['n' => $pipeline['not_estimated']]) : '')
                : ($pipeline['count'] > 0 ? __('Not estimated') : __('Nothing open')),
            'focus' => 'pipeline'],
        ['label' => __('Gone quiet'), 'value' => number_format($figures['stale']), 'icon' => 'pause-circle', 'accent' => '#64748b',
            'sub' => __('No activity for :days days', ['days' => $figures['stale_days']]), 'focus' => 'stale'],
        ['label' => __('Qualified'), 'value' => number_format($figures['qualified']), 'icon' => 'check-circle', 'accent' => '#10b981',
            'sub' => __('First time, :period', ['period' => mb_strtolower($periodLabel)]), 'focus' => 'qualified'],
        ['label' => __('Win rate'), 'value' => $figures['win_rate'] === null ? __('Not applicable') : number_format($figures['win_rate'] * 100, 0).'%', 'icon' => 'trophy', 'accent' => '#d97706',
            'sub' => __(':won won, :lost lost', ['won' => $outcomes['won'], 'lost' => $outcomes['lost']]), 'focus' => 'outcomes'],
        ['label' => __('Days to win'), 'value' => $figures['days_to_win'] === null ? __('Not applicable') : number_format($figures['days_to_win'], 1), 'icon' => 'arrow-trending-up', 'accent' => '#8b5cf6',
            'sub' => __('Average, won :period', ['period' => mb_strtolower($periodLabel)]), 'focus' => 'won'],
    ];

    $healthRing = $health['percent'];
    $healthTone = $healthRing === null ? 'text-slate-300' : ($healthRing >= 75 ? 'text-emerald-500' : ($healthRing >= 50 ? 'text-amber-500' : 'text-rose-500'));
    $healthWord = $healthRing === null ? __('Not assessed yet') : ($healthRing >= 75 ? __('Overall account health is good.') : ($healthRing >= 50 ? __('Some accounts need a visit.') : __('Several accounts are slipping.')));
    $needAttention = $health['watch'] + $health['at_risk'];
    $viewWord = mb_strtolower(__(\App\Services\Crm\CrmMetrics::VIEWS[$view]));
@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="$title">
            @if ($canCreate)
                <x-secondary-button type="button" wire:click="$dispatch('crm-task-create')">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('New task') }}
                </x-secondary-button>
                <x-button type="button" wire:click="$dispatch('crm-log-activity')">
                    <x-icon name="chat-bubble-left-right" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('Log activity') }}
                </x-button>
            @endif
        </x-page-header>

        {{-- My work --}}
        <section class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
            @foreach ($workCards as $m)
                @include('livewire.crm.dashboard.partials.card', ['m' => $m, 'active' => isset($m['focus']) && $focus === $m['focus']])
            @endforeach
        </section>

        {{-- Pipeline lens --}}
        <x-card class="p-4 sm:p-5">
            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <div class="flex items-center gap-3">
                    <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600">
                        <x-icon name="funnel" class="h-5 w-5" />
                    </span>
                    <div>
                        <p class="text-sm font-semibold text-slate-900">{{ __('My pipeline') }}</p>
                        <p class="text-xs text-slate-500">{{ __('Managed, originated and supported overlap by design and are never added together.') }}</p>
                    </div>
                </div>
                <div class="flex flex-wrap items-center gap-2">
                    <div class="flex items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-xs font-medium">
                        @foreach (\App\Services\Crm\CrmMetrics::VIEWS as $key => $label)
                            <button type="button" wire:click="setView('{{ $key }}')" class="rounded-lg px-3 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' }}">{{ __($label) }}</button>
                        @endforeach
                    </div>
                    <div class="flex items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-xs font-medium">
                        @foreach (\App\Livewire\Crm\Dashboard\My::PERIODS as $key => $label)
                            <button type="button" wire:click="setPeriod('{{ $key }}')" class="rounded-lg px-3 py-1.5 transition {{ $period === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">{{ __($label) }}</button>
                        @endforeach
                    </div>
                </div>
            </div>
        </x-card>

        <section class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
            @foreach ($pipelineCards as $m)
                @include('livewire.crm.dashboard.partials.card', ['m' => $m, 'active' => $focus === $m['focus']])
            @endforeach
        </section>

        <div class="grid grid-cols-1 gap-6 xl:grid-cols-3">
            {{-- Pipeline overview --}}
            <x-card class="overflow-hidden xl:col-span-2">
                <div class="flex items-center gap-3 border-b border-slate-100 p-4 sm:p-5">
                    <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600">
                        <x-icon name="chart-bar" class="h-5 w-5" />
                    </span>
                    <div>
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Pipeline overview') }}</h2>
                        <p class="text-xs text-slate-400">{{ $chart['mode'] === 'value' ? __('Estimated value by stage, :view', ['view' => $viewWord]) : __('Opportunities by stage, :view', ['view' => $viewWord]) }}</p>
                    </div>
                </div>

                <div class="px-2 py-2 sm:px-3">
                    @if ($pipeline['count'] === 0)
                        <div class="px-4 py-10">
                            <x-empty-state icon="funnel" :title="__('Nothing in the pipeline')" :message="__('Open an opportunity and it appears here by stage.')" class="border-0 bg-transparent py-0" />
                        </div>
                    @else
                        <div
                            wire:ignore
                            wire:key="pipeline-chart-{{ md5(json_encode($chart)) }}"
                            x-data="{
                                chart: null,
                                data: @js($chart),
                                base: @js($baseCode),
                                fmt(v) { return this.data.mode === 'value' ? (this.base + ' ' + Math.round(v).toLocaleString()).trim() : Math.round(v).toLocaleString(); },
                                render() {
                                    if (! window.ApexCharts || ! this.$refs.chart) { return; }
                                    this.chart = new window.ApexCharts(this.$refs.chart, {
                                        chart: { type: 'bar', height: 280, fontFamily: 'inherit', toolbar: { show: false }, animations: { speed: 500 } },
                                        series: [{ name: this.data.mode === 'value' ? @js(__('Estimated value')) : @js(__('Opportunities')), data: this.data.values }],
                                        labels: this.data.labels,
                                        colors: ['#c7d2fe', '#a5b4fc', '#818cf8', '#6366f1', '#4f46e5', '#4338ca', '#3730a3'],
                                        plotOptions: { bar: { horizontal: true, borderRadius: 4, borderRadiusApplication: 'end', barHeight: '58%', distributed: true } },
                                        dataLabels: { enabled: true, textAnchor: 'start', offsetX: 6, style: { fontSize: '12px', fontWeight: 600, colors: ['#0f172a'] }, formatter: (v) => v > 0 ? this.fmt(v) : '', background: { enabled: false }, dropShadow: { enabled: false } },
                                        legend: { show: false },
                                        xaxis: { labels: { style: { colors: '#94a3b8', fontSize: '11px' }, formatter: (v) => Math.round(v).toLocaleString() }, axisBorder: { show: false }, axisTicks: { show: false } },
                                        yaxis: { labels: { style: { colors: '#475569', fontSize: '12px', fontWeight: 500 } } },
                                        grid: { borderColor: '#e2e8f0', strokeDashArray: 4, xaxis: { lines: { show: true } }, yaxis: { lines: { show: false } }, padding: { right: 56 } },
                                        tooltip: { y: { title: { formatter: () => '' }, formatter: (v, o) => this.fmt(v) + ' · ' + this.data.counts[o.dataPointIndex] + ' ' + @js(__('open')) } },
                                        states: { hover: { filter: { type: 'darken', value: 0.9 } }, active: { filter: { type: 'none' } } },
                                    });
                                    this.chart.render();
                                },
                            }"
                            x-init="$nextTick(() => render())"
                        >
                            <div x-ref="chart"></div>
                        </div>
                    @endif
                </div>
            </x-card>

            {{-- Relationship pulse --}}
            <x-card class="p-4 sm:p-5">
                <h2 class="text-base font-semibold text-slate-900">{{ __('Relationship pulse') }}</h2>
                <p class="text-xs text-slate-400">{{ __('The organisations you own as relationship owner') }}</p>
                <div class="mt-4 flex items-center gap-5">
                    <div class="relative h-28 w-28 shrink-0">
                        <svg viewBox="0 0 36 36" class="h-28 w-28 -rotate-90">
                            <circle cx="18" cy="18" r="15.5" fill="none" stroke="#e2e8f0" stroke-width="3.5" />
                            @if ($healthRing !== null)
                                <circle cx="18" cy="18" r="15.5" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" class="{{ $healthTone }}" stroke-dasharray="{{ round(97.39 * $healthRing / 100, 2) }} 97.39" />
                            @endif
                        </svg>
                        <div class="absolute inset-0 flex flex-col items-center justify-center">
                            <span class="text-2xl font-bold tabular-nums text-slate-900">{{ $healthRing === null ? '–' : $healthRing.'%' }}</span>
                        </div>
                    </div>
                    <div class="min-w-0">
                        <p class="text-sm font-semibold text-slate-900">{{ __('Healthy accounts') }}</p>
                        <p class="text-xs text-slate-500">{{ $healthWord }}</p>
                        @if ($health['assessed'] + $health['unknown'] === 0)
                            <p class="mt-1 text-xs text-slate-400">{{ __('No organisations have you as relationship owner yet.') }}</p>
                        @else
                            <p class="mt-1 text-xs text-slate-400">{{ trans_choice(':n account|:n accounts', $health['assessed'] + $health['unknown'], ['n' => $health['assessed'] + $health['unknown']]) }}{{ $health['unknown'] > 0 ? ' · '.trans_choice(':n not assessed|:n not assessed', $health['unknown'], ['n' => $health['unknown']]) : '' }}</p>
                        @endif
                    </div>
                </div>
                <ul class="mt-4 divide-y divide-slate-100 border-t border-slate-100">
                    <li>
                        <a href="{{ route('crm.account-health', ['label' => $health['at_risk'] > 0 ? 'at_risk' : 'watch']) }}" wire:navigate class="group flex items-center gap-3 py-2.5 text-sm">
                            <span class="flex h-7 w-7 items-center justify-center rounded-full {{ $needAttention > 0 ? 'bg-amber-50 text-amber-600' : 'bg-emerald-50 text-emerald-600' }}">
                                <x-icon :name="$needAttention > 0 ? 'exclamation-circle' : 'check'" class="h-3.5 w-3.5" />
                            </span>
                            <span class="flex-1 text-slate-700 group-hover:text-slate-900">
                                @if ($needAttention > 0)
                                    <strong class="font-semibold tabular-nums">{{ $needAttention }}</strong> {{ trans_choice('account needs attention|accounts need attention', $needAttention) }}
                                @else
                                    {{ __('No accounts need attention') }}
                                @endif
                            </span>
                            <x-icon name="chevron-right" class="h-3.5 w-3.5 text-slate-300 transition group-hover:translate-x-0.5 group-hover:text-slate-500" />
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('crm.reorders.index', ['tab' => 'due']) }}" wire:navigate class="group flex items-center gap-3 py-2.5 text-sm">
                            <span class="flex h-7 w-7 items-center justify-center rounded-full bg-indigo-50 text-indigo-600">
                                <x-icon name="arrow-path" class="h-3.5 w-3.5" />
                            </span>
                            <span class="flex-1 text-slate-700 group-hover:text-slate-900">
                                <strong class="font-semibold tabular-nums">{{ $reordersDue }}</strong> {{ trans_choice('reorder opportunity|reorder opportunities', $reordersDue) }}
                            </span>
                            <x-icon name="chevron-right" class="h-3.5 w-3.5 text-slate-300 transition group-hover:translate-x-0.5 group-hover:text-slate-500" />
                        </a>
                    </li>
                </ul>
                <a href="{{ route('crm.account-health') }}" wire:navigate class="mt-3 inline-flex items-center gap-1.5 text-sm font-semibold text-indigo-600 hover:text-indigo-800">
                    {{ __('View account health') }}
                    <x-icon name="arrow-right" class="h-3.5 w-3.5" />
                </a>
            </x-card>
        </div>

        {{-- The list behind the chosen card --}}
        @if ($focusList !== null)
            <x-card class="overflow-hidden" id="focus">
                <div class="flex items-center justify-between gap-3 border-b border-slate-100 p-4 sm:p-5">
                    <div>
                        <h2 class="text-base font-semibold text-slate-900">{{ __(\App\Livewire\Crm\Dashboard\My::FOCUSES[$focus]) }}</h2>
                        <p class="text-xs text-slate-400">{{ __(\App\Services\Crm\CrmMetrics::VIEWS[$view]) }} · {{ in_array($focus, ['qualified', 'won', 'outcomes'], true) ? $periodLabel : __('As it stands now') }}</p>
                    </div>
                    <button type="button" wire:click="setFocus('{{ $focus }}')" class="text-sm font-medium text-slate-500 hover:text-slate-700">{{ __('Close') }}</button>
                </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">{{ __('Opportunity') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Stage') }}</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">{{ __('Last activity') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($focusList as $o)
                                @php $late = $o->isOpen() && $o->next_action_due && $o->next_action_due->lt(now($tz)->startOfDay()); @endphp
                                <tr wire:key="focus-{{ $o->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', $o) }}" wire:navigate class="font-medium text-indigo-600 hover:text-indigo-800">{{ $o->title }}</a>
                                        <span class="block text-xs text-slate-400">{{ $o->customer?->name }}{{ $view !== 'managed' && $o->owner ? ' · '.__('owner :name', ['name' => $o->owner->name]) : '' }}</span>
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                        <x-badge :color="$o->stage === 'won' ? 'emerald' : ($o->stage === 'lost' ? 'rose' : 'slate')">{{ __(\App\Models\Opportunity::STAGES[$o->stage] ?? $o->stage) }}</x-badge>
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm tabular-nums font-semibold text-slate-900">
                                        @if ($o->estimated_value === null)
                                            <span class="font-normal text-slate-400">{{ __('Not estimated') }}</span>
                                        @else
                                            {{ $o->currency_code }} {{ number_format((float) $o->estimated_value, 2) }}
                                        @endif
                                    </td>
                                    <td class="px-3 lg:px-4 py-4 text-sm {{ $late ? 'text-rose-600' : 'text-slate-700' }}">
                                        {{ $o->next_action ?: __('None recorded') }}
                                        @if ($o->next_action_due)
                                            <span class="block whitespace-nowrap text-xs {{ $late ? 'font-semibold' : 'text-slate-400' }}">{{ $o->next_action_due->format('D j M') }}</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">
                                        {{ $o->last_activity_at ? $o->last_activity_at->diffForHumans() : __('Nothing logged') }}
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                        @if ($canCreate && $o->isOpen())
                                            <button type="button" wire:click="$dispatch('crm-log-activity', { opportunityId: {{ $o->id }} })" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Log activity') }}</button>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-6 py-12">
                                        <x-empty-state icon="funnel" :title="__('Nothing here')" :message="__('No opportunities match this card for you right now.')" class="border-0 bg-transparent py-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @include('livewire.crm.partials.paginator', ['rows' => $focusList])
            </x-card>
        @endif

        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
            {{-- Up next --}}
            <x-card class="overflow-hidden">
                <div class="flex items-center justify-between border-b border-slate-100 p-4 sm:p-5">
                    <div>
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Up next') }}</h2>
                        <p class="text-xs text-slate-400">{{ __('Overdue and due this week, soonest first') }}</p>
                    </div>
                    <a href="{{ route('crm.tasks.index', ['view' => 'open']) }}" wire:navigate class="text-sm font-medium text-indigo-600 hover:text-indigo-800">{{ __('All my tasks') }}</a>
                </div>
                <ul class="divide-y divide-slate-100">
                    @forelse ($upNext as $task)
                        <li wire:key="next-{{ $task->id }}" class="flex items-start justify-between gap-3 px-4 py-3 sm:px-5">
                            <div class="min-w-0">
                                <p class="text-sm font-medium text-slate-900">{{ $task->title }}</p>
                                <p class="text-xs {{ $task->isOverdue() ? 'font-semibold text-rose-600' : 'text-slate-500' }}">
                                    {{ $task->due_at->copy()->timezone($tz)->format(\App\Services\Crm\TaskService::isDateOnly($task->due_at) ? 'D j M' : 'D j M, H:i') }}
                                    @if ($task->opportunity)
                                        <span class="font-normal text-slate-400">· {{ $task->opportunity->title }}</span>
                                    @elseif ($task->customer)
                                        <span class="font-normal text-slate-400">· {{ $task->customer->name }}</span>
                                    @endif
                                </p>
                            </div>
                            <button type="button" wire:click="$dispatch('crm-task-complete', { id: {{ $task->id }} })" class="shrink-0 text-sm font-medium text-emerald-600 hover:text-emerald-800">{{ __('Complete') }}</button>
                        </li>
                    @empty
                        <li class="px-4 py-10">
                            <x-empty-state icon="check-circle" :title="__('Nothing due this week')" :message="__('Your follow-ups are clear until next week.')" class="border-0 bg-transparent py-0" />
                        </li>
                    @endforelse
                </ul>
            </x-card>

            {{-- Recently logged --}}
            <x-card class="overflow-hidden">
                <div class="flex items-center justify-between border-b border-slate-100 p-4 sm:p-5">
                    <div>
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Recently logged') }}</h2>
                        <p class="text-xs text-slate-400">{{ __('Your latest activity') }}</p>
                    </div>
                    <a href="{{ route('crm.communications.index', ['scope' => 'mine', 'period' => 'all']) }}" wire:navigate class="text-sm font-medium text-indigo-600 hover:text-indigo-800">{{ __('Communications') }}</a>
                </div>
                <ul class="divide-y divide-slate-100">
                    @forelse ($recent as $entry)
                        <li wire:key="recent-{{ $entry->id }}" class="px-4 py-3 sm:px-5">
                            <div class="flex items-center justify-between gap-3">
                                <span class="text-sm font-medium text-slate-900">
                                    {{ __(\App\Models\Interaction::CRM_TYPES[$entry->type] ?? ucfirst($entry->type)) }}
                                    <span class="font-normal text-slate-500">· {{ $entry->subject instanceof \App\Models\Opportunity ? $entry->subject->title : ($entry->customer?->name ?? __('Not recorded')) }}</span>
                                </span>
                                <span class="shrink-0 text-xs text-slate-400">{{ $entry->occurred_at?->diffForHumans() }}</span>
                            </div>
                            <p class="mt-0.5 text-xs text-slate-500">{{ \Illuminate\Support\Str::limit($entry->outcome ?: $entry->body, 140) }}</p>
                        </li>
                    @empty
                        <li class="px-4 py-10">
                            <x-empty-state icon="chat-bubble-left-right" :title="__('Nothing logged yet')" :message="__('Log a call, email or meeting and it shows here.')" class="border-0 bg-transparent py-0" />
                        </li>
                    @endforelse
                </ul>
            </x-card>
        </div>
    </div>

    <livewire:crm.tasks.task-actions />
    <livewire:crm.communications.log-activity />
</div>