@php
    $directionOptions = \App\Support\Lookup::options('message_direction');
@endphp

<x-app-layout title="Wire traffic · {{ $analyzer->code }}">
    <x-page-header
        title="{{ $analyzer->code }} — the wire"
        subtitle="{{ $analyzer->name }} · {{ $analyzer->connection_label }}@if ($analyzer->connection_type === 'tcp_ip' && $analyzer->host) · {{ $analyzer->host }}:{{ $analyzer->port }} @endif"
        icon="chat"
        :back="route('analyzers.index')"
        backLabel="Analyzer bridge">
        <x-slot:meta>
            <x-status-badge field="analyzer_status" :value="$analyzer->status" size="sm" dot />
            @if ($analyzer->is_bidirectional)
                <span class="inline-flex items-center gap-1 rounded-md bg-emerald-50 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-emerald-700">
                    two-way
                </span>
            @endif
        </x-slot:meta>
    </x-page-header>

    <x-flash />

    <div class="mt-6 grid gap-6 lg:grid-cols-3">
        <div class="space-y-6 lg:col-span-2">
            <x-card title="Raw traffic" icon="list" :padded="false">
                <x-slot:header>
                    {{ $messages->total() }} message(s) — every byte kept verbatim for the interface engineer
                </x-slot:header>

                <form method="GET" action="{{ route('analyzers.messages', $analyzer) }}"
                      class="flex flex-wrap items-end gap-3 border-b border-slate-100 px-5 py-4">
                    <div class="min-w-[160px]">
                        <label class="block text-xs font-medium text-slate-500">Direction</label>
                        <select name="direction" class="mt-1 block w-full rounded-lg border-slate-300 text-sm">
                            <option value="">Both directions</option>
                            @foreach ($directionOptions as $value => $label)
                                <option value="{{ $value }}" @selected($request->string('direction') === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <button type="submit" class="hms-btn-secondary hms-btn-sm">
                        <x-icon name="filter" size="xs" /> Apply
                    </button>
                    <a href="{{ route('analyzers.messages', $analyzer) }}" class="hms-link text-xs">Reset</a>
                </form>

                <ul class="divide-y divide-slate-100">
                    @forelse ($messages as $message)
                        <li class="px-5 py-4">
                            <div class="flex flex-wrap items-start justify-between gap-3">
                                <div class="min-w-0">
                                    <div class="flex flex-wrap items-center gap-2">
                                        <span class="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide {{ $message->direction === 'outbound' ? 'bg-sky-50 text-sky-700' : 'bg-violet-50 text-violet-700' }}">
                                            {{ $message->direction_label }}
                                        </span>
                                        <span class="text-xs font-semibold text-slate-700">{{ $message->type_label }}</span>
                                        <span class="font-mono text-xs text-slate-400">{{ $message->control_id }}</span>
                                    </div>

                                    <p class="mt-1 text-xs text-slate-500">
                                        @if ($message->labOrder)
                                            for
                                            <a href="{{ route('lab-orders.show', $message->labOrder) }}" class="hms-link font-medium">
                                                {{ $message->labOrder->order_no }}
                                            </a>
                                            @elseif ($message->message_type === 'calibration')
                                            machine calibration
                                            @else
                                            no linked request
                                            @endif
                                        </p>
                                    </div>

                                <div class="text-right">
                                    <x-status-badge field="analyzer_message_status" :value="$message->status" size="sm" />
                                    @if ($message->result_count)
                                        <p class="mt-0.5 text-xs text-slate-500">{{ $message->result_count }} segment/result(s)</p>
                                    @endif
                                    <p class="mt-0.5 text-xs text-slate-400">{{ $message->created_at->format('d M Y H:i:s') }}</p>
                                </div>
                            </div>

                            @if ($message->error_message)
                                <p class="mt-2 rounded-lg bg-red-50 px-3 py-2 text-xs text-red-700">{{ $message->error_message }}</p>
                            @endif

                            <details class="mt-2">
                                <summary class="cursor-pointer text-xs font-medium text-slate-500 hover:text-slate-700">
                                    Read the raw payload
                                </summary>
                                <pre class="mt-2 overflow-x-auto rounded-lg bg-slate-900 p-3 font-mono text-[11px] leading-relaxed text-slate-100">{{ $message->payload }}</pre>
                            </details>
                        </li>
                    @empty
                        <li class="py-10 text-center text-sm text-slate-400">
                            Nothing on the wire yet — transmit a worklist from a request's workspace to start the conversation.
                        </li>
                    @endforelse
                </ul>

                @if ($messages->hasPages())
                    <div class="border-t border-slate-100 px-5 py-3">
                        {{ $messages->links() }}
                    </div>
                @endif
            </x-card>
        </div>

        <div class="space-y-6">
            <x-card title="The machine" icon="scan">
                <dl class="hms-dl">
                    <div>
                        <dt>Code</dt>
                        <dd class="font-mono">{{ $analyzer->code }}</dd>
                    </div>
                    <div>
                        <dt>Name</dt>
                        <dd>{{ $analyzer->name }}</dd>
                    </div>
                    <div>
                        <dt>Department</dt>
                        <dd>{{ $analyzer->department_label }}@if ($analyzer->section) · {{ $analyzer->section }} @endif</dd>
                    </div>
                    <div>
                        <dt>Connection</dt>
                        <dd>
                            {{ $analyzer->connection_label }}
                            @if ($analyzer->connection_type === 'tcp_ip' && $analyzer->host)
                                <span class="block font-mono text-xs text-slate-500">{{ $analyzer->host }}:{{ $analyzer->port }}</span>
                            @endif
                        </dd>
                    </div>
                    <div>
                        <dt>Direction</dt>
                        <dd>{{ $analyzer->is_bidirectional ? 'Two-way — worklists out, batches in' : 'One-way — results in only' }}</dd>
                    </div>
                    @if ($analyzer->manufacturer || $analyzer->model)
                        <div>
                            <dt>Hardware</dt>
                            <dd>{{ collect([$analyzer->manufacturer, $analyzer->model])->filter()->implode(' · ') }}</dd>
                        </div>
                    @endif
                    @if ($analyzer->software_version)
                        <div>
                            <dt>Software</dt>
                            <dd>v{{ $analyzer->software_version }}</dd>
                        </div>
                    @endif
                    @if ($analyzer->installed_on)
                        <div>
                            <dt>Installed</dt>
                            <dd>{{ $analyzer->installed_on->format('d M Y') }}</dd>
                        </div>
                    @endif
                </dl>

                @if ($analyzer->notes)
                    <p class="mt-3 border-t border-slate-100 pt-3 text-xs text-slate-600">{{ $analyzer->notes }}</p>
                @endif
            </x-card>

            <x-card title="Message types" icon="info">
                <dl class="space-y-3 text-xs text-slate-600">
                    <div>
                        <dt class="font-semibold text-slate-800">ORM ^O01</dt>
                        <dd>Outbound worklist: the pending lines on one request, as order segments.</dd>
                    </div>
                    <div>
                        <dt class="font-semibold text-slate-800">ORU ^R01</dt>
                        <dd>Inbound result batch: measured values back from the machine, mapped to lines by test code.</dd>
                    </div>
                    <div>
                        <dt class="font-semibold text-slate-800">QCK ^Q02</dt>
                        <dd>Query acknowledgement: the machine confirming what it is working on.</dd>
                    </div>
                    <div>
                        <dt class="font-semibold text-slate-800">Calibration</dt>
                        <dd>Maintenance-era traffic kept for the record, not tied to a request.</dd>
                    </div>
                </dl>
            </x-card>
        </div>
    </div>
</x-app-layout>