@extends('layouts.admin')
@section('title', $contact->name ?: $contact->email)
@section('content')
<x-crm.shell :title="$contact->name ?: $contact->email" :subtitle="($contact->title ? $contact->title.' · ' : '').($contact->email ?: 'No email')">
    <x-slot:actions>
        <a href="{{ route('admin.crm.contacts.index') }}" class="admin-btn">All contacts</a>
        @if($contact->company)
            <a href="{{ route('admin.crm.companies.show', $contact->company) }}" class="admin-btn admin-btn-primary">View company</a>
        @endif
    </x-slot:actions>
    <x-slot:stats>
        <x-crm.stat label="Company" :value="$contact->company?->name ?: '—'" :href="$contact->company ? route('admin.crm.companies.show', $contact->company) : null" />
        <x-crm.stat label="Phone" :value="$contact->phone ?: '—'" />
        <x-crm.stat label="Marketing" :value="$contact->marketing_consent ? 'Yes' : 'No'" :tone="$contact->marketing_consent ? 'success' : null" />
        <x-crm.stat label="Leads" :value="$leads->count()" />
    </x-slot:stats>

    <div class="grid gap-5 p-4 sm:p-6 lg:grid-cols-2 lg:px-8">
        <section class="rounded-2xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)] crm-fade-in">
            <div class="mb-4 flex items-center gap-3">
                <x-crm.avatar :name="$contact->name ?: $contact->email" size="lg" />
                <div>
                    <h2 class="text-sm font-semibold tracking-tight">Profile</h2>
                    <p class="text-xs text-[#6d7175]">{{ $contact->title ?: 'No title' }}</p>
                </div>
            </div>
            <dl class="grid gap-3 sm:grid-cols-2 text-sm">
                <div><dt class="text-[10px] uppercase tracking-wide text-[#8c9196]">Email</dt><dd class="mt-0.5 font-medium">{{ $contact->email ?: '—' }}</dd></div>
                <div><dt class="text-[10px] uppercase tracking-wide text-[#8c9196]">Phone</dt><dd class="mt-0.5">{{ $contact->phone ?: '—' }}</dd></div>
                <div><dt class="text-[10px] uppercase tracking-wide text-[#8c9196]">Consent at</dt><dd class="mt-0.5">{{ $contact->consent_at?->format('d M Y') ?? '—' }}</dd></div>
                <div><dt class="text-[10px] uppercase tracking-wide text-[#8c9196]">External ID</dt><dd class="mt-0.5 font-mono text-xs">{{ $contact->external_id ?: '—' }}</dd></div>
            </dl>
        </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="mb-3 text-sm font-semibold tracking-tight">Related leads</h2>
            <div class="space-y-2">
                @forelse($leads as $lead)
                    <a href="{{ route('admin.leads.show', $lead) }}" class="flex items-center justify-between gap-3 rounded-xl px-2 py-2 transition hover:bg-[#fafbfb]">
                        <div class="min-w-0">
                            <div class="truncate text-sm font-medium">{{ $lead->name ?: $lead->email }}</div>
                            <div class="text-xs text-[#6d7175]">{{ $lead->type }} · {{ $lead->status }}</div>
                        </div>
                        <span class="rounded-full bg-[#f1f2f4] px-2 py-0.5 text-[10px] font-semibold">{{ $lead->score ?? 0 }}</span>
                    </a>
                @empty
                    <p class="text-sm text-[#6d7175]">No linked leads.</p>
                @endforelse
            </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-2">
            <h2 class="mb-3 text-sm font-semibold tracking-tight">Quotes</h2>
            <div class="space-y-2">
                @forelse($quotes as $quote)
                    <a href="{{ route('admin.crm.quotes.show', $quote) }}" class="flex items-center justify-between gap-3 rounded-xl px-2 py-2 transition hover:bg-[#fafbfb]">
                        <div>
                            <div class="text-sm font-medium">{{ $quote->number }}</div>
                            <div class="text-xs text-[#6d7175]">{{ str_replace('_',' ',$quote->status) }}</div>
                        </div>
                        <div class="text-sm font-semibold tabular-nums">{{ $quote->currency }} {{ number_format($quote->total_cents/100, 2) }}</div>
                    </a>
                @empty
                    <p class="text-sm text-[#6d7175]">No quotes.</p>
                @endforelse
            </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-2">
            <h2 class="mb-3 text-sm font-semibold tracking-tight">Opportunities</h2>
            <div class="space-y-2">
                @forelse($opps as $opp)
                    <a href="{{ route('admin.crm.opportunities.show', $opp) }}" class="flex items-center justify-between gap-3 rounded-xl px-2 py-2 transition hover:bg-[#fafbfb]">
                        <div>
                            <div class="text-sm font-medium">{{ $opp->title }}</div>
                            <div class="text-xs text-[#6d7175]">{{ $opp->stage?->name ?? '—' }} · {{ $opp->status }}</div>
                        </div>
                        <div class="text-sm font-semibold tabular-nums">AUD {{ number_format($opp->amount_cents/100, 2) }}</div>
                    </a>
                @empty
                    <p class="text-sm text-[#6d7175]">No opportunities.</p>
                @endforelse
            </div>
        </section>

        <section class="rounded-2xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)] lg:col-span-2 crm-fade-in crm-fade-in-delay-3">
            <h2 class="mb-3 text-sm font-semibold tracking-tight">Conversations</h2>
            <div class="space-y-2">
                @forelse($conversations as $conversation)
                    <a href="{{ route('admin.crm.inbox.index', ['c' => $conversation->id]) }}" class="flex items-center justify-between gap-3 rounded-xl px-2 py-2 transition hover:bg-[#fafbfb]">
                        <div class="min-w-0">
                            <div class="truncate text-sm font-medium">{{ $conversation->subject ?: 'No subject' }}</div>
                            <div class="text-xs text-[#6d7175]">{{ $conversation->channel }} · {{ $conversation->status }}</div>
                        </div>
                        <div class="text-xs text-[#8c9196]">{{ $conversation->last_message_at?->diffForHumans() }}</div>
                    </a>
                @empty
                    <p class="text-sm text-[#6d7175]">No conversations.</p>
                @endforelse
            </div>
        </section>
    </div>
</x-crm.shell>
@endsection