@extends('layouts.game.app')

@section('content')

{{-- Painel do jogo – operador acompanha ao vivo (traços = frase; letras já tentadas) --}}
<div class="min-h-screen p-3">
  <div class="max-w-md mx-auto space-y-3">

    <div class="rounded-2xl overflow-hidden shadow bg-gray-700">
      <div class="backdrop-blur-sm bg-black/40 p-4">
        <div class="text-white font-bold text-lg">Painel do Jogo</div>
        <div class="text-white/80 text-sm">Dica da frase (vindo do banco depois)</div>
      </div>
    </div>

    {{-- Ao vivo: prévia da frase com traços; letras acertadas aparecem — dados do banco depois --}}
    <div class="rounded-2xl border border-gray-200 p-4 bg-white">
      <div class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-2">Ao vivo</div>
      <div class="font-mono text-lg tracking-widest text-gray-800 break-all min-h-[2rem]" id="previewPhrase">
        @isset($phraseRevealed)
          @foreach($phraseRevealed as $char)
            @if($char === ' ' || $char === '')
              <span class="inline-block w-3" aria-hidden="true"> </span>
            @else
              <span class="inline-block w-6 text-center">{{ $char }}</span>
            @endif
          @endforeach
        @else
          {{-- Placeholder: traços para acompanhar (substituir por dados reais) --}}
          <span class="inline-block w-6 text-center">_</span>
          <span class="inline-block w-6 text-center">_</span>
          <span class="inline-block w-3"> </span>
          <span class="inline-block w-6 text-center">_</span>
          <span class="inline-block w-6 text-center">_</span>
          <span class="inline-block w-6 text-center">_</span>
          <span class="inline-block w-3"> </span>
          <span class="inline-block w-6 text-center">_</span>
          <span class="inline-block w-6 text-center">_</span>
          <span class="inline-block w-6 text-center">_</span>
        @endisset
      </div>

      <div class="mt-3 pt-3 border-t border-gray-100">
        <div class="text-xs text-gray-500 mb-1">Letras já tentadas</div>
        <div class="text-sm font-mono text-gray-700" id="previewLetters">
          @if(!empty($lettersTried))
            {{ is_array($lettersTried) ? implode(', ', $lettersTried) : $lettersTried }}
          @else
            —
          @endif
        </div>
      </div>
    </div>

    <form method="POST" action="#" class="rounded-2xl border p-4 bg-white space-y-3" id="guessForm">
      @csrf
      <input type="hidden" name="game_session_participant_id" id="selectedParticipantId" value="" />

      <div class="grid gap-2">
        <label class="text-xs text-gray-500">Quem está jogando — clique em um balão</label>
        <div class="flex flex-wrap gap-2" id="participantBalloons" role="group" aria-label="Selecionar participante">
          @if(isset($participants) && count($participants) > 0)
            @foreach($participants as $p)
              <button type="button"
                      class="participant-balloon rounded-full px-4 py-2 text-sm font-medium border-2 border-gray-300 bg-white text-gray-700 hover:border-gray-500 hover:bg-gray-50 transition-colors"
                      data-id="{{ $p->id }}"
                      data-name="{{ $p->participant->name ?? $p->name ?? 'Participante' }}">
                {{ $p->participant->name ?? $p->name ?? 'Participante' }}
              </button>
            @endforeach
          @else
            <button type="button" class="participant-balloon rounded-full px-4 py-2 text-sm font-medium border-2 border-gray-300 bg-white text-gray-700" data-id="1" data-name="Participante 1">Participante 1</button>
            <button type="button" class="participant-balloon rounded-full px-4 py-2 text-sm font-medium border-2 border-gray-300 bg-white text-gray-700" data-id="2" data-name="Participante 2">Participante 2</button>
          @endif
        </div>
      </div>

      <div class="grid gap-2">
        <label class="text-xs text-gray-500">Digite letra / palavra / frase</label>
        <input name="guess" class="w-full rounded-xl border border-gray-300 px-3 py-2" placeholder="Ex: A, NOVO, FRASE..." />
      </div>

      <button type="submit" class="w-full rounded-xl bg-gray-900 text-white py-3 font-semibold">
        Enviar
      </button>
    </form>

    <script>
      (function() {
        const form = document.getElementById('guessForm');
        const hidden = document.getElementById('selectedParticipantId');
        const balloons = document.querySelectorAll('.participant-balloon');

        balloons.forEach(function(btn) {
          btn.addEventListener('click', function() {
            balloons.forEach(function(b) {
              b.classList.remove('border-gray-900', 'bg-gray-900', 'text-white');
              b.classList.add('border-gray-300', 'bg-white', 'text-gray-700');
            });
            this.classList.remove('border-gray-300', 'bg-white', 'text-gray-700');
            this.classList.add('border-gray-900', 'bg-gray-900', 'text-white');
            hidden.value = this.getAttribute('data-id') || '';
          });
        });
      })();
    </script>

  </div>
</div>

@endsection