@php
    $filtered = $term !== '' || $status !== '' || $mode !== '' || $language !== '';
    $statusOptions = [
        '' => 'Open sessions',
        'all' => 'All sessions',
    ] + \App\Support\Lookup::options('interpreter_session_status');
    $modeOptions = ['' => 'Any mode'] + \App\Support\Lookup::options('interpreter_mode');
    $languageOptions = ['' => 'Any language'] + \App\Support\Lookup::options('interpreter_language');
@endphp

<x-app-layout title="Interpreting">
    <x-page-header
        title="Interpreting"
        subtitle="Connecting clinicians and patients with a qualified interpreter — by secure video (VRI) or over the phone (OPI), in the language the conversation needs."
        icon="video">
        <x-slot:meta>
            <span class="text-xs text-slate-500">
                {{ $stats['open'] }} open session{{ $stats['open'] === 1 ? '' : 's' }}
                @if ($stats['inProgress'] > 0) · <span class="font-medium text-amber-700">{{ $stats['inProgress'] }} live now</span>@endif
            </span>
        </x-slot:meta>

        <x-slot:actions>
            @can('interpreting.view')
                <a href="{{ route('communication.interpreters.index') }}" class="hms-btn-secondary">
                    <x-icon name="users" size="sm" />
                    Interpreter directory
                </a>
            @endcan

            @can('interpreting.manage')
                <a href="{{ route('communication.interpreting.create') }}" class="hms-btn-primary">
                    <x-icon name="plus" size="sm" />
                    Request interpreter
                </a>
            @endcan
        </x-slot:actions>
    </x-page-header>

    <div class="mb-6 grid grid-cols-2 gap-4 md:grid-cols-4">
        <x-stat-card label="Open sessions" :value="number_format($stats['open'])" icon="video" tone="brand" />
        <x-stat-card label="Live now" :value="number_format($stats['inProgress'])" icon="activity" tone="amber" />
        <x-stat-card label="Completed today" :value="number_format($stats['completedToday'])" icon="check" tone="green" />
        <x-stat-card label="Follow-ups flagged" :value="number_format($stats['followUps'])" icon="clock" tone="slate" />
    </div>

    <x-card flush>
        <form method="GET" action="{{ route('communication.interpreting.index') }}"
              class="flex flex-wrap items-end gap-3 border-b border-slate-200 bg-slate-50/70 px-5 py-4">
            <div class="min-w-[14rem] flex-1">
                <x-form.input name="q" label="Find a session" :value="$term"
                              placeholder="Session no, patient name or MRN…" />
            </div>

            <div class="w-44">
                <x-form.select name="status" label="Status" :options="$statusOptions"
                               :value="$status" :placeholder="false" />
            </div>

            <div class="w-40">
                <x-form.select name="mode" label="Mode" :options="$modeOptions"
                               :value="$mode" :placeholder="false" />
            </div>

            <div class="w-48">
                <x-form.select name="language" label="Language" :options="$languageOptions"
                               :value="$language" :placeholder="false" />
            </div>

            <button type="submit" class="hms-btn-primary hms-btn-sm">
                <x-icon name="search" size="xs" />
                Filter
            </button>

            @if ($filtered)
                <a href="{{ route('communication.interpreting.index') }}" class="hms-btn-ghost hms-btn-sm">Reset</a>
            @endif
        </form>

        @if ($sessions->isEmpty())
            <x-empty-state icon="video" title="No interpreter sessions match">
                @if ($filtered)
                    Nothing against that filter. Widen the status to “All sessions” to look further back.
                @else
                    Every VRI and OPI call is recorded here the moment someone requests one — the board opens on
                    what is still open.
                @endif

                <x-slot:actions>
                    @can('interpreting.manage')
                        <a href="{{ route('communication.interpreting.create') }}" class="hms-btn-primary">
                            <x-icon name="plus" size="sm" />
                            Request interpreter
                        </a>
                    @endcan
                </x-slot:actions>
            </x-empty-state>
        @else
            <div class="overflow-x-auto">
                <table class="hms-table">
                    <thead>
                        <tr>
                            <th>Session</th>
                            <th>Patient</th>
                            <th>Language</th>
                            <th>Mode</th>
                            <th>Interpreter</th>
                            <th>Priority</th>
                            <th>Status</th>
                            <th>Scheduled / live</th>
                            <th>Requested by</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($sessions as $session)
                            @php
                                $rowTint = match ($session->status) {
                                    'in_progress' => 'bg-amber-50/50',
                                    'no_show' => 'bg-orange-50/40',
                                    default => '',
                                };
                            @endphp
                            <tr class="{{ $rowTint }}">
                                <td>
                                    <a href="{{ route('communication.interpreting.show', $session) }}"
                                       class="font-mono text-xs font-medium text-slate-800 hover:text-brand-700">
                                        {{ $session->session_no }}
                                    </a>
                                    <div class="text-[11px] text-slate-400">{{ $session->created_at?->format('d M H:i') }}</div>
                                </td>
                                <td>
                                    <div class="flex items-center gap-2">
                                        <div class="min-w-0">
                                            <a href="{{ route('communication.interpreting.show', $session) }}"
                                               class="block truncate font-medium text-slate-900 hover:text-brand-700">
                                                {{ $session->patient?->full_name ?? 'Unknown patient' }}
                                            </a>
                                            <div class="truncate font-mono text-xs text-slate-500">
                                                {{ $session->patient?->medical_record_number }}
                                            </div>
                                        </div>
                                        @if ($session->patient?->is_confidential)
                                            <x-icon name="lock" size="xs" class="shrink-0 text-amber-600" />
                                        @endif
                                    </div>
                                </td>
                                <td><x-status-badge field="interpreter_language" :value="$session->language" size="sm" /></td>
                                <td>
                                    <x-status-badge field="interpreter_mode" :value="$session->mode" size="sm" />
                                    @if ($session->device && $session->is_video)
                                        <div class="mt-0.5 text-[11px] text-slate-400">{{ $session->device_label }}</div>
                                    @endif
                                </td>
                                <td>
                                    @if ($session->interpreter)
                                        <div class="text-sm font-medium text-slate-800">{{ $session->interpreter->name }}</div>
                                        <div class="mt-0.5"><x-status-badge field="interpreter_type" :value="$session->interpreter->type" size="sm" /></div>
                                    @else
                                        <span class="text-sm italic text-slate-400">Not assigned</span>
                                    @endif
                                </td>
                                <td><x-status-badge field="interpreter_priority" :value="$session->priority" size="sm" /></td>
                                <td><x-status-badge field="interpreter_session_status" :value="$session->status" size="sm" dot /></td>
                                <td class="whitespace-nowrap">
                                    @if ($session->status === 'in_progress')
                                        <div class="text-xs font-medium text-amber-700">Live since {{ $session->started_at?->format('H:i') }}</div>
                                    @elseif ($session->scheduled_at)
                                        <div class="text-xs text-slate-700">{{ $session->scheduled_at->format('d M H:i') }}</div>
                                    @else
                                        <span class="text-xs text-slate-400">—</span>
                                    @endif
                                    @if ($session->status === 'completed')
                                        <div class="text-[11px] text-slate-400">{{ $session->duration_minutes ? $session->duration_minutes.' min' : 'duration not captured' }}</div>
                                    @endif
                                </td>
                                <td class="text-xs text-slate-500">{{ $session->requestedBy?->name ?? '—' }}</td>
                                <td class="text-right">
                                    <a href="{{ route('communication.interpreting.show', $session) }}" class="hms-btn-ghost hms-btn-sm">
                                        Open
                                        <x-icon name="arrow-right" size="xs" />
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="border-t border-slate-200 px-5 py-4">{{ $sessions->links() }}</div>
        @endif
    </x-card>
</x-app-layout>