{{-- Shared CRM communication-log panel. Expects $interactions in scope and the
     LogsInteractions trait on the host component. Channels are always the CRM
     list (Interaction::CRM_TYPES), whatever the host passes. --}}
@php
    $interactionTypes = \App\Models\Interaction::CRM_TYPES;
    $interactionContacts = $showInteractions ? $this->interactionContacts() : collect();
    $needsNextAction = $showInteractions && $this->interactionNeedsNextAction();
@endphp
<x-dialog-modal wire:model.live="showInteractions" maxWidth="2xl">
    <x-slot name="title">
        {{ __('Communication Log') }}
        @if ($subjectLabel)
            <span class="text-slate-400">: {{ $subjectLabel }}</span>
        @endif
    </x-slot>

    <x-slot name="content">
        {{-- Add form --}}
        @if ($canManage)
            <div class="rounded-xl border border-slate-200 bg-slate-50/70 p-4">
                <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                    <div>
                        <x-label for="interaction-type" value="{{ __('Channel') }}" />
                        <select id="interaction-type" wire:model="interactionType" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach ($interactionTypes as $key => $label)
                                <option value="{{ $key }}">{{ __($label) }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="interactionType" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="interaction-when" value="{{ __('When') }}" />
                        <x-input id="interaction-when" type="datetime-local" class="mt-1 block w-full" wire:model="interactionOccurredAt" />
                        <x-input-error for="interactionOccurredAt" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="interaction-direction" value="{{ __('Direction') }}" />
                        <select id="interaction-direction" wire:model="interactionDirection" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('Not recorded') }}</option>
                            @foreach (\App\Models\Interaction::DIRECTIONS as $key => $label)
                                <option value="{{ $key }}">{{ __($label) }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="interactionDirection" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="interaction-contact" value="{{ __('Contact') }}" />
                        <select id="interaction-contact" wire:model="interactionContactId" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ $interactionContacts->isEmpty() ? __('No contacts on record') : __('Not recorded') }}</option>
                            @foreach ($interactionContacts as $contact)
                                <option value="{{ $contact->id }}">{{ $contact->name }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="interactionContactId" class="mt-2" />
                    </div>
                    <div class="sm:col-span-2">
                        <x-label for="interaction-body" value="{{ __('Details') }}" />
                        <textarea id="interaction-body" rows="2" wire:model="interactionBody" placeholder="{{ __('What was discussed?') }}" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                        <x-input-error for="interactionBody" class="mt-2" />
                    </div>
                    <div class="sm:col-span-2">
                        <x-label for="interaction-outcome" value="{{ __('Outcome') }}" />
                        <x-input id="interaction-outcome" type="text" class="mt-1 block w-full" wire:model="interactionOutcome" placeholder="{{ __('e.g. Asked for a quote by Friday') }}" />
                        <x-input-error for="interactionOutcome" class="mt-2" />
                    </div>
                    @if ($needsNextAction)
                        <div>
                            <x-label for="interaction-next" value="{{ __('Next action') }}" />
                            <x-input id="interaction-next" type="text" class="mt-1 block w-full" wire:model="interactionNextAction" />
                            <x-input-error for="interactionNextAction" class="mt-2" />
                        </div>
                        <div>
                            <x-label for="interaction-next-due" value="{{ __('Next action due') }}" />
                            <x-input id="interaction-next-due" type="date" class="mt-1 block w-full" wire:model="interactionNextDue" />
                            <x-input-error for="interactionNextDue" class="mt-2" />
                        </div>
                    @endif
                </div>
                <div class="mt-3 flex justify-end">
                    <x-button wire:click="saveInteraction" wire:loading.attr="disabled">
                        <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                        {{ __('Log interaction') }}
                    </x-button>
                </div>
            </div>
        @endif

        {{-- Timeline --}}
        <div class="mt-5 max-h-80 space-y-3 overflow-y-auto">
            @forelse ($interactions as $interaction)
                <div wire:key="interaction-{{ $interaction->id }}" class="flex items-start gap-3 rounded-xl border border-slate-100 p-3">
                    <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-indigo-50 text-[11px] font-bold uppercase text-indigo-600">
                        {{ \Illuminate\Support\Str::of($interaction->type)->substr(0, 2)->upper() }}
                    </span>
                    <div class="min-w-0 flex-1">
                        <div class="flex items-center justify-between gap-3">
                            <span class="text-sm font-semibold text-slate-800">
                                {{ __($interactionTypes[$interaction->type] ?? ucfirst($interaction->type)) }}
                                @if ($interaction->direction)
                                    <span class="font-normal text-slate-400">· {{ __(\App\Models\Interaction::DIRECTIONS[$interaction->direction] ?? $interaction->direction) }}</span>
                                @endif
                            </span>
                            <span class="shrink-0 text-xs text-slate-400">{{ $interaction->occurred_at?->diffForHumans() }}</span>
                        </div>
                        <p class="mt-1 whitespace-pre-line text-sm text-slate-600">{{ $interaction->body }}</p>
                        @if ($interaction->outcome)
                            <p class="mt-1 text-sm text-slate-700"><span class="font-medium">{{ __('Outcome') }}:</span> {{ $interaction->outcome }}</p>
                        @endif
                        <p class="mt-1 text-xs text-slate-400">
                            {{ $interaction->user?->name ?? __('System') }}
                            @if ($interaction->contact)
                                {{ __('with :name', ['name' => $interaction->contact->name]) }}
                            @endif
                        </p>
                    </div>
                </div>
            @empty
                <p class="py-8 text-center text-sm text-slate-400">{{ __('No interactions logged yet.') }}</p>
            @endforelse
        </div>
    </x-slot>

    <x-slot name="footer">
        <x-secondary-button wire:click="closeInteractions" wire:loading.attr="disabled">
            {{ __('Close') }}
        </x-secondary-button>
    </x-slot>
</x-dialog-modal>