@extends('layouts.admin')
@section('title', 'Lead #'.$lead->id)
@section('content')
@php
  $score = (int) ($lead->score ?? 0);
  $scorePct = min(100, max(0, $score));
  $scoreTone = $score >= 40 ? 'success' : 'muted';
@endphp
<x-crm.shell :title="$lead->name ?: ('Lead #'.$lead->id)" :subtitle="($lead->email ?: 'No email').' · '.$lead->type.' · '.$lead->created_at?->diffForHumans()">
    <x-slot:actions>
        <a href="{{ route('admin.leads.index') }}" class="admin-btn">All leads</a>
        <a href="{{ route('admin.crm.quotes.create', ['lead_id' => $lead->id]) }}" class="admin-btn">Create quote</a>
        <form method="post" action="{{ route('admin.leads.opportunity', $lead) }}">@csrf
            <button class="admin-btn admin-btn-primary">Create opportunity</button>
        </form>
    </x-slot:actions>
    <x-slot:stats>
        <x-crm.stat label="Company" :value="$lead->company ?: '—'" />
        <x-crm.stat label="Phone" :value="$lead->phone ?: '—'" />
        <x-crm.stat label="Owner" :value="$lead->owner?->name ?: 'Unassigned'" />
        <x-crm.stat label="Score" :value="$score" :tone="$score >= 40 ? 'success' : null" />
    </x-slot:stats>

    <div class="grid gap-5 p-4 sm:p-6 lg:grid-cols-[minmax(0,1fr)_18rem] lg:px-8">
        <div class="space-y-5">
            <section class="flex flex-wrap items-center gap-5 rounded-2xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)] crm-fade-in">
                <div class="relative flex h-24 w-24 shrink-0 items-center justify-center rounded-full"
                     style="background: conic-gradient(#2c6ecb {{ $scorePct }}%, #e9ebef 0);">
                    <div class="flex h-[4.5rem] w-[4.5rem] flex-col items-center justify-center rounded-full bg-white">
                        <span class="text-2xl font-bold tabular-nums leading-none">{{ $score }}</span>
                        <span class="text-[9px] font-semibold uppercase tracking-wide text-[#8c9196]">Score</span>
                    </div>
                </div>
                <div class="min-w-0 flex-1">
                    <div class="flex flex-wrap items-center gap-2">
                        <x-crm.avatar :name="$lead->name ?: $lead->email" size="lg" />
                        <div>
                            <div class="text-lg font-semibold tracking-tight">{{ $lead->name ?: $lead->email }}</div>
                            <div class="text-sm text-[#6d7175]">{{ $lead->email }}</div>
                        </div>
                    </div>
                    <div class="mt-3 flex flex-wrap gap-2">
                        <x-admin.badge tone="info">{{ $lead->type }}</x-admin.badge>
                        <x-admin.badge :tone="$lead->status === 'accepted' ? 'success' : 'muted'">{{ $lead->status }}</x-admin.badge>
                        <x-admin.badge :tone="$scoreTone">Score {{ $score }}</x-admin.badge>
                        @if($sla)
                            <x-admin.badge :tone="$sla->status === 'breached' ? 'danger' : ($sla->status === 'met' ? 'success' : 'warning')">SLA {{ $sla->status }}</x-admin.badge>
                        @endif
                    </div>
                </div>
            </section>

            <section class="rounded-2xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)] crm-fade-in crm-fade-in-delay-1">
                <h2 class="text-sm font-semibold tracking-tight">Payload</h2>
                @if(is_array($lead->payload) && count($lead->payload))
                    <dl class="mt-4 grid gap-3 sm:grid-cols-2">
                        @foreach($lead->payload as $key => $value)
                            <div class="rounded-xl border border-[var(--color-admin-border)] bg-[#fafbfb] p-3">
                                <dt class="text-[10px] uppercase tracking-wide text-[#8c9196]">{{ str_replace('_', ' ', $key) }}</dt>
                                <dd class="mt-1 break-words text-sm">{{ is_scalar($value) ? $value : json_encode($value) }}</dd>
                            </div>
                        @endforeach
                    </dl>
                @else
                    <p class="mt-3 text-sm text-[#6d7175]">No structured payload.</p>
                @endif
            </section>

            <section class="rounded-2xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)] crm-fade-in crm-fade-in-delay-2">
                <h2 class="text-sm font-semibold tracking-tight">Attribution</h2>
                @if(is_array($lead->utm) && count($lead->utm))
                    <div class="mt-3 flex flex-wrap gap-2">
                        @foreach($lead->utm as $k => $v)
                            <span class="rounded-full bg-[#f1f2f4] px-3 py-1 text-xs"><span class="text-[#6d7175]">{{ $k }}:</span> {{ $v }}</span>
                        @endforeach
                    </div>
                @else
                    <p class="mt-3 text-sm text-[#6d7175]">No UTM captured.</p>
                @endif
            </section>

            @if($duplicates->isNotEmpty())
                <section class="rounded-2xl border border-amber-200 bg-amber-50/80 p-5 shadow-[var(--admin-shadow)]">
                    <h2 class="text-sm font-semibold tracking-tight text-amber-950">Possible duplicates</h2>
                    <div class="mt-3 space-y-3">
                        @foreach($duplicates as $dup)
                            <div class="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-amber-200 bg-white p-4 text-sm">
                                <div>
                                    <div class="font-medium">{{ $dup->candidate?->name ?: $dup->candidate?->email }}</div>
                                    <div class="text-xs text-[#6d7175]">Score {{ $dup->score }} · #{{ $dup->candidate_lead_id }}</div>
                                </div>
                                <div class="flex gap-2">
                                    <form method="post" action="{{ route('admin.leads.duplicates.merge', $dup) }}">@csrf
                                        <button class="admin-btn admin-btn-primary !py-1 text-xs">Merge</button>
                                    </form>
                                    <form method="post" action="{{ route('admin.leads.duplicates.dismiss', $dup) }}">@csrf
                                        <button class="admin-btn !py-1 text-xs">Dismiss</button>
                                    </form>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </section>
            @endif

            <section class="rounded-2xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)] crm-fade-in crm-fade-in-delay-3">
                <h2 class="mb-4 text-sm font-semibold tracking-tight">Timeline</h2>
                <div class="crm-timeline">
                    @forelse($timeline as $event)
                        <div class="crm-timeline-item">
                            <div class="text-sm font-medium">{{ $event['label'] }}</div>
                            <div class="text-xs text-[#6d7175]">{{ $event['at']?->format('d M Y H:i') }}@if($event['meta']) · {{ $event['meta'] }}@endif</div>
                        </div>
                    @empty
                        <p class="text-sm text-[#6d7175]">No timeline events yet.</p>
                    @endforelse
                </div>
            </section>
        </div>

        <aside class="space-y-4">
            <section class="rounded-2xl border border-[var(--color-admin-border)] bg-white p-4 shadow-[var(--admin-shadow)]">
                <h3 class="text-xs font-semibold uppercase tracking-wide text-[#6d7175]">Actions</h3>
                <div class="mt-3 space-y-2">
                    @if(! in_array($lead->status, ['accepted', 'won'], true))
                        <form method="post" action="{{ route('admin.leads.accept', $lead) }}">@csrf
                            <button class="admin-btn admin-btn-primary w-full justify-center">Accept lead</button>
                        </form>
                    @endif
                    <form method="post" action="{{ route('admin.leads.rescore', $lead) }}">@csrf
                        <button class="admin-btn w-full justify-center">Rescore</button>
                    </form>
                    <form method="post" action="{{ route('admin.leads.reroute', $lead) }}">@csrf
                        <button class="admin-btn w-full justify-center">Re-route owner</button>
                    </form>
                    <a href="{{ route('admin.crm.quotes.create', ['lead_id' => $lead->id]) }}" class="admin-btn w-full justify-center">New quote</a>
                </div>
            </section>

            @if(is_array($lead->score_breakdown) && count($lead->score_breakdown))
                <section class="rounded-2xl border border-[var(--color-admin-border)] bg-white p-4 shadow-[var(--admin-shadow)]">
                    <h3 class="text-xs font-semibold uppercase tracking-wide text-[#6d7175]">Score breakdown</h3>
                    <ul class="mt-3 space-y-2 text-sm">
                        @foreach($lead->score_breakdown as $k => $v)
                            <li class="flex justify-between border-b border-[var(--color-admin-border)] pb-2 last:border-0">
                                <span class="text-[#6d7175]">{{ is_string($k) ? $k : ($v['label'] ?? 'Factor') }}</span>
                                <span class="font-medium">{{ is_array($v) ? ($v['points'] ?? json_encode($v)) : $v }}</span>
                            </li>
                        @endforeach
                    </ul>
                </section>
            @endif

            @if($sla)
                <section class="rounded-2xl border border-[var(--color-admin-border)] bg-white p-4 shadow-[var(--admin-shadow)]">
                    <h3 class="text-xs font-semibold uppercase tracking-wide text-[#6d7175]">SLA clock</h3>
                    <dl class="mt-3 space-y-2 text-sm">
                        <div class="flex justify-between"><dt class="text-[#6d7175]">Policy</dt><dd>{{ $sla->policy?->name ?? '—' }}</dd></div>
                        <div class="flex justify-between"><dt class="text-[#6d7175]">Status</dt><dd><x-admin.badge :tone="$sla->status === 'breached' ? 'danger' : ($sla->status === 'met' ? 'success' : 'warning')">{{ $sla->status }}</x-admin.badge></dd></div>
                        <div class="flex justify-between"><dt class="text-[#6d7175]">Due</dt><dd>{{ $sla->due_at?->format('d M Y H:i') ?? '—' }}</dd></div>
                    </dl>
                </section>
            @endif

            <section class="rounded-2xl border border-[var(--color-admin-border)] bg-white p-4 shadow-[var(--admin-shadow)]">
                <h3 class="text-xs font-semibold uppercase tracking-wide text-[#6d7175]">Form</h3>
                <p class="mt-2 text-sm">{{ $lead->form?->name ?? 'Direct / API' }}</p>
            </section>
        </aside>
    </div>
</x-crm.shell>
@endsection