@php
    $filtered = $term !== '' || $language !== '' || $type !== '';
    $languageOptions = ['' => 'Any language'] + \App\Support\Lookup::options('interpreter_language');
    $typeOptions = ['' => 'Any type'] + \App\Support\Lookup::options('interpreter_type');
    $editing = $editing ?? null;
    $canManage = auth()->user()->can('interpreters.manage');
@endphp

<x-app-layout title="Interpreter directory">
    <x-page-header
        title="Interpreter directory"
        subtitle="Who we can call, in which languages, and under whose certification — in-house staff alongside freelancers and agency supply."
        icon="users">
        <x-slot:meta>
            <span class="text-xs text-slate-500">
                {{ $interpreters->total() }} interpreter{{ $interpreters->total() === 1 ? '' : 's' }} {{ $filtered ? 'match this filter' : 'on the roster' }}
            </span>
        </x-slot:meta>

        <x-slot:actions>
            <a href="{{ route('communication.interpreting.index') }}" class="hms-btn-secondary">
                <x-icon name="video" size="sm" />
                Interpreting board
            </a>
        </x-slot:actions>
    </x-page-header>

    <div @class(['grid gap-6 xl:grid-cols-[22rem_1fr]' => $canManage])>
        @can('interpreters.manage')
            <div class="space-y-6">
                <x-card title="{{ $editing ? 'Edit '.$editing->name : 'Add an interpreter' }}"
                        icon="{{ $editing ? 'edit' : 'user-plus' }}">
                    <form method="POST"
                          action="{{ $editing ? route('communication.interpreters.update', $editing) : route('communication.interpreters.store') }}"
                          x-data="{ type: '{{ old('type', $editing?->type ?? 'staff') }}' }">
                        @csrf
                        @if ($editing)
                            @method('PUT')
                        @endif

                        <div class="space-y-4">
                            <x-form.input name="name" label="Full name" required
                                          :value="$editing?->name"
                                          placeholder="e.g. Grace Wanjiru" />

                            <div>
                                <x-form.select name="type" label="Engagement" required x-model="type"
                                               :options="\App\Support\Lookup::options('interpreter_type')"
                                               :value="$editing?->type ?? 'staff'" :placeholder="false" />

                                <div x-show="type === 'agency'" x-cloak class="mt-3">
                                    <x-form.input name="agency" label="Agency"
                                                  :value="$editing?->agency"
                                                  placeholder="e.g. SignBridge Interpreting Ltd" />
                                </div>
                            </div>

                            <div>
                                <p class="hms-label">Languages provided <span class="ml-0.5 text-red-500">*</span></p>
                                <div class="grid grid-cols-1 gap-x-4 gap-y-1.5 sm:grid-cols-2">
                                    @foreach (\App\Support\Lookup::options('interpreter_language') as $key => $label)
                                        <x-form.checkbox name="languages[]" :value="$key" :label="$label" :id="'lang-'.$key"
                                                         :checked="in_array($key, old('languages', $editing?->languages ?? []), true)" />
                                    @endforeach
                                </div>
                                @error('languages')
                                    <p class="hms-error">{{ $message }}</p>
                                @enderror
                                @error('languages.*')
                                    <p class="hms-error">{{ $message }}</p>
                                @enderror
                            </div>

                            <div class="grid gap-4 sm:grid-cols-2">
                                <x-form.input name="phone" label="Phone" :value="$editing?->phone"
                                              placeholder="+254…" />
                                <x-form.input name="email" type="email" label="Email" :value="$editing?->email"
                                              placeholder="name@example.com" />
                            </div>

                            <x-form.input name="certification_no" label="Certification no." :value="$editing?->certification_no"
                                          placeholder="e.g. KSL/ITA/2024/0187" />

                            <x-form.textarea name="notes" label="Notes" rows="2" :value="$editing?->notes"
                                             placeholder="Availability windows, specialisms, agency terms…" />

                            <x-form.checkbox name="is_active" label="Available for sessions"
                                             :checked="old('is_active', $editing?->is_active ?? true)"
                                             hint="Deactivated interpreters keep their history but no new session routes to them." />
                        </div>

                        <div class="mt-5 flex items-center justify-end gap-3">
                            @if ($editing)
                                <a href="{{ route('communication.interpreters.index') }}" class="hms-btn-ghost">Cancel</a>
                            @endif
                            <button type="submit" class="hms-btn-primary">
                                <x-icon name="check" size="sm" />
                                {{ $editing ? 'Save changes' : 'Add to directory' }}
                            </button>
                        </div>
                    </form>
                </x-card>

                <x-card title="How routing works" icon="info">
                    <p class="text-xs leading-relaxed text-slate-500">
                        When a session is booked, only interpreters who list the needed language can be assigned —
                        the match is checked when the request is saved, not discovered live. Deactivate an interpreter
                        to take them out of rotation; the directory keeps every session they have interpreted.
                    </p>
                </x-card>
            </div>
        @endcan

        <div class="min-w-0 space-y-6">
            <x-card flush>
                <form method="GET" action="{{ route('communication.interpreters.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 an interpreter" :value="$term"
                                      placeholder="Name, agency or certification no…" />
                    </div>

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

                    <div class="w-40">
                        <x-form.select name="type" label="Engagement" :options="$typeOptions"
                                       :value="$type" :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.interpreters.index') }}" class="hms-btn-ghost hms-btn-sm">Reset</a>
                    @endif
                </form>

                @if ($interpreters->isEmpty())
                    <x-empty-state icon="users" title="No interpreters in the directory">
                        @if ($filtered)
                            No one on the roster matches that filter — try widening the language.
                        @else
                            The first interpreter added appears here, and sessions can only route to people already on
                            this roster.
                        @endif
                    </x-empty-state>
                @else
                    <div class="overflow-x-auto">
                        <table class="hms-table">
                            <thead>
                                <tr>
                                    <th>Interpreter</th>
                                    <th>Engagement</th>
                                    <th>Languages</th>
                                    <th>Contact</th>
                                    <th class="text-right">Completed</th>
                                    <th>Status</th>
                                    @can('interpreters.manage')
                                        <th></th>
                                    @endcan
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($interpreters as $interpreter)
                                    <tr class="{{ $interpreter->is_active ? '' : 'opacity-60' }}">
                                        <td>
                                            <div class="font-medium text-slate-900">{{ $interpreter->name }}</div>
                                            @if ($interpreter->certification_no)
                                                <div class="font-mono text-[11px] text-slate-400">Cert. {{ $interpreter->certification_no }}</div>
                                            @endif
                                            @if ($interpreter->user)
                                                <div class="text-[11px] text-slate-400">Staff account: {{ $interpreter->user->name }}</div>
                                            @endif
                                        </td>
                                        <td>
                                            <x-status-badge field="interpreter_type" :value="$interpreter->type" size="sm" />
                                            @if ($interpreter->agency)
                                                <div class="mt-0.5 text-[11px] text-slate-400">{{ $interpreter->agency }}</div>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="flex max-w-xs flex-wrap gap-1">
                                                @foreach (array_slice($interpreter->languages ?? [], 0, 3) as $langKey)
                                                    <x-status-badge field="interpreter_language" :value="$langKey" size="sm" />
                                                @endforeach
                                                @if (count($interpreter->languages ?? []) > 3)
                                                    <span class="self-center text-[11px] text-slate-400">+{{ count($interpreter->languages) - 3 }}</span>
                                                @endif
                                            </div>
                                        </td>
                                        <td class="text-xs text-slate-500">
                                            @if ($interpreter->phone)
                                                <a href="tel:{{ $interpreter->phone }}" class="block text-brand-700 hover:text-brand-800">{{ $interpreter->phone }}</a>
                                            @endif
                                            @if ($interpreter->email)
                                                <a href="mailto:{{ $interpreter->email }}" class="block truncate text-slate-500 hover:text-slate-700">{{ $interpreter->email }}</a>
                                            @endif
                                            @unless ($interpreter->phone || $interpreter->email)
                                                —
                                            @endunless
                                        </td>
                                        <td class="text-right text-sm tabular-nums text-slate-700">{{ $interpreter->sessions_count }}</td>
                                        <td>
                                            <x-status-badge :label="$interpreter->is_active ? 'Available' : 'Inactive'"
                                                            :color="$interpreter->is_active ? 'green' : 'slate'"
                                                            size="sm" dot />
                                        </td>
                                        @can('interpreters.manage')
                                            <td>
                                                <div class="flex items-center justify-end gap-1">
                                                    <a href="{{ request()->fullUrlWithQuery(['edit' => $interpreter->id]) }}"
                                                       class="hms-btn-ghost hms-btn-sm">Edit</a>

                                                    <form method="POST" action="{{ route('communication.interpreters.toggle', $interpreter) }}"
                                                          onsubmit="return confirm('{{ $interpreter->is_active ? 'Deactivate '.$interpreter->name.'? No new sessions will route to them.' : 'Make '.$interpreter->name.' available again?' }}');">
                                                        @csrf
                                                        <button type="submit" class="hms-btn-ghost hms-btn-sm {{ $interpreter->is_active ? 'text-red-600 hover:text-red-700' : 'text-emerald-700 hover:text-emerald-800' }}">
                                                            {{ $interpreter->is_active ? 'Deactivate' : 'Reactivate' }}
                                                        </button>
                                                    </form>
                                                </div>
                                            </td>
                                        @endcan
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="border-t border-slate-200 px-5 py-4">{{ $interpreters->links() }}</div>
                @endif
            </x-card>
        </div>
    </div>
</x-app-layout>