@php
    $channelBadge = ['whatsapp' => 'badge-green', 'messenger' => 'badge-blue', 'instagram' => 'badge-pink'][$conversation->contact->channel] ?? 'badge-slate';
@endphp

<div class="space-y-6 p-4">
    <section>
        <h3 class="mb-2.5 text-[11px] font-semibold tracking-wider text-slate-500 uppercase">{{ __('Hasta') }}</h3>
        <div class="flex items-center gap-3">
            <x-avatar :contact="$conversation->contact" :badge="false" class="size-10 text-sm" />
            <div class="min-w-0">
                <p class="truncate text-sm font-semibold text-slate-900">{{ $conversation->contact->displayName() }}</p>
                <span class="badge {{ $channelBadge }}">
                    <x-channel-icon :channel="$conversation->contact->channel" class="size-3" />
                    {{ $conversation->contact->channelLabel() }}
                </span>
            </div>
        </div>
        <dl class="mt-3 space-y-1.5 text-sm">
            <div class="flex items-center gap-2">
                <dt class="text-slate-500"><x-icon name="phone" class="size-4" /><span class="sr-only">{{ __('Telefon') }}</span></dt>
                @if ($conversation->contact->phone)
                    <dd class="flex flex-1 items-center gap-2 font-mono text-[13px] font-medium text-slate-800">
                        {{ $conversation->contact->phone }}
                        @if (app(\App\Services\SantralClient::class)->configured())
                            <button wire:click="callPatient" class="btn btn-primary btn-sm ml-auto h-7 px-2.5"
                                    wire:loading.attr="disabled" wire:target="callPatient"
                                    title="{{ __('Santral üzerinden ara: önce sizin dahiliniz çalar, açınca hasta aranır') }}">
                                <x-icon name="phone" class="size-3.5" />
                                <span wire:loading.remove wire:target="callPatient">{{ __('Ara') }}</span>
                                <span wire:loading wire:target="callPatient">…</span>
                            </button>
                        @endif
                    </dd>
                @else
                    <dd class="text-[13px] text-slate-500">{{ __('Telefon henüz alınmadı') }}</dd>
                @endif
            </div>
        </dl>
        @if ($callStatus)
            <p class="mt-2 rounded-ctl bg-teal-50 px-2.5 py-1.5 text-[12.5px] text-teal-800">{{ $callStatus }}</p>
        @endif
        <div class="mt-3 space-y-2">
            <input type="email" value="{{ $conversation->contact->email }}" placeholder="{{ __('E-posta ekle') }}"
                   aria-label="{{ __('Hasta e-postası') }}"
                   wire:change="updateContactField('email', $event.target.value)"
                   wire:key="{{ $panelKey ?? 'p' }}-email-{{ $conversation->contact->id }}"
                   class="input input-sm">
            <textarea rows="3" placeholder="{{ __('Hasta notu… (sadece ekip görür)') }}"
                      aria-label="{{ __('Hasta notu') }}"
                      wire:change="updateContactField('notes', $event.target.value)"
                      wire:key="{{ $panelKey ?? 'p' }}-notes-{{ $conversation->contact->id }}"
                      class="textarea text-[13px]">{{ $conversation->contact->notes }}</textarea>
        </div>
    </section>

    <section>
        <h3 class="mb-2.5 text-[11px] font-semibold tracking-wider text-slate-500 uppercase">{{ __('Zaman Bilgisi') }}</h3>
        <div class="rounded-card bg-slate-50 p-3.5">
            <dl class="space-y-1.5 text-[13px]">
                <div class="flex items-center justify-between gap-2">
                    <dt class="text-slate-500">{{ __('İlk temas') }}</dt>
                    <dd class="font-medium text-slate-800">{{ $conversation->contact->created_at->timezone('Europe/Istanbul')->format('d.m.Y H:i') }}</dd>
                </div>
                <div class="flex items-center justify-between gap-2">
                    <dt class="text-slate-500">{{ __('Konuşma açılışı') }}</dt>
                    <dd class="font-medium text-slate-800">{{ $conversation->created_at->timezone('Europe/Istanbul')->format('d.m.Y H:i') }}</dd>
                </div>
                <div class="flex items-center justify-between gap-2">
                    <dt class="text-slate-500">{{ __('Son mesaj') }}</dt>
                    <dd class="font-medium text-slate-800">{{ $conversation->last_message_at?->timezone('Europe/Istanbul')->format('d.m.Y H:i') ?? '—' }}</dd>
                </div>
            </dl>
        </div>
    </section>

    <section>
        <h3 class="mb-2.5 text-[11px] font-semibold tracking-wider text-slate-500 uppercase">{{ __('Etiketler') }}</h3>
        <div class="flex flex-wrap gap-1.5">
            @foreach ($conversation->contact->tags as $tag)
                <span class="badge badge-violet" wire:key="{{ $panelKey ?? 'p' }}-ctag-{{ $tag->id }}">
                    {{ $tag->name }}
                    <button wire:click="removeTag({{ $tag->id }})" class="-mr-0.5 cursor-pointer rounded-full hover:text-violet-900"
                            aria-label="{{ __(':tag etiketini kaldır', ['tag' => $tag->name]) }}">
                        <x-icon name="x" class="size-3" />
                    </button>
                </span>
            @endforeach
        </div>
        <form wire:submit="addTag" class="mt-2 flex gap-1.5">
            <input type="text" wire:model="newTag" list="tag-suggestions-{{ $panelKey ?? 'p' }}" placeholder="{{ __('Etiket ekle') }}"
                   aria-label="{{ __('Yeni etiket') }}" class="input input-sm flex-1" maxlength="40">
            <datalist id="tag-suggestions-{{ $panelKey ?? 'p' }}">
                @foreach ($allTags as $t)
                    <option value="{{ $t->name }}"></option>
                @endforeach
            </datalist>
            <button class="btn btn-secondary btn-sm">{{ __('Ekle') }}</button>
        </form>
    </section>

    <section>
        <h3 class="mb-2.5 text-[11px] font-semibold tracking-wider text-slate-500 uppercase">{{ __('Engel Durumu') }}</h3>
        @if ($conversation->contact->blocked_at)
            <div class="rounded-card bg-slate-50 p-3.5">
                <div class="flex items-start gap-3">
                    <span class="flex size-9 shrink-0 items-center justify-center rounded-ctl bg-red-100 text-red-600">
                        <x-icon name="ban" class="size-4.5" />
                    </span>
                    <div class="min-w-0 flex-1 space-y-1 text-[13px]">
                        <p class="font-semibold text-slate-900">{{ __('Bu kişi engelli') }}</p>
                        <p class="text-slate-600">{{ $conversation->contact->blocked_reason }}</p>
                        <p class="text-xs text-slate-500">{{ $conversation->contact->blocked_at->timezone('Europe/Istanbul')->format('d.m.Y H:i') }}</p>
                        <button wire:click="unblockContact" class="btn btn-secondary btn-sm mt-1.5">{{ __('Engeli Kaldır') }}</button>
                    </div>
                </div>
            </div>
        @else
            <button wire:click="blockContact" wire:confirm="{{ __('Bu kişi engellensin mi? Bot cevap vermez, lead oluşmaz.') }}"
                    class="btn btn-secondary btn-sm text-red-600 hover:bg-red-50 hover:text-red-700">
                <x-icon name="ban" class="size-4" /> {{ __('Kişiyi Engelle') }}
            </button>
        @endif
    </section>

    <section>
        <h3 class="mb-2.5 text-[11px] font-semibold tracking-wider text-slate-500 uppercase">{{ __('Reklam Kaynağı') }}</h3>
        @if ($attribution)
            <div class="rounded-card bg-slate-50 p-3.5">
                <div class="flex items-start gap-3">
                    <span class="flex size-9 shrink-0 items-center justify-center rounded-ctl bg-violet-100 text-violet-600">
                        <x-icon name="megaphone" class="size-4.5" />
                    </span>
                    <div class="min-w-0 flex-1 space-y-2">
                        <p class="text-[13px] leading-snug font-semibold text-slate-900">{{ $attribution->headline ?? __('Reklam') }}</p>
                        <dl class="space-y-1 text-xs">
                            <div class="flex items-center justify-between gap-2">
                                <dt class="text-slate-500">{{ __('Kaynak') }}</dt>
                                <dd class="font-medium text-slate-700">{{ ['ctwa' => 'Click-to-WhatsApp', 'ctm' => 'Click-to-Messenger', 'ig_ad' => __('Instagram Reklamı')][$attribution->source] ?? $attribution->source }}</dd>
                            </div>
                            <div class="flex items-center justify-between gap-2">
                                <dt class="text-slate-500">{{ __('Tıklama tarihi') }}</dt>
                                <dd class="font-medium text-slate-700">{{ $attribution->created_at->timezone('Europe/Istanbul')->format('d.m.Y') }}</dd>
                            </div>
                            @if ($attribution->ad_id)
                                <div class="flex items-center justify-between gap-2">
                                    <dt class="text-slate-500">{{ __('Reklam ID') }}</dt>
                                    <dd class="font-mono font-medium text-slate-700">{{ $attribution->ad_id }}</dd>
                                </div>
                            @endif
                        </dl>
                    </div>
                </div>
            </div>
        @else
            <p class="text-[13px] text-slate-500">{{ __('Organik — reklam kaydı yok.') }}</p>
        @endif
    </section>

    <section>
        <h3 class="mb-2.5 text-[11px] font-semibold tracking-wider text-slate-500 uppercase">{{ __('Lead Durumu') }}</h3>
        @if ($lead)
            <div class="rounded-card bg-slate-50 p-3.5">
                <div class="flex items-start gap-3">
                    <span class="flex size-9 shrink-0 items-center justify-center rounded-ctl bg-teal-100 text-teal-700">
                        <x-icon name="phone" class="size-4.5" />
                    </span>
                    <div class="min-w-0 flex-1 space-y-2">
                        <p class="font-mono text-[13px] font-semibold text-slate-900">{{ $lead->phone }}</p>
                        <div class="flex flex-wrap items-center gap-1.5">
                            <span class="badge {{ \App\Models\Lead::STATUS_COLORS[$lead->status]['badge'] ?? 'badge-slate' }}">
                                {{ __(\App\Models\Lead::STATUSES[$lead->status] ?? $lead->status) }}
                            </span>
                            @if ($lead->capi_sent_at)
                                <span class="badge badge-slate" title="{{ __("Bu lead, reklam optimizasyonu için Meta'ya (Conversions API) bildirildi") }}">
                                    <x-icon name="check" class="size-3" /> {{ __("Meta'ya bildirildi") }}
                                </span>
                            @endif
                        </div>
                        <a href="{{ route('leads') }}" class="inline-flex items-center gap-1 rounded-ctl text-[13px] font-medium text-teal-700 hover:text-teal-800 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">
                            {{ __('Lead panelinde aç') }} →
                        </a>
                    </div>
                </div>
            </div>
        @else
            <p class="text-[13px] text-slate-500">{{ __('Henüz lead oluşmadı. Bot telefon numarasını aldığında burada görünecek.') }}</p>
        @endif
    </section>
</div>