@php
    use App\Services\Leads\LeadModule;
    $name = trim((string) $lead->user_name) ?: 'Unnamed lead';
    $summary = ['user_name', 'user_number', 'live_data', 'final_remark', 'due_date', 'date', 'user_ip_address', 'id'];
    $columns = collect($module->detailColumns($lead))->reject(fn ($c) => in_array($c, $summary, true));
    $regular = $columns->reject(fn ($c) => $module->isSensitive($c));
    $sensitive = $columns->filter(fn ($c) => $module->isSensitive($c));
    $due = LeadModule::parseDate($lead->due_date);
@endphp
<x-layouts.app :title="$name" :subtitle="$module->label().' lead #'.$lead->getKey()"
               :breadcrumbs="['Leads & Messaging' => null, $module->label() => route('leads.index', $module->key), $name => null]">
    <x-slot:actions>
        <a href="{{ route('leads.index', $module->key) }}" class="btn btn-secondary"><x-heroicon-m-arrow-left class="h-4 w-4" /> Back</a>
        <a href="{{ route('leads.edit', [$module->key, $lead->getKey()]) }}" class="btn btn-brand"><x-heroicon-m-pencil-square class="h-4 w-4" /> Edit</a>
    </x-slot:actions>

    <div class="grid gap-6 lg:grid-cols-3">
        <div class="space-y-6 lg:col-span-2">
            {{-- Profile header --}}
            <div class="card overflow-hidden">
                <div class="h-20 bg-gradient-to-r from-brand-400 via-orange-400 to-rose-400 opacity-90 dark:opacity-70"></div>
                <div class="-mt-10 flex flex-wrap items-end gap-4 px-6 pb-6">
                    <span class="flex h-20 w-20 items-center justify-center rounded-2xl bg-white text-2xl font-bold text-ink-700 shadow-lg ring-4 ring-white dark:bg-ink-800 dark:text-white dark:ring-ink-900">
                        {{ mb_strtoupper(mb_substr($name, 0, 1)) }}
                    </span>
                    <div class="min-w-0 flex-1 pb-1">
                        <h2 class="truncate text-xl font-semibold text-ink-900 dark:text-white">{{ $name }}</h2>
                        <div class="mt-1 flex flex-wrap items-center gap-2 text-sm text-ink-500">
                            @include('leads.partials.status', ['value' => $lead->live_data])
                            @if ($remark = $module->remarkLabel($lead->final_remark))
                                <span class="badge badge-gray">{{ $remark }}</span>
                            @endif
                        </div>
                    </div>
                    @if ($lead->user_number)
                        <div class="flex gap-2 pb-1">
                            <a href="tel:{{ $lead->user_number }}" class="btn btn-secondary"><x-heroicon-m-phone class="h-4 w-4" /> {{ $lead->user_number }}</a>
                        </div>
                    @endif
                </div>
            </div>

            <x-card title="Lead details">
                @if ($regular->isEmpty())
                    <p class="text-sm text-ink-500">No additional details were captured for this lead.</p>
                @else
                    <dl class="grid gap-x-6 gap-y-5 sm:grid-cols-2">
                        @foreach ($regular as $col)
                            @php($value = $module->display($lead, $col))
                            <div @class(['sm:col-span-2' => ($module->field($col)['span'] ?? null) === 'full'])>
                                <dt class="text-xs font-medium tracking-wide text-ink-500 uppercase">{{ $module->columnLabel($col) }}</dt>
                                <dd @class(['mt-1 text-sm break-words', 'text-ink-900 dark:text-white' => $value !== '', 'text-ink-300 dark:text-ink-600' => $value === ''])>{{ $value !== '' ? $value : '—' }}</dd>
                            </div>
                        @endforeach
                    </dl>
                @endif
            </x-card>

            @if ($sensitive->isNotEmpty())
                <x-card title="Joining & KYC" :subtitle="$reveal ? 'Visible to administrators only. Viewing is recorded in the audit log.' : 'Restricted: only administrators can view these details.'">
                    <x-slot:actions>
                        <span @class(['badge', 'badge-amber' => $reveal, 'badge-gray' => ! $reveal])><x-heroicon-m-lock-closed class="h-3.5 w-3.5" /> Sensitive</span>
                    </x-slot:actions>
                    <dl class="grid gap-x-6 gap-y-5 sm:grid-cols-2">
                        @foreach ($sensitive as $col)
                            @php($value = $module->display($lead, $col, $reveal))
                            <div>
                                <dt class="text-xs font-medium tracking-wide text-ink-500 uppercase">{{ $module->columnLabel($col) }}</dt>
                                <dd class="mt-1 font-mono text-sm text-ink-900 dark:text-white">{{ $value !== '' ? $value : '—' }}</dd>
                            </div>
                        @endforeach
                    </dl>
                </x-card>
            @endif
        </div>

        <div class="space-y-6">
            <x-card title="Follow-up">
                <dl class="space-y-4 text-sm">
                    <div class="flex items-center justify-between gap-3">
                        <dt class="text-ink-500">Status</dt>
                        <dd>@include('leads.partials.status', ['value' => $lead->live_data])</dd>
                    </div>
                    <div class="flex items-center justify-between gap-3">
                        <dt class="text-ink-500">Final remark</dt>
                        <dd class="text-right font-medium text-ink-900 dark:text-white">{{ $module->remarkLabel($lead->final_remark) ?: '—' }}</dd>
                    </div>
                    <div class="flex items-center justify-between gap-3">
                        <dt class="text-ink-500">Due date</dt>
                        <dd @class(['font-medium tabular-nums', 'text-rose-600 dark:text-rose-400' => $due && $due->isPast() && ! $due->isToday(), 'text-ink-900 dark:text-white' => ! ($due && $due->isPast() && ! $due->isToday())])>
                            {{ $due?->format('d M Y') ?? '—' }}
                        </dd>
                    </div>
                </dl>
            </x-card>

            <x-card title="Capture">
                <dl class="space-y-4 text-sm">
                    <div class="flex items-center justify-between gap-3">
                        <dt class="text-ink-500">Lead ID</dt>
                        <dd class="font-mono text-ink-900 dark:text-white">#{{ $lead->getKey() }}</dd>
                    </div>
                    <div class="flex items-center justify-between gap-3">
                        <dt class="text-ink-500">Captured</dt>
                        <dd class="text-right text-ink-900 tabular-nums dark:text-white">{{ $lead->date ?: '—' }}</dd>
                    </div>
                    <div class="flex items-center justify-between gap-3">
                        <dt class="text-ink-500">IP address</dt>
                        <dd class="font-mono text-xs text-ink-700 dark:text-ink-300">{{ $lead->user_ip_address ?: '—' }}</dd>
                    </div>
                    <div class="flex items-center justify-between gap-3">
                        <dt class="text-ink-500">Source</dt>
                        <dd class="flex items-center gap-1.5 text-ink-900 dark:text-white"><x-dynamic-component :component="$module->icon()" class="h-4 w-4 text-ink-400" /> {{ $module->label() }}</dd>
                    </div>
                </dl>
            </x-card>

            @if ($canDelete)
                <div class="card border-rose-200 p-5 dark:border-rose-500/20">
                    <h3 class="text-sm font-semibold text-rose-700 dark:text-rose-400">Delete lead</h3>
                    <p class="mt-1 text-xs text-ink-500">Removes this lead permanently. This cannot be undone.</p>
                    <form method="POST" action="{{ route('leads.destroy', [$module->key, $lead->getKey()]) }}" class="mt-3"
                          x-data="confirmSubmit('Delete this lead permanently?')" @submit="submit">
                        @csrf @method('DELETE')
                        <button class="btn btn-danger btn-sm"><x-heroicon-m-trash class="h-4 w-4" /> Delete lead</button>
                    </form>
                </div>
            @endif
        </div>
    </div>
</x-layouts.app>