@php
    $fmt = fn ($n) => number_format((int) $n);
    $money = fn ($n) => '₹'.number_format((int) $n);
    $completion = $kpis['total'] ? round($kpis['completed'] / $kpis['total'] * 100) : 0;
    $loanMeta = [
        'LOGIN' => ['Login', 'heroicon-o-arrow-right-end-on-rectangle', 'blue', 'Valuation amount'],
        'DISB' => ['Disbursed', 'heroicon-o-banknotes', 'green', 'Disbursed loan amount'],
        'APPROVED' => ['Approved', 'heroicon-o-check-badge', 'violet', 'Loan amount'],
        'REJECT' => ['Rejected', 'heroicon-o-x-circle', 'red', 'Loan amount'],
    ];
    $monthParam = $month === 'all' ? 'all' : $month;
@endphp
<x-layouts.app title="Dashboard"
               :subtitle="$seesAll ? 'Team-wide CRM activity, SMS and loan pipeline at a glance.' : 'Your activities, follow-ups and loan pipeline at a glance.'"
               :breadcrumbs="['Overview' => null, 'Dashboard' => null]">
    <x-slot:actions>
        <a href="{{ route('activities.index', ['due' => 'today']) }}" class="btn btn-secondary"><x-heroicon-m-calendar-days class="h-4 w-4" /> Due today</a>
        <a href="{{ route('activities.index') }}" class="btn btn-brand"><x-heroicon-m-clipboard-document-check class="h-4 w-4" /> Open activities</a>
    </x-slot:actions>

    {{-- Activity KPIs --}}
    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <x-stat label="All activities" :value="$fmt($kpis['total'])" icon="heroicon-o-clipboard-document-list" tone="gray"
                :hint="$completion.'% completed'" :href="route('activities.index', ['status' => 'all'])" />
        <x-stat label="Not started" :value="$fmt($kpis['not_started'])" icon="heroicon-o-pause-circle" tone="amber"
                hint="Waiting for a first call" :href="route('activities.index', ['status' => 'Not Started'])" />
        <x-stat label="In progress" :value="$fmt($kpis['in_progress'])" icon="heroicon-o-arrow-path" tone="blue"
                hint="Follow-ups running" :href="route('activities.index', ['status' => 'In Progress'])" />
        <x-stat label="Completed" :value="$fmt($kpis['completed'])" icon="heroicon-o-check-circle" tone="green"
                hint="Closed tasks" :href="route('activities.index', ['status' => 'Completed'])" />
    </div>
    <div class="mt-4 grid gap-4 sm:grid-cols-3">
        <x-stat label="Calls today" :value="$fmt($kpis['calls_today'])" icon="heroicon-o-phone-arrow-up-right" tone="violet"
                hint="Activities updated today" />
        <x-stat label="Due today" :value="$fmt($kpis['due_today'])" icon="heroicon-o-calendar-days" tone="amber"
                hint="Open tasks due today" :href="route('activities.index', ['status' => 'all', 'due' => 'today'])" />
        <x-stat label="Overdue" :value="$fmt($kpis['overdue'])" icon="heroicon-o-exclamation-triangle" tone="red"
                hint="Open tasks past their due date" :href="route('activities.index', ['status' => 'all', 'due' => 'overdue'])" />
    </div>

    {{-- Charts row --}}
    <div class="mt-6 grid gap-6 lg:grid-cols-3">
        <x-card title="Activity status" subtitle="Share of all {{ $seesAll ? 'team' : 'your' }} activities">
            @if ($kpis['total'])
                <div class="relative mx-auto h-56 max-w-[16rem]">
                    <canvas id="statusChart" aria-label="Activity status chart" role="img"></canvas>
                    <div class="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
                        <div class="text-2xl font-semibold text-ink-900 tabular-nums dark:text-white">{{ $completion }}%</div>
                        <div class="text-xs text-ink-500">completed</div>
                    </div>
                </div>
                <ul class="mt-5 space-y-2 text-sm">
                    @foreach ([['Not Started', $kpis['not_started'], 'bg-[#2a78d6] dark:bg-[#3987e5]'], ['In Progress', $kpis['in_progress'], 'bg-[#eb6834] dark:bg-[#d95926]'], ['Completed', $kpis['completed'], 'bg-[#1baf7a] dark:bg-[#199e70]']] as [$label, $value, $dot])
                        <li class="flex items-center justify-between gap-3">
                            <a href="{{ route('activities.index', ['status' => $label]) }}" class="flex items-center gap-2 text-ink-600 hover:text-ink-900 dark:text-ink-300 dark:hover:text-white">
                                <span class="h-2.5 w-2.5 rounded-full {{ $dot }}"></span>{{ $label }}
                            </a>
                            <span class="font-medium text-ink-900 tabular-nums dark:text-white">{{ $fmt($value) }}</span>
                        </li>
                    @endforeach
                    @if ($kpis['other'])
                        <li class="flex items-center justify-between gap-3 text-ink-500"><span class="pl-4.5">Other statuses</span><span class="tabular-nums">{{ $fmt($kpis['other']) }}</span></li>
                    @endif
                </ul>
            @else
                <x-empty-state title="No activities yet" message="Activities appear here once leads are assigned." icon="heroicon-o-clipboard-document-list" />
            @endif
        </x-card>

        <x-card class="lg:col-span-2" title="Calls per day" subtitle="Activities updated in the last {{ count($trend['labels']) }} days">
            <div class="h-72"><canvas id="trendChart" aria-label="Calls per day chart" role="img"></canvas></div>
        </x-card>
    </div>

    @if ($seesAll)
        <div class="mt-6 grid gap-6 lg:grid-cols-5">
            <x-card class="lg:col-span-3" title="Team workload" subtitle="Activity status per telecaller (top {{ count($byUser) }} by volume)" x-data="{ table: false }">
                <x-slot:actions>
                    <button type="button" class="btn btn-ghost btn-sm" @click="table = !table" x-text="table ? 'Show chart' : 'Show table'"></button>
                </x-slot:actions>
                @if ($byUser)
                    <div x-show="!table" class="h-[26rem]"><canvas id="teamChart" aria-label="Team workload chart" role="img"></canvas></div>
                    <div x-cloak x-show="table" class="table-wrap -mx-5 -my-5">
                        <table class="table table-compact">
                            <thead><tr><th>Telecaller</th><th class="text-right">Not started</th><th class="text-right">In progress</th><th class="text-right">Completed</th><th class="text-right">Total</th></tr></thead>
                            <tbody class="divide-y divide-ink-100 dark:divide-ink-800">
                                @foreach ($byUser as $u)
                                    <tr>
                                        <td><a class="font-medium hover:text-brand-600" href="{{ route('activities.index', ['status' => 'all', 'user' => $u['user_id']]) }}">{{ $u['name'] }}</a></td>
                                        <td class="text-right tabular-nums"><a class="hover:underline" href="{{ route('activities.index', ['status' => 'Not Started', 'user' => $u['user_id']]) }}">{{ $fmt($u['not_started']) }}</a></td>
                                        <td class="text-right tabular-nums"><a class="hover:underline" href="{{ route('activities.index', ['status' => 'In Progress', 'user' => $u['user_id']]) }}">{{ $fmt($u['in_progress']) }}</a></td>
                                        <td class="text-right tabular-nums"><a class="hover:underline" href="{{ route('activities.index', ['status' => 'Completed', 'user' => $u['user_id']]) }}">{{ $fmt($u['completed']) }}</a></td>
                                        <td class="text-right font-medium tabular-nums">{{ $fmt($u['total']) }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <x-empty-state title="No team data" icon="heroicon-o-users" />
                @endif
            </x-card>

            <x-card class="lg:col-span-2" title="Total calls today" subtitle="{{ now()->format('l, d M Y') }}" :padded="false">
                @if ($callsByUser)
                    <ul class="divide-y divide-ink-100 dark:divide-ink-800">
                        @php($maxCalls = max(array_column($callsByUser, 'calls')) ?: 1)
                        @foreach ($callsByUser as $row)
                            <li class="px-5 py-2.5">
                                <div class="flex items-center justify-between gap-3 text-sm">
                                    <span class="truncate text-ink-700 dark:text-ink-200">{{ $row['name'] }}</span>
                                    <span class="font-semibold text-ink-900 tabular-nums dark:text-white">{{ $fmt($row['calls']) }}</span>
                                </div>
                                <div class="mt-1.5 h-1.5 overflow-hidden rounded-full bg-ink-100 dark:bg-ink-800">
                                    <div class="h-full rounded-full bg-[#2a78d6] dark:bg-[#3987e5]" style="width: {{ max(2, round($row['calls'] / $maxCalls * 100)) }}%"></div>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                @else
                    <x-empty-state title="No calls logged yet today" message="Calls show up as telecallers update their activities." icon="heroicon-o-phone" />
                @endif
                <x-slot:footer>
                    <div class="flex items-center justify-between text-sm"><span class="text-ink-500">Total</span><span class="font-semibold tabular-nums">{{ $fmt($kpis['calls_today']) }}</span></div>
                </x-slot:footer>
            </x-card>
        </div>
    @endif

    {{-- Loan pipeline --}}
    <div class="mt-8 flex flex-wrap items-end justify-between gap-3">
        <div>
            <h2 class="text-lg font-semibold text-ink-900 dark:text-white">Loan amount</h2>
            <p class="text-sm text-ink-500">Login, disbursement, approval and rejection amounts by login month.</p>
        </div>
        <form method="GET" class="flex items-center gap-2">
            <label for="month" class="text-xs font-medium text-ink-500">Login month</label>
            <select id="month" name="month" class="form-input w-36" onchange="this.form.submit()">
                <option value="all" @selected($month === 'all')>All months</option>
                @foreach ($months as $m)
                    <option value="{{ $m }}" @selected($month === $m)>{{ $m }}</option>
                @endforeach
            </select>
            <noscript><button class="btn btn-secondary">Apply</button></noscript>
        </form>
    </div>

    <div class="mt-4 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        @foreach ($loanMeta as $status => [$label, $icon, $tone, $hint])
            <x-stat :label="$label" :value="$money($loans['totals'][$status]['amount'])" :icon="$icon" :tone="$tone"
                    :hint="$fmt($loans['totals'][$status]['count']).' '.str('case')->plural($loans['totals'][$status]['count']).' · '.$hint"
                    :href="route('dashboard.loans', ['status' => $status, 'month' => $monthParam])" />
        @endforeach
    </div>

    <x-card class="mt-4" title="Loan status by sales manager" :subtitle="$month === 'all' ? 'All login months' : 'Login month '.$month" :padded="false">
        @if ($loans['users'])
            <div class="table-wrap">
                <table class="table">
                    <thead><tr><th>Sales manager</th>@foreach ($loanMeta as $status => [$label])<th class="text-right">{{ $label }}</th>@endforeach</tr></thead>
                    <tbody class="divide-y divide-ink-100 dark:divide-ink-800">
                        @foreach ($loans['users'] as $u)
                            <tr>
                                <td class="font-medium text-ink-900 dark:text-white">{{ $u['name'] }}</td>
                                @foreach (array_keys($loanMeta) as $status)
                                    <td class="text-right tabular-nums">
                                        @if ($u[$status]['count'])
                                            <a href="{{ route('dashboard.loans', ['status' => $status, 'month' => $monthParam, 'user' => $u['user_id']]) }}" class="inline-flex flex-col items-end hover:text-brand-600">
                                                <span class="font-medium">{{ $money($u[$status]['amount']) }}</span>
                                                <span class="text-xs text-ink-400">{{ $fmt($u[$status]['count']) }} {{ str('case')->plural($u[$status]['count']) }}</span>
                                            </a>
                                        @else
                                            <span class="text-ink-300 dark:text-ink-600">—</span>
                                        @endif
                                    </td>
                                @endforeach
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <x-empty-state title="No loan cases for this month" message="Pick another login month, or “All months”." icon="heroicon-o-banknotes" />
        @endif
    </x-card>

    {{-- SMS status --}}
    <div class="mt-8">
        <h2 class="text-lg font-semibold text-ink-900 dark:text-white">SMS status</h2>
        <p class="text-sm text-ink-500">{{ $seesAll ? 'Messages queued through the mobile SMS gateway, per user.' : 'Messages you queued through the mobile SMS gateway.' }}</p>
    </div>
    <div class="mt-4 grid gap-6 lg:grid-cols-3">
        <div class="grid gap-4">
            <x-stat label="New / queued" :value="$fmt($sms['totals']['new'])" icon="heroicon-o-inbox-arrow-down" tone="blue" />
            <x-stat label="Sent" :value="$fmt($sms['totals']['sent'])" icon="heroicon-o-paper-airplane" tone="green" />
            <x-stat label="Failed" :value="$fmt($sms['totals']['failed'])" icon="heroicon-o-exclamation-circle" tone="red" />
        </div>
        <x-card class="lg:col-span-2" title="By user" :subtitle="$fmt($sms['totals']['total']).' messages in total'" :padded="false">
            @if ($sms['users'])
                <div class="table-wrap max-h-[22rem] overflow-y-auto">
                    <table class="table table-compact">
                        <thead><tr><th>User</th><th class="text-right">New</th><th class="text-right">Sent</th><th class="text-right">Failed</th><th class="w-40">Delivery</th></tr></thead>
                        <tbody class="divide-y divide-ink-100 dark:divide-ink-800">
                            @foreach ($sms['users'] as $u)
                                @php($t = max(1, $u['total']))
                                <tr>
                                    <td><span class="font-medium text-ink-900 dark:text-white">{{ $u['name'] }}</span> <span class="text-xs text-ink-400">#{{ $u['user_id'] }}</span></td>
                                    <td class="text-right tabular-nums">{{ $fmt($u['new']) }}</td>
                                    <td class="text-right tabular-nums">{{ $fmt($u['sent']) }}</td>
                                    <td class="text-right tabular-nums">{{ $fmt($u['failed']) }}</td>
                                    <td>
                                        <div class="flex h-2 gap-[2px] overflow-hidden rounded-full bg-ink-100 dark:bg-ink-800" title="New {{ $u['new'] }} · Sent {{ $u['sent'] }} · Failed {{ $u['failed'] }}">
                                            @if ($u['sent'])<div class="bg-[#1baf7a] dark:bg-[#199e70]" style="width: {{ $u['sent'] / $t * 100 }}%"></div>@endif
                                            @if ($u['new'])<div class="bg-[#2a78d6] dark:bg-[#3987e5]" style="width: {{ $u['new'] / $t * 100 }}%"></div>@endif
                                            @if ($u['failed'])<div class="bg-[#e34948] dark:bg-[#e66767]" style="width: {{ $u['failed'] / $t * 100 }}%"></div>@endif
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="flex flex-wrap gap-4 border-t border-ink-100 px-5 py-3 text-xs text-ink-500 dark:border-ink-800">
                    <span class="flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-[#1baf7a]"></span>Sent</span>
                    <span class="flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-[#2a78d6]"></span>New</span>
                    <span class="flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-[#e34948]"></span>Failed</span>
                </div>
            @else
                <x-empty-state title="No SMS logged" icon="heroicon-o-chat-bubble-bottom-center-text" />
            @endif
        </x-card>
    </div>

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                if (!window.Chart) return;
                const dark = document.documentElement.classList.contains('dark');
                const ink = dark ? '#94a3b8' : '#64748b';
                const grid = dark ? 'rgba(148,163,184,0.12)' : 'rgba(100,116,139,0.12)';
                const surface = dark ? '#0f172a' : '#ffffff';
                const series = dark ? ['#3987e5', '#d95926', '#199e70'] : ['#2a78d6', '#eb6834', '#1baf7a'];
                const tooltip = { backgroundColor: dark ? '#1e293b' : '#0f172a', padding: 10, cornerRadius: 8, boxPadding: 4 };

                const statusEl = document.getElementById('statusChart');
                if (statusEl) new window.Chart(statusEl, {
                    type: 'doughnut',
                    data: { labels: ['Not Started', 'In Progress', 'Completed'],
                        datasets: [{ data: @json([$kpis['not_started'], $kpis['in_progress'], $kpis['completed']]), backgroundColor: series, borderColor: surface, borderWidth: 2, hoverOffset: 4 }] },
                    options: { responsive: true, maintainAspectRatio: false, cutout: '72%', plugins: { legend: { display: false }, tooltip } },
                });

                const trend = @json($trend);
                const trendEl = document.getElementById('trendChart');
                if (trendEl) new window.Chart(trendEl, {
                    type: 'line',
                    data: { labels: trend.labels, datasets: [{ label: 'Calls', data: trend.values, borderColor: series[0], backgroundColor: series[0] + '1f',
                        borderWidth: 2, fill: true, tension: 0.3, pointRadius: 0, pointHoverRadius: 5, pointHitRadius: 12 }] },
                    options: { responsive: true, maintainAspectRatio: false, interaction: { intersect: false, mode: 'index' },
                        plugins: { legend: { display: false }, tooltip },
                        scales: { x: { grid: { display: false }, ticks: { color: ink, maxTicksLimit: 8 } },
                                  y: { beginAtZero: true, border: { display: false }, grid: { color: grid }, ticks: { color: ink, precision: 0 } } } },
                });

                const team = @json($byUser);
                const teamEl = document.getElementById('teamChart');
                if (teamEl && team.length) new window.Chart(teamEl, {
                    type: 'bar',
                    data: { labels: team.map(u => u.name),
                        datasets: [
                            { label: 'Not Started', data: team.map(u => u.not_started), backgroundColor: series[0] },
                            { label: 'In Progress', data: team.map(u => u.in_progress), backgroundColor: series[1] },
                            { label: 'Completed', data: team.map(u => u.completed), backgroundColor: series[2] },
                        ].map(d => ({ ...d, borderColor: surface, borderWidth: { right: 2 }, borderSkipped: false, barThickness: 14 })) },
                    options: { responsive: true, maintainAspectRatio: false, indexAxis: 'y',
                        interaction: { mode: 'index', axis: 'y', intersect: false },
                        plugins: { legend: { position: 'top', align: 'end', labels: { color: ink, boxWidth: 10, boxHeight: 10, usePointStyle: true, pointStyle: 'rectRounded' } }, tooltip },
                        onClick: (e, els) => { if (els.length) window.location = @json(route('activities.index')) + '?status=all&user=' + team[els[0].index].user_id; },
                        scales: { x: { stacked: true, beginAtZero: true, border: { display: false }, grid: { color: grid }, ticks: { color: ink, precision: 0 } },
                                  y: { stacked: true, grid: { display: false }, ticks: { color: ink, autoSkip: false, font: { size: 11 } } } } },
                });
            });
        </script>
    @endpush
</x-layouts.app>