@php
  $counter = $state['counter'] ?? [];
  $current = $state['current_ticket'] ?? null;
  $queues = $state['queues'] ?? [];
  $waiting = $state['waiting_by_queue'] ?? [];
  $transferQueues = collect($state['transfer_queues'] ?? []);
  $handoffQueues = $transferQueues
      ->filter(fn ($q) => ($q['uuid'] ?? '') !== ($current['queue']['uuid'] ?? ''))
      ->values();
  $statusLabel = match ($current['status'] ?? null) {
      'called' => 'Called',
      'serving' => 'Serving',
      'on_hold' => 'On hold',
      default => $current['status'] ?? null,
  };
@endphp

<x-app-layout title="Console · {{ $counter['name'] ?? 'Counter' }}">
  <div class="flex flex-wrap items-start justify-between gap-4">
    <div>
      <a href="{{ route('care.queue.index') }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">← Patient queue</a>
      <h1 class="mt-2 text-xl font-semibold text-slate-900">{{ $counter['name'] ?? 'Counter' }}</h1>
      <p class="mt-1 text-sm text-slate-500">{{ $counter['branch'] ?? '' }} · Ladill Queue console</p>
    </div>
    <div class="flex flex-wrap items-center gap-2">
      @if (! empty($counter['status']))
        <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium capitalize text-slate-600">{{ $counter['status'] }}</span>
      @endif
      <div class="btn-group">
        <form method="POST" action="{{ route('care.service-queues.action', $counterUuid) }}">@csrf<input type="hidden" name="action" value="available"><button class="btn-secondary text-sm">Mark available</button></form>
        <form method="POST" action="{{ route('care.service-queues.action', $counterUuid) }}">@csrf<input type="hidden" name="action" value="offline"><button class="btn-secondary text-sm">Go offline</button></form>
      </div>
    </div>
  </div>

  @if (session('success'))
    <p class="mt-4 rounded-lg bg-emerald-50 px-3 py-2 text-sm text-emerald-800">{{ session('success') }}</p>
  @endif
  @if (session('error'))
    <p class="mt-4 rounded-lg bg-rose-50 px-3 py-2 text-sm text-rose-800">{{ session('error') }}</p>
  @endif

  @if ($current)
    <section class="mt-6 overflow-hidden rounded-2xl border border-indigo-200 bg-gradient-to-br from-indigo-50 via-white to-white shadow-sm">
      <div class="border-b border-indigo-100 px-6 py-4">
        <p class="text-xs font-semibold uppercase tracking-wider text-indigo-600">Current customer</p>
      </div>
      <div class="px-6 py-5">
        <div class="flex flex-wrap items-start justify-between gap-4">
          <div>
            <p class="text-5xl font-bold tracking-tight text-slate-900">{{ $current['ticket_number'] }}</p>
            <p class="mt-2 text-sm text-slate-600">{{ $current['queue']['name'] ?? '' }}</p>
            <p class="mt-1 text-base font-medium text-slate-800">{{ $current['customer_name'] ?? 'Walk-in customer' }}</p>
          </div>
          @if ($statusLabel)
            <span class="rounded-full bg-indigo-100 px-2.5 py-1 text-xs font-semibold text-indigo-700">{{ $statusLabel }}</span>
          @endif
        </div>

        <div class="mt-6 grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
          @foreach ([
            'recall' => ['Recall', 'btn-secondary'],
            'start' => ['Start serving', 'btn-primary'],
            'hold' => ['Hold', 'btn-secondary'],
            'skip' => ['Skip', 'btn-secondary'],
            'complete' => ['Complete', 'btn-primary'],
            'no_show' => ['No show', 'btn-secondary'],
          ] as $action => [$label, $btnClass])
            <form method="POST" action="{{ route('care.service-queues.action', $counterUuid) }}">
              @csrf
              <input type="hidden" name="action" value="{{ $action }}">
              <input type="hidden" name="ticket_uuid" value="{{ $current['uuid'] }}">
              <button type="submit" class="{{ $btnClass }} w-full text-sm">{{ $label }}</button>
            </form>
          @endforeach
        </div>

        @if ($handoffQueues->isNotEmpty())
          <form method="POST" action="{{ route('care.service-queues.action', $counterUuid) }}" class="mt-4 border-t border-indigo-100 pt-4">
            @csrf
            <input type="hidden" name="action" value="transfer">
            <input type="hidden" name="ticket_uuid" value="{{ $current['uuid'] }}">
            <div class="mb-3">
              <p class="text-sm font-medium text-slate-800">Hand off to another queue</p>
              <p class="mt-1 text-xs text-slate-500">Sends this patient to the next service while keeping ticket <span class="font-mono font-semibold text-slate-700">{{ $current['ticket_number'] }}</span>.</p>
            </div>
            <div class="flex flex-wrap items-end gap-2">
              <div class="min-w-[12rem] flex-1">
                <label class="block text-xs font-medium text-slate-500">Next queue</label>
                <select name="to_queue_uuid" required class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                  @foreach ($handoffQueues as $q)
                    <option value="{{ $q['uuid'] }}">{{ $q['name'] }}@if (! empty($q['prefix'])) ({{ $q['prefix'] }})@endif</option>
                  @endforeach
                </select>
              </div>
              <div class="min-w-[12rem] flex-1">
                <label class="block text-xs font-medium text-slate-500">Reason (optional)</label>
                <input type="text" name="reason" placeholder="e.g. Lab tests needed" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
              </div>
              <button type="submit" class="btn-primary text-sm">Hand off</button>
            </div>
          </form>
        @endif
      </div>
    </section>
  @else
    <section class="mt-6 rounded-2xl border border-dashed border-slate-300 bg-slate-50 px-6 py-10 text-center">
      <p class="text-sm font-medium text-slate-700">No active customer</p>
      <p class="mt-1 text-sm text-slate-500">Call the next waiting ticket from a queue below.</p>
    </section>
  @endif

  <div class="mt-6 grid gap-4 lg:grid-cols-2">
    @foreach ($queues as $queue)
      @php $waitingTickets = $waiting[$queue['uuid']] ?? []; @endphp
      <section class="rounded-2xl border border-slate-200 bg-white shadow-sm">
        <div class="flex items-center justify-between border-b border-slate-100 px-5 py-4">
          <div>
            <h2 class="font-semibold text-slate-900">{{ $queue['name'] }}</h2>
            <p class="text-xs text-slate-500">{{ count($waitingTickets) }} waiting</p>
          </div>
          <form method="POST" action="{{ route('care.service-queues.action', $counterUuid) }}">
            @csrf
            <input type="hidden" name="action" value="call_next">
            <input type="hidden" name="queue_uuid" value="{{ $queue['uuid'] }}">
            <button type="submit" class="btn-primary text-sm">Call next</button>
          </form>
        </div>
        <ul class="divide-y divide-slate-50 px-2 py-2">
          @forelse ($waitingTickets as $ticket)
            <li class="flex items-center justify-between rounded-lg px-3 py-2.5 text-sm hover:bg-slate-50">
              <span class="font-mono text-base font-semibold text-slate-900">{{ $ticket['ticket_number'] }}</span>
              <span class="text-slate-500">{{ $ticket['customer_name'] ?? 'Walk-in' }}</span>
            </li>
          @empty
            <li class="px-3 py-6 text-center text-sm text-slate-500">Queue is empty</li>
          @endforelse
        </ul>
      </section>
    @endforeach
  </div>
</x-app-layout>