@php
    $patient = $session->patient;
    $canManage = auth()->user()->can('interpreting.manage');
    $open = $session->is_open;
@endphp

<x-app-layout title="Session {{ $session->session_no }}">
    <x-page-header
        title="{{ $session->session_no }}"
        subtitle="{{ $session->language_label }} interpretation · {{ $session->mode_label }}{{ $session->is_video && $session->device ? ' · '.$session->device_label : '' }}"
        icon="video"
        :back="route('communication.interpreting.index')"
        backLabel="Interpreting board">
        <x-slot:meta>
            <x-status-badge field="interpreter_session_status" :value="$session->status" size="sm" dot />
            <x-status-badge field="interpreter_priority" :value="$session->priority" size="sm" />
            @if ($session->follow_up)
                <x-status-badge label="Follow-up flagged" color="amber" size="sm" />
            @endif
        </x-slot:meta>

        <x-slot:actions>
            @if ($canManage && $open)
                <a href="{{ route('communication.interpreting.edit', $session) }}" class="hms-btn-secondary">
                    <x-icon name="edit" size="sm" />
                    Edit
                </a>
            @endif

            @if ($canManage)
                @if (in_array($session->status, ['requested', 'scheduled'], true))
                    <button type="button" class="hms-btn-primary" x-data @click="$dispatch('open-modal', 'start-session')">
                        <x-icon name="video" size="sm" />
                        Start session
                    </button>
                @elseif ($session->status === 'in_progress')
                    <button type="button" class="hms-btn-primary" x-data @click="$dispatch('open-modal', 'complete-session')">
                        <x-icon name="check" size="sm" />
                        Complete session
                    </button>
                @endif
            @endif
        </x-slot:actions>
    </x-page-header>

    <div class="grid gap-6 xl:grid-cols-[1fr_20rem]">
        <div class="space-y-6">
            <x-card title="Session details" icon="clipboard-list">
                <div class="grid gap-x-6 gap-y-4 sm:grid-cols-3">
                    <div>
                        <dt class="text-xs font-medium uppercase tracking-wide text-slate-400">Language</dt>
                        <dd class="mt-1"><x-status-badge field="interpreter_language" :value="$session->language" size="sm" /></dd>
                    </div>

                    <div>
                        <dt class="text-xs font-medium uppercase tracking-wide text-slate-400">Mode</dt>
                        <dd class="mt-1"><x-status-badge field="interpreter_mode" :value="$session->mode" size="sm" /></dd>
                    </div>

                    @if ($session->is_video)
                        <div>
                            <dt class="text-xs font-medium uppercase tracking-wide text-slate-400">Device</dt>
                            <dd class="mt-1 text-sm text-slate-700">{{ $session->device_label }}</dd>
                        </div>
                    @else
                        <div>
                            <dt class="text-xs font-medium uppercase tracking-wide text-slate-400">Modality note</dt>
                            <dd class="mt-1 text-sm text-slate-700">Over the phone — no visual channel</dd>
                        </div>
                    @endif

                    <div>
                        <dt class="text-xs font-medium uppercase tracking-wide text-slate-400">Scheduled at</dt>
                        <dd class="mt-1 text-sm tabular-nums text-slate-700">
                            {{ $session->scheduled_at?->format('d M Y H:i') ?? 'Not scheduled' }}
                        </dd>
                    </div>

                    <div>
                        <dt class="text-xs font-medium uppercase tracking-wide text-slate-400">Started</dt>
                        <dd class="mt-1 text-sm tabular-nums text-slate-700">{{ $session->started_at?->format('d M H:i') ?? '—' }}</dd>
                    </div>

                    <div>
                        <dt class="text-xs font-medium uppercase tracking-wide text-slate-400">Ended</dt>
                        <dd class="mt-1 text-sm tabular-nums text-slate-700">
                            {{ $session->ended_at?->format('d M H:i') ?? '—' }}
                            @if ($session->duration_minutes)
                                <span class="text-slate-400">· {{ $session->duration_minutes }} min</span>
                            @endif
                        </dd>
                    </div>

                    <div>
                        <dt class="text-xs font-medium uppercase tracking-wide text-slate-400">Requested by</dt>
                        <dd class="mt-1 text-sm text-slate-700">{{ $session->requestedBy?->name ?? '—' }}</dd>
                    </div>

                    <div>
                        <dt class="text-xs font-medium uppercase tracking-wide text-slate-400">Raised</dt>
                        <dd class="mt-1 text-sm text-slate-700">{{ $session->created_at?->format('d M Y H:i') }}</dd>
                    </div>

                    <div>
                        <dt class="text-xs font-medium uppercase tracking-wide text-slate-400">Linked to</dt>
                        <dd class="mt-1 text-sm text-slate-700">
                            @if ($session->admission)
                                <span class="font-mono text-xs">{{ $session->admission->admission_no }}</span>
                                @if ($session->admission->ward)
                                    · {{ $session->admission->ward->name }}
                                @endif
                                @if ($session->admission->room)
                                    · Room {{ $session->admission->room->room_number }}
                                @endif
                                @if ($session->admission->bed)
                                    · Bed {{ $session->admission->bed->bed_number }}
                                @endif
                            @elseif ($session->appointment)
                                <span class="font-mono text-xs">{{ $session->appointment->appointment_no }}</span>
                                · {{ $session->appointment->appointment_date?->format('d M Y') }}
                                {{ $session->appointment->slot_time }}
                            @else
                                <span class="text-slate-400">Standalone request</span>
                            @endif
                        </dd>
                    </div>
                </div>
            </x-card>

            <x-card title="Interpreter" icon="users">
                @if ($session->interpreter)
                    <div class="flex flex-wrap items-start justify-between gap-4">
                        <div>
                            <p class="text-base font-semibold text-slate-900">{{ $session->interpreter->name }}</p>
                            <div class="mt-1 flex flex-wrap items-center gap-2">
                                <x-status-badge field="interpreter_type" :value="$session->interpreter->type" size="sm" />
                                @if ($session->interpreter->agency)
                                    <span class="text-xs text-slate-500">{{ $session->interpreter->agency }}</span>
                                @endif
                            </div>
                            <div class="mt-3 flex flex-wrap gap-1.5">
                                @foreach ($session->interpreter->language_labels as $label)
                                    <span class="inline-flex items-center rounded-full bg-slate-100 px-2.5 py-1 text-[11px] font-medium text-slate-600">{{ $label }}</span>
                                @endforeach
                            </div>
                            @if ($session->interpreter->certification_no)
                                <p class="mt-3 font-mono text-xs text-slate-500">Cert. {{ $session->interpreter->certification_no }}</p>
                            @endif
                        </div>

                        <div class="flex flex-col items-end gap-2 text-sm">
                            @if ($session->interpreter->phone)
                                <a href="tel:{{ $session->interpreter->phone }}" class="inline-flex items-center gap-1.5 text-brand-700 hover:text-brand-800">
                                    <x-icon name="phone" size="xs" />
                                    {{ $session->interpreter->phone }}
                                </a>
                            @endif
                            @if ($session->interpreter->email)
                                <a href="mailto:{{ $session->interpreter->email }}" class="inline-flex items-center gap-1.5 text-slate-500 hover:text-slate-700">
                                    <x-icon name="mail" size="xs" />
                                    {{ $session->interpreter->email }}
                                </a>
                            @endif
                        </div>
                    </div>
                @else
                    <p class="text-sm text-slate-500">
                        No interpreter routed yet.
                        @if ($canManage && $open)
                            <a href="{{ route('communication.interpreting.edit', $session) }}" class="font-medium text-brand-700 hover:text-brand-800">Assign one from the directory</a>.
                        @endif
                    </p>
                @endif
            </x-card>

            <x-card title="Notes" icon="document-text">
                <div class="space-y-4 text-sm">
                    <div>
                        <p class="text-xs font-medium uppercase tracking-wide text-slate-400">Why interpreting was needed</p>
                        <p class="mt-1 whitespace-pre-line text-slate-700">{{ $session->reason ?: '—' }}</p>
                    </div>

                    @if ($session->prep_notes)
                        <div>
                            <p class="text-xs font-medium uppercase tracking-wide text-slate-400">Prep notes for the interpreter</p>
                            <p class="mt-1 whitespace-pre-line text-slate-700">{{ $session->prep_notes }}</p>
                        </div>
                    @endif

                    @if ($session->interpreter_notes)
                        <div>
                            <p class="text-xs font-medium uppercase tracking-wide text-slate-400">Interpreter's notes</p>
                            <p class="mt-1 whitespace-pre-line text-slate-700">{{ $session->interpreter_notes }}</p>
                        </div>
                    @endif

                    @if ($session->cancellation_reason)
                        <div>
                            <p class="text-xs font-medium uppercase tracking-wide text-slate-400">
                                {{ $session->status === 'no_show' ? 'No show — what happened' : 'Cancellation reason' }}
                            </p>
                            <p class="mt-1 whitespace-pre-line text-slate-700">{{ $session->cancellation_reason }}</p>
                        </div>
                    @endif
                </div>
            </x-card>

            @if ($canManage && $open)
                <x-card title="Run the session" icon="activity">
                    <p class="text-sm text-slate-500">
                        The lifecycle mirrors the call itself: the session goes live when the interpreter joins, and is
                        completed when the conversation ends — that is where the duration and the interpreter's notes
                        are captured.
                    </p>

                    <div class="mt-4 flex flex-wrap gap-3">
                        @if (in_array($session->status, ['requested', 'scheduled'], true))
                            <button type="button" class="hms-btn-primary hms-btn-sm" x-data @click="$dispatch('open-modal', 'start-session')">
                                <x-icon name="video" size="xs" />
                                Start — interpreter joined
                            </button>
                            <button type="button" class="hms-btn-secondary hms-btn-sm" x-data @click="$dispatch('open-modal', 'no-show-session')">
                                <x-icon name="exclamation" size="xs" />
                                Interpreter did not connect
                            </button>
                        @elseif ($session->status === 'in_progress')
                            <button type="button" class="hms-btn-primary hms-btn-sm" x-data @click="$dispatch('open-modal', 'complete-session')">
                                <x-icon name="check" size="xs" />
                                Complete session
                            </button>
                        @endif

                        <button type="button" class="hms-btn-ghost hms-btn-sm text-red-600 hover:text-red-700" x-data @click="$dispatch('open-modal', 'cancel-session')">
                            <x-icon name="x" size="xs" />
                            Cancel session
                        </button>
                    </div>
                </x-card>
            @endif

            <x-card title="Earlier sessions for this patient" icon="clock">
                @if ($recent->isEmpty())
                    <p class="text-sm text-slate-500">This is the first interpreter session recorded for {{ $patient?->full_name ?? 'this patient' }}.</p>
                @else
                    <div class="divide-y divide-slate-100">
                        @foreach ($recent as $past)
                            <a href="{{ route('communication.interpreting.show', $past) }}"
                               class="flex items-center justify-between gap-3 py-2.5 transition hover:text-brand-700">
                                <div class="flex min-w-0 items-center gap-3">
                                    <span class="font-mono text-xs text-slate-700">{{ $past->session_no }}</span>
                                    <span class="truncate text-xs text-slate-500">{{ $past->created_at?->format('d M Y') }}</span>
                                </div>
                                <div class="flex shrink-0 items-center gap-2">
                                    <x-status-badge field="interpreter_language" :value="$past->language" size="sm" />
                                    <x-status-badge field="interpreter_mode" :value="$past->mode" size="sm" />
                                    <x-status-badge field="interpreter_session_status" :value="$past->status" size="sm" dot />
                                </div>
                            </a>
                        @endforeach
                    </div>
                @endif
            </x-card>
        </div>

        <div class="space-y-6">
            <x-card title="{{ $open ? 'Join details' : 'Call summary' }}" icon="{{ $open ? 'key' : 'clock' }}">
                @if ($open)
                    @if ($session->is_video)
                        @if ($session->platform)
                            <p class="text-xs font-medium uppercase tracking-wide text-slate-400">Platform</p>
                            <p class="text-sm font-medium text-slate-800">{{ $session->platform }}</p>
                        @endif

                        @if ($session->join_url)
                            <a href="{{ $session->join_url }}" target="_blank" rel="noopener"
                               class="hms-btn-primary mt-3 w-full justify-center">
                                <x-icon name="video" size="sm" />
                                Open video room
                            </a>
                            <p class="mt-2 break-all text-[11px] text-slate-400">{{ $session->join_url }}</p>
                        @else
                            <p class="mt-3 rounded-lg bg-amber-50 px-3 py-2 text-xs leading-relaxed text-amber-800">
                                No join link yet — the interpreter and the patient's room both need it before the call.
                                {{ $canManage ? 'Add the platform and link on Edit.' : 'Ask the requester to add it.' }}
                            </p>
                        @endif
                    @else
                        <p class="text-xs font-medium uppercase tracking-wide text-slate-400">Dial</p>
                        @if ($session->interpreter?->phone)
                            <a href="tel:{{ $session->interpreter->phone }}" class="mt-1 inline-flex items-center gap-2 text-lg font-semibold text-brand-700 hover:text-brand-800">
                                <x-icon name="phone" size="sm" />
                                {{ $session->interpreter->phone }}
                            </a>
                        @else
                            <p class="mt-1 text-sm text-slate-600">The interpreter dials the requesting number.</p>
                        @endif
                    @endif

                    @if ($session->access_code)
                        <div class="mt-4 rounded-xl border border-dashed border-slate-300 bg-slate-50 px-4 py-3 text-center">
                            <p class="text-[11px] font-medium uppercase tracking-wide text-slate-400">Access code</p>
                            <p class="mt-0.5 font-mono text-xl font-semibold tracking-widest text-slate-900">{{ $session->access_code }}</p>
                        </div>
                    @endif

                    @if ($session->is_video && $session->device)
                        <div class="mt-4 flex items-center justify-between text-sm">
                            <span class="text-slate-500">Patient's device</span>
                            <span class="font-medium text-slate-700">{{ $session->device_label }}</span>
                        </div>
                    @endif

                    @if ($session->scheduled_at)
                        <div class="mt-2 flex items-center justify-between text-sm">
                            <span class="text-slate-500">Scheduled</span>
                            <span class="font-medium tabular-nums text-slate-700">{{ $session->scheduled_at->format('d M H:i') }}</span>
                        </div>
                    @endif
                @else
                    <div class="space-y-3 text-sm">
                        <div class="flex items-center justify-between">
                            <span class="text-slate-500">Started</span>
                            <span class="font-medium tabular-nums text-slate-700">{{ $session->started_at?->format('d M H:i') ?? '—' }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-slate-500">Ended</span>
                            <span class="font-medium tabular-nums text-slate-700">{{ $session->ended_at?->format('d M H:i') ?? '—' }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-slate-500">Duration</span>
                            <span class="font-medium tabular-nums text-slate-700">{{ $session->duration_minutes ? $session->duration_minutes.' min' : '—' }}</span>
                        </div>

                        @if ($session->follow_up)
                            <p class="rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-800">
                                <x-icon name="warning" size="xs" class="mr-1 inline" />Follow-up flagged — another
                                session is anticipated for this patient.
                            </p>
                        @endif
                    </div>
                @endif
            </x-card>

            <x-card title="Patient" icon="clipboard-list">
                <a href="{{ route('patients.show', $patient) }}" class="block">
                    <p class="text-base font-semibold text-slate-900 hover:text-brand-700">{{ $patient?->full_name ?? 'Unknown patient' }}</p>
                    <p class="mt-0.5 font-mono text-xs text-slate-500">{{ $patient?->medical_record_number }}</p>
                </a>

                <p class="mt-2 text-sm text-slate-600">
                    {{ $patient?->age_display }} · {{ $patient?->gender_label }}
                </p>

                <div class="mt-2 flex flex-wrap items-center gap-2">
                    <x-status-badge field="patient_category" :value="$patient?->patient_category" size="sm" />
                    @if ($patient?->is_confidential)
                        <x-status-badge label="Confidential" color="amber" size="sm" />
                    @endif
                </div>

                @if ($patient?->preferred_language)
                    <p class="mt-3 rounded-lg {{ $patient->preferred_language === $session->language ? 'bg-teal-50 text-teal-800' : 'bg-amber-50 text-amber-800' }} px-3 py-2 text-xs">
                        <x-icon name="chat" size="xs" class="mr-1 inline" />
                        Recorded preference: {{ \App\Support\Lookup::label('interpreter_language', $patient->preferred_language) }}
                        @if ($patient->preferred_language !== $session->language)
                            — this session is booked in a different language. Confirm which the conversation needs.
                        @endif
                    </p>
                @endif
            </x-card>
        </div>
    </div>

    @if ($canManage)
        <x-modal name="start-session" maxWidth="md" :show="false">
            <form method="POST" action="{{ route('communication.interpreting.start', $session) }}" class="p-6">
                @csrf
                <h3 class="text-base font-semibold text-slate-900">Start {{ $session->session_no }}?</h3>
                <p class="mt-1 text-sm text-slate-500">
                    This marks the session live — the interpreter has joined and the conversation is being
                    interpreted. {{ $session->is_video ? "The patient's room connects through the join link on this page." : 'The call runs over the phone.' }}
                </p>

                <div class="mt-5 flex justify-end gap-3">
                    <button type="button" class="hms-btn-ghost" @click="$dispatch('close-modal', 'start-session')">Not yet</button>
                    <button type="submit" class="hms-btn-primary">
                        <x-icon name="video" size="sm" />
                        Interpreter has joined
                    </button>
                </div>
            </form>
        </x-modal>

        <x-modal name="complete-session" maxWidth="md" :show="false">
            <form method="POST" action="{{ route('communication.interpreting.complete', $session) }}" class="p-6">
                @csrf
                <h3 class="text-base font-semibold text-slate-900">Complete {{ $session->session_no }}?</h3>
                <p class="mt-1 text-sm text-slate-500">
                    The conversation has ended. The duration is recorded from when the session went live.
                </p>

                <div class="mt-4">
                    <x-form.textarea name="interpreter_notes" label="Interpreter's notes" rows="3"
                                     placeholder="Anything the record should carry — context missed in translation, items needing a repeat session…" />
                </div>

                <div class="mt-3">
                    <x-form.checkbox name="follow_up" label="Flag for follow-up"
                                     hint="Another interpreted conversation is anticipated for this patient." />
                </div>

                <div class="mt-5 flex justify-end gap-3">
                    <button type="button" class="hms-btn-ghost" @click="$dispatch('close-modal', 'complete-session')">Back</button>
                    <button type="submit" class="hms-btn-primary">
                        <x-icon name="check" size="sm" />
                        Complete session
                    </button>
                </div>
            </form>
        </x-modal>

        <x-modal name="cancel-session" maxWidth="md" :show="false">
            <form method="POST" action="{{ route('communication.interpreting.cancel', $session) }}" class="p-6">
                @csrf
                <h3 class="text-base font-semibold text-slate-900">Cancel {{ $session->session_no }}?</h3>
                <p class="mt-1 text-sm text-slate-500">
                    The session will not take place. The reason is kept on the record — cancelled sessions are
                    reported on like completed ones.
                </p>

                <div class="mt-4">
                    <x-form.textarea name="cancellation_reason" label="Why is it cancelled?" rows="3" required
                                     placeholder="e.g. Consultation rescheduled — patient travelling; use the phone service instead…" />
                </div>

                <div class="mt-5 flex justify-end gap-3">
                    <button type="button" class="hms-btn-ghost" @click="$dispatch('close-modal', 'cancel-session')">Keep it</button>
                    <button type="submit" class="hms-btn-danger">
                        <x-icon name="x" size="sm" />
                        Cancel session
                    </button>
                </div>
            </form>
        </x-modal>

        <x-modal name="no-show-session" maxWidth="md" :show="false">
            <form method="POST" action="{{ route('communication.interpreting.noShow', $session) }}" class="p-6">
                @csrf
                <h3 class="text-base font-semibold text-slate-900">Mark {{ $session->session_no }} as no show?</h3>
                <p class="mt-1 text-sm text-slate-500">
                    Use this when the interpreter never connected. It is recorded separately from a cancellation so
                    the directory can follow up with the interpreter or their agency.
                </p>

                <div class="mt-4">
                    <x-form.textarea name="cancellation_reason" label="What happened?" rows="3"
                                     placeholder="Optional — e.g. waited 15 minutes, no connection to the room." />
                </div>

                <div class="mt-5 flex justify-end gap-3">
                    <button type="button" class="hms-btn-ghost" @click="$dispatch('close-modal', 'no-show-session')">Back</button>
                    <button type="submit" class="hms-btn-secondary">
                        <x-icon name="exclamation" size="sm" />
                        Mark no show
                    </button>
                </div>
            </form>
        </x-modal>
    @endif
</x-app-layout>