@php
    $na = fn ($value) => filled($value) ? $value : '—';
    $payroll = $payroll ?? ['configured' => false];
    $line = $payroll['latest_line'] ?? null;
@endphp

<article class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
    <h2 class="text-sm font-semibold text-slate-900">Profile summary</h2>
    <div class="mt-4 space-y-4">
        <section>
            <h3 class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">Personal</h3>
            <dl class="space-y-2 text-sm">
                <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-1"><dt class="text-slate-500">National ID</dt><dd class="font-medium text-slate-800">{{ $na($employee->national_id) }}</dd></div>
                <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-1"><dt class="text-slate-500">Gender</dt><dd class="font-medium text-slate-800">{{ $na($employee->gender) }}</dd></div>
                <div class="flex items-center justify-between gap-2"><dt class="text-slate-500">Work type</dt><dd class="font-medium text-slate-800">{{ $na($employee->work_type) }}</dd></div>
            </dl>
        </section>

        <section>
            <h3 class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">Employment</h3>
            <dl class="space-y-2 text-sm">
                <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-1"><dt class="text-slate-500">Hire date</dt><dd class="font-medium text-slate-800">{{ optional($employee->hire_date)->format('M j, Y') ?? '—' }}</dd></div>
                <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-1"><dt class="text-slate-500">Supervisor</dt><dd class="font-medium text-slate-800">{{ $employee->supervisor?->full_name ?? '—' }}</dd></div>
                <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-1"><dt class="text-slate-500">Direct reports</dt><dd class="font-medium text-slate-800">{{ $employee->directReports->count() }}</dd></div>
                <div class="flex items-center justify-between gap-2"><dt class="text-slate-500">Groups</dt><dd class="font-medium text-slate-800">{{ $employee->staffGroups->count() }}</dd></div>
            </dl>
        </section>

        <section>
            <h3 class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">Contact</h3>
            <dl class="space-y-2 text-sm">
                <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-1"><dt class="text-slate-500">Phone</dt><dd class="font-medium text-slate-800">{{ $na($employee->phone) }}</dd></div>
                <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-1"><dt class="text-slate-500">Email</dt><dd class="max-w-[10rem] truncate font-medium text-slate-800" title="{{ $employee->email }}">{{ $na($employee->email) }}</dd></div>
                @if (filled($employee->email) && \App\Support\LoanPermissionCatalog::actorCan(auth()->user(), \App\Support\LoanPermissionCatalog::HR_COMMUNICATIONS_MANAGE))
                    <div class="pb-1">
                        <a href="{{ route('loan.employees.email.compose', ['employees' => [$employee->id]]) }}" class="text-xs font-semibold text-teal-700 hover:underline">Send email</a>
                    </div>
                @endif
                <div class="flex items-center justify-between gap-2"><dt class="text-slate-500">Next of kin</dt><dd class="font-medium text-slate-800">{{ $na($employee->next_of_kin_name) }}</dd></div>
            </dl>
        </section>

        <section>
            <h3 class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">Financial</h3>
            <dl class="space-y-2 text-sm">
                <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-1"><dt class="text-slate-500">Portfolio outstanding</dt><dd class="font-semibold text-slate-900 tabular-nums">KES {{ number_format((float) ($portfolioKpi['total_outstanding'] ?? 0), 0) }}</dd></div>
                <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-1"><dt class="text-slate-500">Staff loan balance</dt><dd class="font-semibold tabular-nums {{ ($activeStaffLoanBalance ?? 0) > 0 ? 'text-amber-700' : 'text-slate-800' }}">KES {{ number_format((float) ($activeStaffLoanBalance ?? 0), 0) }}</dd></div>
                <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-1"><dt class="text-slate-500">On payroll</dt><dd class="font-medium text-slate-800">{{ ($employee->include_in_payroll ?? false) ? 'Yes' : 'No' }}</dd></div>
                <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-1"><dt class="text-slate-500">Payment channel</dt><dd class="font-medium text-slate-800">{{ \App\Support\EmployeePaymentChannel::label($employee->payment_channel) }}</dd></div>
                <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-1"><dt class="text-slate-500">Latest net pay</dt><dd class="font-medium tabular-nums text-emerald-700">{{ $payroll['latest_net_display'] ?? '—' }}</dd></div>
                @if ($employee->payment_channel === \App\Support\EmployeePaymentChannel::BANK)
                    <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-1"><dt class="text-slate-500">Bank</dt><dd class="max-w-[10rem] truncate font-medium text-slate-800" title="{{ $employee->bank_name }}">{{ $na($employee->bank_name) }}</dd></div>
                    <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-1"><dt class="text-slate-500">Account holder</dt><dd class="max-w-[10rem] truncate font-medium text-slate-800">{{ $na($employee->bank_account_holder) }}</dd></div>
                    <div class="flex items-center justify-between gap-2"><dt class="text-slate-500">Account no.</dt><dd class="font-medium text-slate-800 tabular-nums">{{ $na($employee->bank_account_number) }}</dd></div>
                @elseif ($employee->payment_channel === \App\Support\EmployeePaymentChannel::MPESA)
                    <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-1"><dt class="text-slate-500">M-Pesa name</dt><dd class="max-w-[10rem] truncate font-medium text-slate-800">{{ $na($employee->mpesa_registered_name) }}</dd></div>
                    <div class="flex items-center justify-between gap-2"><dt class="text-slate-500">M-Pesa no.</dt><dd class="font-medium text-slate-800 tabular-nums">{{ $na($employee->mpesa_phone) }}</dd></div>
                @endif
            </dl>
        </section>

        <section>
            <h3 class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">System access</h3>
            <dl class="space-y-2 text-sm">
                <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-1"><dt class="text-slate-500">Portal account</dt><dd class="font-medium {{ $linkedUser ? 'text-slate-800' : 'text-slate-500' }}">{{ $linkedUser ? 'Linked' : 'Not linked' }}</dd></div>
                <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-1"><dt class="text-slate-500">Login</dt><dd class="font-medium {{ $employee->hasLoginAccess() ? 'text-emerald-700' : 'text-rose-700' }}">{{ $employee->hasLoginAccess() ? 'Enabled' : 'Disabled' }}</dd></div>
                <div class="flex items-center justify-between gap-2 border-b border-slate-100 pb-1"><dt class="text-slate-500">Role</dt><dd class="font-medium text-slate-800">{{ $linkedUser ? ($linkedUser->displayLoanRoleLabel() ?: '—') : '—' }}</dd></div>
                <div class="flex items-center justify-between gap-2">
                    <dt class="text-slate-500">Capabilities</dt>
                    <dd>
                        @if ($canViewStaffAccessMatrix ?? false)
                            <button type="button" @click="setTab('security')" class="font-medium text-teal-700 hover:underline">{{ count($effectivePermissions ?? []) }}</button>
                        @else
                            <span class="font-medium text-slate-800">{{ count($effectivePermissions ?? []) }}</span>
                        @endif
                    </dd>
                </div>
            </dl>
        </section>
    </div>
</article>